Managing UI text and images for a Management Center object

In this lesson, you define the UI text and images for your new Management Center tool by creating properties files for the text.

About this task

Rather than hardcode UI text and image file names in definition XML 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, the definition files, and the text and image paths in another area, 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.

Procedure

In file manager utility, create a directory that is called workspace_dir\LOBTools\src\com\mycompany\recipe\client\lobtools\properties.
Copy the RecipeLOB.properties and RecipeLOB_en_US.properties files from the TutorialSource\LOBTools\src\com\mycompany\recipe\client\lobtools\properties directory, where TutorialSource is the location where you extracted the tutorial sample source code. Add the files to the new directory that you created within your workspace.
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:
```
...
recipe_TreeRoot=All Recipes
recipeCollection_TreeNode=Recipe by Collections
recipe_DisplayName=Recipes
... 
```
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. Expand LOBTools > WebContent > WEB-INF > src > xml > mycompany > recipe
  
  Note: If this file structure does not exist in your workspace, create the directories.
3. Right-click the recipe folder and select Import > File system.
4. Click Next, then click Browse and go to the TutorialSource\LOBTools\WebContent\WEB-INF\src\xml\mycompany\recipe directory.
5. Select the RecipeManagementResourceBundle.xml file. Click Finish to import the file.
6. 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:
```
<Definitions>
  <ResourceBundle baseName="com.mycompany.recipe.client.lobtools.properties.RecipeLOB" 
   definitionName="cmc/recipe/ExtRecipeResources" singletonDefinition="true"/>	
</Definitions>
```
  The value for the attribute definitionName is the fully qualified properties file name with the package name.
Create a resource bundle to associate with the images:
1. In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > xml > mycompany > recipe.
2. Right-click the recipe folder and select Import > File system.
3. Click Next, then click Browse and go to the TutorialSource\LOBTools\WebContent\WEB-INF\src\xml\mycompany\recipe directory. Select the RecipeManagementResources.xml 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:
```
<Definitions>
  <Image name="recipeActiveTabIcon" src="/images/mycompany/recipe/resources/recipeIcon.png"/>
  <Image name="recipeInactiveTabIcon" src="/images/mycompany/recipe/resources/recipeIcon.png"/>
  <Image name="recipeHeaderIcon" src="/images/mycompany/recipe/resources/recipeIcon.png"/>
  <Image name="recipeIcon" src="/images/mycompany/recipe/resources/recipeIcon.png"/>
  <Image name="recipeInheritedHeaderIcon" src="/images/mycompany/recipe/resources/recipeIcon.png"/>
  <Image name="recipeInheritedIcon" src="/images/mycompany/recipe/resources/recipeIcon.png"/>
</Definitions>
```
5. Expand LOBTools > WebContent > images. Create the file structure mycompany > recipe > resources within the images directory.
6. Right-click the resources folder and select Import > File system.
7. Click Next, then click Browse and navigate to TutorialSource\LOBTools\WebContent\images\mycompany\recipe\resources directory. Select the recipeIcon.png file. Click Finish to import the file.