Working with UI text and images for a Management Center object

Rather than hardcode UI text and image file names in the OpenLaszlo class files, it is a best practice to include all text and all paths to images in resource properties files. Associate the files with resource keys. This approach maintains the UI code in one area, in the OpenLaszlo file, and the text and image paths in another, in the properties file. This approach is useful if you have text and images that change often or if you support globalization in your coding to translate the user interface text to various languages.

About this task

Complete the following steps to define properties files and bundle keys for user interface text.

Procedure

In Windows Explorer, create a directory that is called WCDE_installdir\workspace_dir\LOBTools\src\com\mycompany\recipe\client\lobtools\properties.
Copy the RecipeLOB.properties and RecipeLOB_en_US.properties files from TutorialSource\LOBTools\src\com\mycompany\recipe\client\lobtools\properties to the new directory. TutorialSource is the location where you extracted the Tutorial sample source code.
Remember: A properties file name must have a .properties extension. If your site has text in multiple languages, you must create a properties file for each language. For example, myFile_en_US.properties for English text, and myFile_fr_FR.properties for French text.
Within the properties file, the UI text is listed and associated with a unique key for each string of text. For example:
```
... ...
recipeCollection_TreeNode=Recipe by Collections
recipe_DisplayName=Recipe
recipeCollection_DisplayName=Recipe Collection  
... ...
```
Create a resource bundle and associate it with the keys from the properties file:
1. Open WebSphere Commerce Developer and switch to the Enterprise Explorer view.
2. In the Enterprise Explorer view, navigate to LOBTools > WebContent > WEB-INF > src > lzx > mycompany > recipe
  Note: If these folders do not exist, create them.
3. Right-click the recipe folder and select Import > File system.
4. Click Next, then click Browse and navigate to TutorialSource\LOBTools\WebContent\WEB-INF\src\lzx\mycompany\recipe, where TutorialSource is the location where you extracted the Tutorial sample source code. Select the RecipeManagementResourceBundle.lzx file. Click Finish to import the file.
5. Open the resource bundle file and examine it. All resource bundle keys that are declared in the properties file are registered in this file, as shown in the following code sample:
```
<library>
        <class name="extRecipeResourceBundle" extends="wcfResourceBundle" baseName="com.mycompany.recipe.client.lobtools.properties.RecipeLOB">
                <wcfResourceBundleKey name="recipeCollection_TreeNode"/>
                <wcfResourceBundleKey name="recipe_DisplayName"/>
                <wcfResourceBundleKey name="recipeCollection_DisplayName"/>
                ...
                ...
        </class>
        
        <extRecipeResourceBundle id="extRecipeResources"/>
        
</library>
```
  Note:
  - The attribute value for baseName is the fully qualified properties file name with the package name.
  - The line <extRecipeResourceBundle id="extRecipeResources"/> is to initialize the resource bundle class with the ID of "extRecipeResources". You can use this ID to refer to the resource, for example:
    displayName="${extRecipeResources.recipe_DisplayName.string}"
Create a resource bundle to associate with the images:
1. In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > mycompany > recipe.
2. Right-click the recipe folder and select Import > File system.
3. Click Next, then click Browse and navigate to TutorialSource\LOBTools\WebContent\WEB-INF\src\lzx\mycompany\recipe, where TutorialSource is the location where you extracted the Tutorial sample source code. Select the RecipeManagementResources.lzx file. Click Finish to import the file.
4. Open the file and examine it. Within the resources file, all UI image file paths must be associated with a resource name, as shown in the following code sample:
```
<library>
<resource name="recipeActiveTabIcon" src="./resources/recipeIcon.png"/>
<resource name="recipeInactiveTabIcon" src="./resources/recipeIcon.png"/>
<resource name="recipeHeaderIcon" src="./resources/recipeIcon.png"/>
<resource name="recipeIcon" src="./resources/recipeIcon.png"/>
<resource name="recipeInheritedHeaderIcon" src="./resources/recipeIcon.png"/>
<resource name="recipeInheritedIcon" src="./resources/recipeIcon.png"/>
</library>
```
5. Create a resources folder within the recipe folder.
6. Right-click the resources folder and select Import > File system.
7. Click Next, then click Browse and navigate to TutorialSource\LOBTools\WebContent\WEB-INF\src\lzx\mycompany\recipe\resources, where TutorialSource is the location where you extracted the Tutorial sample source code. Select the recipeIcon.png file. Click Finish to import the file.
Right-click the LOBTools project and select Build OpenLaszlo Project.