Chapter 3   Customizing User Interface Features


This chapter describes how to customize user interface features of iPlanet Messenger Express.

This chapter contains the following sections:

• Modifying the Main Function Tabs

• Modifying the Mailbox Tool Bar

• Modifying the Message List Window

• Modifying the Message Display Window

• Messenger Express Message Tool Bar

• Modifying the Message Composition Window

• Modifying Message Search Window

• Modifying the Address (Directory Lookup) Window

• Modifying the Options Window

Modifying the Main Function Tabs

---

This section describes how to modify the Messenger Express main function tabs shown in Figure 3-1.

Figure 3-1    Messenger Express Main Function Tabs, With Default Labels

You can modify the following on the Messenger Express main function tabs:

• Interchange the location of tabs

• Change the text of the tab labels

To Modify the Main Function Tabs

To modify the main function tabs, edit the appropriate files as follows:

• For tab layout, edit the toolFrame() function in the main.js file.

• For text used in the default tab labels, in the lang/i18n.js file, edit the i18n[] values for folders, message, and options in the // Tabs section, and help and logout in the // Tool Bars section.

• For text of the default folder name labels (including the initially displayed inbox tab label), edit the fldr[] values in the // Localized folder names section in the lang/i18n.js file.

Functionally, the tabs are constructed by the toolFrame() function. The toolFrame() function calls the tab()function in the main.js file and specifies the text of the tab label to be displayed.

The following functions, located in main.js, handle the default tabs:

• Folders: displayFolders()

• Inbox: displayMbox() or refreshMbox() (depending on the state selected)

• Message: selectMsg()

• Options: selectOptions()

• Help: help()

• Logout: logout()

Example—Main Function Tabs Modifications

The example shown in Figure 3-2 moves the Options tab to the right, and changes the text of its tab label to "Preferences."

Figure 3-2    Example Main Function Tabs Modifications

Code Example 3-1 and Code Example 3-2 show the necessary changes to be made in files main.js (layout) and en/i18n.js (tab labels).

Code Example 3-1    Altering Function Tabs Layout (main.js)

---

function toolFrame() {

.....

'<td width=30%>' + nbsp + '</td>\n' +

tab(i18n['options'], state == 'Options', 'selectOptions()') +

....

}

Code Example 3-2    Altering Function Tabs Labels (en/i18n.js)

---

// Tabs

i18n['folders'] = 'Folders'

i18n['message'] = 'Message'

i18n['pab'] = 'Addresses'

i18n['options'] = 'Preferences'

Modifying the Mailbox Tool Bar

---

This section describes how to modify the Messenger Express mailbox tool bar shown in Figure 3-3.

Figure 3-3    Messenger Express Mailbox Tool Bar

You can modify the following on the Messenger Express mailbox tool bar:

• Change the layout of the mailbox tool bar relative to the rest of the page

• Rearrange the order of tools

• Change the tools text

To Modify the Mailbox Tool Bar

To modify the mailbox tool bar, edit the appropriate files as follows:

• To customize the layout relative to the rest of the page, edit the toolFrame() function in the main.js file.

• To customize the layout within the tool bar and the associated graphics, edit the getToolbar() function in the mbox_fs.html file.

• To customize the text associated with the graphics in the Tool Bar, edit the i18n[] values get mail, compose, search, new search, file selected message, delete, undelete, and expunge in the lang/i18n.js file.

Functionally, toolFrame() in main.js calls getToolbar()in mbox_fs.html to get the HTML code to write out to the page.

The getToolbar() function in mbox_fs.html assembles the code and assigns the functions to the graphics by calling toolbar() in main.js, which takes care of items such as colors and text-only versions.

The getToolbar() function in mbox_fs.html also calls folderSelection() in main.js to generate the drop-down folder list.

The functions assigned by getToolbar() in mbox_fs.html that handle the tool clicks are:

• Get Mail: main.refreshMbox()

• Compose: main.compose("new")

• Search: parent.srch()

• Move Messages to Folder: parent.move()

• Delete: parent.delmsg(), parent.undelmsg(), parent.exmsg() (depending on whether the message is in the trash folder or not)

Example—Mailbox Tool Bar Modifications

The example shown in Figure 3-4 makes "Search" as the first tool and changes the text of the "Get Mail" tool to "Get Messages."

Figure 3-4    Example Mailbox Tool Bar Modifications

Code Example 3-3 and Code Example 3-4 show the necessary changes to be made in files mbox_fs.html (layout) and en/i18n.js (text).

Code Example 3-3    Altering Tool Bar Layout (mbox_fs.html)

---

function getToolbar() {

....

main.WMtoolbar(

....

(main.srch != '' ? i18n['new search'] : i18n['search']),

'parent.srch()', 'imx/search.gif', 27, 25, true,

i18n['get mail'], 'main.refreshMbox()', 'imx/pull.gif', 27, 25,

true, i18n['compose'], 'main.compose("new")', 'imx/compose.gif',

27, 25, true)

....

Code Example 3-4    Altering Tool Bar Text (en/i18n.js)

---

// Tool Bars

....

i18n['get mail'] = 'Get Messages'

Modifying the Message List Window

---

This section describes how to modify the Messenger Express message list window shown in Figure 3-5.

Figure 3-5    Messenger Express Message List Window

You can modify the following in the Messenger Express message list window:

• By default change the sorting order

• Change the text of the default column heading

• Change the text on "Collect External Mail" button

To Modify the Message List Window

To modify the message list window, edit the appropriate files as follows:

• To customize how the message list appears, edit the listFrameHTML() function in the mbox_fs.html file.

• To customize the order in which messages are listed, edit the defaults[] values near the top of the main.js file.

• To change the text of default column heading, edit the i18n[] values for search results, date, from, to, size, and subject in the lang/i18n.js file.

• To change the text on the "Collect External Mail" button, edit i18n['collect long] in the lang/i18n.js file.

Functionally, listFrameHTML() calls getSortHeader() in mbox_fs.html and assigns column headings with appropriate call to the sorting function sortMsgs() in main.js. The listFrameHTML() function also links the "Collect External Mail" hyperlink to collect() in main.js.

Example—Message List Window Modifications

The example shown in Figure 3-6 displays the most recently received mails first, and changes the text on "Collect External Mail" button to "Get Messages From Another Server".

Figure 3-6    Example Message List Window Modifications

Code Example 3-5 and Code Example 3-6 show the necessary changes to be made in files main.js and en/i18n.js.

Code Example 3-5    Altering Message List Window Layout (main.js)

---

var defaults = new Array(

.....

'meSortOrder', 'L',

.....

)

Code Example 3-6    Altering List Window Text (en/i18n.js)

---

// POP3 Collection

....

i18n['collect long'] = 'Get Messages From Another Server'

Modifying the Message Display Window

---

This section describes how to modify the Messenger Express message display window shown in Figure 3-7.

Figure 3-7    Messenger Express Message Display Window

You can modify the following in the Messenger Express message display window:

• Change the message display

• Alter the layout of, window

• Change the text of the fields

To Modify the Message Display Window

To modify the message display window, edit the appropriate files as follows:

• To customize how the message appears, edit the listFrameHTML(doc) function in the msg_fs.html file.

• To customize the default text, edit the i18n[] values under
  // Message Headers and // Message in the lang/i18n.js file.

• To customize the display defaults (word wrap), edit the defaults[] values main.js file.

Example—Message Display Window Modifications

The example shown in Figure 3-8 moves "Subject" before "To."

Figure 3-8    Example Message Display Window Modifications

Code Example 3-7 shows the necessary changes to be made in file msg_fs.html.

Code Example 3-7    Altering Message Display Window Layout

---

function listFrameHTML(doc) {

....

s += header('from') + header('date') + header('subject')+ header('to') + header('cc')

....

}

Modifying the Message Tool Bar

---

This section describes how to modify the Messenger Express message tool bar shown in Figure 3-9.

Figure 3-9    Messenger Express Message Tool Bar

You can modify the following in the Messenger Express message tool bar:

• Change the layout of the tool bar relative to the rest of the page

• Alter the layout within the tool bar

• Change the text associated with the graphics

To Modify the Message Tool Bar

To modify the message tool bar, edit the appropriate files as follows:

• To customize the layout relative to the rest of the page, edit the toolFrame() function in the main.js file.

• To customize the layout within the tool bar and the associated graphics, edit the getToolbar() function in the msg_fs.html file.

• To customize the texts associated with the graphics in the Tool Bar, edit the i18n[] values compose, reply, reply all, forward, delete, undelete, previous, and next in the lang/i18n.js file.

Functionally, getToolbar() in msg_fs.html assembles the code and assigns the functions to the graphics by calling toolbar() in main.js, which takes care of items such as colors and text-only versions.

The getToolbar() function in msg_fs.html also calls folderSelection() in main.js to generate the drop-down folder list.

The functions assigned by getToolbar() in msg_fs.html to handle the tools are:

• Compose: main.compose('new')

• Reply: main.compose('reply')

• Reply All: main.compose('replyall')

• Forward: main.compose('forward')

• Move Messages to Folder: parent.move()

• Delete and Undelete: parent.delmsg()

• Add all Addresses: parent.addAllAddresses()

• Previous: parent.prev()

• Next: parent.next()

• Close: parent.gotofolder()

Example—Message Tool Bar Modifications

The example shown in Figure 3-10 moves "Compose" to the right and abbreviates the text from "Previous" to "Prev."

Figure 3-10    Example Message Tool Bar Modifications

Code Example 3-8 and Code Example 3-9 show the necessary changes to be made in files msg_fs.html and en/i18n.js.

Code Example 3-8    Altering Message Tool Bar Layout (msg_fs.html)

---

var s

...

main.WMtoolbar(

null,null,'imx/spacer.gif',5,1,false,

i18n['close'], 'parent.gotofolder()', 'imx/cancel.gif" alt="' +i18n['msg close'], 24, 24, true,

null,null,'imx/spacer.gif',5,1,false,

i18n['compose'], 'main.compose("new")', 'imx/compose.gif" alt="' + i18n['msg compose'], 24, 24, true) +

<td><img src="imx/spacer.gif" width="1" height="1"></td>\n' +

....

Code Example 3-9    Altering Message Tool Bar Text (en/i18n.js)

---

// Tool Bars

....

i18n['previous'] = 'Prev'

Modifying the Message Composition Window

---

This section describes how to modify the Messenger Express message composition window shown in Figure 3-11.

Figure 3-11    Messenger Express Message Composition Window

You can modify the following in the Messenger Express message composition window:

• Change the location of the tools in the window

• Alter text associated with the tools

• Enable and disable emoticons

• Create your own dictionary

To Modify the Message Composition Window

To modify the message compositoin window, edit the appropriate files as follows:

• To customize the window, edit the compFrameHTML() function in the comp_fs.html file.

• To customize the text, edit the values under // Message Composition and // Tool Bars in the lang/i18n.js file.

• To enable and disable the emoticons, edit the variable iconHREF in the main.js file. By default, the emoticon files are located in server-root/html/imx directory.

Functionally, compFrameHTML() in comp_fs.html assembles the code and assigns the functions to the graphics by calling WMtoolbar() in main.js which also handles colors and text-only versions. The compFrameHTML() function in comp_fs.html generates the "To", "Cc", and "Bcc" control area by calling i18n_compose_controls() in lang/i18n.js.

The functions assigned by compFrameHTML() in comp_fs.html are:

• Send: parent.send('smtp')

• Address: parent.lookup()

• Attach: parent.attach()

• Save Draft: parent.send('draft')

• Spell Check: parent.spellchk()

• Text/HTML: parent.switchEditor()

• Help: main.help(1007399)

• Cancel: parent.cancel()

Example—Message Composition Window Modifications

The example shown in Figure 3-12 moves the Address tool first, and changes the text "Recipients" to "Send to."

Figure 3-12    Example Message Composition Window Modifications

Code Example 3-10 and Code Example 3-11 show the necessary changes to be made in files comp_fs.html and en/i18n.js.

Code Example 3-10    Altering Composition Window Layout (comp_fs.html)

---

function compFrameHTML() {

....

main.WMtoolbar(i18n['lookup'], 'parent.lookup()',

'imx/address.gif"

alt="' + i18n['lookup'], 27, 25, true, i18n['send'],

'parent.send(`smtp')', 'imx/send.gif " alt="'

+ i18n['compose_send'],27, 25, true)

...

}

Code Example 3-11    Altering Composition Window Text(en/i18n.js)

---

// Message Composition

....

i18n['recipient'] = 'Send To'

The emoticons appear on the screen if the Text/HTML option is set to HTML. By default the Text/HTML option is set to Text format.

Code Example 3-12 shows how to edit the main.js file to enable emoticons.

Code Example 3-12    Altering Composition Window to Enable Emoticons

---

var iconHREF = 'server-root/imx/'

Code Example 3-13 shows how to edit main.js file to disable emoticons.

Code Example 3-13    Altering Composition Window to Disable Emoticons

---

var iconHREF = ''

To Include Additional Dictionary for Spell Check

1. Get the dictionary file and the affix file for the language you want to add to your dictionary.

   The dictionary file contains language-specific vocabulary and the affix file contains grammar rules for the specific language. For information on dictionary and affix files refer to the site: http://fmg-www.cs.ucla.edu/fmg-members/geoff/ispell-dictionaries.html

   Messenger Express is shipped with French and English (United States) dictionaries, which are located in the server-root/dict directory.

2. Use the buildhash utility to create a platform-specific and language-specific hash file from the dictionary and affix files. This hash file is used by the Messenger Express spell checker.

   To run the buildhash utility, download the ispell source files available at the site: http//www.gnu.org/software/ispell/ispell.html or, use the buildhash utility in the server-root/dict/bin directory. The syntax for the buildhash utility is:

   buildhash dictionary_file affix_file language_name.hash

   The language_name in the language_name.hash file is the two-letter language code used by Messenger Express (such as: en for English, fr for French).

   To determine your language's two-letter code, enter the command:

   server-root/msg-instance/configutil | grep local.supportedlanguages
   

   ---

   Note	The double-byte character set is not supported by the Messenger Express spell checker.

   ---

   
   

3. Copy the newly created language_name.hash file in the server-root/dict directory and restart the mshttpd service. When the mshttpd service is restarted, the Messenger Express spell checker is enabled.

   For example, if you want to create a German hash file (ge.hash) by using the buildhash utility, enter:

   # cd /usr/iplanet/server5/dict/bin # ./buildhash german.dico german.aff ge.hash # cp ge.hash .. # /usr/iplanet/server5/msg-budgie/start-msg http

Modifying Message Search Window

---

This section describes how to modify the Messenger Express message search window shown in Figure 3-13.

Figure 3-13    Message Search Window

You can modify the following on the Messenger Express message search window:

• Change the layout of the window

• Change the text associated with the tool

• Change the tool bar layout in the message view window

To Modify the Message Search Window

To modify the message search window, edit the appropriate files as follows:

• To alter the layout of the window, edit the listFrameHTML() function in the file /en/searchMessage.html.

• To change the text associated with the tool, edit the file en/i18n.js.

• To alter the tool bar in the message view window, edit the getToolbar() function in the seachmsg_fs.html file.

Example—Message Search Window Modifications

The example shown in Figure 3-14 changes the text associated with the tool "Delete" to "Remove". It also shows how to interchange the appearance of the defalult column headings.

Figure 3-14    Message Search Window With Changes

Code Example 3-14 shows the changes to be made in file en/i18n.js, to change the text associated with the tool.

Code Example 3-14    Altering the Tool Text

---

i18n['delete'] = 'Remove'

Code Example 3-15 shows the necessary changes to be made in the searchMessage.html file.

Code Example 3-15    Interchanging the Order of Appearance of the Default Column Headings

---

var i, msg

....

s += main.tableStart + '<form name="form1"><tr bgcolor=' +

main.chrome2 + '>\n'

s += '<td align="center" width=1% nowrap>' + main.font() +

i18n['selectLabel'] + '</td>\n'

s += '<td align="center" width=5% nowrap><img src="../imx/attach.gif"

alt="' + i18n['msg Attachment'] + '" width=16 height=16' +

(IE >= 4 || NN > 0 ? ' hspace=2>' : '>') + getSortHeader('') +

'</td>\n'

s += '<td align="center" width=1% nowrap><img src="../imx/high-0.gif"

alt="' + i18n['msg priority'] + '" width=16 height=16' +

(IE >= 4 || NN > 0 ? ' hspace=2>' : '>') + getSortHeader('') +

'</td>\n'

s += '<td align="left" width=1% nowrap>' + getSortHeader('') +

'</td>\n'

...

The example shown in Figure 3-15 alters the tool bar layout in the message view window.

Figure 3-15    Message View Window with the Tool bar Modifications

Code Example 3-16 shows the necessary changes to be made in the file seachmsg_fs.html to alter the tool bar layout.

Code Example 3-16    Message View Window Tool Bar Modifications  

---

var s

....

main.WMtoolbar(

....

i18n['close'], 'parent.closeMe()', 'imx/cancel.gif" alt="' +

i18n['msg close'], 27, 25, true,

null, null, 'imx/divider.gif', 2, 24, false,

i18n['compose'], 'main.compose("new")', 'imx/compose.gif" alt="'

+ i18n['msg compose'], 27, 25, true,

i18n['reply'], 'main.compose("reply")', 'imx/reply.gif" alt="' +

i18n['msg reply'], 27, 25, enable) +

'<td nowrap>' + main.font(1) + main.nbsp +

main.folderSelection('folderList',

'parent.move(options[selectedIndex].value);selectedIndex=0',

i18n['file msg'], false,

main.mboxFrame.mbox,'',getsharedfolders())+ '</td>' +

....

Modifying the Address (Directory Lookup) Window

---

This section describes how to modify the Messenger Express address (directory lookup) window shown in Figure 3-16.

Figure 3-16    Messenger Express Address (Directory Lookup) Window

You can modify the following in the address (directory lookup) window:

• Change overall window appearance

• Alter search controls and their text

• Add additonal LDAP server search

• Alter all other texts

To Modify the Address (Directory Lookup) Window

To modify the address window, edit the appropriate files as follows:

• To customize the overall window appearance, edit the getSearchResult() and idxHTML() functions in the lookup.js file.

• To customize other text, edit the // LDAP Lookup values in the lang/lookup_fs.html file.

• To add additional LDAP server search, add new entries specifying the LDAP host followed by the DN as the third parameter, edit the lang/lookup_fs.html file.

Functionally, searchFrameHTML() and addFrameHTML() assign the following functions to the buttons:

• Search: parent.doSearch()

• Cancel: parent.cancel()

Example—Address (Directory Lookup) Window Modifications

The example shown in Figure 3-17 changes "Search Corporate directory" to "Search the iPlanet Directory" and adds the LDAP server search "Search Yahoo!" to the search list.

Figure 3-17    Example Address (Directory Lookup) Window Modifications

Code Example 3-17 shows the necessary changes to be made in en/lookup_fs.html.

Code Example 3-17    Altering Address Window Text

---

function s_SearchCtrl() {

....

'<option value="3 200">Search the iPlanet Directory</option>\n' +

....

Code Example 3-18 shows how to add LDAP server search to the list. The file to edit is en/lookup_fs.html.

Code Example 3-18    Adding LDAP Server Search

---

//Search Control

function s_SearchCtrl() {

...

'<option value="2 25 ldap://ldap.yahoo.com/">' +

'Search Yahoo!</option>\n' +

'</select>\n' +

...

Modifying the Options Window

---

This section describes how to modify the Messenger Express options window shown in Figure 3-18.

Figure 3-18    Messenger Express Options Window

You can modify the following on the Messenger Express options window:

• Change the layout of the window

• Change the default text

To Modify the Options Window

To modify the options window, edit the appropriate files as follows:

• To customize the options and the layout of the options, edit the toggleFrameHTML() function in the opts_fs.html file.

• To customize default text, edit the i18n[] values under
  // Options in the lang/i18n.js file.

Example—Options Window Modifications

The example shown in Figure 3-19 moves "Vacation Message" between "Personal Information" and "Password," and changes the text "Messenger Express" to "Mozilla Super Speedy Web Mail."

Figure 3-19    Example Options Window Modifications

Code Example 3-19 and Code Example 3-20 show the necessary changes to be made in the files opts_fs.html and en/i18n.js.

Code Example 3-19    Altering Options Window Layout (opts_fs.html) 

---

function toggleFrameHTML() {

....

getToggle(main.i18n['personal'], 'personal',

'javascript:parent.toggle("personal")') +

getToggle(main.i18n['vacation'], 'vacation',

'javascript:parent.toggle("vacation")') +

getToggle(main.i18n['password'], 'password',

'javascript:parent.toggle("password")') +

....

}

Code Example 3-20    Altering Options Window Text (en/i18n.js)

---

// Options

....

i18n['passwd exp'] = 'Use this form to change the password you use to access Mozilla Super Speedy Web Mail.'

Modifying the Folders Window

---

This section describes how to modify the Messenger Express folders window shown in Figure 3-20.

Figure 3-20    Messenger Express Folders Window

You can modify the following in the Messenger Express folders window:

• Change the location of the tools

• Change the text associated with the tools or folders

To Modify the Folders Window

To modify the folders window, edit the appropriate files as follows:

• To rearrange the tools on the folders toolbar, edit the getToolbar() function in the fldr_fs.html file.

• To customize the column headings, appearance of the buttons, and color of the window, edit the listFrameHTML() function in the fldr_fs.html file.

• To customize the text of the "Collect External Mail" button, edit i18n['collect long] in the lang/i18n.js file.

• To customize any other text, edit the // Folders section in lang/i18n.js.

The functions assigned to the tools and links by getToolbar() and listFrameHTML() in fldr_fs.html are:

• Update: main.refreshFolders()

• Compose: main.compose('new')

• New: parent.addFolder()

• Rename: parent.renFolder()

• Share: parent.setfolder()

• Move Folder: parent.moveFolder(options[selectedIndex].value)

• Delete: parent.delFolder()

• Subscribe: main.subscribeFolder()

• Unsubscribe: parent.unsubscribeFolder()

Example—Folders Window Modifications

The example shown in Figure 3-21 moves "Update" and "Compose" tools to the end of the toolbar.

Figure 3-21    Example Folders Window Modifications

Code Example 3-21 shows the changes to be made in the file fldr_fs.html.

Code Example 3-21    Altering Folders Window Layout  

---

function getToolbar() {

....

main.WMtoolbar(

i18n["new folder"], 'parent.addFolder()', 'imx/fldr_new.gif"

alt="' + i18n['folder new'], 24, 24, true,

i18n['rename'], 'parent.renFolder()', 'imx/fldr_edit.gif" alt="' +

i18n['folder rename'], 24, 24, true,

....

main.WMtoolbar(

null, null, 'imx/spacer.gif', 2, 24, false,

i18n['update'] ? i18n['update'] : i18n['get mail'],

'main.refreshFolders()', 'imx/Update_Folder.gif" alt="' +

i18n['folder update'], 24, 24, true,

i18n['compose'], 'main.compose("new")', 'imx/compose.gif',

alt="'+ i18n['msg compose'], 24, 24, true

....

}