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:
-
Open WebSphere
Commerce Developer and switch to the Enterprise Explorer view.
-
Expand
Note: If this file structure does not exist in your workspace, create the directories.
-
Right-click the recipe folder and select .
-
Click Next, then click Browse and go to the
TutorialSource\LOBTools\WebContent\WEB-INF\src\xml\mycompany\recipe
directory.
-
Select the RecipeManagementResourceBundle.xml file. Click
Finish to import the file.
-
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:
-
In the Enterprise Explorer view, expand .
-
Right-click the recipe folder and select .
-
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.
-
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>
-
Expand . Create the file structure within the images directory.
-
Right-click the resources folder and select .
-
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.