This 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:
Before you start customizing the application, it is important to understand how to edit an 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 and 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 any syntax errors.
Restart the web container for the changes to take effect.
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
Table 2–1 List of Customizable files for Calendar and Address Book
File Location |
Customizable Files |
Name used in the document |
---|---|---|
All the configuration files | ||
All i18n.properties files. i18n files are used to internationalize the interface for multiple languages | ||
themes.properties file | ||
All the .html, .xml and .xsl files | ||
All files such as .gif, .css, .html files | ||
All stylesheets(.css files) | ||
All image files(*.gif, *.jpg) | ||
.jsp files | ||
.jsp files | ||
.jsp files | ||
.jsp files |
The calendar images can be customized by specifying the location for these icons in <skin-dir>/themes.properties.
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 themes. properties file.
Table 2–2 lists the common images that are located in <uwc-images-dir>.
Table 2–2 Location of the Common images in < uwc-images-dir>
Image/Icon |
Property Name |
Value |
---|---|---|
Banner Image |
Masthead_s1UMC.gif |
|
Right Branding Image |
logo_sun.gif |
|
Warning Image |
Warning_Large.gif |
|
Search Image |
LrlSearch_1_wo.gif |
|
Printable Image |
LrlPrintable_1_wo.gif |
|
Import Export Image |
LrlImpExp_1_wo.gif |
|
Sort down and non selected image |
sort_down_nonsel_che.gif |
|
Sort down and selected image |
sort_down_sel.gif |
|
Sort up and non selected image |
sort_up_nonsel.gif |
|
Sort up and selected selected image |
sort_up_sel.gif |
|
Anchor Image |
to_anchor.gif |
|
Subscribed Image |
LrlSub_1.gif |
|
Required Image |
required.gif |
|
Error Message Icon |
Error_Large.gif |
|
Warning Message Icon |
Warning_Large.gif |
|
Question Message Icon |
Question_Large.gif |
|
Information Message Icon |
Info_Large.gif |
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
Communications Express allows you to customize the look and feel of the displayed web pages.
The <skin-dir> directory contains subdirectories, which correspond to each skin defined for Communications Express. For example, to create a skin called “christmas” create a “christmas” directory under the <skin-dir> directory and do the following:
Copy themes.properties under <skin-dir> directory to <skin-dir>/christmas. themes.properties file that defines the various parameters of the skin
Change the locations in themes.properties to point to the customized style sheets and images.
For help on various paramaters in this file, refer to Appendix D of the Communications Express Administration Guide. Look for “themes.properties” under the “Configuration Parameters Reference” section.
To configure the christmas theme go to <domain-dir> and set uwc-user-attr-sunUCTheme=christmas in the uwcdomainconfig.properties file.
Restart the web server to apply changes.
The <skin-dir> directory contains subdirectories, which correspond to each skin defined for the Communications Express. You can also modify the properties associated with a particular skin by editing the themes.properties file for the skin.
Go to the skin directory that you want to update. For example, to update the skin called “christmas” change to <skin-dir>/christmas directory.
The <skin-dir>/christmas contains a file called themes.properties. This file defines the various parameters of the skin.
Update the required parameter(s) in the themes.properties file.
For help on various parameters in this file, refer to Appendix D of the Communications Express Administration Guide. Look for “themes.properties” under the “Configuration Parameters Reference” section.
Restart the web server to apply changes.
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 file. The relevant .jsp file is login.jsp.
To replace the default Communications Express logo with a custom logo:
Replace the logo with a custom graphic
Change the destination of link
The example shown in Figure 2–3 replaces the Sun logo with a custom logo having different dimensions.
To change the title text for Communications Express:
Replace a title graphic with custom graphic
Change the title text
You can modify the left image and the right image in the banner. These images show the banner before and after customization.
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.
Example 2–1 shows the default code that displays the default application tab order.
<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> <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><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> <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><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> |
The application tab order can be customized to display in the order, 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 Example 2–2 to the following:
<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> |