Tutorials > Management Center > Add a Recipes tool to the Management Center

< Previous | Next >


Work with UI text and images for a Management Center object

Hard-coding UI text and image file names in the following types of files is not recommended: OpenLaszlo class files and Management Center definition files.

Instead, it is a best practice to include all text and all paths to images in resource properties files, and associate these files with resource keys. This approach maintains the UI code in one of the following areas:

The text and image paths are maintained in a separate area, in the properties file. This is particularly 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.

Before you start to define properties files and resource bundle keys for user interface text, see wcfResourceBundle for more information about resource bundles.


Procedure

  1. In Windows Explorer, create a new directory called WCDE_INSTALL\workspace_dir\LOBTools\src\com\mycompany\recipe\client\lobtools\properties.

  2. 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 unzipped the Tutorial sample source code.

    Remember: A properties file name must have a .properties extension. You must create one for each language if we will have text in multiple languages. 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  
    ... ...
    

  3. 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

      If these folders do not exist, create them.

    3. Right-click the recipe folder and select Import. Expand General > 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 unzipped 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 />
              
      </library>
      

      • The attribute value for baseName is the fully qualified properties file name with the package name.

      • The line <extRecipeResourceBundle /> 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}"
        


        displayName="${extRecipeResources.recipe_DisplayName}"
        

  4. 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. Expand General > 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 unzipped 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. Expand General and select 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 unzipped the Tutorial sample source code. Select the recipeIcon.png file. Click Finish to import the file.

  5. Right-click the LOBTools project and select Build OpenLaszlo Project.

< Previous | Next >


+

Search Tips   |   Advanced Search