|
| |
| Sun Java System Communications Express 6 2004Q2 Customization Guide | |
Chapter 3
Customizing General Features in CalendarThe look and feel of the calendar is provided by a set of style sheets, images and localizable strings. These strings pertain to the text that is displayed on the pages. The Code examples show how to modify icons, text and stylesheets for Calendar.
These are some common customization scenarios.
Customizing IconsCustomizing the Order of Calendar Toolbar Icons
The file to be modified to change the calendar toolbar icon order is <calclient-dir>/caltoolbarnormal.jsp
Figure 3-1 shows the default order of the Calendar Toolbar Icons.
Figure 3-1 Order of Calendar Toolbar Icons
Code 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.
Figure 3-2
Changed order of the Toolbar Icons
Code 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
:
Code 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=7 00,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=7 00,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 Toolbars
To customize toolbars in Calendar you need to modify the .jsp file located at <calclient-dir>/CalToolBarPagelet.jsp.
You can customize toolbars for all the main calendar views such as the following.
Table 3-1 Customizing Toolbars
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
Table 3-1 shows the list of customizable toolbars in Communications Express.
Customizing 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
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 Task Related Informative Icons
The property key names that define the location of the toolbar images are mentioned in Table 3-3
You can customize task related informative icons or images such as the ones used for recurring, reminding, and public tasks.
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
Table 3-4 Customizing Error Icon for Full Page Errors
Icon
Property Name
Value
Error Icon
uwc-calclient-Error-Message-icon
Error_Large.gif
Table 3-4 shows the customizable error icons for Full Page Errors
Customizing Icons in Pop ups
Code Example 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.
This is applicable for the following views
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.
Code Example 3-3 shows the code before modifying the resource bundle
Code Example 3-3 Code before modifying the resource bundle
uwc-calclient-toolbar-SearchForEvents=Search for Events:
Code Example 3-4 shows the code after modifying the resource bundle.
Code Example 3-4 Code after modifying the resource bundle
uwc-calclient-toolbar-SearchForEvents=<Customized Text>
Customizing ViewsThese examples show how to modify views
Customizing Tasks Search View
- The .jsp file name including path that pertains to tasks search view is <calclient-dir>/tasksSearch.jsp
- The common components present in tasksSearch.jsp are: Banner, Application bar, calendar tool bar.
- In the tasksSearch.jsp you can customize
- The overall layout and look and feel.
- Icons or images such as select_all, unselect_all, sort_up, sort_down, sort_selected_up, sort_selected_down gifs.
- Task related informative icons or images such as recurring gif, reminding gif, public task gifs.
- The table column ordering.
- The edit task and view task popup window sizes and styles.
Customizing the Column Order in Tasks Printable View
The file pertaining to customizing the column order in tasks is <calclient-dir>/tasksPrint.jsp
The common components present are Banner and Application bar.
You can customize the table column ordering.
The tasksPrint.jsp is located at <calclient-dir>/tasksPrint.jsp
Code Example 3-5 shows the code used to customize Tasks print view in a table with the columns in the order - 'Priority', 'Title', 'Due Date', 'Status', 'Type'
:
Code Example 3-5 Default code that displays the table column order
<th class="TblThCl1" scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Priority", "Priority") %></strong>
</th>
<th width="35%" scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Title", "Title") %></strong></th>
<th scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-DueDate", "Due Date") %></strong></th>
<th scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Status", "Status") %></strong></th>
<th scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Type", "Type") %></strong></th>
</tr>
<jato:content name="ZeroTasks">
<tr>
<td class="TblTdCl1Lst" colspan="6"><%= getLocalizedLabel(session, "uwc-calclient-tasks-NoTasksToDisplay-message", "This view does not have any tasks to display. Choose another filter or search for tasks.") %></td>
</tr>
</jato:content>
<jato:content name="NonZeroTasks">
<jato:tiledView name="TasksTiledView" type="com.sun.uwc.calclient.TasksTileView">
<jato:hidden name="TaskCalID"/>
<jato:hidden name="TaskUID"/>
<jato:hidden name="TaskRID"/>
<tr>
<td <jato:content name="FirstColumnStyle"/> align="center"><jato:text name="Priority" escape="false"/></td>
<jato:content name="IsConfidential">
<td <jato:content name="TitleColumnStyle"/>><%= getLocalizedLabel(session, "i18nModel", "uwc-calclient-view-Busy", "Busy") %></td>
</jato:content>
<jato:content name="IsNotConfidential">
<td <jato:content name="NormalColumnStyle"/>><strong><jato:text name="Title"/></strong><br>
<jato:content name="HasAlarm">
<img src="<%= getLocalizedLabel(session, "skinModel", "uwc-calclient-NotifyImage", "../uwc/images/LrlNotify_1.gif") %>" width="12" height="12" border="0" hspace="2" align="absmiddle" alt="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Notify", "Notify") %>" title="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Notify", "Notify") %>">
</jato:content>
<jato:content name="IsRecurring">
<img src="<%= getLocalizedLabel(session, "skinModel", "uwc-calclient-RecurringImage", "../uwc/images/LrlRecur_1.gif") %>" width="12" height="12" border="0" align="absmiddle" hspace="2" title="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Recurring", "Recurring") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Recurring", "Recurring") %>">
</jato:content>
<jato:content name="IsPublic">
<img src="<%= getLocalizedLabel(session, "skinModel", "uwc-calclient-PublicImage", "../uwc/images/LrlPrvPub_1.gif") %>" width="12" height="12" border="0" hspace="2" title="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Public", "Public") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Public", "Public") %>">
</jato:content>
<jato:content name="IsExternal">
<br>
[<jato:text name="OwnerName"/> (<jato:text name="CalendarName"/>)]
</jato:content>
</td>
</jato:content>
<td <jato:content name="NormalColumnStyle"/>><jato:text name="DueDate"/> <jato:text name="DueTime"/></td>
<td <jato:content name="NormalColumnStyle"/>><jato:text name="PercentStatusAsText" escape="false"/></td>
<td <jato:content name="NormalColumnStyle"/>><jato:text name="Category" escape="false"/></td>
</tr>
</jato:tiledView>
</jato:content>
Code Example 3-6 shows the code required to change the table column ordering so that it displays in the order title, due date, status, priority and type
Code Example 3-6 Changed table column ordering
<tr>
<th class="TblThCl1" scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Priority", "Title") %></strong>
</th>
<th width="35%" scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Title", "Due Date") %></strong></th>
<th scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Status", "Status") %></strong></th>
<th scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-DueDate", "Priority") %></strong></th>
<th scope="col" nowrap><strong><%= getLocalizedLabel(session, "uwc-calclient-tasks-Type", "Type") %></strong></th>
</tr>
<jato:content name="ZeroTasks">
<tr>
<td class="TblTdCl1Lst" colspan="6"><%= getLocalizedLabel(session, "uwc-calclient-tasks-NoTasksToDisplay-message", "This view does not have any tasks to display. Choose another filter or search for tasks.") %></td>
</tr>
</jato:content>
<jato:content name="NonZeroTasks">
<jato:tiledView name="TasksTiledView" type="com.sun.uwc.calclient.TasksTileView">
<jato:hidden name="TaskCalID"/>
<jato:hidden name="TaskUID"/>
<jato:hidden name="TaskRID"/>
<tr>
<jato:content name="IsConfidential">
<td <jato:content name="TitleColumnStyle"/>><%= getLocalizedLabel(session, "i18nModel", "uwc-calclient-view-Busy", "Busy") %></td>
</jato:content>
<jato:content name="IsNotConfidential">
<td <jato:content name="FirstColumnStyle"/> align="center"><strong><jato:text name="Title"/></strong><br>
<jato:content name="HasAlarm">
<img src="<%= getLocalizedLabel(session, "skinModel", "uwc-calclient-NotifyImage", "../uwc/images/LrlNotify_1.gif") %>" width="12" height="12" border="0" hspace="2" align="absmiddle" alt="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Notify", "Notify") %>" title="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Notify", "Notify") %>">
</jato:content>
<jato:content name="IsRecurring">
<img src="<%= getLocalizedLabel(session, "skinModel", "uwc-calclient-RecurringImage", "../uwc/images/LrlRecur_1.gif") %>" width="12" height="12" border="0" align="absmiddle" hspace="2" title="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Recurring", "Recurring") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Recurring", "Recurring") %>">
</jato:content>
<jato:content name="IsPublic">
<img src="<%= getLocalizedLabel(session, "skinModel", "uwc-calclient-PublicImage", "../uwc/images/LrlPrvPub_1.gif") %>" width="12" height="12" border="0" hspace="2" title="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Public", "Public") %>" alt="<%= getLocalizedLabel(session, "uwc-calclient-tasks-Public", "Public") %>">
</jato:content>
<jato:content name="IsExternal">
<br>
[<jato:text name="OwnerName"/> (<jato:text name="CalendarName"/>)]
</jato:content>
</td>
</jato:content>
<td <jato:content name="NormalColumnStyle"/>><jato:text name="DueDate"/> <jato:text name="DueTime"/></td>
<td <jato:content name="NormalColumnStyle"/>><jato:text name="PercentStatusAsText" escape="false"/></td>
<td <jato:content name="NormalColumnStyle"/>><jato:text name="Priority" escape="false"/></td>
<td <jato:content name="NormalColumnStyle"/>><jato:text name="Category" escape="false"/></td>
</tr>
</jato:tiledView>
Customizing Tasks Error View
To modify the tasks error view, you need to edit the file <calclient-dir>/tasksError.jsp
Customizing Events view
<calclient-dir>/EventsManager.jsp
<calclient-dir>/eventsSearch.jsp
<calclient-dir>/EventsManagerAnon.jsp
<calclient-dir>/eventsSearchAnon.jsp
<calclient-dir>/eventsanonError.jsp
To modify the printable images view, edit the following image. You can change the image and then replace the changed image in the root folder.
uwc-common-PrintableImage=../uwc/images/LrlPrintable_1_wo.gif
Customizing Tasks View
To modify the tasks view, you need to modify the file <calclient-dir>/tasks.jsp.
Customizing Pop upsTable 3-6 shows the pop up names and the relevant .jsp files to be modified for customization.
Table 3-6 Customizing Pop ups
Pop up Name
jsp files to be modified
New and Edit Event Pop up
<calclient-dir>/EditEvent.jsp
<calclient-dir>/EditEventData.jsp
<calclient-dir>/DeleteEventConfirmRepeatSelection.jsp
<calclient-dir>/SaveEventConfirmRepeatSelection.jsp
<js-dir>/EditEventButtons.jsp
<js-dir>/NewEventButtons.jsp
View Calendar Pop up
<calclient-dir>/ViewCalendar.jsp
<calclient-dir>/ViewCalendarData.jsp
<calclient-dir>/ViewCalendarButtons.jsp
New and Edit Calendar Group Pop up
<calclient-dir>/EditCalGroup.jsp
<calclient-dir>/EditCalGroupData.jsp
<js-dir>/EditCalGroupButtons.jsp
<js-dir>/NewCalGroupButtons.jsp
Subscribe to Calendars Pop up and Search for Calendars Pop up
<calclient-dir>/SearchCalendar.jsp
<calclient-dir>/SearchCalendarData.jsp
<calclient-dir>/SearchCalendarInitial.jsp
<js-dir>/SearchCalendarButtons.jsp
<js-dir>/SearchNViewCalendarButtons.jsp
Customizing Full Page ErrorTo modify the Error page, you need to edit the file <common-dir>/FullPageError.jsp
You can customize the error page for calendar views such as
Customizing the Layout for Full Page Errors
Full page error appears for variety of reasons. This page displays the following information:
These keys are replaced with the actual information provided by the server depending on the type or cause of error.
To customize the information that is displayed for each of these keys:
Edit the i18n.properties file, look for the following property names and change the value of the property as follows:
<per-view-key>-FullPageError-<ReasonForError>-summary=<Summary to be displayed>
<per-view-key>-FullPageError-<ReasonForError>-subtitle=<Sub Title to be displayed>
<per-view-key>-FullPageError-<ReasonForError>-description=<Description to be displayed>
For example,
<calclient-dir>-error-dayviewview-FullPageError-CalendarNotAvailable-summary=Calendar Not Available
<calclient-dir>-error-dayviewview-FullPageError-CalendarNotAvailable-subtitle=Could Not Display View
<calclient-dir>-error-dayview-FullPageError-CalendarNotAvailable-description=The selected calendar was either deleted or does not exist or you do not have permissions to view it. Select another calendar.
