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

< Previous | Next >

Create a new plug-in

In this step we will begin to implement the customization by creating a new plug-in to contain the customized assets.

You know the following information:

• The keys of the text strings that to replace: LogonDialog.instructions and LogonDialog.applicationTitle.

• The name and directory of the image that to replace: websphere_telesales.jpg in com.ibm.commerce.telesales.resources/icons/full/prod.

Procedure

1. To create a new plug-in:

   1. Switch to the Package Explorer view

   2. Right-click New > Plug-in project.

   3. In the Project name field, enter logonLookAndFeelExtension.

   4. Select Create an OSGi bundle manifest for the plug-in and keep all other default values.

   5. Click Next.

   6. Click Finish. The plug-in opens for editing as in the following screen capture:

      

2. Create a new resource bundle

   You need to replace the explanatory text on the logon dialog, as well as the title bar text. In the preceding steps, you determined that the text strings are represented by the LogonDialog.instructions and LogonDialog.applicationTitle keys.

   You must now create a new resource bundle, within the own plug-in, with the new text strings. To create this resource bundle:

   1. Ensure you are using the Package Explorer view.

   2. Expand the logonLookAndFeelExtension project.

   3. Expand the src folder.

   4. Right-click the logonLookAndFeelExtension package and select New > File.

   5. In the File Name field, enter newLogonResources.properties and click Finish. The new resources file opens in an editor.

   6. In the new file, enter the following text: LogonDialog.instructions = To log on to the InStore Sales Representative Application, enter the user name and password. LogonDialog.applicationTitle = InStore Sales Representative Application

   7. Save the changes.

3. Update the image

   You have already determined the name of the file and the directory for the image you are going to replace. It is now time to create the directory within the own plug-in to include the image.

   1. Create the required directory within the plug-in,...

      1. In the Package Explorer view, right-click the logonLookAndFeelExtension project and select New > Folder.

      2. In the Folder Name field, enter icons and click Finish.

      3. Right-click the icons folder and select New > Folder.

      4. In the Folder Name field, enter full and click Finish.

      5. Right-click the full folder and select New > Folder.

      6. In the Folder Name field, enter prod and click Finish.

   2. Now that you have the directory structure created, you can import the new graphic:

      1. With the newly created prod directory highlighted, right-click and select Import.

      2. Select File System as the import source and click Next.

      3. Click Browse to the directory where you installed the included resources ZIP file for this tutorial.

      4. Locate the NewLogo.jpg file

      5. Click Finish.

   3. Once the file is imported, right-click the NewLogo.jpg file and select Refactor > Rename.

   4. In the New name field, enter websphere_telesales.jpg and click OK.

   You have now updated the image that the plug-in will use for the customization. Next we will update the manifest file for the plug-in.

4. Update the plugin.xml file

   To update the plugin.xml file to use the new properties file:

   1. If it is not open, open the plugin.xml file for editing:

      1. In the Package Explorer view, navigate to the logonLookAndFeelExtension plug-in project.

      2. In the logonLookAndFeelExtension project, double-click plugin.xml to open it for editing.

   2. In the right pane, click the Dependencies tab.

   3. Click Add.

   4. From the plug-in list, select com.ibm.commerce.telesales.resources.

   5. Click OK and save the changes.

   6. Click the Extensions tab.

   7. Click Add.

   8. From the Available extension points list, select com.ibm.commerce.telesales.resources.images.

   9. Click Finish.

   10. Click Add.

   11. From the Available extension points list, select com.ibm.commerce.telesales.resources.resources.

   12. Click Finish.

   13. In the All Extensions list, right-click com.ibm.commerce.telesales.resources.resources and click New > resourceBundle.

   14. In the Extension Element Details pane, set the baseName value to logonLookAndFeelExtension.newLogonResources

   15. Save the changes.

5. Test the changes

   Launch the IBM Sales Center client again (using Run > Run) and notice the different text and image in the logon dialog, as in the following screen capture:

   

< Previous | Next >

+

Search Tips   |   Advanced Search