Chapter 2 Customizing General Features in Communications Express

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 has the following sections:

• Guidelines for Customization

• Images

• Text

• Themes

• Login Screen

• Replacing the Logo With a Custom Graphic

• Banner

• The Application Bar

Guidelines for Customization

Before you start customizing Communications Express, 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 test 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 using a JSP aware IDE. 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.

Customization Do's and Don'ts

This section describes various files that are critical and can break your customizations if they are not edited with caution. Some files often contain bug fixes. These changes can be lost if appropriate care is not taken.

Files That Should not be Edited

The following table lists the files that should not be edited. These files often have bug fixes and are not needed for customization in most cases.

Files That Should be Edited with Caution

The following table lists files that should be edited with caution. These files are highly readable and self-explanatory. Some of them have HTML code at the bottom. It is recommended that you limit your customization to the HTML portion. Also, do not add or modify any JavaScript functions. If you see a need for a new JavaScript function, create a new file and source it in the HTML code.

Files Related to Global Fonts and Colors

The following table lists files that are related to customizing global styles and fonts. A number of tools are available in the market that can help you find out values of a particular color. It is recommended that you edit these files to achieve the customizations for font and color. However, you can add new styles if you find it impossible to change the styles in these files.

Customizing Image Files

While customizing images in Communications Express it is recommended that you replace the existing images with the new ones without changing the file names. The file names of the image are read and cached by Communications Express and then rendered. If you want to change the names of the files, you have to change the name in the property files and then restart the web container. Replacing the image files with the new images while maintaining the same file names will avoid restarting of the web container.

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 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 on Solaris and /var/opt/sun/uwc on Linux.

Images

All Communications Express 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–5 lists the common images that are located in <uwc-images-dir>.

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. For more information on localization, refer to Chapter 9, Localizing Communications Express

To Customize Text for a Domain

To customize the text of a domain called example.com, perform the following steps.

1. Create a directory <domain-dir>/example.com

2. Copy <domain-dir>/en/i18n.properties to <domain-dir>/example.com/en.

   This would be the default path of the i18n.properties for users in example.com domain.

3. Create directories for each supported locale such as en_US, ja, de_DE, fr_FR under <domain-dir>/example.com/ .

   1. Copy i18n.properties to each domain.

   2. Change the locations accordingly.

Themes

Communications Express allows you to customize the look and feel of the displayed web pages.

To Create a new Theme

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 perform the following steps:

1. Copy themes.properties under <skin-dir> directory to <skin-dir>/christmas. themes.properties file that defines the various parameters of this theme.

2. Change the locations in themes.properties to point to the customized style sheets and images.

3. 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.

4. To configure the christmas theme, go to <domain-dir> and add the parameter uwc-user-attr-SunUCTheme-<locale-name>=christmas in the uwcdomainconfig.properties file. Here, <locale-name> is the name of the locale on which you want to set the theme .

5. Restart the web server to apply the changes.

To Modify a Skin

The <skin-dir> directory contains subdirectories, which correspond to each skin defined for Communications Express. You can also modify the properties associated with a particular skin by editing the themes.properties file for the skin.

1. Go to the skin directory that you want to update. For example, to update the skin called “christmas” change to <skin-dir>/christmas directory.

2. The <skin-dir>/christmas contains a file called themes.properties. This file defines the various parameters of the skin.

3. Update the required parameters in the themes.properties file.

   ---

   Note –

   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.

   ---

4. Restart the web server to apply changes.

Login Screen

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.

Figure 2–1 Communications Express Login Screen.

Replacing the Logo With a Custom Graphic

To replace the default Communications Express logo with a custom logo:

• Replace the logo with a custom graphic

• Change the destination of link

Figure 2–2 Sun 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 Of a Corner Logo

Figure 2–4 Login Screen with Customized Logo

Changing the Title Text

Figure 2–5 Communications Express Title Text

To change the title text for Communications Express:

• Replace a title graphic with custom graphic

• Change the title text

Banner

You can modify the left image and the right image in the banner. Figure 2–6, Figure 2–7and Figure 2–8, Figure 2–9display 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

The 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 appears, 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

Example 2–1 shows the default code that displays the default application tab order.

Example 2–1 Code for Customizing the 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.

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' rearrange the code shown in Example 2–2 to the following:

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>