Changing the banner in the IBM Sales Center
In this sample, you 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 your 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:
- Open the IBM Sales Center development environment.
- Switch to the Package Explorer view.
- Click .
- In the Project name field, enter
myNewBanner
. - Click Next.
- Clear the This plug-in will make contributions to the UI box.
- Click Finish. The plug-in opens for editing.
Add information to your plug-in
- the name and location of the icon that displays in the title bar of the IBM Sales Center
- the name and location of the file that contains preferences about the IBM Sales Center appearance, such as the names and locations of the images in the banner.
- the name and location of the image file that displays in the About IBM Sales Center dialog.
- In the myNewBanner project, double-click MANIFEST.MF to open it for editing.
- In the editor that opens, click the Extensions tab.
- Click Add.
- From the Available extension points list, select org.eclipse.core.runtime.products.
- Click Finish.
- In the All Extensions list, select org.eclipse.core.runtime.products.
- In the Extension Element Details pane, set the ID value to
CustomizedWorkbenchProduct
. - Save your changes.
- Click the plugin.xml tab. The source code displays as follows:
<extension id="CustomizedWorkbenchProduct" point="org.eclipse.core.runtime.products"> </extension>
- 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"/>
- Save your changes.
Specify the 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 you will copy the original plugin_customization.ini file to your plug-in, then make changes for your customization. You will also create a new plugin.properties file with your own locale-specific text.
- In the Plug-ins view, expand the com.ibm.commerce.telesales plug-in project.
- Right-click the plugin_customization.ini file and select Copy.
- Switch to the Package Explorer view.
- From the myNewBanner plug-in project's pop-up menu, select Paste.
- In the myNewBanner project, double-click MANIFEST.MF to open it for editing.
- In the editor that opens, click the Extensions tab.
- Click Add.
- Clear the Show only extension points from the required plug-ins box.
- From the Available extension points list, select org.eclipse.ui.themes.
- Click Finish.
- In the All Extensions list, select org.eclipse.ui.themes.
- Save your changes.
- Click the plugin.xml tab. The source code
displays as follows:
<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>
- Save your changes.
- Open the plugin_customization.ini file for editing.
- Locate the following text:
org.eclipse.ui/CURRENT_THEME_ID=SalesCenterDefaultTheme
- Modify the above text to use the updated theme:
org.eclipse.ui/CURRENT_THEME_ID=CustomizedSalesCenterTheme
- In the myNewBanner plug-in, create a file called plugin.properties.
- 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\
- Save your changes and close the file.
Importing the images
In this step, you will import the images that will display in the new banner.
- Download bannertutorial.zip.
- From the myNewBanner plug-in project's pop-up menu, select Import.
- From the Select an import source list, select Zip File and click Next.
- In the From zip file field, enter or browse to bannertutorial.zip
- Select all files in the zip file and click Finish.
- 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
- From the Run menu, select Run
- Select the Sales Center application.
- In the Program to Run section:
- Ensure that the Run a product is selected.
- From the Run a product list, select the myNewBanner.CustomizedWorkbenchProduct.
- Click Apply.
- Click Run to test your changes. Your customized IBM Sales Center should be similar to the following:
Deploy your changes
Deploy your changes to a production server by following instructions in Deploying customizations to the IBM Sales Center.
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 your new product: "%~dp0rcp\rcplauncher.exe"
-product myNewBanner.CustomizedWorkbenchProduct.