Sun Java logo     Previous      Contents      Index      Next     

Sun logo
Sun Java System Messenger Express 6 2005Q1 Customization Guide 

Chapter 3
Customizing User Interface Features in Messenger Express

This chapter describes how to customize user interface features of Sun Java System Messenger Express.

This chapter contains the following sections:

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

Messenger Express Main Function Tabs, With Default Labels

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

To Modify the Main Function Tabs

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

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:

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

In this figure the Options tab has been moved to the right end of the toolbar, and the text of the tab "Label" has been changed to "Preferences."

Code Example 3-1 shows the necessary changes to be made in file main.js (layout).

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 shows the necessary changes to be made in file en/i18n.js (tab labels).

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

Mail tool bar

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

To Modify the Mailbox Tool Bar

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

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:

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

In this figure the "Search" tool is displayed as the first tool and the "Get Mail" tool has been renamed to "Get Messages."

Code Example 3-3 shows the necessary changes to be made in files mbox_fs.html (layout).

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 shows the necessary changes to be made in file en/i18n.js (text)

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

In the Message List window, you can customize the sorting order, change the names of the column headings and the text displayed on the "Collect External Mail" button.

You can modify the following in the Messenger Express Message List window:

To Modify the Message List Window

To modify the Message List window, edit the appropriate files as follows:

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

In this figure the most recently received mails are displayed first, and the ‘Collect External Mail’ button is renamed to ‘Get Messages From Another Server.’

Code Example 3-5 shows the necessary changes to be made in files main.js.

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

var defaults = new Array(

.....

’meSortOrder’, ’L’,

.....

)

Code Example 3-6 shows the necessary changes to be made in file en/i18n.js.

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

Message Display window

You can modify the following in the Messenger Express Message Display window:

To Modify the Message Display Window

To modify the Message Display window, edit the appropriate files as follows:

Example—Message Display Window Modifications

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

Figure 3-8  Example Message Display Window Modifications

In this figure the "To" field is displayed below the "Subject" field.

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

....

}

Modify the Message Display Window to Display User Defined Header Fields

This section describes how to add and display user defined header fields in the Message Display window.

To Display User Defined Header Fields

Edit the listFrameHTML(doc) function in the msg_fs.html file.

Example—Modifying the Message Display Window to Display User Defined Header Fields

The example shows how to display the user defined field X-document-id in the Message Display Window.

Code Example 3-8 shows the changes made to the function listFrameHTML() in the msg_fs.html file.

Code Example 3-8  Changes made to the msg_fs.html file.

function listFrameHTML(doc) {

....

s += header('from') + header('sentdate') + header('to') + header('cc') + header('bcc') + header('subject')

var hdrstr = getHeaderStr(main.msgFrame.hdr[0], 'X-document-id')

if(hdrstr != '') {

s += <tr><td nowrap align=right valign=top width=5%' + main.base_line + ' bgcolor=' + main.chrome2 + '>' + main.font() + html('X-document-id') + nbsp + '</td>\n<td ' + main.cellBgString + '>' + extra + main.font() + hdrstr + '</td></tr>\n'

}

....

}

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

Message Tool bar

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

To Modify the Message Tool Bar

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

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:

Example—Message Tool Bar Modifications

The example shown in Figure 3-10 moves “New Message” to the right and abbreviates the text from “Previous” to “Prev.”

Figure 3-10  Example Message Tool Bar Modifications

In this figure the "Compose" tool is moved to the right and "Previous" is abbreviated to "Prev."

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

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

function getToolbar() {

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-10 shows the necessary changes to be made in file en/i18n.js.

Code Example 3-10  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

Message Composition window

You can modify the following in the Messenger Express Message Composition window:

To Modify the Message Composition Window

To modify the Message Composition window, edit the appropriate files as follows:

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:

Example—Message Composition Window Modifications

The example shown in Figure 3-12 moves the Address tool to the left so that it appears first on the tool bar, and changes the text “Recipients” to “Send to.”

Figure 3-12  Example Message Composition Window Modifications

In this figure the address tool bar is moved to the left so that it appears first on the tool bar, and the field ‘Recipients’ is renamed as ‘Send to.’

Code Example 3-11 shows the necessary changes to be made in file comp_fs.html for swapping Address tool and Send tool.

Code Example 3-11  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-12 shows the necessary changes to be made in file en/i18n.js for changing the text “Recipients” to “Send to”.

Code Example 3-12  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-13 shows how to edit the main.js file to enable emoticons.

Code Example 3-13  Altering Composition Window to Enable Emoticons

var iconHREF = ’msg_svr_base/imx/’

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

Code Example 3-14  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.

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

    Sun Java System Messenger Express is shipped with French and English (United States) dictionaries, which are located in the msg_svr_base/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 Sun Java System Messenger Express spell checker.
  1. Copy the newly created language_name.hash file in the msg_svr_base/dict directory and restart the mshttpd service. When the mshttpd service is restarted, the Sun Java System Messenger Express spell checker is enabled.

    2. Code Example 3-15 shows how to create a German hash file (ge.hash) by using the buildhash utility.

    Code Example 3-15  Creating a German hash file by using the buildhash utility.

# cd /usr/Sun/server5/dict/bin

# ./buildhash german.dico german.aff ge.hash

# cp ge.hash ..

# /usr/Sun/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

Message Search window

You can modify the following on the Messenger Express Message Search window:

To Modify the Message Search Window

To modify the Message Search window, edit the appropriate files as follows:

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 default column headings.

Figure 3-14  Message Search Window With Changes

In this figure the column name "Delete" has been changed to "Remove."

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

Code Example 3-16  Altering the Tool Text

// Tool Bars

i18n[’delete’] = ’Remove’

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

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

function listFrameHTML() {

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

Message View window with the tool bar modifications

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

Code Example 3-18  Message View Window Tool Bar Modifications  

function getToolbar() {

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 Window

Messenger Express Address Window

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

To Modify the Address (Directory Lookup) Window

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

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

Example—Address (Directory Lookup) Window Modifications

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

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

Altering Address (Directory Lookup) window text

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

Code Example 3-19  Altering Address Window Text

//Search Control

function s_SearchCtrl() {

....

’<option value="3 200">Search the Sun Java System Directory</option>\n’ +

....

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

Code Example 3-20  Adding LDAP Server Search

//Search Control

function s_SearchCtrl() {

...

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

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

’</select>\n’ +

...

Adding a User Defined Directory to Search

You can add an additional user defined directory to the LDAP server search in the Address (Directory Lookup) Window. This can be accomplished by adding new entry for the LDAP host followed by the DN in the lang/lookup_fs.html.

To a Add User Defined Directory to Search to the Address (Directory Lookup) Window

Add a new entry specifying the LDAP host followed by the DN as the third parameter in the lang/lookup_fs.html file.

Example—Adding a User Defined Directory to Search to the Address (Directory Lookup) Window

The example shows the changes made to Address (Directory Lookup) Window to search for the user defined directory in the host florizel.com with the DN ou=People, o=florizel.com.

Code Example 3-21 shows how to add the user defined directory to the search list in the Address (Directory Lookup) Window. The file to edit is lang/lookup_fs.html.

Code Example 3-21  Adding user defined directory to search.

//Search Control

function s_SearchCtrl() {

...

’<option value="2 25 ldap://ldap.florizel.com/ou=People,o=florizel.com">’ +

’Search Florizel!</option>\n’ +

...

Note

Code Example 3-21 will work only if anonymous reads are allowed on the DN ou=People,o=florizel.com. Otherwise to bind to the host florizel.com, you need to search for the command ldap.msc in the file and add binddn and bindpwd as needed.

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

Messenger Express Options window

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

To Modify the Options Window

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

Example—Options Window Modifications

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

Figure 3-19  Example Options Window Modifications

In this figure the "Vacation Message " field is moved between "Personal Information " and "Password" field.

Code Example 3-22 shows the necessary changes to be made in the file opts_fs.html to move “Vacation Message” between “Personal Information” and “Password.”

Code Example 3-22  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-23 shows the necessary changes to be made in the file en/i18n.js to change the text “Sun Java System Messenger Express” to “Mozilla Super Speedy Web Mail.

Code Example 3-23  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

Messenger Express Folders window

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

To Modify the Folders Window

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

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

Example—Folders Window Modifications

The example shown in Figure 3-21 moves “Refresh” and “New Message” tools to the end of the toolbar.

Figure 3-21  Example Folders Window Modifications

The Update and Compose tools appear at right the end of the toolbar .

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

Code Example 3-24  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

....

}

Aligning the User Interface from Right to Left

By default the Menu tabs are aligned from left to right. When you have selected Arabic as the preferred language, then you need to customize Sun Java System Messenger Express to align the Menu tabs from right to left.

To align the User Interface from right to left

Code Example 3-25 shows the line that needs to be removed from the ar/i18n.js file.

Code Example 3-25  Aligning the User Interface from right to left

....

i18n['dir'] = 'ltr'

....

Disabling Filtering of the HTML Tags

For security reasons the Sun Java System Messenger Express server filters the HTML tags that are used to encode multimedia in mails which are in HTML format. The user can disable the filtering of these HTML tags in the mails.

To disable the filtering of the HTML tags:

Example — Disable the filtering of the HTML tags

The example shows how to disable filtering of JavaScript tags in the mails.

Code Example 3-26 shows the /html/main.js file before changing the file for disabling the filtering of Javascript tags in the mails.

Code Example 3-26  Before editing the main.js file.

....

load(msgFrame, msgHREF + 'msg.msc?sid=' + sid + '&security=' +

security + '&mbox=' + encode(selectmbox) + '&uid=' + num +

'&process=js,link,target,html' + binhex + maxtext +

get_charset())

....

Code Example 3-27 shows the changes to be made in the /html/main.js file for disabling the filtering of Javascript tags in the mails

Code Example 3-27  After altering the main.js file.

....

load(msgFrame, msgHREF + 'msg.msc?sid=' + sid + '&security=' +

security + '&mbox=' + encode(selectmbox) + '&uid=' + num +

'&process=link,target,html' + binhex + maxtext +

....

Supporting a New Locale

If the language is supported by the Messaging Server, you can add the language to the preferred language list and create the language-specific static webmail pages. These language-specific pages should be grouped in a subdirectory under the main document directory. The webmail code automatically detects the client’s language preference and fetches the webmail pages from the appropriate subdirectory.

To support a new language in Sun Java System Messenger Express:

Example—Supporting a New Locale

The example shows how to support Russian language in Sun Java System Messenger Express.

Code Example 3-28 shows the changes to be made to the i18n_preferredlanguagelist() funtion in the i18n.js file for supporting Russian language.

Code Example 3-28  Adding a language to the 18n_preferredlanguagelist() function in the i18n.js file

function i18n_preferredlanguagelist()

{

var s = '<select name="preferredLanguage">' +

'<option value="ar">Arabic</option>' +

'<option value="zh-CN">Chinese/Simplified</option>' +

'<option value="zh-TW">Chinese/Traditional</option>' +

'<option value="en">English</option>' +

'<option value="fr">French</option>' +

'<option value="de">German</option>' +

'<option value="it">Italian</option>' +

'<option value="ja">Japanese</option>' +

'<option value="ko">Korean</option>' +

'<option value="ru">Russian</option>' +

....

'</select>'

return s

}

Code Example 3-29 shows the changes to be made to the ru/i18n.js file for changing the charset in the i18N resource file.

Code Example 3-29  Changing the charset in the I18N Resource File.

// I18N Resource file

var i18n = new Array()

var fldr = new Array()

// DO NOT TRANSLATE AS STRINGS-JUST VALUES

i18n['client charset'] = 'iso-8859-5'

i18n['http charset'] = 'iso-8859-5'

i18n['fontface'] = 'PrimaSans BT,Verdana,sans-serif

i18n['fontface1'] = i18n['fontface']

i18n['fontface2'] = 'Times New Roman,Times,serif'

i18n['fontface3'] = 'Courier New,Courier,mono'

i18n['nbsp'] = '&nbsp;'



Previous      Contents      Index      Next     

Part No: 819-0108-10.   Copyright 2005 Sun Microsystems, Inc. All rights reserved.