Tutorials > Sales Center > Customize the appearance of the IBM Sales Center

< Previous | Next >


Determine extension points

In this step of the tutorial, we will determine what parts of the IBM Sales Center client need to be modified. The text used on the user interface of the IBM Sales Center is contained in a single resource bundle called telesalesResources.properties. You will need to examine this resource bundle, locate the text that to change, and make note of the key that is used to represent that text. You will also need to locate the images that to replace and make note of both the names of the files as well as their directories.


Procedure

  1. Enable widget hover logging.

    Widget hover logging helps you determine the id of the widget to modify.

    To enable widget hover logging:

    1. Import the com.ibm.commerce.telesales.ui.impl.* plug-ins as binary projects. By importing these plug-ins as projects, we will be able to search for the id of the user interface element to change:

      1. In the Plug-ins view, select all the plug-ins that begin with com.ibm.commerce.telesales.ui.impl.

      2. Right-click the selected plug-ins and select Import > As Binary Project. The plug-in projects display in the Package Explorer view.

    2. Enable widget hover logging. When widget hover logging is enabled, you can hover the mouse pointer over the user interface widget to change, and its id will display in the console of the IBM Sales Center development environment:

      1. In the IBM Sales Center development environment, click Run > Run.

      2. In the Run window, select the Trace tab.

      3. Select Enable tracing for the selected plug-ins.

      4. In the Plug-ins and support tracing pane, select com.ibm.commerce.telesales.widgets. Your screen should appear similar to the following screen capture:

      5. Click Run.

  2. Determine what text to replace.

    1. In the IBM Sales Center client, click Open > IBM Sales Center - Order Management.

    2. Click File > Logon. The logon dialog is displayed as in the following screen capture:

    3. Hover the mouse pointer over the following text: To log on to the IBM Sales Center, type the user name and password. If you do not know them, contact the system administrator.

    4. In the Console view of the IBM Sales Center development environment, you should see the following text: Mouse hover control ID is 'com.ibm.commerce.telesales.ui.impl.logonInstructionsLabel'.

    5. Determine in which plug-in this id is defined:

      1. From the Search menu, select File.

      2. In the File Search tab, in the Containing text field, enter logonInstructionsLabel.

      3. Click Search. The Search view shows that the logonInstructionsLabel is defined in the com.ibm.commerce.telesales.ui.impl.operator plug-in's fragment.xml file.

    6. Open the com.ibm.commerce.telesales.ui.impl.operator plug-in's fragment.xml file.

    7. Locate the following control tag: <control type="label" text="LogonDialog.instructions"> </control>

      This control tag indicates that the text that displays in the logonInstructionsLabel has a key of LogonDialog.instructions. All default translatable text is defined in the telesalesResources_ locale.properties files. This tutorial refers to only the en_US locale, which is, by default the telesalesResources.properties file in the com.ibm.commerce.telesales.resources plug-in. Other supported national languages properties files are located in the com.ibm.commerce.telesales.resources.nl1 plug-in.

    8. Examine the telesalesResources.properties file:

      1. Switch to the Plug-ins view.

      2. Expand the com.ibm.commerce.telesales.resources package

      3. Expand the resources directory.

      4. Double-click the telesalesResources.properties file.

      5. Within the properties editor that opens, search for the "To log on to the IBM Sales Center" text string. You will find the following text: LogonDialog.instructions = To log on to the IBM Sales Center, type the user name and password. If you do not know them, contact the system administrator.

      6. As previously mentioned, the key associated with the text to change LogonDialog.instructions. Make note of this key as we will need to use this value when you create the own resources bundle. In the new resources bundle we will associate this key with the text that to have displayed.

      7. Also make note of the LogonDialog.applicationTitle key, as we will need to change the text in the title bar of the log on dialog.

    9. Disable the widget hover logging:

      1. Click Run > Run.

      2. In the Run window, select the Trace tab.

      3. Deselect Enable tracing for the selected plug-ins.

      4. Click Apply.

      5. Click Close.

  3. Determine what images to replace.

    For this tutorial, we will replace the following image:

    To locate this image file:

    1. Ensure that you are using the Plug-ins view.

    2. Expand the com.ibm.commerce.telesales.resources plug-in.

    3. Expand icons > full > prod.

    4. Right-click websphere_telesales.jpg and select Open With > System Editor.

    5. Verify that this is the image to replace. Make note of the image name and directory

    6. You have now determined which image to replace and you know the directory in which it resides.

In this step, you determined what aspects of the IBM Sales Center client logon user interface need to be adjusted, and where to locate the files to perform those adjustments.

< Previous | Next >


+

Search Tips   |   Advanced Search