Sun Java System Communications Express 6 2005Q4 Customization Guide

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

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

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

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


Example 7–3 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–4 shows the code before modifying the default definition in dictionary-en-xml


Example 7–4 Code before Modification of the Default Definition in Dictionary -en-xml

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

Example 7–5 shows the code before modifying the default definition in dictionary -en-xml



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

Example 7–6 shows the class attribute using HTML tags.


Example 7–6 Class attribute of HTML tags


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


            

Example 7–7 shows the class attribute using XSL tags.


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

Example 7–8 shows the code before changing the definition of a primary button display ”Btnl’


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

               

Displaying User Defined Header Fields shows how the class is used in the XSL file for the ”Close’ button.


Example 7–9 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–10 shows the code after changing the definition of a primary button display.


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


               

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


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

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 

lcommon-editcontact.xs

Phone 

phone 

common-editcontact.xsl

Email 

email 

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–12 shows the code that displays Address before Online information.


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

            

Example 7–13 shows how to display Online information before Address.


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

Figure showing the five types of phone entries along with a drop-down
list of the priority order.

Example 7–14 shows the default code where Work is displayed as priority 1 and home is displayed as priority 2.


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

               

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


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

Figure showing the three types of E-mail entries along with a
drop-down list of their priority order.

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.


Example 7–16 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–17 shows how to display the fields in a vertical layout and also rearranges Anniversary as the first date and Birthday as second


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

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


Example 7–18 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–19 shows the modified code that displays Yahoo as the default Service


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

Example 7–20 shows the code to be used for adding the E-mail address which is supported for a group.


Example 7–20 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%">&nbsp;</td>
      <td width="11%">&nbsp;</td>
      <td width="6%">&nbsp;</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.

Figure showing 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,

Example 7–21 shows the code before modifying the options list


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

Example 7–22 shows the code after modifying the options list


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