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:

Screen capture showing the default banner

to the following customized banner:

Screen capture showing the 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 File > New > Plug-in Project.
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

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

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.

To add this information:

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.

To create the plugin_customization.ini file:

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.

To create a new theme:

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.

To modify the plugin_customization.ini file:

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

To create the plugin.properties file:

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

In this step, you 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:

From the Run menu, select Run
Select the Sales Center application.
In the Program to Run section:
1. Ensure that the Run a product is selected.
2. 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.