Sun Java System Communications Express 6 2005Q4 Customization Guide

Customizing Icons

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

Example 3–1 Default code that displays the default Calendar Toolbar Icons

<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>
	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"
escape="false"/>',
'eventWin','scrollbars=yes,resizable=yes,width=700'); return false;">
<%= getLocalizedLabel(session, "uwc-calclient-toolbar-NewEvent", 
	"New Event") %>
</a></td>
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>
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>
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>
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>
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>
    </td>
  </tr>
</table>
</div>

Figure 3–2 Changed order of the Toolbar Icons

Figure showing the changed order of the toolbar icons.

Example 3–2 shows the edited code that changes the order of icons in calendar tool bar to - New Task, New Event, Printable, Check Availability, Import/Export, Search for Calendar

Example 3–2 Customizing the toolbar icon order

<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>
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>
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" escape="false"/>',
'eventWin','scrollbars=yes,resizable=yes,width=700'); return false;">
<%= getLocalizedLabel(session, "uwc-calclient-toolbar-NewEvent", 
"New Event") %></a></td>
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>
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>
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>
 </td>
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>
/tr>
</table>
</div>

Customizing the Toolbar Images

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

Table 3–1 Customizing the Calendar Toolbar Icons


Icon	Property Name	Value
New Event icon.	`uwc-calclient-NewEventImage`	`LrlNewEvent_1_wo.gif,`
New Task Icon	`uwc-calclient-NewTaskImage`	`LrlNewTask_1_wo.gif`
Check Availability Icon	`uwc-calclient-CheckAvailabilityImage`	`LrlCheckAvail_1_wo.gif`
Search Calendar Icon	`uwc-calclient-SearchImage`	`LrlSearch_1_wo.gif`
Printable Icon	`uwc-calclient-PrintableImage`	`LrlPrintable_1_wo.gif`
Import/Export Icon	`uwc-calclient-ImportExportImage`	`LrlImpExp_1_wo.gif`

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

Day view
Week view
Month view
Year view
Events view
Invitations view
Tasks view
Manage calendar view

Table 3–2 shows the list of customizable icons in Communications Express.

Table 3–2 Customizing Icons


Image	Property name	Value
Forward	`uwc-calclient-Forward-Arrow-image`	`forward.gif`
Backward	`uwc-calclient-Back-Arrow-image`	`backward.gif`
Select all	`uwc-calclient-Select-All-image`	`check_all.gif`
Unselect all	`uwc-calclient-Deselect-All-image`	`uncheck_all.gif`
Sort down non selected image	`uwc-common-Sort-Down-NonSelected-image`	`sort_down_nonsel_che.gif`
Sort down selected image	`uwc-common-Sort-Down-Selected-image`	`sort_down_sel.gif`
Sort up non selected image	`uwc-common-Sort-Up-NonSelected-image`	`sort_up_nonsel.gif`
Sort up selected image	`uwc-common-Sort-Up-Selected-image`	`sort_up_sel.gif`

Customizing 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	Value
Notify Image	`uwc-calclient-calclient-NotifyImage`	`LrlNotify_1.gif`
Recurring Image	`uwc-calclient-RecurringImage`	`LrlRecur_1.gif`
Public Image	`uwc-calclient-PublicImage`	`LrlPrvPub_1.gif`

Customizing the Error Icon for Full Page Errors

Customizing 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	Value
Error Icon	`uwc-calclient`-Error-Message-icon	`Error_Large.gif`

Customizing 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	Value
`select_all`	`uwc-calclient-Select-All-image`	`check_all.gif`
`unselect_all`	`uwc-calclient-Deselect-All-image`	`uncheck_all.gif`
`subscribed icon`	`uwc-calclient-Subscribed-image`	`LrlSub_1.gif`

Customizing 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 Customizing Search for Events

Figure showing a text field to search for calendar events.

This is applicable for the following views:

Day view
Week view
Month view
Year view
Events manager
You can change the text that appears besides the search events text box
You can also customize the overall layout

Customizing the 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 code in the resource bundle of i18n.properties.

Customizing the Text that Appears Besides the Search Events Text Box shows the code before modifying the resource bundle

Example 3–3 Code before modifying the resource bundle

uwc-calclient-toolbar-SearchForEvents=Search for Events:

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

Example 3–4 Code After Modifying the Resource Bundle

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