Chapter 7 Customizing General Features in Address Book

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:

• Address Book Icons and Labels

• Style Sheets

• The Main Search Page

• New/Edit Contact Window

• View Contact Window

• New Group or Edit Group Window

• Group Details

• The View Group Window

• Printable Window

• The Import/Export Address Book Window

Address Book Icons and Labels

This section discusses how to customize address book icons and labels in Communications Express.

Customizing Icons

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.

Example 7–1 Changing Icon

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

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-<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:

Example 7–2 Customization of the Label

<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

Example 7–3 Code Before Modification of 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.

Example 7–4 Customized Default Definition in Dictionary-en-xml

<word key="_View Calendar...">View Schedule...</word>

Style Sheets

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.

Example 7–5 Class attribute of HTML tags

    <td class="TdActTdLst">......</td>


            

Example 7–6 shows the class attribute of XSL tags.

Example 7–6 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

What can be Customized in Style Sheets

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

Changing the Definitions of an Existing Style Sheet

The definition of a primary button display is Btn1 and is defined in the CSS file as shown in Example 7–7.

Example 7–7 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; }

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.

Example 7–8 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">

Example 7–9 shows the code after changing the definition of a primary button display.

Example 7–9 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;
 }

Adding New Style Sheet Definitions

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.

Example 7–10 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”>

The Main Search Page

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

Search Result Table

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.

New/Edit Contact Window

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

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.

Example 7–11 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.

Example 7–12 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>

            

Phone

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.

Figure 7–1 Customizing Phone

Example 7–13 displays the default code where Work phone is displayed as priority 1 and Home phone is displayed as priority 2.

Example 7–13 Default Code that Displays Work Phone 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>

               

Example 7–14 shows how to change the code so that it displays Home phone as priority 1 and Work phone as priority 2.

Example 7–14 Code that Displays Home Phone as Priority 1 and Work Phoneas 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>


               

Email

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.

Figure 7–2 Customizing Email

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 can customize the labels, change layout such as size of fields for the dates or their respective positions.

Example 7–15 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>

               

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

Example 7–16 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>

               

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:

• `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.

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.

Example 7–17 shows the default code that displays SunONE as the default selected service

Example 7–17 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>

               

Example 7–18 shows the modified code that displays Yahoo as the default Service

Example 7–18 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>

               

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, and so on. The file to be changed for this window is `viewcontact.xsl'

New Group or Edit Group Window

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

You can customize the window by changing labels or reordering the listed sections in a desired format.

Group Details

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.

Example 7–19 Code to be Used for Adding the Email Address that 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%">&nbsp;</td>
      <td width="11%">&nbsp;</td>
      <td width="6%">&nbsp;</td>
</tr>

            

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. The file to be modified for this window is 'viewgroup.xsl'

Printable Window

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 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:

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

Example 7–20 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

Example 7–21 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>