Previous     Contents     Index     DocHome     Next     
iPlanet Messenger Express 5.0 Customization Guide



Chapter 3   Customizing User Interface Features


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

This chapter contains these sections:



Modifying the Main Function Tabs

This section describes how to modify the Messenger Express main function tabs shown in Figure 3-1 and gives examples of files edited to make the modifications.

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


Modifications You Can Make to the Main Function Tabs

You can perform the following modifications 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

  • 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 toolFrame() with a call to the function tab() in the main.js file, specifying the text of the tab label to display, a flag for whether it is currently selected, and the function to call when the tab is clicked.

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

    • Folders: displayFolders()

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

    • Message: selectMsg()

    • Options: selectOptions()

    • Help: help()

    • Logout: logout()


Example—Main Function Tabs Modifications

This example, shown in Figure 3-2, moves the Options tab to the right side, 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. The files to edit are main.js (layout) and en/i18n.js (tab labels).

Code Example 3-1    Altering Function Tabs Layout (main.js)
function toolFrame() {
.....
'<td width=50%>' + 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['options'] = 'Preferences'



Modifying the MailBox Tool Bar


This section describes how to modify the Messenger Express mailbox tool bar shown in Figure 3-3 gives examples of files edited to make the modifications.

Figure 3-3    Messenger Express Mailbox Tool Bar


Modifications You Can Make to the Mailbox Tool Bar

Your can perform the following modifications on the Messenger Express mailbox tool bar:

  • Rearrange the order of tools

  • Change text of tools


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 words 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: refreshMbox() in main.js

    • Compose: compose("new") in main.js

    • Search: parent.srch()

    • Move Messages to Folder: parent.move()

    • Delete: parent.delmsg(), parent.undelmsg(), parent.exmsg() (depends whether in trash folder or not)


Example—Mailbox Tool Bar Modifications

This example, shown in Figure 3-4, makes Search 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. The files to edit are mbox_fs.html (layout) and en/i18n.js (wording).

Code Example 3-3    Altering Tool Bar Layout (mbox_fs.html)
function getToolbar() {
....
main.toolbar(
....
(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 Wording (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 gives examples of files edited to make the modifications.

Figure 3-5    Messenger Express Message List Window


Modifications You Can Make to the Message List Window

You can perform the following modifications to the Messenger Express message list window:

  • Make messages sort differently by default

  • Change text for collecting external mail


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 default column heading wording, edit the i18n[] values for search results, date, from, to, size, and subject in the lang/i18n.js file.

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

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

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


Example—Message List Window Modifications

This example, shown in Figure 3-6, makes messages by default list "last-in" first, and changes the text for collecting external mail.

Figure 3-6    Example Message List Window Modifications

Code Example 3-5 and Code Example 3-6 show the necessary changes. The files to edit are main.js and en/i18n.js.

Code Example 3-5    Altering List Window Layout (main.js)
var defaults = new Array(
.....
'meSortOrder', 'last',
.....
)

Code Example 3-6    Altering List Window Wording (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 gives examples of files edited to make the modifications.

Figure 3-7    Messenger Express Message Display Window


Modifications You Can Make to the Message Display Window

You can perform the following modifications to the Messenger Express message display window:

  • Change how messages are displayed

  • Alter the layout of window and messages

  • Change the wording


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 wording, edit the i18n[] values under
      // Message Headers and // Message in the lang/i18n.js file.

    • To customize the defaults of how the messages are displayed (wordwrap and so on), edit the defaults[] values near the top of the main.js file.


Example—Message Display Window Modifications

This example, shown in Figure 3-8, moves "Subject" before "To" rather than after "To."

Figure 3-8    Example Message Display Window Modifications

Code Example 3-7 shows the necessary changes. The file to edit is 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 gives examples of files edited to make the modifications.

Figure 3-9    Messenger Express Message Tool Bar


Modifications You Can Make to the Message Tool Bar

You can perform the following modifications to 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 words 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 words associated with the graphics in the Tool Bar, edit the i18n[] values compose, reply, reply all, forward, file msg, 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 that handle the tool clicks are:

    • Compose: compose(\'new\') in main.js

    • Reply: compose(\'reply\') in main.js

    • Reply All: compose(\'replyall\') in main.js

    • Forward: compose(\'forward\') in main.js

    • Move Messages to Folder: parent.move()

    • Delete and Undelete: parent.delmsg()

    • Previous: parent.prev()

    • Next: parent.next()


Example—Message Tool Bar Modifications

This example, shown in Figure 3-10, moves Compose divided to the right side and unabbreviates the text of "Prev" to "Previous."

Figure 3-10    Example Message Tool Bar Modifications

Code Example 3-8 and Code Example 3-9 show the necessary changes. The files to edit are msg_fs.html and en/i18n.js.

Code Example 3-8    Altering Message Tool Bar Layout (msg_fs.html)
function getToolbar() {
....
main.toolbar(
....
i18n['next'], 'parent.next()', n ? 'imx/next-1.gif' : 'imx/next-0.gif', 27, 25, n,
null, null, 'imx/divider.gif', 2, 24, false,
i18n['compose'], 'main.compose("new")', 'imx/compose.gif', 27, 25, true)
....
}

Code Example 3-9    Altering Message Tool Bar Text (en/i18n.js)
// Tool Bars
....
i18n['previous'] = 'Previous'



Modifying the Message Composition Window


This section describes how to modify the Messenger Express message composition window shown in Figure 3-11 gives examples of files edited to make the modifications.

Figure 3-11    Messenger Express Message Composition Window


Modifications You Can Make to the Message Composition Window

You can perform the following modifications to the Messenger Express message composition window:

  • Change location of tools in window

  • Alter wording of tools


To Modify the Message Composition Window

  • Edit the appropriate files as follows:

    • To customize the tool bar, edit the getToolbar() function in the comp_fs.html file.

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

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

    Functionally, getToolbar() in comp_fs.html assembles the code and assigns the functions to the graphics by calling toolbar() in main.js, which takes care of things like colors and text-only versions. The compFrameHTML() function in comp_fs.html generates the 'To/Cc/Bcc' control area by calling i18n_compose_controls() in lang/i18n.js.

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

    • Send: parent.send(\'smtp\')

    • Address: parent.lookup()

    • Attach: parent.attach()

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

    • Help: help(1007399) in main.js.

    • Cancel: parent.cancel()

    • To/Cc/Bcc: parent.add()


Example—Message Composition Window Modifications

This example, shown in Figure 3-12, moves the Address tool between divider and Help, and changes the "Add Recipient" wording to "Send To."

Figure 3-12    Example Message Composition Window Modifications

Code Example 3-10 and Code Example 3-11 show the necessary changes. The files to edit are comp_fs.html and en/i18n.js.

Code Example 3-10    Altering Composition Window Layout (comp_fs.html)
function getToolbar() {
....
i18n['send'], 'parent.send("smtp")', 'imx/send.gif', 27, 25, true)
if ((!main.cfg['meAutoQuote'] || main.cfg['meAutoQuote'] == 'false') &&
(compose_type != 'new' && compose_type != 'draft')) {
s += main.toolbar(
i18n['quote'], 'parent.quote(true)', 'imx/quote.gif', 29, 25, true)
}
s += main.toolbar(
i18n['attach'], 'parent.attach()', 'imx/attach_comp.gif', 24, 24, true,
i18n['draft'], 'parent.send("draft")', 'imx/draft.gif', 27, 25, true,
null, null, 'imx/divider.gif', 2, 24, false,
i18n['lookup'], 'parent.lookup()', 'imx/address.gif', 27, 25, true,
i18n['help'], 'main.help(1007399)', 'imx/help.gif', 27, 25, true,
....
}

Code Example 3-11    Altering Composition Window Wording (en/i18n.js)
// Message Composition
....
i18n['recipient'] = 'Send To'



Modifying the Address (Directory Lookup) Window


This section describes how to modify the Messenger Express address (directory lookup) window shown in Figure 3-13 gives examples of files edited to make the modifications.

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


Modifications You Can Make to the Address (Directory Lookup) Window

You can perform the following modifications to the Messenger Express address (directory lookup) window:

  • Change overall window appearance

  • Alter search controls and their wording

  • Alter all other wording


To Modify the Address (Directory Lookup) Window

  • Edit the appropriate files as follows:

    • To customize overall window appearance, edit the searchFrameHTML(), listFrameHTML(), and addFrameHTML() functions in the ldap_fs.html file.

    • To customize the search controls and their wording, edit i18n_ldap_controls() in the lang/i18n.js file.

    • To customize other wording, edit the // LDAP Lookup values in the lang/i18n.js file.

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

    • Search: parent.doSearch()

    • Cancel: parent.cancel()

    • To/Cc/Bcc: parent.add()


Example—Address (Directory Lookup) Window Modifications

This example, shown in Figure 3-14, changes "Search the local directory" to "Search the iPlanet directory."

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

Code Example 3-12 shows the necessary changes. The file to edit is en/i18n.js.

Code Example 3-12    Altering Address Window Text
function i18n_ldap_controls() {
....
'<select name="dir">\n' +
'<opti'<select name="dir">\n' + on value="3 200">Search the iPlanet directory</option>\n' +
....
}



Modifying the Options Window


This section describes how to modify the Messenger Express options window shown in Figure 3-15 gives examples of files edited to make the modifications.

Figure 3-15    Messenger Express Options Window


Modifications You Can Make to the Options Window

You can perform the following modifications to the Messenger Express options window:

  • Change the layout of window and choices

  • Alter any of the default wording


To Modify the Options Window

  • Edit the appropriate files as follows:

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

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


Example—Options Window Modifications

This example, shown in Figure 3-16, moves "Vacation Message" between "Personal Information" and "Password," and changes the Password form to "Mozilla Super Speedy Web Mail" as the text.

Figure 3-16    Example Options Window Modifications

Code Example 3-13 and Code Example 3-14 show the necessary changes. The files to edit are opts_fs.html and en/i18n.js.

Code Example 3-13    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-14    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-17 gives examples of files edited to make the modifications.

Figure 3-17    Messenger Express Folders Window


Modifications You Can Make to the Folders Window

You can perform the following modifications to the Messenger Express folders window:

  • Change the locations of the tools

  • Alter the wording of the tools or folders


To Modify the Folders Window

  • Edit the appropriate files as follows:

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

    • To customize the rest of the window, edit the listFrameHTML() function in the fldr_fs.html file.

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

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

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

    • Update: refreshFolders() in main.js

    • Compose: compose(\'new\') in main.js

    • New: parent.addFolder()

    • Rename: parent.renFolder()

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

    • Delete: parent.delFolder()

    • Select a Folder: parent.select(`i')


Example—Folders Window Modifications

This example, shown in Figure 3-18, moves "Update" and "Compose" tools divided off to the end of the toolbar.

Figure 3-18    Example Folders Window Modifications

Code Example 3-15 shows the necessary changes. The file to edit is fldr_fs.html.

Code Example 3-15    Altering Folders Window Layout  
function getToolbar() {
....
main.toolbar(
i18n["new folder"], 'parent.addFolder()', 'imx/fldr_new.gif', 27, 25, true,
i18n['rename'], 'parent.renFolder()', 'imx/fldr_edit.gif', 27, 25, true) +
....
main.toolbar(
i18n['delete'], 'parent.delFolder()', 'imx/delete.gif', 27, 25, true,
null, null, 'imx/divider.gif', 2, 24, false,
i18n['update'] ? i18n['update'] : i18n['get mail'], 'main.refreshFolders()', 'imx/pull.gif', 27, 25, true,
i18n['compose'], 'main.compose("new")', 'imx/compose.gif', 27, 25, true)
....
}


Previous     Contents     Index     DocHome     Next     
Copyright © 2000 Sun Microsystems, Inc. Some preexisting portions Copyright © 2000 Netscape Communications Corp. All rights reserved.

Last Updated September 29, 2000