Sun Java System Communications Express 6 2004Q2 Customization Guide |
Chapter 7
Customizing General Features in Address BookThe Address Book contains many customizable and localizable items that can be changed to create a different look and feel. These customizable items include icons, style sheets, and labels. You can change the position of certain items and also customize captions, headings, button labels, alert and inline messages.
The rendering of Address Book UI is handled by XML/XSL files that contain XSL tags, static HTML and JavaScripts. The XSL and JavaScript code are used to display dynamic data and perform actions or form handlings. The XSL code in most of the pages is structured into templates which helps make a page modular for various components. All these files are located under the <uwcinstall>/WEB-INF/ui/html/abs directory.This chapter contains information on customizing the following in Address Book.
Customizing Address Book Icons and Labels
Customizing Icons
All the icons that are used for display in Address Book are defined under two files namely,
All Address Book related images are located under <uwcinstall>/absimx. Search-images.xsl and commonimages.xsl refer to images in this directory. To customize, you can add or replace the required images in this directory and then change the corresponding references in these files.
These are two examples on how you can modify the icons.
Example 1 - To change the icon for Printable as displayed in the toolbar of main page, you need to do the following.
Old Icon: Printable (File name: - LrlPrintable_1_wo.gif)
New Icon: New Printable (File name - ico_print.gif)
In commonimages.xsl, the reference is defined as,
<xsl:variable name="print_page.gif" select="'../absimx/LrlPrintable_1_wo.gif'"/>
To change the icon file reference,
Add ico_print.gif file into <uwcinstall>/absimx.
Change the reference in xsl:variable tag for print_page.gif from '../absimx/LrlPrintable_1_wo.gif' to '../absimx/ico_print.gif '.
Example 2 - To add a banner image called AddressBook_banner.gif you need to do the following.
<xsl:variable name="AddressBook_banner.gif" select="'../absimx/AddressBook_banner.gif'"/>
Then add the image in the required position in the desired .xsl file as<img src="{$AddressBook_banner.gif}" width="200" height="29" title="SunONE Address Book"/>
Customizing Labels
All captions and displayable static items that are displayed in the Address Book can be customized. All the labels are defined in the dictionary-<lang>.xml file which is located under <uwcinstall>/WEB-INF/ui/html/abs directory. This XML file contains definitions in the following form
<word key="_Message">Message Actual Text</word>
The key is specified in the XSL file which is used to obtain the value of the <word> XML node. This value is eventually displayed during the rendering of XSL into HTML. In the XSL file, the key is specified in the <xsl:text> tag.
To customize a particular caption or a static label, change the text corresponding to desired key. To add new text,
The following example changes the label for 'New Contact' link on the Main page toolbar to 'Add Contact'. In the example ‘en’ is assumed to be the language in which the label is displayed.
In search.xsl, the label is coded as following:
Code Example 7-2 shows the code before modifying the default definition in dictionary-en-xml
Code Example 7-2 Code before Modification of the Default Definition in Dictionary -en-xml
<word key="_View Calendar...">View Calendar...</word>
Table 7-3 shows the code before modifying the default definition in dictionary -en-xml
Code Example 7-3 Customized Default Definition in Dictionary -en-xml
<word key="_View Calendar...">View Schedule...</word>
Customizing Style Sheets
In Address Book, style sheets play a significant role in the manner in which the UI is rendered in terms of look and feel as many items that are displayed in Address Book are associated with style sheets. Hence, the look and feel of Address Book pages and pop ups can be customized by modifying these style sheets.
These style sheets are defined in a CSS file which is included using the <link> HTML tag in the HTML <head> section of XSL files. These are referenced by assigning a 'class' attribute of HTML tags.
Code Example 7-4 shows the class attribute using HTML tags.
Code Example 7-5 shows the class attribute using XSL tags.
Code Example 7-5 Class attribute of XSL tags
<xsl:variable name="css-class" select="'TdActTdLst'"/>
....
<td>
<xsl:attribute name="class">
<xsl:value-of select="$css-class"/>
</xsl:attribute>
...
</td>
The Address Book has two separate CSS files for IE and Netscape. These files exist under <uwcinstall>/absimx and are named as,
What can be Customized in Style Sheets
1. Example of changing the definitions of an existing style sheet:
The definition of a primary button display is 'Btn1' which has the following definition in the CSS file.
Code Example 7-6 shows the code before changing the definition of a primary button display ‘Btnl’
Code Example 7-6 Before changing the definition of a primary button display ‘Btnl’
.Btn1 {background:#594fbf;color:#FFF;font-weight:bold;padding:2px 0px;margin:0px 0px 1px 0px;border:0px none #000; }
Code Example 7-7 shows how the class is used in the XSL file for the ‘Close’ button.
Code Example 7-7 Class used in the XSL file for the ‘Close’ button
<input class="Btn1" id="close" onblur="if (this.disabled==0) this.className='Btn1'" onmouseover="if (this.disabled==0) this.className='Btn1Hov'" onfocus="if (this.disabled==0) this.className='Btn1Hov'" onclick="parent.close()" tabIndex="1" onmouseout="if (this.disabled==0) this.className='Btn1'" type="button" name="close" value="Close">
Code Example 7-8 After changing the definition of a primary button display ‘Btnl’
.Btn1 {background:#fffff;color:#000;font-weight:bold;padding:2px 0px;margin:0px 1px 1px 0px;border:0px none #000; }
Code Example 7-8 shows the code after changing the definition of a primary button display.
2. Example of adding new style sheet definitions and change the class attribute reference for the desired HTML tag in XSL files.
You may add a different class definition altogether in the CSS file. In this case, the newly defined class needs to be assigned to the XSL file.
.EMPBtn { font-family: Arial, Helvetica, sans-serif; text-decoration none; font-weight:bold; color: #594fbf; }
In XSL file, the corresponding change would be
Code Example 7-9 After changing class attribute reference for the desired HTML tag
<input class=”EMPBtn” id=”close”onblur=”if(this.disabled==0)
this className=’Btnl’”onmouseover=”if)this.disabled==0) this.className=’Btn1Hov’”onfocus=”if(this.disabled==0) this.className=’Btn1Hov’”onclick=”parent.close()”tabIndex”1” onmouseout=”if (this.disabled==0) this.className=’Btnl’”type=”button”name=”close”value=”Close”>
Customizing the Main Search Page
The search page can be divided into following sections
Each of these sections are defined in templates which exist either under search.xsl or search-template.xsl. The search-template.xsl file contains commonly used templates shared by the Main Search Page, Search Address Book popup and Add Addresses popup.
These sections can be reorganized by modifying their respective positions. Table 7-1 shows the commonly used templates for search-template.xsl and search.xsl
Table 7-1 Commonly used templates in search-template.xsl and search.xsl
Sections
Template Name
File
Tabs
search-template-bookbar
search-template.xsl
Toolbar
search-template-toolbar
search.xsl
Search Pane
search-template-searchbar
search-template.xsl
Action Row
search-template-actionbar
search.xsl
Search Result Table
search-template-searchresult
search-template.xsl
Quick Add
quick-add
search.xsl
Search Result Table
This templates that refer to Search Result Table are,
- commonattributes-list.xsl. The templates defined in this file are used in the display of header captions in result table in a particular layout.
- entries-list.xsl. The templates defined in this file are used to display the actual data such as email, displayname, web address etc and so on in a particular format.
To customize the Search Main Page, Search Address Book popup, Add Addresses and Printable views, you need to change the layout information in these templates.
Customizing New/Edit Contact Window
The files pertaining to the new contact or edit contact window are,
Common code shared among new and edit window can be accessed from contact - common-editcontact.xsl
Table 7-2 shows the templates that are defined for the sections in New Contact or Edit Contact Window
Table 7-2 Templates applicable for New/Edit Contact Window
Sections
Template Name
File
Skip Links
-
addcontact.xsl and editcontact.xsl
Name and Company
nameAndCompany
common-editcontact.xsl
Phone
phone
common-editcontact.xsl
common-editcontact.xsl
Addresses
address
common-editcontact.xsl
IM Nicknames
IM
common-editcontact.xsl
Web Addresses
onlineInfos
common-editcontact.xsl
Notes
notes
common-editcontact.xsl
You can customize the window by changing labels or reordering the listed sections in any desired order.
In addcontact.xsl the 'edit-abperson' template calls the templates.
Code Example 7-10 shows the code that displays Address before Online information.
Code Example 7-10 Code that displays Address displayed before online information
<xsl:call-template name="address">
<xsl:with-param name="abperson" select="$abperson"/>
</xsl:call-template>
<xsl:call-template name="onlineInfos">
<xsl:with-param name="abperson" select="$abperson"/>
</xsl:call-template>
Code Example 7-11 shows how to display Online information before Address.
Code Example 7-11 Code that displays Online information before Address
<xsl:call-template name="onlineInfos">
<xsl:with-param name="abperson" select="$abperson"/>
</xsl:call-template>
<xsl:call-template name="address">
<xsl:with-param name="abperson" select="$abperson"/>
</xsl:call-template>
Customizing Phone
Address Book allows you to set five types of phones which are defined in phoneEmailAndIM. The five definitions of 'phone' template are called and the priority value is passed to them when the values are displayed in the drop-down list. You can change their respective priority orders.
Figure 7-1 Customizing Phone
Code Example 7-12 shows the default code where Work is displayed as priority 1 and home is displayed as priority 2.
Code Example 7-12 Default code wherein Work phone is displayed as priority 1 and home phone as priority 2
<option value="work">
<xsl:choose>
<xsl:when test="$abperson">
<xsl:choose>
<xsl:when test="$abperson/phone[@priority = $priority]">
<xsl:if test="$abperson/phone[@priority = $priority]/@type = 'work'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '1'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '1'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>_Work</xsl:text>
</option>
<option value="home">
<xsl:choose>
<xsl:when test="$abperson">
<xsl:choose>
<xsl:when test="$abperson/phone[@priority = $priority]">
<xsl:if test="$abperson/phone[@priority = $priority]/@type = 'home'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '2'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '2'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>_Home</xsl:text>
</option>
Code Example 7-13 shows how to change the code so that it displays Home phone as priority 1 and Work phone as priority 2.
Code Example 7-13 Code that displays Home as priority 1 and Work as priority 2
<option value="work">
<xsl:choose>
<xsl:when test="$abperson">
<xsl:choose>
<xsl:when test="$abperson/phone[@priority = $priority]">
<xsl:if test="$abperson/phone[@priority = $priority]/@type = 'work'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '2'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '2'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>_Work</xsl:text>
</option>
<option value="home">
<xsl:choose>
<xsl:when test="$abperson">
<xsl:choose>
<xsl:when test="$abperson/phone[@priority = $priority]">
<xsl:if test="$abperson/phone[@priority = $priority]/@type = 'home'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '1'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '1'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>_Home</xsl:text>
</option>
Customizing E-mail
Address Book allows to set three types of E-mail which are defined in phoneEmailAndIM. The three definitions of 'email' templates are called and the priority values are passed to them.You can change their priority orders.
Figure 7-2 Customizing E-mail
Customizing Dates
Address Book allows you to set Birthday and Anniversary dates. These two dates are defined in the 'importantDates' template. This template passes all relevant information to the 'date' template.
You may customize the labels, change layout such as size of fields for the dates or their respective positions.
Code Example 7-14 Default code that shows horizontally aligned fields and displays Birthday as the first field and Anniversary as the second
<tr>
<xsl:call-template name="date">
<xsl:with-param name="abperson" select="$abperson"/>
<xsl:with-param name="type" select="'birthday'"/>
<xsl:with-param name="index" select="'1'"/>
<xsl:with-param name="dateFormat" select="$dateFormat"/>
<xsl:with-param name="width" select="40"/>
<xsl:with-param name="fieldName" >
<xsl:value-of select="$fieldPrefix" />
<xsl:text>dateOfBirth</xsl:text>
</xsl:with-param>
<xsl:with-param name="label">
<xsl:text>_Birthday</xsl:text>
</xsl:with-param>
<xsl:with-param name="tabindex" select="'52'"/>
</xsl:call-template>
<xsl:call-template name="date">
<xsl:with-param name="abperson" select="$abperson"/>
<xsl:with-param name="type" select="'anniversary'"/>
<xsl:with-param name="index" select="'2'"/>
<xsl:with-param name="dateFormat" select="$dateFormat"/>
<xsl:with-param name="width" select="65"/>
<xsl:with-param name="fieldName" >
<xsl:value-of select="$fieldPrefix" />
<xsl:text>anniversary</xsl:text>
</xsl:with-param>
<xsl:with-param name="label">
<xsl:text>_Anniversary</xsl:text>
</xsl:with-param>
<xsl:with-param name="tabindex" select="'55'"/>
</xsl:call-template>
</tr>
Code Example 7-15 shows how to display the fields in a vertical layout and also rearranges Anniversary as the first date and Birthday as second
Code Example 7-15 Code that displays the field in a vertical layout and also rearranges Anniversary as the first date and Birthday as second
<tr>
<xsl:call-template name="date">
<xsl:with-param name="abperson" select="$abperson"/>
<xsl:with-param name="type" select="'anniversary'"/>
<xsl:with-param name="index" select="'1'"/>
<xsl:with-param name="dateFormat" select="$dateFormat"/>
<xsl:with-param name="width" select="65"/>
<xsl:with-param name="fieldName" >
<xsl:value-of select="$fieldPrefix" />
<xsl:text>anniversary</xsl:text>
</xsl:with-param>
<xsl:with-param name="label">
<xsl:text>_Anniversary</xsl:text>
</xsl:with-param>
<xsl:with-param name="tabindex" select="'52'"/>
</xsl:call-template>
</tr>
<tr>
<xsl:call-template name="date">
<xsl:with-param name="abperson" select="$abperson"/>
<xsl:with-param name="type" select="'birthday'"/>
<xsl:with-param name="index" select="'2'"/>
<xsl:with-param name="dateFormat" select="$dateFormat"/>
<xsl:with-param name="width" select="40"/>
<xsl:with-param name="fieldName" >
<xsl:value-of select="$fieldPrefix" />
<xsl:text>dateOfBirth</xsl:text>
</xsl:with-param>
<xsl:with-param name="label">
<xsl:text>_Birthday</xsl:text>
</xsl:with-param>
<xsl:with-param name="tabindex" select="'55'"/>
</xsl:call-template>
Customizing Web Addresses
Address Book allows you to set four web addresses for work, home, calendar and freebusy. These addresses are defined in the 'onlineInfos' template. The 'onlineInfos' template calls the following:
You may change the order in which these addresses similar to the examples illustrated above.
Customizing IM Nicknames
Address Book allows you to set two IM nicknames. The list of IM services that is supported by Address Book are listed in the drop-down menus. These two IM options are defined in 'phoneEmailAndIM' template which calls the 'im' template passing the relevant information.
- You may change the order of IMs by changing their priorities as illustrated in previous examples.
- You may also change the default selected services. The default services available in the drop down list are 'SunONE' and 'AIM'. The code checks for the passed priority and marks the appropriate option in the drop down as selected. You may shuffle the priority value in the code to select a different service. This code exists in the 'im' template.
Code Example 7-16 shows the default code that displays SunONE as the default selected service
Code Example 7-16 Default code that displays SunONE as the default service
<option value="SunONE">
<xsl:choose>
<xsl:when test="$abperson and $abperson/im[@priority=$priority]">
<xsl:if test="$abperson/im[@priority=$priority]/@service = 'SunONE'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority= '1'"> ---- This value is passed by 'phoneEmailAndIM' template to have this option default selected
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>iPlanet</xsl:text>
</option>
.....
<option value="Yahoo">
<xsl:choose>
<xsl:when test="$abperson and $abperson/im[@priority=$priority]">
<xsl:if test="$abperson/im[@priority=$priority]/@service = 'Yahoo'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '3'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>Yahoo</xsl:text>
</option>
Code Example 7-17 shows the modified code that displays Yahoo as the default Service
Code Example 7-17 Modified code that displays Yahoo as the default Service
<option value="SunONE">
<xsl:choose>
<xsl:when test="$abperson and $abperson/im[@priority=$priority]">
<xsl:if test="$abperson/im[@priority=$priority]/@service = 'SunONE'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority= '3'"> ---- This value is passed by 'phoneEmailAndIM' template to have this option default selected
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>iPlanet</xsl:text>
</option>
.....
<option value="Yahoo">
<xsl:choose>
<xsl:when test="$abperson and $abperson/im[@priority=$priority]">
<xsl:if test="$abperson/im[@priority=$priority]/@service = 'Yahoo'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:if test="$priority = '1'">
<xsl:attribute name="selected"/>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<xsl:text>Yahoo</xsl:text>
</option>
Customizing View Contact Window
The View contact window displays the sections in the same order as defined in new/edit contact window. You may customize this window by modifying labels, reordering sections, modifying layout, alignment in the page etc. The file to be changed for this window is 'viewcontact.xsl'
Customizing New Group or Edit Group Window
The files pertaining to the New Group or Edit Group window are,
The common code shared among new and edit contact are stored in common-editgroup.xsl
Table 7-3 lists the templates defined for the various sections in New Group or Edit group:
Table 7-3 Templates defined for various sections in the New/Edit group
Sections
Template Name
File
Group Details
groupDetails
common-editgroup.xsl
Group Members
groupMembers
common-editgroup.xsl
You can customize the window by changing labels or reordering the listed sections in a desired format.
Customizing Group Details
The Group Details section displays the following fields.
You may reorder the positions of these fields.Besides, you can also add the E-mail address which is supported for a group.
Code Example 7-18 shows the code to be used for adding the E-mail address which is supported for a group.
Code Example 7-18 Code to be used for adding the E-mail address which is supported for a group
<tr>
<td class="PropLabelAb" width="22%"><span class="Lbl2"><label for="email"><xsl:text>_Email</xsl:text></label></span></td>
<td class="PropInput" width="55%">
<input type="text" size="30" maxlength="30" name="{$fieldPrefix}piEmail1" id="email" tabindex="2" onChange="javascipt:this.value=this.value.trim()" onBlur="javascipt:this.value=this.value.trim()">
<xsl:attribute name="value">
<xsl:value-of select="/xslui/iab/bookentry/group/entry/email"/>
</xsl:attribute>
</input>
</td>
<td width="6%"> </td>
<td width="11%"> </td>
<td width="6%"> </td>
</tr>
Customizing the View Group Window
The View Group window displays the sections in the same order as defined in New Group or Edit Group window. You may customize this window by modifying labels, reordering sections, modifying layout, their alignment in the page etc. The file to be changed for this window is 'viewgroup.xsl'
Customizing Printable Window
The file for this window is ‘abprnlist.xsl. The window displays each contact/group in card format. You can customize the page by changing the layout or changing the order of fields and stylesheet items displayed in the page.
Customizing the Import/Export Address Book Window
The file that is used for modifying the import/export window is importexport.xsl. The page displays Import and Export sections.
Figure 7-3 Customizing the Import/Export Address Book Window
You can customize the page for
For example, let us consider modifying the listed format options. The format options listed are,
Code Example 7-19 shows the code before modifying the options list
Code Example 7-19 Code before modifying the options list
<td class="PropInput" width="80%">
<select name="importformat" tabindex="2">
<option value="ldif"><xsl:text>_Netscape Ldif</xsl:text></option>
<option value="csvus"><xsl:text>_Outlook CSV</xsl:text></option>
<option value="iabs"><xsl:text>_SunONE CSV</xsl:text></option>
<option value="vcard"><xsl:text>_vCard</xsl:text></option>
</select>
</td>
The options list can be changed to appear in the following order in drop down list.
Code Example 7-20 shows the code after modifying the options list
Code Example 7-20 Code after modifying the options list
<td class="PropInput" width="80%">
<select name="importformat" tabindex="2">
<option value="iabs"><xsl:text>_SunONE CSV</xsl:text></option>
<option value="csvus"><xsl:text>_Outlook CSV</xsl:text></option>
<option value="ldif"><xsl:text>_Netscape Ldif</xsl:text></option>
<option value="vcard"><xsl:text>_vCard</xsl:text></option>
</select>
</td>