Sun Java System Communications Express 6 2005Q4 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

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

Figure 5–1 Communications Express Mailbox Tool Bar

Figure showing Communications Express mailbox toolbar.

You can modify the following on the mailbox tool bar:

Customizing the Mailbox Tool Bar

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

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

Example—Mailbox Tool Bar Modifications

Example 5–1 shows the necessary edits to be made in the file mbox_fs_lr.html to display “Search” as the first tool and changes the text of “Get Mail” tool to “Get Messages.


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')+
}

            

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


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

Figure 5–2 Communications Express Message List Window

Figure showing Communications Express message list window.

You can modify the following in the Message List window:

Modifying Message List Window

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

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

To display the most recently received mails first, and change the text on “Collect External Mail” button to “Get Messages From Another Server”, follow the code example provided in Example 5–3. This shows the necessary changes to be made in file en/i18n.js.


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

Figure 5–3 Communications Express Message Display Window

Figure showing Communications Express message display window.

You can modify the following in the Message Display window:

Modifying Message Display Window

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

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.

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

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


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–4 Communications Express Message Tool Bar

Figure showing the Communications Express message tool bar

You can modify the following in the message tool bar:

Modifying the Message Tool Bar

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

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


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–5 Communications Express Message Composition Window

Figure showing the Communications Express message composition window.

You can modify the following in the Message Composition window:

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

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.

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


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.

Example 5–7 shows how to edit the main.js file to enable emoticons.


Example 5–7 Altering Composition Window to Enable Emoticons


var iconHREF = 'msg_svr_base/imx/'

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


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.

ProcedureTo Align the User Interface From Right to Left

Step

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

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


Example 5–9 Aligning the User Interface from right to left


....

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