Previous      Contents      Index      Next
Sun Java System Communications Express 6 2004Q2 Customization Guide

Chapter 5
Customizing User Interface Features in Mail

This chapter describes how to customize user interface features of the Mail component in Communications Express.

This chapter contains the following sections:

Customizing the Mailbox Tool Bar
Customizing Message Listing
Customizing the Message Display Window
Customizing the Message Composition Window
Aligning the User Interface from Right to Left(For Arabic only)

---

Customizing the Mailbox Tool Bar

This section describes how to modify the mailbox tool bar shown in Figure 5-1.

Figure 5-1  Communications Express Mailbox Tool Bar

You can modify the following on the 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

Customizing the Mailbox Tool Bar

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

To customize the layout within the tool bar and the associated graphics, edit the getToolbar() function in the mbox_fs_lr.html file.
To customize the text associated with the graphics in the Tool Bar, edit the i18n[ ] values for get mail, compose, search, new search, file selected message, delete, undelete, and expunge in the lang/i18n.js file

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

Get Mail: main.refreshMbox()
Compose: main.compose(”new”)
Search: srch()

Example—Mailbox Tool Bar Modifications

The code example shown in Figure 5-2 displays “Search” as the first tool and changes the text of “Get Mail” tool to “Get Messages.”

Figure 5-2  Example Mailbox Tool Bar Modifications

Code Example 5-1 shows the necessary edits to be made in the file mbox_fs_lr.html.

Code Example 5-1  Altered Tool Bar Layout (mbox_fs_lr.html)

function getToolbar() { if (!main.loaded) return ''; return nWMtoolbar(i18n['mbox search'], 'srch()', 'search','imx/LrlSearchMsg_wo_1.gif','imx/LrlSearchMsg_1.gif') + nWMtoolbar(i18n['compose'], 'main.compose(\'new\')', 'compose', 'imx/LrlNewMsg_wo_1.gif', 'imx/LrlNewMsg_1.gif') + nWMtoolbar(i18n['get mail'], 'main.check_mail = 1; main.displaySpecialMbox(\'Inbox\')', 'getmail', 'imx/LrlGetMail_wo_1.gif','imx/LrlGetMail_1.gif')+ nWMtoolbar(i18n["collect long"], 'main.collect()', 'collect', 'imx/LrlColExtMail_wo_1.gif', 'imx/LrlColExtMail_1.gif')+ }

Code Example 5-2 shows the necessary changes to be made in file en/i18n.js (text)

Code Example 5-2  Altering Tool Bar Text (en/i18n.js)

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

---

Customizing Message Listing

This section describes how to modify the Message List window shown in Figure 5-3.

Figure 5-3  Communications Express Message List Window

You can modify the following in the 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_lr.html 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, the listFrameHTML() function links the “Collect External Mail” hyperlink to collect() in main.js. An example of such a linking is shown in - Message List Window Modifications

Example - Message Listing Modifications

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

Figure 5-4  Example Message List Window Modifications

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

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

// POP3 Collection .... i18n[’collect long’] = ’Get Messages From Another Server’

---

Customizing the Message Display Window

This section describes how to modify the Message Display window shown in Figure 5-5.

Figure 5-5  Communications Express Message Display Window

You can modify the following in the Message Display window:

Change the message display
Alter the layout of the window
Change the text of the fields
Display user-defined header 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_lr.html file.
To customize the default text, edit the i18n[] values under Message Headers and Message in the lang/i18n.js file.

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_lr.html file.

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

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

Code Example 5-4 shows the edits made to the function listFrameHTML() in the msg_fs_lr.html file.

Code Example 5-4  Changes made to the msg_fs_lr.html file

function listFrameHTML(doc) { .... 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' } .... }

---

Customizing the Message Tool Bar

This section describes how to customize the message tool bar

Figure 5-6  Communications Express Message Tool Bar

You can modify the following in the message tool bar:

Change the layout of the toolbar 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 within the tool bar, edit the actionBar() function in the msg_fs_lr.html file.
To customize the texts associated with the graphics in the Tool Bar, edit the i18n[] values for compose, reply, reply all, forward, delete, undelete, previous, and next in the lang/i18n.js file.

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

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

// Tool Bars .... i18n[’previous’] = ’Prev’

---

Customizing the Message Composition Window

This section describes how to modify the Message Composition window

Figure 5-7  Communications Express Message Composition Window

You can modify the following in the 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 Composition window, edit the appropriate files as follows:

To customize the window, edit the compFrameHTML() function in the comp_fs_lr.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 msg_svr_base/html/imx directory.

Functionally, compFrameHTML() in comp_fs_lr.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_lr.html generates the “To”, “Cc”, and “Bcc” control area by calling i18n_compose_controls() in lang/i18n.js.

Code Example 5-6 shows the necessary changes to be made in the file en/i18n.js for changing the text “Recipients” to “Send to”.

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

Code Example 5-7  Altering Composition Window to Enable Emoticons

var iconHREF = ’msg_svr_base/imx/’

Code Example 5-8 shows how to edit main.js file to disable emoticons.

Code Example 5-8  Altering Composition Window to Disable Emoticons

var iconHREF = ’’

---

Aligning the User Interface from Right to Left(For Arabic only)

By default, the Menu tabs are aligned from left to right. If you have selected Arabic as the preferred language, then you need to customize Communications Express to align the Menu tabs from right to left.

To Align the User Interface From Right to Left

To align the User Interface from right to left you need to remove a line from the ar/i18n.js file.

Code Example 5-9 shows the line that needs to be added to the ar/i18n.js file.

Code Example 5-9  Aligning the User Interface from right to left

.... i18n['dir'] = 'ltr' ....

Previous      Contents      Index      Next

---

Copyright 2004 Sun Microsystems, Inc. All rights reserved.