Samples > IBM Sales Center samples: Actions, dialogs, editors and requests


Changing the banner in the IBM Sales Center

In this sample, we will modify the banner that displays at the top of the IBM Sales Center and in the About dialog that displays when a user clicks Help > About IBM Sales Center.

You will change the following default banner:

to the following customized banner:

The customization strategy in this sample is different than most customizations in the IBM Sales Center. Normally, customizations to the IBM Sales Center that require the replacement of an existing component with a new implementation involve using the system configurator to indicate that the new implementation should be used instead of the original one. The system configurator mechanism is provided by the IBM Sales Center application and not by the base WebSphere Everyplace Deployment platform. The branding elements being replaced by this sample are defined using the products extension point in the base platform.

To replace any of these branding elements, the entire product declaration must be replaced.


Create a plug-in project

You must make customizations to the IBM Sales Center in the own plug-ins. You should not make any changes to the default plug-ins shipped with the IBM Sales Center. In Rational Application Developer, a plug-in is represented by a plug-in project.

To create a plug-in project:

  1. Open the IBM Sales Center development environment.

  2. Switch to the Package Explorer view.

  3. Click File > New > Plug-in Project.

  4. In the Project name field, enter myNewBanner.

  5. Click Next.

  6. Clear the This plug-in will make contributions to the UI box.

  7. Click Finish. The plug-in opens for editing.


Add information to the plug-in

In this step we will specify information about the customized IBM Sales Center. You will specify the following:

To add this information:

  1. In the myNewBanner project, double-click MANIFEST.MF to open it for editing.

  2. In the editor that opens, click the Extensions tab.

  3. Click Add.

  4. From the Available extension points list, select org.eclipse.core.runtime.products.

  5. Click Finish.

  6. In the All Extensions list, select org.eclipse.core.runtime.products.

  7. In the Extension Element Details pane, set the ID value to CustomizedWorkbenchProduct.

  8. Save the changes.

  9. Click the plugin.xml tab. The source code displays... <extension id="CustomizedWorkbenchProduct" point="org.eclipse.core.runtime.products"> </extension>

  10. Before the </extension> tag, enter the following text: 

    <product application="com.ibm.rcp.personality.framework.RCPApplication"
        description="%productBlurb"
       name="%productName">         <property
            name="appName"
        value="%appName"/>         <property name="aboutText" value="%productBlurb" />        
<property name="windowImages" value="images/telesales16_16.gif,images/telesales32_32.gif" />        
<property name="aboutImage" value="images/ws_about.gif" />         
<property name="preferenceCustomization" value= "platform:/plugin/myNewBanner/plugin_customization.ini"/>

  11. Save the changes.


Names of the new banner images

The plugin_customization.ini file defines preferences in the IBM Sales Center interface, such as the background color of the banner and the names of the images in the banner. The plugin.properties file contains locale-specific text that displays in the IBM Sales Center. In this step we will copy the original plugin_customization.ini file to your plug-in, then make changes for the customization. You will also create a new plugin.properties file with the own locale-specific text.

To create the plugin_customization.ini file:

  1. In the Plug-ins view, expand the com.ibm.commerce.telesales plug-in project.

  2. Right-click the plugin_customization.ini file and select Copy.

  3. Switch to the Package Explorer view.

  4. From the myNewBanner plug-in project's pop-up menu, select Paste.

To create a new theme:

  1. In the myNewBanner project, double-click MANIFEST.MF to open it for editing.

  2. In the editor that opens, click the Extensions tab.

  3. Click Add.

  4. Clear the Show only extension points from the required plug-ins box.

  5. From the Available extension points list, select org.eclipse.ui.themes.

  6. Click Finish.

  7. In the All Extensions list, select org.eclipse.ui.themes.

  8. Save the changes.

  9. Click the plugin.xml tab. The source code displays... 

    <extension
           point="org.eclipse.ui.themes">   
</extension>

    Before the </extension> tag, enter the following text: 

    <theme id=" CustomizedSalesCenterTheme">         <description>             %themeDescription
       </description>    
       <!-- Is the banner visible -->           <data
                name="com.ibm.rcp.platform.BRANDING_BAR_VISIBLE"
                 value="true">           </data>           
          <!-- The branding bar left side image -->           <data
            name="com.ibm.rcp.platform.BRANDING_BAR_IMAGE_LEFT"
             value="platform:/plugin/myNewBanner/images/banner_left_plane.jpg">           </data>           
          <!-- The branding bar background image -->           <data
            name="com.ibm.rcp.platform.BRANDING_BAR_IMAGE_BACKGROUND"
             value="platform:/plugin/myNewBanner/images/banner_tile_tutorial.jpg">           </data>       
          <!-- The branding bar right side image -->           <data
            name="com.ibm.rcp.platform.BRANDING_BAR_IMAGE_RIGHT"
             value="platform:/plugin/myNewBanner/images/banner_right_statue.jpg">           </data>    
<data
            name="com.ibm.rcp.platform.BRANDING_BAR_IMAGE_LEFT"
             value="platform:/plugin/myNewBanner/images/banner_left.jpg">           </data>           
          <!-- The branding bar background image -->           <data
            name="com.ibm.rcp.platform.BRANDING_BAR_IMAGE_BACKGROUND"
             value="platform:/plugin/ myNewBanner/telesales/images/banner_tile.jpg">           </data>       
          <!-- The branding bar right side image -->           <data
            name="com.ibm.rcp.platform.BRANDING_BAR_IMAGE_RIGHT"
             value="platform:/plugin/myNewBanner/images/banner_right.jpg">           </data>     
   
        <!-- The branding bar font size -->        <data
            name="com.ibm.rcp.platform.BRANDING_BAR_FONT_POINT_SIZE"
             value="14">           </data>     
        <!-- Whether to hide branding bar text and display only icons or images -->         <data
            name="com.ibm.rcp.platform.BRANDING_BAR_ICONS_ONLY"
             value="false">         </data>     
        <!--  Show or hide toolbar -->         <data
            name="com.ibm.rcp.platform.TOOL_BAR_VISIBLE"
             value="true">           </data>       
          <!--  Should display toolbar on top always -->           <data
            name="com.ibm.rcp.platform.TOOL_BAR_ON_TOP"
            value="true">           </data>       
          <!--  Show or hide status line -->    
          <data
            name="com.ibm.rcp.platform.STATUS_LINE_VISIBLE"
            value="true">           </data>       
          <!--  Show or hide application launcher -->          <data
            name="com.ibm.rcp.platform.APPLICATION_LAUNCHER_VISIBLE"
             value="true">           </data> 
        <!--  Show or hide progress bar region -->           <data
            name="com.ibm.rcp.platform.PROGRESS_REGION_VISIBLE"
            value="true">           </data>       
          <!--  Show or hide window trim -->           <data
            name="com.ibm.rcp.platform.WINDOW_TRIM_VISIBLE"
            value="true">           </data>       
          <!--  To start application in KIOSK mode or not -->           <data
            name="com.ibm.rcp.platform.KIOSK_MODE"
            value="false">           </data>           
          <!--  To show or hide the windows menu  -->           <data
            name="com.ibm.rcp.platform.WINDOW_MENU_VISIBLE"
            value="false">           </data>       
          <!--  The default presentation factory Id to be used  -->           <data
            name="com.ibm.rcp.platform.PRESENTATION_FACTORY_ID"
            value="com.ibm.rcp.ui.presentations.StyledPresentationFactory">           </data> 
        <!--  The default workbench image  -->         <data 
            name="WORKBENCH_BG_IMAGE"
             value="platform:/plugin/com.ibm.commerce.telesales/images/default_background.gif">           </data>
</theme>

  10. Save the changes.

To modify the plugin_customization.ini file:

  1. Open the plugin_customization.ini file for editing.

  2. Locate the following text:

    org.eclipse.ui/CURRENT_THEME_ID=SalesCenterDefaultTheme

  3. Modify the above text to use the updated theme:

    org.eclipse.ui/CURRENT_THEME_ID=CustomizedSalesCenterTheme

To create the plugin.properties file:

  1. In the myNewBanner plug-in, create a file called plugin.properties.

  2. Add the following text to the file: appName = My Customized Sales Center productName = My Customized Sales Center for WebSphere Commerce productBlurb = My Customized Sales Center for WebSphere Commerce\n\

  3. Save the changes and close the file.


Import the images

In this step, we will import the images that will display in the new banner.

  1. Download bannertutorial.zip.

  2. From the myNewBanner plug-in project's pop-up menu, select Import.

  3. From the Select an import source list, select Zip File and click Next.

  4. In the From zip file field, enter or browse to bannertutorial.zip

  5. Select all files in the zip file and click Finish.

  6. The following files are imported into the plug-in project:

    • images/banner_tile_tutorial.jpg

    • images/banner_left_plane.jpg

    • images/banner_right_statue.jpg


Update the application configuration and test your changes

In this step, we will modify which product is launched when you click the Run menu. The branding elements being changed in this sample are controlled by the products extension point and only one product can be active in a client instance and it must be specified when the client is launched:

  1. From the Run menu, select Run

  2. Select the Sales Center application.

  3. In the Program to Run section:

    1. Verify the Run a product is selected.

    2. From the Run a product list, select the myNewBanner.CustomizedWorkbenchProduct.

  4. Click Apply.

  5. Click Run to test the changes. Your customized IBM Sales Center should be similar to the following:


Deploy the changes

Deploy the changes to a production server by following instructions in Deploy customizations to the IBM Sales Center. See deployment step of the Customizing the appearance of the IBM Sales Center tutorial to create a feature and an update site.

For this sample, there is an additional deployment step to modify the startup.bat file to point to the new product. For example, by default the startup.bat file contains the following: "%~dp0rcp\rcplauncher.exe" -product com.ibm.commerce.telesales.TelesalesWorkbenchProduct. You must modify the startup.bat file or create a new file, for example, startup_banner.bat that launches the new product: "%~dp0rcp\rcplauncher.exe" -product myNewBanner.CustomizedWorkbenchProduct.


+

Search Tips   |   Advanced Search