The 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 user interface is handled by XML/XSL files that contain XSL tags, static HTML, and JavaScript. The XSL and JavaScript code are used to display dynamic data and perform actions or form operations. 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 <uwc-deployed-path>/WEB-INF/ui/html/abs directory.
This chapter contains information on customizing the following in Address Book:
This section discusses how to customize address book icons and labels in Communications Express.
All the icons that are used for display in Address Book are defined under two files :
search-images.xsl - Contains most of the icon references that are used in the search result table.
commonimages.xsl - Contains common icon references.
All Address Book related images are located under <uwc-deployed-path>/WEB-INF/ui/html/abs/. 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.
Example 7–1 show how you can modify icons.
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 <uwc-deployed-path>/absimx.
Change the reference in xsl:variable tag for print_page.gif from `../ absimx/LrlPrintable_1_wo.gif ' to `../ absimx/ico_print.gif '.
All captions and displayable static items that are displayed in the Address Book can be customized. All the labels are defined in the dictionary-<locale>.xml file which is located under <uwc-deployed-path>/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 the desired key. To add new text:
Add new <word> tag with the appropriate key and the prefix `_'
Add the <xsl:text> tag with the key as the tag value in the XSL file
Example 7–2 changes the label of the `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:
<a class="ToolLbl" href="javascript:void(0)"> <xsl:attribute name="onClick"> <xsl:text>javascript:openWinAutoHeight ('addcontact-main.xml?bookid=</xsl:text> <xsl:value-of select="$selectedBook/entry/@entryID"/> <xsl:text>', 'NewContact', 'scrollbars=yes,resizable=yes,width=700');</xsl:text> </xsl:attribute> <xsl:text>_New Contact</xsl:text> -----> Label Definition </a> |
Example 7–3 shows the code before modifying the default definition in dictionary-en-xml
<word key="_View Calendar...">View Calendar...</word>
Example 7–4 shows the customized code after modifying the default definition in dictionary -en-xml.
<word key="_View Calendar...">View Schedule...</word>
In Address Book, style sheets play a significant role in the manner in which the user interface 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 that is included using the <link> HTML tag in the HTML <head> section of the XSL files. These style sheets are referenced by assigning a `class' attribute of HTML tags.
Example 7–5 shows the class attribute of HTML tags.
<td class="TdActTdLst">......</td> |
Example 7–6 shows the 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 Internet Explorer and Netscape. These files exist in <uwc-deployed-path>/absimx and are named as:
ab_css_ie5win.css for Internet Explorer
ab_css_ns6up.css for Netscape
You can change the definition of an existing style sheet but , you need not change the class attribute reference.
You can add new style sheet definitions and change the class attribute reference for the desired HTML tag in XSL files.
The definition of a primary button display is Btn1 and is defined in the CSS file as shown in Example 7–7.
.Btn1 {background:#594fbf;color: #FFF;font-weight:bold;padding:2px 0px;margin: 0px 0px 1px 0px;border:0px none #000; } |
For more information on how to use the class in the XSL file, see Displaying User Defined Header Fields. Example 7–8 shows how the class is 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"> |
Example 7–9 shows the code after changing the definition of a primary button display.
Btn1 { background:#fffff;color:#000; font-weight:bold;padding:2px 0px; margin:0px 1px 1px 0px; border:0px none #000; } |
You can add new style sheet definitions and also change the class attribute reference for the desired HTML tag in XSL files. You can add a different class definition altogether in the CSS file, where 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; }
Example 7–10 shows the corresponding changes in the XSL file.
<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”> |
The search page can be divided into following sections:
Tabs
Toolbar Pane
Search Pane
Action Row
Search Result Table
Quick Add Pane
Each of these sections are defined in templates that exist either in search.xsl or search-template.xsl. The search-template.xsl file contains commonly used templates shared by the Main Search Page, Search Address Book pop-up, and Add Addresses pop-up.
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 |
The 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 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.
The files pertaining to the new contact or edit contact window are:
New contact - addcontact.xsl
Edit contact - editcontact.xsl
Common code shared among new and edit window can be accessed from common-editcontact.xsl
Table 7–2 lists 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.
Example 7–11 shows the code that displays Address 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> |
Example 7–12 shows how to display 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> |
Address Book allows you to set five types of phones that 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 the priority orders.
Example 7–13 displays the default code where Work phone is displayed as priority 1 and Home phone is displayed 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> |
Example 7–14 shows how to change the code so that it displays Home phone as priority 1 and Work 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 = '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> |
Address Book allows you to set three types of email that are defined in phoneEmailAndIM. The three definitions of email templates are called and the priority values are passed to them. You can change the priority orders.
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 can customize the labels, change layout such as size of fields for the dates or their respective positions.
<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> |
Example 7–16 shows how to display the fields 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> |
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:
`weburl' that passes the priority for ordered display
`calendar' with type=”calendar” for calendar URL and type=”freebusy” for freebusyurl ”
You can change the order in which these addresses appear in a way similar to the examples illustrated above.
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.
Example 7–17 shows the default code that displays SunONE as the default selected 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> |
Example 7–18 shows the 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> |
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, and so on. The file to be changed for this window is `viewcontact.xsl'
The files pertaining to the New Group or Edit Group window are:
New Group - addgroup.xsl
Edit Group - editgroup.xsl
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.
The Group Details section displays the following fields:
Display name
Description
Web URL
Calendar URL
You can reorder the positions of these fields. You can also add the email address which is supported for a group.
Example 7–19 displays the code to be used for adding the email 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> |
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. The file to be modified for this window is 'viewgroup.xsl'
The file that is used for modifying the Printable 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.
The file that is used for modifying the import/export window is importexport.xsl. The page displays Import and Export sections.
You can customize the page for:
Labels
Swapping the Import and Export sections
Change the format options displayed in drop-downs
Layout
For example, let us consider modifying the listed format options. The format options listed are:
Netscape Communication Address Book (LDIF)
Microsoft Outlook CSV
Address Book CSV
Mozilla Thunderbird CSV
vCard
Example 7–20 shows the 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="iabs"><xsl:text>_Thunderbird CSV</xsl:text></option> <option value="vcard"><xsl:text>_vCard</xsl:text></option> </select> </td> |
The options list can be modified to display in the following order in drop down list.
Address Book CSV
Microsoft Outlook CSV
Netscape Communication Address Book (LDIF)
Mozilla Thunderbird CSV
vCard
Example 7–21 shows the 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="ldif"><xsl:text>_Thunderbird CSV</xsl:text></option> <option value="vcard"><xsl:text>_vCard</xsl:text></option> </select> </td> |