Sun Java System Communications Express 6 2004Q2 Customization Guide |
Chapter 2
Customizing General Features in Communications ExpressThis chapter describes how to customize some of the common elements in Communications Express. It also provides information related to .jsp files and their location along with details on the common features that are customizable in Communications Express.
This chapter provides details on
Guidelines to be Followed Before the Customization Process
Before you start customizing the application, it is important to understand how to edit and deploy the .jsp files. The guidelines for customizing .jsp files are as follows.
- Do not edit .jsp files directly in your production web server. Instead, make and test changes in a development environment.
- Make a backup copy of the .jsp file.
- Edit the .jsp file with any HTML or text editor. Typically HTML editors do not work well for .jsp files because of the amount of embedded Java code. In general when editing a .jsp file, be careful not to edit Java code.
- After completing your edits, you can optionally compile the .jsp file. Because the .jsp file contains both HTML and Java code, this compilation ensures that you have not introduced syntax errors in the .jsp file.
- Restart the web container for the changes to take effect.
List of Customizable and Configurable Files for Calendar and Address Book
The following list of files are customizable and configurable for Calendar and Address Book. It is assumed here that the customization is performed before configuring Communications Express. The directories mentioned are relative to <install root>/lib/config-templates. If configured, the files are available in the location /var/opt/sunwuwc
Customizing the Contents of themes.properties
The themes.properties file contains the location of style sheets and images that are customizable. For example, consider the following skin.
uwc.defaultskin = Christmas
To change this skin, perform the following steps.
The common components that are present include the Banner, Application bar, and calendar tool bar. You can also customize the overall layout look and feel.
Customizing Images
The calendar images can be customized by specifying the location for these icons in
<skin-dir/themes.properties.
<theme-name> is the name of the theme configured for a domain. To customize the icons, edit the themes.properties file to change the names of properties to contain a value that points to the location of the new images. A default value for image location will be used if the corresponding key is not defined in the theme. properties file.
Table 2-2 lists the common images that are located in <uwc-images-dir>.
Customizing Text
Communications Express allows you to customize text that is displayed on web pages. This text is both customizable and localizable. You can also configure text on a per domain basis. To customize text, you to need to change the i18n.properties file that is deployed in <domain-dir>/domain/en. The i18n.properties file in <domain-dir>/domain/en is the default file. If the deployment is configured to work with multiple domains and multiple locales, then you need to create a directory by that domain name under <domain-dir> appropriately.
To customize the text of a domain called example.com, perform the following steps.
- Create <domain-dir>/domain/example.com
- Copy <domain-dir>/domain/en/i18n.properties to <domain-dir>/domain/example.com/en. This would be the default path of the i18n.properties for users in example.com domain.
- Create directories for each supported locale such as en_US, ja, de_FR under that domain, copy i18n.properties to the domain, and change the locations accordingly
Customizing the Skin
To modify the skin, perform these steps.
- The skin to be edited is defined in the uwc.defaultskin property in uwcconfig.properties file. Communications Express looks for the directory name specified for the supported locale under the <skin-dir>directory.
- Copy the new skin to this location to replace the existing skin in this directory.
- The default themes.properties can be accessed from <skin-dir>/themes.properties.
Customizing the Login Screen for the English Locale
This section describes how to modify the Communications Express Login screen shown in Figure 2-1.
You can replace the logo with a custom graphic on the Communications Express Login screen:
To modify the Communications Express Login Screen, you need to edit <skin-dir>/themes.properties and the relevant .jsp file is login.jsp.
Figure 2-1 Communications Express Login Screen
.
Replacing the Logo With a Custom Graphic
You can modify the following on the Communications Express corner logo and link:
Example—Logo Modification
The example shown in Figure 2-3 replaces the Sun logo with a custom logo having different dimensions.
Figure 2-3 Example Corner Logo
Figure 2-4 Login Screen with Customized Logo
Changing the Title Text
Figure 2-5 Communications Express Title Text
You can also do the following:
Customizing BannerYou can modify the left image and the right image in the banner. These images show the banner before and after customization.
Figure 2-6 Left Banner Image Before Customization
Figure 2-7 Customized Left Banner Image
Figure 2-8 Right Banner Image Before Customization
Figure 2-9 Customized Right Banner Image
Customizing Branding
The i18n.properties has a property called uwc-homepage which can be changed to point to the 'Home' link on the Branding page.
Customizing Application Bar
You can modify the application bar by editing the CalApplBarNormal.jsp file located at <calclient-dir>/CalApplBarNormal.jsp
By default, the order in which the application tab appear, provided all services are enabled, is 'Mail’,’Calendar', 'Address Book' and 'Options'. This order can be changed to suit your requirements.
Figure 2-10 Default application tab order
Code Example 2-1 shows the default code that displays the default application tab order .
The application tab order can be customized to display in the order, Address Book, Mail, Calendar and Options.
Figure 2-11 Changing the application tab order to display Address Book, Mail, Calendar and Options
To change the order of Application tabs for example 'Address Book', 'Mail', 'Calendar', 'Options' re-arrange the code shown in Code Example 2-1 to the following:
Code Example 2-2 Customizing the order of the application tabs
<td class="Tab1Gutter">
<table border="0" cellspacing="0" cellpadding="0" class="Tab1Tbl">
<tr>
<td colspan="12"><img src="../uwc/images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td class="Tab1Gutter"><img src="../uwc/images/spacer.gif" width="3" height="1" alt=""></td>
<td class="Tab1NotSel" nowrap>
<div class="Tab1NotSel"><a href="<%= getContextURI(request) %>/abclient/AddressBook" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-AddressBook", "Address Book") %>" class="Tab1LblNormal" onmouseover="status='Address Book'; return true;" onmouseout="status=';'"><%= getLocalizedLabel(session, "uwc-calclient-toolbar-AddressBook", "Address Book") %></a></div>
</td>
<jato:content name="MailTab">
<td class="Tab1NotSel">
<div class="Tab1NotSel"><a href="<%= getContextURI(request) %>/mailclient/Mail" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Mail", "Mail") %>" class="Tab1LblNormal" onmouseover="status='Mail'; return true;" onmouseout="status=';'"><%= getLocalizedLabel(session, "uwc-calclient-toolbar-Mail", "Mail") %></a></div>
</td>
<td class="Tab1NotSel"><img src="../uwc/images/spacer.gif" width="10" height="1" alt=""></td>
<td class="Tab1Gutter"><img src="../uwc/images/spacer.gif" width="3" height="1" alt=""></td>
</jato:content>
<jato:content name="MailTab">
<td class="Tab1Gutter" colspan="3"><img src="../uwc/images/spacer.gif" width="1" height="3" alt=""></td>
</jato:content>
<td rowspan="3" class="Tab1Sel">
<div class="Tab1Sel"><span class="Tab1LblSel" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Calendar", "Calendar") %>"><%= getLocalizedLabel(session, "uwc-calclient-toolbar-Calendar", "Calendar") %></span></div>
</td>
<td rowspan="3" class="Tab1Sel"><img src="../uwc/images/spacer.gif" width="10" height="3" alt=""></td>
<td class="Tab1Gutter" colspan="7"><img src="../uwc/images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td class="Tab1NotSel"><img src="../uwc/images/spacer.gif" width="10" height="1" alt=""></td>
<td class="Tab1Gutter"><img src="../uwc/images/spacer.gif" width="3" height="1" alt=""></td>
<td class="Tab1NotSel">
<div class="Tab1NotSel"><a href="<%= getContextURI(request) %>/base/CalendarPreferences" title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Options", "Options") %>" class="Tab1LblNormal" onmouseover="status='Options'; return true;" onmouseout="status=';'"><%= getLocalizedLabel(session, "uwc-calclient-toolbar-Options", "Options") %></a></div>
</td>
<td class="Tab1NotSel"><img src="../uwc/images/spacer.gif" width="10" height="1" alt=""></td>
<td class="Tab1Gutter"><img src="../uwc/images/spacer.gif" width="3" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3" class="Tab1Gutter"><img src="../uwc/images/spacer.gif" width="1" height="1" alt=""></td>
<td colspan="7" class="Tab1Gutter"><img src="../uwc/images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
</table>
</td>