# Using a Resource Bundle File for the Pages

You will use a resource bundle file for labels, texts and messages.

To use a resource bundle file:

1. Return to the Design view, then click the JSF Core library in the Palette to add a loadBundle component. Drag the tag next to the `f:view` tag, as shown in Figure: Design View.

   Design View

2. In the New Load Bundle dialog click the Bind a dynamic value button next to the Base name field.

   Locate the src | Resources | application file, as show in Figure: Resource Bundle Selection Dialog.

   Resource Bundle Selection Dialog

   Click OK.

3. In the Variable name field enter `bundle`, as shown in Figure: New Load Bundle Dialog.

   New Load Bundle Dialog

   Click Finish.

4. Back in the code editor, using the split view, click the loadBundle icon . In the Log View at the bottom, select the Properties tab, as shown in Figure: Properties Tab in Log View. You can review and update the properties of any component using the Properties View.

   Properties Tab in Log View

5. In the source view of the `login.jspx` page press the Ctrl key, then hover over `resources.application` and click the hyperlink, as shown in Figure: Source Code of Login Page.

   Source Code of Login Page

   The `application.properties` bundle file opens in the editor displaying the existing messages, as shown in Figure: Application Properties Tab. You can define new key resources directly in the file or create new ones dynamically.

   Application Properties Tab

6. Back to the `login.jspx` page, select the `af:panelLabelAndMessage` tag.

   In the Property View, click the Bind to a dynamic value button next to Label, as shown in Figure: Panel Label and Message.

   Panel Label and Message

7. The Choose Binding dialog opens with the already defined binding elements (bundle and managed beans), as shown in Figure: Choose Binding Dialog.

   Choose Binding Dialog

8. Click the Resources tab to display the resources keys, then click the Add button to create a new key entry, as shown in Figure: Resources Tab.

   Resources Tab

   In the New Resource dialog enter `name` as the Resource Key and `Name:` as the Resource Value, as shown in Figure: New Resource Dialog.

   New Resource Dialog

   Click OK. The new entry appears in the Resources, as shown in Figure: Resources Tab.

   Resources Tab

9. Click the View arrow and select Resource Values, as shown in Figure: Choose Binding Dialog.

   Choose Binding Dialog

   Click OK. The `application.properties` file is now populated with the new value, as shown in Figure: application.properties File.

   application.properties File

10. Back in the JSPX code, you can see the updated label field for the Panel Label And Message, as shown in Figure: Updated Label Field.

    Updated Label Field

11. Look at the Outline pane located on the right side. It gives a hierarchy view of the page tags, as shown in Figure: Outline Tab.

    Outline Tab

12. To experiment in another way to use the resource bundle file, click the application.properties tab to open the editor and add a new entry for password. Type `password=Password\:`, as shown in Figure: application.properties Tab.

    application.properties Tab

    Click the Save All button to save your work.

13. Back in the code of the `login.jspx` page, delete password in the label of the `af:panelLabelAndMessage` and `type #{}`. Within the brackets, press Ctrl+Space and select bundle from the suggested list, as shown in Figure: Login Page.

    Login Page

    Type ',' (comma) and from the JSP proposal popup, select password, as shown in Figure: Login Page.

    Login Page

14. Now select the Submit button and in the Property View, click the Bind to a dynamic value button next to the Text field, as shown in Figure: Bind to a Dynamic Value Button.

    Bind to a Dynamic Value Button

15. In the Choose Binding dialog, click the Resources tab, then Click the New Resource button.

    In the New Resource dialog, enter `submit` as the Resource Key and `Login` as the Resource Value, as shown in Figure: New Resource Dialog.

    New Resource Dialog

    Click OK and OK again.

16. Your login page is now complete, as shown in Figure: Login Page.

    Login Page

17. Click the Save All button to save your work.