Customizing the EditLive! for Java Interface

Introduction

The menu bar and toolbars of Ephox EditLive! for Java are completely customizable through the EditLive! for Java XML configuration process.  This article explains how the EditLive! for Java toolbars and menu bar may be configured and how the configuration of the EditLive! for Java menu bar and toolbars affects the functionality of EditLive! for Java.

The Menu Bar

The menu bar in EditLive! for Java can have any number of individual menus added to it, however, it will contain the Ephox EditLive! for Java branding at all times.  The names of the menus added to the menu bar are completely customizable.  Furthermore, the specification of a mnemonic for the menu is also customizable.  To specify the mnemonic for a menu an escaped ampersand (&) must be specified in the name attribute of the relevant <menu> element in the XML configuration file.  

For example, this would specify the View menu which has the mnemonic of "V":

<editLiveForJava>
    ...
    <menuBar>
        ...
        <menu name="&amp;View">
            ...
        </menu>
        ...
    </menuBar>
    ...
</editLiveForJava>

Menu Items

Menu items in EditLive! for Java are specified through the use of a <menuItem> XML element with a specific value for the name attribute.  Each menu item, with the exception of custom menu items, has a specific value for the name attribute associated with it.  The mnemonics, shortcut keys and images associated with such menu items cannot be changed.  

The menu items available for use with EditLive! for Java, menu image (if any), shortcut key (if any), their mnemonic (if any) and their associated value for the <menuItem> name are listed below.

Function XML Name Attribute Menu Item Name Shortcut Image Mnemonic
Create a new file. mnuNew New CTRL+N N
Open an existing file on the local machine. mnuOpen Open... CTRL+O O
Save a file to the local machine. mnuSave Save CTRL+S S
Save a file to the local machine with a different name. mnuSaveAs Save As... CTRL+SHIFT+S N/A A
Undo the last editor action. mnuUndo Undo CTRL+Z U
Redo the last undone editor action. mnuRedo Redo CTRL+Y R
Cut the selection. mnuCut Cut CTRL+X T
Copy the selection. mnuCopy Copy CTRL+C C
Paste. mnuPaste Paste CTRL+V P
Select all editor content. mnuSelectAll Select All CTRL+A N/A L
Find text in the editor. mnuFind Find... CTRL+F F
Insert a hyperlink. mnuHLink Hyperlink... CTRL+K H
Insert a horizontal line. mnuHRule Horizontal Line N/A L
Insert a symbol. mnuSymbol Symbol... N/A S
Insert a bookmark. mnuBookmark Bookmark... N/A K
Insert an image from the local machine. mnuImageLocal Local Image... N/A N/A M
Insert an image from the server image library. mnuImageServer Server Image Library... N/A I
Insert a table. mnuInsTable Insert Table... N/A I
Insert rows or columns in the table. mnuInsRowCol Insert Row or Column... N/A N/A R
Insert a cell in a table. mnuInsCell Insert Cell N/A N/A E
Delete a row from a table. mnuDelRow Delete Row N/A D
Delete a column from a table. mnuDelCol Delete Column N/A C
Delete a cell from a table. mnuDelCell Delete Cell N/A N/A L
Split a cell in a table. mnuSplit Split Cell... N/A S
Merge cells in a table. mnuMerge Merge Cells N/A M
Edit the current cell's properties.   mnuPropCell Cell Properties... N/A N/A R
Edit the selected row's properties. mnuPropRow Row Properties... N/A N/A N/A
Edit the selected column's properties. mnuPropColumn Column Properties... N/A N/A N/A
Edit the current table's properties. mnuPropTable Table Properties... N/A N/A T
Show table gridlines. mnuGridlines Show Gridlines N/A G
Run the spell checker. mnuSpelling Spelling... F7 S
Perform a word count on the document. mnuWordCount Word Count... N/A W
The text color selector. mnuColor Color N/A C
The text highlight color selector. mnuHighlightColor Highlight Color N/A C
Bold text. mnuBold Bold CTRL+B B
Italic text. mnuItalic Italic CTRL+I I
Underline text. mnuUnderline Underline CTRL+U U
Strikethrough text. mnuStrike Strikethrough N/A S
Remove formatting. mnuRemoveFormatting Remove Formatting N/A R
Increase the paragraph or list indent. mnuIncreaseIndent Increase Indent N/A N
Decrease the paragraph or list indent.  mnuDecreaseIndent Decrease Indent N/A D
Edit the properties of a list. mnuPropList List Properties... N/A N/A N/A

Menu Item Groups

Some menu items are added to the EditLive! for Java applet in a group.  These menu items are specified through the use of a <menuItemGroup> XML element with a specific value for the name attribute.  Each menu item group has a specific value for the name attribute associated with it.  The mnemonics, shortcut keys and images associated with such menu items cannot be changed.  The activation of menu items in menu item groups is mutually exclusive, for example, the Browser View item cannot be activated at the same time as the Window View item.  

The menu items groups available for use with EditLive! for Java, menu image (if any), shortcut key (if any), their mnemonic (if any) and their associated value for the <menuItemGroup> name are listed below.

Function XML Name Attribute Menu Item Name Shortcut Image Mnemonic
View the document in Design mode (WYSIWYG mode). mnuSourceView Design View N/A N/A D
View and edit the HTML source for the document. HTML View N/A N/A H
View the applet in the browser. mnuFrameView Browser View N/A N/A B
View the applet in a separate window. Window View N/A N/A W
Insert an ordered list or change an unordered list to an ordered list. mnuList Ordered List N/A O
Insert an unordered list or change an ordered list to an unordered list. Unordered List N/A T
Set left alignment. mnuAlign Align Left CTRL+L L
Set center alignment. Align Center CTRL+E C
Set right alignment. Align Right CTRL+R R
Superscript text. mnuScript Superscript  N/A S
Subscript text. Subscript N/A S

Submenus

Submenus can be added to the EditLive! for Java menu bar.  The submenus available for use in EditLive! for Java are the Font, (font) Size and Style submenus.  These are added through the use of the <submenu> XML element with a specific value for the name attribute.   

The <submenu>, if left empty, each of the submenus added will contain the same items as the corresponding item on the EditLive! for Java toolbar.  If the corresponding item does not exist on the toolbar then the submenu will appear empty.  If the developer wishes to make the submenu items distinct from the toolbar items the <submenu> element may have <menuItem> child elements added to it.  It should be noted that once menu items are specified within a submenu then the contents of the submenu will no longer mirror the corresponding toolbar element.

The following example would add the Font submenu to the Format menu with items on the submenu corresponding to the items specified in the Font drop down combo box of the EditLive! for Java toolbar:

<editLiveForJava>
    ...
    <menuBar>
        ...
        <menu name="Format">
            ...
            <submenu name="mnuFontFace"/>
            ...
        </menu>
        ...
    </menuBar>
    ...
</editLiveForJava>

The following example would add the Style submenu to the Format menu.  The menu created would contain the Normal and Heading 1 which respectively correspond to the <P> and <H1> styles.  Note that this submenu would NOT contain the values from the corresponding toolbar item.

<editLiveForJava>
    ...
    <menuBar>
        ...
        <menu name="Format">
            ...
            <submenu name="mnuFontStyle">
                <menuItem name="P" text="Normal" />
                <menuItem name="H1" text="Heading 1" />
            </submenu>
            ...
        </menu>
        ...
    </menuBar>
    ...
</editLiveForJava>

The submenus available for use with EditLive! for Java, their corresponding toolbar item, mnemonic and their associated value for the <submenu> name are listed below.

Submenu Item Name XML Name Attribute Corresponding Toolbar Item Mnemonic
Font mnuFontFace tlbFace - Font  F
Size mnuFontSize tlbSize - Size S
Style mnuStyle tlbStyle - Style T

Menu Separators

Menu separators are horizontal lines spanning the width of the menu which can be used to visually break a menu into its constituent parts and areas.  These are added through the use of the <menuSeparator> within a <menu> element.  They serve no other purpose other than that of a visual aid.

The About Dialog

The Ephox logo and associated About dialog may be removed from the menu interface.  The removal of this menu option is achieved through setting the showAboutMenu attribute of the <menuBar> element to false

For example, the following XML would remove the Ephox branding and associated About dialog from the menu:

<editLiveForJava>
    ...
    <menuBar showAboutMenu="false">
       ...
    </menuBar>
    ...
</editLiveForJava>

The Toolbars

The EditLive! for Java applet can be instantiated with up to two separate toolbars; the Command and Format toolbars.  Each of these tools bars can have a variety of buttons, button groups and drop down combo boxes added to it.  To add an item to the Command Toolbar the relevant XML element should be placed within the <commandToolbar> element.  To add an item to the Format Toolbar the relevant XML element should be placed within the <formatToolbar> element.  EditLive! for Java can be instantiated with none, one or both of these toolbars.  The <commandToolbar> and <formatToolbar> elements must be placed within the <toolbars> element.

Note:  The Command Toolbar will always appear above the Format Toolbar in an instance of EditLive! for Java where they are both present, this is independent of the ordering of the elements within the XML configuration.

For example, the following XML would specify that both toolbars are present within an instance of EditLive! for Java:

<editLiveForJava>
    ...
    <toolbars>
        <commandToolbar>
            ...
        </commandToolbar>
        <formatToolbar>
            ...
        </formatToolbar>
    </toolbars>
    ...
</editLiveForJava>

Toolbar Buttons

Toolbar buttons in EditLive! for Java are specified through the use of a <toolbarButton> XML element with a specific value for the name attribute.  Each toolbar buttons, with the exception of custom toolbar buttons, has a specific value for the name attribute associated with it.  The image and tool tip text associated with such toolbar buttons cannot be changed.  

The toolbar buttons available for use with EditLive! for Java, their corresponding function, tool tip text and their associated value for the <toolbarButton> name are listed below.

Image Function XML Name Attribute Tool Tip Text
New document. tlbNew New
Open document. tlbOpen Open...
Save document. tlbSave Save
Run spell checking. tlbSpelling Check Spelling
Cut the selection. tlbCut Cut
Copy the selection. tlbCopy Copy
Paste. tlbPaste Paste
Find text. tlbFind Find
Undo editor action. tlbUndo Undo
Redo editor action. tlbRedo Redo
Insert horizontal rule. tlbHRule Insert Horizontal Rule
Insert hyperlink. tlbHLink Hyperlink
Insert symbol. tlbSymbol Insert Symbol
Insert bookmark. tlbBookmark Insert Bookmark
Insert image from server image library. tlbImageServer Insert Image
Insert table. tlbInsTable Insert Table
Insert row in current table. tlbInsRow Insert Row
Insert column in current table. tlbInsCol Insert Column
Delete current row.  tlbDelRow Delete Row
Delete current column tlbDelCol Delete Column
Split current cell. tlbSplit Split Cell
Merge selected cells. tlbMerge Merge Cells
Show table gridlines. tlbGridlines Hide/Show Gridlines
Bold text. tlbBold Bold
Italic text. tlbItalic Italic
Underline text. tlbUnderline Underline
Strikethrough text. tlbStrike Strikethrough
Remove Formatting. tlbRemoveFormatting Remove Formatting
Increase the paragraph or list indent. tlbIncreaseIndent Increase Indent
Decrease the paragraph or list indent.  tlbDecreaseIndent Decrease Indent
Text color selector. tlbColor Color
Text highlight color selector. tlbHighlightColor Highlight color
Perform a word count. tlbWordCount Word Count

Toolbar Button Groups

Some toolbar buttons are added to the EditLive! for Java applet in a group.  These toolbar buttons are specified through the use of a <toolbarButtonGroup> XML element with a specific value for the name attribute.  Each toolbar button group has a specific value for the name attribute associated with it.  The images and tool tip text associated with such toolbar buttons cannot be changed.  The activation of buttons in toolbar button groups is mutually exclusive, for example, the left alignment button cannot be activated at the same time as the center or right alignment buttons.

The toolbar button groups available for use with EditLive! for Java, their corresponding function, tool tip text and their associated value for the <toolbarButtonGroup> name are listed below.

Image Function XML Name Attribute Tool Tip Text
Insert an ordered list or change an unordered list to an ordered list. tlbList Ordered List
Insert an unordered list or change an ordered list to an unordered list. Unordered List
Set left alignment. tlbAlign Align Left
Set center alignment. Align Center
Set right alignment. Align Right
Superscript text. tlbScript Superscript
Subscript text. Subscript

Toolbar Combo Boxes

Combo boxes for the style, font typeface and font size text attributes can be added to the EditLive! for Java toolbar through the use of a <toolbarComboBox> element with a specific value for the name attribute.  Each toolbar combo box has a specific value for the name attribute associated with it.  Furthermore, the items listed in each of these combo boxes can be specified by the developer through the inclusion of <comboBoxItem> child elements in a <toolbarComboBox> element.  

For example, the following XML would create the Style drop down combo box in the EditLive! for Java Format Toolbar with the listing of Normal, Heading 1, Heading 2 and Heading 3 items which represent the <P>, <H1>, <H2> and <H3> styles respectively:

<editLiveForJava>
    ...
    <toolbars>
    ...
        <formatToolbar>
            ...
            <toolbarComboBox name="tlbStyle">
                <comboBoxItem name="P" text="Normal" />
                <comboBoxItem name="H1" text="Heading 1" />
                <comboBoxItem name="H2" text="Heading 2" />
                <comboBoxItem name="H3" text="Heading 3" />
            </toolbarComboBox>
            ...
        </formatToolbar>
    </toolbars>
    ...
</editLiveForJava> 

The toolbar combo boxes available for use with EditLive! for Java, their corresponding function and their associated value for the <toolbarComboBox> name are listed below.

Example Image Function XML Name Attribute
List of styles available for use in this document. tlbStyle
List of fonts available for use in this document. tlbFace
List of font sizes available for use in this document. tlbSize

Toolbar Separators

Toolbar separators are vertical lines spanning the height of the toolbar which can be used to visually break a toolbar into its constituent parts and areas.  These are added through the use of the <toolbarSeparator> within a <commandToolbar> or <formatToolbar> element.  They serve no other purpose other than that of a visual aid.

The Shortcut Menu

Shortcut menu items in EditLive! for Java are specified through the use of a <shrtMenuItem> XML element with a specific value for the name attribute.  Each shortcut menu item has a specific value for the name attribute associated with it.  The text and image associated with these menu items cannot be changed.  

The shortcut menu items available for use with EditLive! for Java, their corresponding function, text and their associated value for the <shrtMenuItem> name are listed below.

Function XML Name Attribute Shortcut Menu Item Name Image
Cut the selection. shrtCut Cut
Copy the selection. shrtCopy Copy
Paste. shrtPaste Paste
Select all editor content. shrtSelectAll Select All N/A
Find text in the editor. shrtFind Find...
Insert rows or columns in the table. shrtInsRowCol Insert Row or Column N/A
Insert a cell in a table. shrtInsCell Insert Cell N/A
Delete a row in a table. shrtDelRow Delete Row
Delete a column in a table. shrtDelCol Delete Column
Delete a cell in a table. shrtDelCell Delete Cell N/A
Split a cell in a table. shrtSplit Split Cell...
Merge cells in a table. shrtMerge Merge Cells
Edit the current table's properties. shrtPropTable Table Properties... N/A
Edit the selected cell's properties. shrtPropCell Cell Properties... N/A
Edit the selected row's properties. shrtPropRow Row Properties... N/A
Edit the selected column's properties. shrtPropCol Column Properties... N/A
Edit the selected image's properties. shrtPropImage Image Properties... N/A
Edit the current list's properties. shrtPropList List Properties... N/A
Edit the current hyperlink's properties. shrtHyperlink Hyperlink Properties...
Edit the current custom tag's properties. shrtEditTag Edit Custom Tag... N/A
The font submenu. shrtFontFace Font N/A
The font size submenu. shrtFontSize Size N/A
The style submenu. shrtStyle Style N/A

Tab Views

EditLive! for Java can be configured to use a tabbed view which allows users to more intuitively switch between Design and Code views.  These tabs can be placed on the top or bottom of the EditLive! for Java editing area, they can also be removed completely.  The configuration of the tabbed view for EditLive! for Java is achieved via the tabPlacement attribute of the <wysiwygEditor> element.

For example, the following XML would place the Design and Code tabs at the top of the EditLive! for Java editing pane.

<editLiveForJava>
    ...
    <wysiwygEditor tabPlacement="top">
    ...
</editLiveForJava> 

The tabbed view settings for use with EditLive! for Java and their associated value for the <wysiwygEditor> tabPlacement attribute are listed below.

Example Image Function XML tabPlacement Attribute
Place tabs at the top of the editing pane. top
Place tabs at the bottom of the editing pane. bottom
Remove tabs. off

Custom Items 

Custom items can be added to the EditLive! for Java menus and toolbars.  This gives the developer greater flexibility when integrating EditLive! for Java in existing systems.  It allows developers to complement the functionality of EditLive! for Java with existing JavaScript functions and also to extend the menus and toolbars of the EditLive! for Java applet to include custom functionality.  

EditLive! for Java allows for the specification of custom menu items, custom toolbar buttons and custom toolbar combo boxes, this can be done with the <customMenuItem>, <customToolbarButton> and <customToolbarCombo> elements respectively.

For more information on how to use custom items in EditLive! for Java please see the article on Custom Menu and Toolbar Items for EditLive! for Java.

Removing the Menu Bar and Toolbars

Both the menu bar and either of the toolbars of EditLive! for Java may be removed.  These may be removed by leaving them empty within the EditLive! for Java configuration.  To remove a toolbar ensure that the relevant toolbar XML element, either the <commandToolbar> or the <formatToolbar> element, is empty (i.e. it has no child elements).

To remove the menu bar ensure that the <menuBar> element is empty (i.e. it has no child elements) and ensure that the showAboutMenu attribute of the <menuBar> element is set to false

Limiting the Functionality of EditLive! for Java

To limit the functionality of EditLive! for Java, in order to prevent users from accessing functionality that the developer does not wish them to, then the relevant menu items and toolbar buttons should not be included in the XML configuration for EditLive! for Java.  When a menu item or toolbar button is not included in the EditLive! for Java applet then users are no able to access that functionality.  When the item is not included in the XML configuration for the relevant instance of EditLive! for Java then the item will not appear on the menu or toolbar and, in most cases, the shortcut key for the item will be disabled.  

It should be noted that the shortcut keys for the Cut, Copy, Paste, Bold, Italic and Underline actions will always be enabled.  This is independent of the associated menu items and toolbar buttons.  Thus, the shortcut keys for these functions will still be functional even if the associated menu items or toolbar buttons are removed. 

Summary

The interface for EditLive! for Java is highly customizable.  Through the EditLive! for Java XML configuration process developers gain the flexibility to make the interface for EditLive! for Java as simple or as complex as they wish.  EditLive! for Java is supplied with a standard complement of menu and toolbar items providing editor functionality.  These items are listed in the above sections of this document along with all the relevant information pertaining to each item.

Furthermore, EditLive! for Java gives the developer the ability to create custom functionality which can be accessed through custom menu and toolbar items.  This can be used to complement the functionality of the EditLive! for Java applet with the developers own custom functions and macros.

Finally, through the exclusion of relevant menu and toolbar items the developer can limit the functionality of the EditLive! for Java applet, thus preventing end users from accessing functionality which the developer does not wish them to.

Hence, it can be seen that the interface for EditLive! for Java is extremely flexible, allowing developers to customize the applet's interface with ease.  Developers are also empowered with the ability to add custom functionality to the EditLive! for Java applet and thus complement the applet's existing functionality.  Developers can also limit the functionality of the EditLive! for Java applet to prevent end users from accessing functionality that the developers do not wish them to access.

See Also