This chapter describes how to customize user interface features of Sun Java System Messenger Express.
This chapter contains the following sections:
This section describes how to modify the Sun Java System Messenger Express main function tabs shown in Modifying the Main Function Tabs.
You can modify the following on the Sun Java System Messenger Express main function tabs:
Interchange the location of tabs
Change the text of the tab labels
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:
The example shown in Example—Main Function Tabs Modifications moves the Options tab to the right, and changes the text of its tab label to “Preferences.”
Example—Main Function Tabs Modifications shows the necessary changes to be made in file main.js (layout).
function toolFrame() { ..... ’ <td width=30%\>’ + nbsp + ’</td\>\\n ’ + tab(i18n[’options’], state == ’Options’, ’selectOptions()’) + .... } |
Example—Main Function Tabs Modifications shows the necessary changes to be made in file en/i18n.js (tab labels).
// Tabs i18n[’folders’] = ’Folders’ i18n[’message’] = ’Message’ i18n[’pab’] = ’Addresses’ i18n[’options’] = ’ Preferences ’ |
This section describes how to modify the Sun Java System Messenger Express mailbox tool bar shown in Modifying the Mailbox Tool Bar.
You can modify the following on the Sun Java System 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, 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:
Delete: parent.delmsg(), parent.undelmsg(), parent.exmsg() (depending on whether the message is in the trash folder or not)
The example shown in Example—Mailbox Tool Bar Modifications makes “Search” as the first tool and changes the text of the “Get Mail” tool to “Get Messages.”
Example—Mailbox Tool Bar Modifications shows the necessary changes to be made in files mbox_fs.html (layout).
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) .... } |
Example—Mailbox Tool Bar Modifications
shows the necessary changes to be made in file en/i18n.js (text) |
// Tool Bars .... i18n[’get mail’] = ’ Get Messages ’ |
This section describes how to modify the Sun Java System Messenger Express Message List window shown in Modifying the Message List Window.
You can modify the following in the Sun Java System 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, 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.
The example shown in Example—Message List Window Modifications displays the most recently received mails first, and changes the text on “Collect External Mail” button to “Get Messages From Another Server”.
Example—Message List Window Modifications shows the necessary changes to be made in files main.js.
var defaults = new Array( ..... ’meSortOrder’, ’ L ’, ..... ) |
Example—Message List Window Modifications shows the necessary changes to be made in file en/i18n.js.
// POP3 Collection .... i18n[’collect long’] = ’ Get Messages From Another Server ’ |
This section describes how to modify the Sun Java System Messenger Express Message Display window shown in Modifying the Message Display Window.
You can modify the following in the Sun Java System Messenger Express Message Display window:
Change the message display
Alter the layout of, window
Change the text of the fields
Display User Defined Header Fields
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.
The example shown in Example—Message Display Window Modifications moves “Subject” before “To.”
Example—Message Display Window Modifications shows the necessary changes to be made in file msg_fs.html.
function listFrameHTML(doc) { .... s += header(’from’) + header(’date’) + header(’subject’)+ header(’to’) + header(’cc’) .... } |
This section describes how to add and display user defined header fields in the Message Display window.
Edit the listFrameHTML(doc) function in the msg_fs.html file.
The example shows how to display the user defined field X-document-id in the Message Display Window.
Example—Modifying the Message Display Window to Display User Defined Header Fields shows the changes made to the function listFrameHTML() in 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' } .... } |
This section describes how to modify the Sun Java System Messenger Express message tool bar shown in Modifying the Message Tool Bar.
You can modify the following in the Sun Java System 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, 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()
The example shown in Example—Message Tool Bar Modifications moves “New Message” to the right and abbreviates the text from “Previous” to “Prev.”
Example—Message Tool Bar Modifications shows the necessary changes to be made in file 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’ + .... |
Example—Message Tool Bar Modifications shows the necessary changes to be made in file en/i18n.js.
// Tool Bars .... i18n[’previous’] = ’ Prev ’ |
This section describes how to modify the Sun Java System Messenger Express Message Composition window shown in Modifying the Message Composition Window.
You can modify the following in the Sun Java System 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, 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 msg_svr_base/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()
The example shown in Example—Message Composition Window Modifications moves the Address tool to the left so that it appears first on the tool bar, and changes the text “Recipients” to “Send to.”
Example—Message Composition Window Modifications shows the necessary changes to be made in file comp_fs.html for swapping Address tool and Send tool.
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) } |
Example—Message Composition Window Modifications shows the necessary changes to be made in file en/i18n.js for changing the text “Recipients” to “Send to”.
// 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—Message Composition Window Modifications shows how to edit the main.js file to enable emoticons.
var iconHREF = ’ msg_svr_base /imx/ ’ |
Example—Message Composition Window Modifications shows how to edit main.js file to disable emoticons.
var iconHREF = ’’ |
This section describes how to modify the Sun Java System Messenger Express Message Search window shown in Modifying Message Search Window.
You can modify the following on the Sun Java System 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, 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.
The example shown in Example—Message Search Window Modifications changes the text associated with the tool “Delete” to “Remove”. It also shows how to interchange the appearance of the default column headings.
Example—Message Search Window Modifications shows the changes to be made in file en/i18n.js, to change the text associated with the tool.
// Tool Bars i18n[’delete’] = ’ Remove ’ |
Example—Message Search Window Modifications shows the necessary changes to be made in the searchMessage.html file.
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 Example—Message Search Window Modifications alters the tool bar layout in the Message View window.
Example—Message Search Window Modifications shows the necessary changes to be made in the file seachmsg_fs.html to alter the tool bar layout.
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\>’ + .... |
This section describes how to modify the Sun Java System Messenger Express Address (directory lookup) window shown in Modifying the 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
Add User Defined Directory to Search
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()
The example shown in Example—Address (Directory Lookup) Window Modifications changes “Search Corporate directory” to “Search the Sun Directory” and adds the LDAP server search “Search Yahoo!” to the search list.
Example—Address (Directory Lookup) Window Modifications shows the necessary changes to be made in en/lookup_fs.html.
//Search Control function s_SearchCtrl() { .... ’<option value="3 200"\> Search the Sun Java System Directory </option\>\\n’ + .... |
Example—Address (Directory Lookup) Window Modifications shows how to add LDAP server search to the list. The file to edit is en/lookup_fs.html.
//Search Control function s_SearchCtrl() { ... ’<option value="2 25 ldap://ldap.yahoo.com/"\>’ + ’Search Yahoo!</option\>\\n’ + ’</select\>\\n’ + ... |
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.
Add a new entry specifying the LDAP host followed by the DN as the third parameter in the lang/lookup_fs.html file.
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.
Example—Adding a User Defined Directory to Search to the Address (Directory Lookup) Window 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.
//Search Control function s_SearchCtrl() { ... ’<option value="2 25 ldap://ldap.florizel.com/ou=People,o=florizel.com"\>’ + ’Search Florizel!</option\>\\n’ + ... |
Example—Adding a User Defined Directory to Search to the Address (Directory Lookup) Window 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 provide the values for binddn and bindpwd in the ldap.msc file.
This section describes how to modify the Sun Java System Messenger Express Options window shown in Modifying the Options Window.
You can modify the following on the Sun Java System Messenger Express Options window:
Change the layout of the window
Change the default text
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.
The example shown in Example—Options Window Modifications moves “Vacation Message” between “Personal Information” and “Password,” and changes the text “Sun Java System Messenger Express” to “Mozilla Super Speedy Web Mail.”
Example—Options Window Modifications shows the necessary changes to be made in the file opts_fs.html to move “Vacation Message” between “Personal Information” and “Password.”
function toggleFrameHTML() { .... getToggle(main.i18n[’personal’], ’personal’, ’javascript:parent.toggle(”personal”)’) + getToggle(main.i18n[’vacation’], ’vacation’, ’javascript:parent.toggle(”vacation”)’) + n.i18n[’password’], ’password’, ’javascript:parent.toggle(”password”)’) + .... } |
Example—Options Window Modifications 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.
// Options .... i18n[’passwd exp’] = ’ Use this form to change the password you use to access Mozilla Super Speedy Web Mail. |
This section describes how to modify the Sun Java System Messenger Express Folders window shown in Modifying the Folders Window.
You can modify the following in the Sun Java System Messenger Express Folders window:
Change the location of the tools
Change the text associated with the tools or folders
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:
Refresh: main.refreshFolders()
New Message: 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()
The example shown in Example—Folders Window Modifications moves “Refresh” and “New Message” tools to the end of the toolbar.
Example—Folders Window Modifications shows the changes to be made in the file fldr_fs.html.
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 .... } |
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 you need to remove a line from the ar/i18n.js file.
Aligning the User Interface from Right to Left shows the line that needs to be removed from the ar/i18n.js file.
.... i18n['dir'] = 'ltr' .... |
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.
Change the /html/main.js file to disable filtering the HTML tags in the mails.
The example shows how to disable filtering of JavaScript tags in the mails.
Example— Disable the filtering of the HTML tags shows the /html/main.js file before changing the file for disabling the filtering of Javascript tags in the mails.
.... load(msgFrame, msgHREF + 'msg.msc?sid=' + sid + '&security=' + security + '&mbox=' + encode(selectmbox) + '&uid=' + num + '&process=js,link,target,html' + binhex + maxtext + get_charset()) .... |
Example— Disable the filtering of the HTML tags shows the changes to be made in the /html/main.js file for disabling the filtering of Javascript tags in the mails
.... load(msgFrame, msgHREF + 'msg.msc?sid=' + sid + '&security=' + security + '&mbox=' + encode(selectmbox) + '&uid=' + num + '&process=link,target,html' + binhex + maxtext + .... |
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:
Add the new language to the preferred language list. The new language can be added by editing the i18n_preferredlanguagelist() funtion in the i18n.js file.
Copy the files from the directory html/en to this language directory html/lang.
Change the charset to iso-8859-5 in the lang/i18n.js
The example shows how to support Russian language in Sun Java System Messenger Express.
Example—Supporting a New Locale shows the changes to be made to the i18n_preferredlanguagelist() funtion in the i18n.js file for supporting Russian language.
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 } |
Example—Supporting a New Locale shows the changes to be made to the ru/i18n.js file for 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'] = ' ' |