Sun Java System Communications Express 6.3 Customization Guide

Icons

To customize icons and images in Calendar, you need to edit various JSP files and property files. The following sections describe various customizations that can be done in Calendar.

The Order of Calendar Toolbar Icons

To change the order of the calendar toolbar icons, you need to modify the <calclient-dir>/ CalToolBarNormal.jsp file.

Figure 3–1 shows the default order of the Calendar Toolbar Icons.

Figure 3–1 Order of Calendar Toolbar Icons

Figure showing the default order of Calendar toolbar
icons: New Event, New Task, Check Availability, Search for Calendar, Printable,
and Import/Export

Example 3–1 shows the default code used to display the Calendar Toolbar Icons in the order, New Event, New Task, Check Availability, Search for Calendar, Printable and Import/Export. The CalToolBarNormal.jsp file contains specific sections of code to display and perform actions each of the components in the tool bar. To change the order of the toolbar icons, you need to change the order in which they appear in the JSP file.


Example 3–1 Default Code that Displays the Calendar Toolbar Icons

The code below is common to the CalToolBarNormal.jsp file.

<div class="Toolbar">
a name="toolbar">
</a>
	<script language="JavaScript" src="../uwc/js/define_images_cal.js"></script> 
<table border="0" cellspacing="0" cellpadding="0">
	<tr>

The code for New Event icon starts here:

New Event
		<td nowrap>
		<a href="javascript:void(0)" 
			accesskey="e"
			onMouseOver="over('newEvent')" 
			onMouseOut="out('newEvent')"
			onClick="openWinAutoHeight
					('<jato:text name="NewEventUrl" escape="false"/>','eventWin','scrollbars=yes,
									resizable=yes,width=700'); return false;">
			<img name="newEvent"
				 src="<%= getLocalizedLabel(session,"skinModel", "uwc-calclient-NewEventImage", 
					"../uwc/images/LrlNewEvent_1_wo.gif") %>"
				width="24" 
				height="24" 
				align="absmiddle" 
				border="0" 
				title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewEvent",
						"New Event") %>" 
				alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewEvent",
						 "New Event") %>">
	</a>
		<a href="javascript:void(0)"
		   title="<%= getLocalizedLabel(session,"uwc-calclient-toolbar-tooltip-NewEvent", 
						"New Event") %>"
			class="ToolLbl" 
			onClick="openWinAutoHeight('<jato:text name="NewEventUrl"scape="false"/>',
			'eventWin','scrollbars=yes,resizable=yes,width=700'); return false;">
			<%= getLocalizedLabel(session, "uwc-calclient-toolbar-NewEvent","New Event") %>
</a>
</td>

The code for New Task Event starts here:

	New Task 
	<td class="ToolbarItem" nowrap>
	<a href="javascript:void(0)" 
		accesskey="t" 
		onMouseOver="over('newTask')" 
		onMouseOut="out('newTask')"
		onClick="openWinAutoHeight
					('<jato:text name="NewTaskUrl" escape="false"/>','task','scrollbars=yes,
									resizable=yes,width=700'); return false;">
		<img name="newTask"
			src="<%= getLocalizedLabel(session, "skinModel","uwc-calclient-NewTaskImage", 
					"../uwc/images/LrlNewTask_1_wo.gif") %>" 
			width="24" 
			height="24"
			align="absmiddle" border="0"
			title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewTask",
					"New Task") %>"
			alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-NewTask",
					 "New Task") %>">
</a>
	<a href="javascript:void(0)" 
		title="<%= getLocalizedLabel(session"uwc-calclient-toolbar-tooltip-NewTask",
					"New Task") %>"
		class="ToolLbl" 
		onClick="openWinAutoHeight('<jato:text name="NewTaskUrl" escape="false"/>',
		'task','scrollbars=yes,resizable=yes,width=700'); return false;">
		<%= getLocalizedLabel(session, "uwc-calclient-toolbar-NewTask", "New Task") %>
	</a>
</td>

The code for Check Availability icon starts here:

	Check Availability
	<td class="ToolbarItem" nowrap>
	<a href="javascript: void(0)" 
		accesskey="a" onMouseOver="over('checkAvail')" 
		onMouseOut="out('checkAvail')" 
		onClick="openWinAutoHeight
					('<jato:text name="AvailabilityUrl" escape="false"/>''availability','scrollbars=yes,
									resizable=yes,width=800');return false;">
		<img name="checkAvail" 
			 src="<%= getLocalizedLabel(session, "skinModel","uwc-calclient-CheckAvailabilityImage",
					"../uwc/images/LrlCheckAvail_1_wo.gif") %>" 
			width="24"
			height="24"
			align="absmiddle"
			border="0" 
			title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-CheckAvailability", 
						"Check Availability") %>" 
			alt="<%= getLocalizedLabel(session,"uwc-calclient-toolbar-tooltip-CheckAvailability",
						"Check Availability") %>">
</a>
	<a href="javascript: void(0)" 
		title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-CheckAvailability", 
					"Check Availability") %>" 
		class="ToolLbl" 
		onClick="openWinAutoHeight('<jato:text name="AvailabilityUrl" escape="false"/>'
			 ,'availability','scrollbars=yes, resizable=yes,width=800'); return false;">
			  <%= getLocalizedLabel(session,"uwc-calclient-toolbar-CheckAvailability",
										"Check Availability") %>
	</a>
</td>

The code for Search For Calendar icon starts here:

Search for Calendar
<!-- Show SearchCalendar if and only if the parent view is not manage calendars -->
	<jato:content name="ShowSearchCalendars">
					<td class="ToolbarItem" nowrap>
	<a href="javascript: void(0)" accesskey="s" 
		onMouseOver="over('search')"
		onMouseOut="out('search')" 
		onClick="openSearchForCalendarsPopup(); return false;">
		<img name="search" 
			 src="<%= getLocalizedLabel(session, "skinModel", "uwc-common-SearchImage", 
					"../uwc/images/LrlSearch_1_wo.gif") %>" 
			width="24" 
			height="24" 
			align="absmiddle" 
			border="0" 
			title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-SearchCalendar", 
						"Search for Calendar") %>" 
			alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-SearchCalendar", 
					  "Search for Calendar") %>">
</a>
	<a href="javascript: void(0)" 
		title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-SearchCalendar", 
					"Search for Calendar") %>" 
		class="ToolLbl" 
		onClick="openSearchForCalendarsPopup();
		return false;">
		<%= getLocalizedLabel(session, "uwc-calclient-toolbar-SearchCalendar",
								"Search for Calendar") %>
	</a>
</td>
	</jato:content>

The code for Printable icon starts here:

Printable
<!-- Show Printable f and only if the parent view is not invitations -->
<jato:content name="ShowPrintable">
				  <td class="ToolbarItem" nowrap>
	<a href="javascript: void(0)" 
		onClick="openWinAutoHeight('<jato:text name="PrintUrl" escape="false"/>','print',
		'menubar=yes,
		scrollbars=yes,
		resizable=yes,
		width=700,
		height=650'); 
		return false;" 
		accesskey="p" 
		class="ToolLbl" onMouseOver="over('printable')" 
		onMouseOut="out('printable')">
		<img name="printable" 
			 src="<%= getLocalizedLabel(session, "skinModel", "uwc-common-PrintableImage", 
						"../uwc/images/LrlPrintable_1_wo.gif") %>" 
			width="24" 
			height="24" 
			align="absmiddle" 
			border="0" 
		title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Printable", 
					 "Display a Printable Page") %>" 
		alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Printable", 
				  "Display a Printable Page") %>"></a>
	<a href="javascript:void(0)" 
		onClick="openWinAutoHeight('<jato:text name="PrintUrl" escape="false"/>',
				'print',
				'menubar=yes,
				 scrollbars=yes,
				 resizable=yes,
		width=700,
		height=650'); 
		return false;" 
		title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-Printable",
					"Display a Printable Page") %>" 
		class="ToolLbl"><%= getLocalizedLabel(session, "uwc-calclient-toolbar-Printable", 
				"Printable") %></a></td>
</jato:content>

The code for Import/Export icon starts here:

Import/Export
	<td class="ToolbarItem" nowrap>
<a href="javascript: void(0)" 
	 accesskey="i"
	 onMouseOver="over('importExport')"
	 onMouseOut="out('importExport')" 
	 onClick="openWinAutoHeight('<jato:text name="ImportExportUrl" escape="false"/>','importexport','
	 scrollbars=yes,
	resizable=yes,width=700'); return false;">
<img name="importExport" 
		src="<%= getLocalizedLabel(session, "skinModel","uwc-common-ImportExportImage",
					"../uwc/images/LrlImpExp_1_wo.gif") %>" 
		width="24"
		height="24"
		align="absmiddle"
		border="0" 
		title="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-ImportExport",
					 "Import and Export Calendar") %>"
		alt="<%= getLocalizedLabel(session, "uwc-calclient-toolbar-tooltip-ImportExport", 
				"Import and Export Calendar") %>">
</a>
<a href="javascript: void(0)"
	 title="<%= getLocalizedLabel(session,"uwc-calclient-toolbar-tooltip-ImportExport", 
				  "Import and Export Calendar") %>"
	 class="ToolLbl" 
	 onClick="openWinAutoHeight('<jato:text name="ImportExportUrl" escape="false"/>',
				'importexport','scrollbars=yes,resizable=yes,width=700'); return false;">
				<%= getLocalizedLabel(session, "uwc-calclient-toolbar-ImportExport",
										"Import/Export") %>
</a>

These instructions mark the end of the code.

  </td>
  </tr>
</table>
</div>

ProcedureTo Change the Order of the Icons in the Calendar Toolbar

In order to change the order of the icons, you need to move the sections specific to each icons around in the order you want them to appear. Please refer to Example 3–1, to change the order of the icons. For example to change the order of the icons from:

Default order of Calendar Toolbar Icons

to:

Changed order of Calendar Toolbar icons

perform the following steps:

  1. Cut the section of code for New Task event and paste it above the instructions for New Event.

  2. Cut the section of code for Printable and paste it after the instructions for New Event.

  3. Cut the section of code for Search for Calendar and paste it after the instructions for Import/Export.

Icons in Various Calendar Views

To customize the icons in Calendar views, you need to modify the themes.properties file located at <skin-dir>.

You can customize toolbars for all the main calendar views such as the following:

Table 3–1 shows the list of customizable icons: .

Table 3–1 Customizing Icons

Image  

Property name  

Description 

Value  

Forward Icon 

uwc-calclient-Forward-Arrow-image

Icon to view events or tasks in the next day, week, month, or year in a calendar 

forward.gif

Backward Icon 

uwc-calclient-Back-Arrow-image

Icon to view events or task in the previous day, week, month, or year in a calendar 

back.gif

Select all Icon 

uwc-calclient-Select-All-image

Icon to select all events or tasks on a page 

check_all.gif

Unselect all Icon 

uwc-calclient-Deselect-All-image

Icon to unselect all events or tasks on a page 

uncheck_all.gif

Sort Down Non Selected Image 

uwc-common-Sort-Down-NonSelected-image

Icon to sort down, in descending order, unselected events or tasks on a page  

sort_down_nonsel_che.gif

Sort Down Selected Image 

uwc-common-Sort-Down-Selected-image

Icon to sort down, in descending order, selected events or tasks on a page 

sort_down_sel.gif

Sort Up Non Selected Image 

uwc-common-Sort-Up-NonSelected-image

Icon to sort up, in ascending order, selected events or tasks on a page 

sort_up_nonsel.gif

Sort Up Selected Image 

uwc-common-Sort-Up-Selected-image

Icon to sort up, in ascending order, selected events or tasks on a page 

sort_up_sel.gif

The Toolbar Images

The property key names that define the location of the toolbar images are mentioned in Table 3–2

Table 3–2 Customizing the Calendar Toolbar Icons

Icon  

Property Name  

Description 

Value  

New Event icon 

uwc-calclient-NewEventImage

Icon to create a new event 

LrlNewEvent_1_wo.gif,

New Task Icon 

uwc-calclient-NewTaskImage

Icon to create a new task 

LrlNewTask_1_wo.gif

Check Availability Icon 

uwc-calclient-CheckAvailabilityImage

Icon to check availability of individuals before scheduling an event with them 

LrlCheckAvail_1_wo.gif

Search Calendar Icon 

uwc-calclient-SearchImage

Icon to search for a calendar 

LrlSearch_1_wo.gif

Printable Icon 

uwc-calclient-PrintableImage

Icon to print calendars, events, or tasks 

LrlPrintable_1_wo.gif

Import/Export Icon 

uwc-calclient-ImportExportImage

Icon to import and export calendar events and tasks between different calendars 

LrlImpExp_1_wo.gif

Events/Task Related Informative Icons

The property key names that define the location of the task related informative icons mentioned in Table 3–3

You can customize informative icons or images such as the ones used for recurring, reminding, and public tasks for tasks and events.

Table 3–3 Customizing Task Related Informative Icons

Icon  

Property Name  

Description 

Value  

Notify Image 

uwc-calclient-calclient-NotifyImage

Icon that specifies that the creator of the event and the attendees will receive a notification before the event. The notification period can be specified by the creator of the event. 

LrlNotify_1.gif

Recurring Image 

uwc-calclient-RecurringImage

Icon that specifies that this is a recurring event 

LrlRecur_1.gif

Public Image 

uwc-calclient-PublicImage

Icon that specifies that this event is public and can be viewed by anyone visiting this calendar. 

LrlPrvPub_1.gif

The Error Icon for Full Page Errors

The Error Icon for Full Page Errors shows the customizable error icons for Full Page Errors

Table 3–4 Customizing Error Icon for Full Page Errors

Icon  

Property Name  

Description 

Value  

Error Icon 

uwc-calclient-Error-Message-icon

Icon that specifies that an error has occurred. 

Error_Large.gif

Icons in Pop ups

Table 3–5 shows the customizable icons located in uwc/calclient/SearchCalendarData.jsp.

Table 3–5 Customizing Icons in Pop ups

Icon 

Property Name 

Description 

Value 

Select All 

uwc-calclient-Select-All-image

Icon to select all events or tasks on a page 

check_all.gif

Unselect All 

uwc-calclient-Deselect-All-image

Icon to unselect all events or tasks on a page 

uncheck_all.gif

Subscribed Icon 

uwc-calclient-Subscribed-image

Icon to subscribe to a specified calendar 

LrlSub_1.gif

Search for Events

The file name including path is <calclient-dir> /CalSearchBarPagelet.jsp. Communications Express allows you to customize the Search for events label as shown in Search for Events

Figure showing a text field to search for calendar events.

This is applicable for the following views:

Besides these, you can change the text that appears besides the search events text box and also customize the overall layout.

Text that Appears Besides the Search Events Text Box

To change the introductory text that is displayed adjacent to the search events text box, change the property uwc-calclient-toolbar-SearchForEvents in the resource bundle of <domain-dir>/en/i18n.properties.

Example 3–2 shows the code after modifying the resource bundle.


Example 3–2 Code After Modifying the Resource Bundle


uwc-calclient-toolbar-SearchForEvents=<Customized Text>