Styling Orana Components

Added by Pete Butland, last edited by Pete Butland on Sep 03, 2008  (view change)

Overview

Orana components can be styled via a Cooee XML style sheet. This documentation is relevant for Orana 0.7 onwards.

Contributions

Menu bar

The menu is made up of the following components:

Component Style Name Description
org.karora.cooee.ng.MenuBar MenuBar Menu bar
org.karora.orana.ng.MenuItem MainMenu Main menu item (top level)
org.karora.orana.ng.MenuItem SubMenu Sub menu item

CoolBar

The CoolBar is a component which is simply a collection of standard tool bars.

Component Style Name Description
org.karora.orana.app.Row [parent_style_name].Coolbar A container for tool bars

Because toolbars may be used in different areas of an application (e.g. Eclipse has both main toolbars and view part toolbars), the style name for toolbar components are preceded by the style name of the parent component that the toolbar is added to. This is so that different toolbar classes can be styled separately from one another.

The toolbar itself is simply made up of the following component:

Component Style Name Description
org.karora.cooee.app.Row [parent_style_name].Toolbar The toolbar row

The toolbar may contain the following contribution items:

Contribution Item Component Style Name Description
org.karora.orana.action.Separator org.karora.cooee.ng.ImageIcon    
org.karora.orana.action.ActionContributionItem org.karora.cooee.app.button.AbstractButton [parent_style_name].Toolbar.Button A simple action item

A drop down action item is somewhat more complicated as it is constructed as a menu and comprises of the following components.

Component Style Name Description
org.karora.cooee.ng.MenuBar [parent_style_name].Toolbar.DropDown Drop down action menu bar
org.karora.orana.ng.Menu [parent_style_name].Toolbar.DropDownButton Drop down action button
org.karora.orana.ng.Menu [parent_style_name].Toolbar.DropDownItem Drop down action menu item

Context Menu

The context menu is made up of the following components:

Component Style Name Description
org.karora.cooee.ng.Menu ContextMenu Context menu
org.karora.orana.ng.MenuItem Menu.Item Context menu item

Status Line

The status line comprises of the following components:

Component Style Name Description
org.karora.orana.app.Row Status Status line

Viewers

TreeViewer

The TreeViewer is comprised of the following components:

Component Style Name Description
org.karora.cooee.ng.TreeTable TreeViewer (if one column), TableViewer (if more than one column) Main tree viewer control
org.karora.cooee.app.Row Tree.Row Item row
org.karora.cooee.ng.LabelEx TreeElement or TableElement (as above) Item label

TableViewer

The TableViewer is comprised of the following components:

Component Style Name Description
org.karora.cooee.ng.TableEx TableViewer Main table viewer control
org.karora.cooee.ng.LabelEx Table.Header Header label
org.karora.cooee.app.Button Table.Header.Button Sortable header button
org.karora.cooee.app.Row Table.Row.Even Even item row
org.karora.cooee.app.Row Table.Row.Odd Odd item row
org.karora.cooee.ng.LabelEx TableElement item label
org.karora.cooee.app.Button TableElement Dialog cell editor button
org.karora.cooee.ng.ComboBox TableElement Combobox cell editor
org.karora.cooee.app.Row TableElement Colour cell editor row
org.karora.cooee.app.Label TableElement Colour cell editor item 
+-----------------------------------------------------+ <--- TableViewer
|+---------------------------------------------------+|
||Table.Header                                       ||
|+---------------------------------------------------||
||Table.Row.Odd                                      ||
|+---------------------------------------------------+|
||Table.Row.Even                                     ||
|+---------------------------------------------------+|
+-----------------------------------------------------+

Of course the Table component can be retrieved from the TableViewer and other header and cell renderers can be associated with the Table component which can override these defaults.

ListViewer

The ListViewer simply has the following style:

Component Style Name Description
ListBoxEx ListViewer List viewer control

Dialogs

The majority of the dialogs follow the same simple layout with the exception of the ErrorDialog and the WizardDialog.
Each dialog is a org.karora.cooee.app.WindowPane. The style name for this parent window is 'Dialog'.

Dialog (General Layout)

The contents of a dialog is made up of the following components:

Component Style Name Description
org.karora.cooee.app.JWindow Dialog Main dialog window pane
org.karora.cooee.app.SplitPane Dialog.Main - Content area including Dialog.Content and Dialog.ButtonBar
org.karora.cooee.ng.ContainerEx Dialog.Content Client content area
org.karora.cooee.app.Row Dialog.ButtonBar Button row
org.karora.cooee.ng.PushButton Dialog.Button Button

The components are laid out as follows:

+-------------------------------------------------------+
|+-----------------------------------------------------+|
|| Dialog.Content                                      || <--- Dialog.Main
||                                                     ||
||                                                     ||
||                                                     ||
||                                                     ||
|+-----------------------------------------------------+|
|-------------------------------------------------------|
|+-----------------------------------------------------+|
|| Dialog.ButtonBar                                    ||
|+-----------------------------------------------------+|
+-------------------------------------------------------+

The button bar contains any number of buttons. Both the components for the button bar and the buttons can be changed by overriding Dialog.createButtonBar and Dialog.createButton methods.

IconAndMessageDialog

The IconAndMessageDialog is a simple dialog box with a Grid which contains both an image and a message area. The dialog class is abstract and users will usually use the concrete sub-classes MessageDialog and ErrorDialog. The dialog is composed of the following components:

Component Style Name Description
org.karora.cooee.app.Grid Dialog.MessageArea Client icon/message area
org.karora.cooee.ng.ImageIcon Dialog.MessageArea Client icon/message area
org.karora.cooee.app.Column Dialog.Message Message area
org.karora.cooee.ng.LabelEx Dialog.MessageText Message text label

The dialog is laid out as follows:

+-------------------------------------------------------+
|+---------------+ +-----------------------------------+| <--- Dialog.MessageArea
|| Dialog.Icon   | | Dialog.Message                    ||
||               | |+---------------------------------+||
||               | || Dialog.MessageText              |||
||               | ||                                 |||
||               | |+---------------------------------+||
||               | |                .                  ||
||               | |                .                  ||
||               | |                .                  ||
||               | |+---------------------------------+||
||               | || Dialog.MessageText              |||
||               | ||                                 |||
||               | |+---------------------------------+||
|+---------------+ +-----------------------------------+|
+-------------------------------------------------------+

The Message is made up of a Column and any number of LabelEx components. This is done so that newlines can be represented correctly.

InputDialog

The Input Dialog is very similar to the IconAndMessageDialog except there is no icon and the Grid has just one column.
It is made up of the following components:

Component Style Name Description
org.karora.cooee.app.Grid Dialog.MessageArea Client area
org.karora.cooee.ng.LabelEx Dialog.MessageText Input message text label
org.karora.cooee.ng.TextFieldEx Default Text field input control
org.karora.cooee.ng.LabelEx Dialog.MessageText Error message text label

The dialog is laid out as follows:

+-------------------------------------------------------+
|+-----------------------------------------------------+| <--- Dialog.MessageArea
|| Dialog.MessageText                                  ||
||                                                     ||
|+-----------------------------------------------------+|
|| Default                                             ||
||                                                     ||
|+-----------------------------------------------------+|
|| Dialog.MessageText                                  ||
||                                                     ||
|+-----------------------------------------------------+|
+-------------------------------------------------------+

ErrorDialog

The error dialog is a sub-class of the IconAndMessageDialog, however, it is slightly different because it has an extra details area. This requires an additional SplitPane control for this section.
Therefore, the additional SplitPane is added to the bottom of the 'Dialog.Main' SplitPane instead of the button bar.

The dialog is made up of the following (additional) components:

Component Style Name Description
org.karora.cooee.app.SplitPane ErrorDialog.DetailsSplit Button bar/details area
org.karora.cooee.ng.TableEx ErrorDialog.DropDownList Details area

The additional components for this dialog are laid out as follows:

+-------------------------------------------------------+
|+-----------------------------------------------------+|
|| Dialog.ButtonBar                                    ||
|+-----------------------------------------------------+|
|-------------------------------------------------------|
|+-----------------------------------------------------+|
|| ErrorDialog.DropDownList                            || <--- ErrorDialog.DetailsSplit
||                                                     ||
||                                                     ||
||                                                     ||
||                                                     ||
|+-----------------------------------------------------+|
+-------------------------------------------------------+

TitleAreaDialog

Again, the title area dialog is slightly different because it has a title area, message area and button area. Like the ErrorDialog, this also requires an additional SplitPane control which is used for the message area and the button area leaving the top of the 'Dialog.Main' SplitPane for the Title Area. The message area and button area styling is the same as for the general dialog content and button bar.

Title Area

The title area is made up of the following components:

Component Style Name Description
org.karora.cooee.app.Row TitleAreaDialog.TitleArea Title row
org.karora.cooee.app.Column TitleAreaDialog.Title Title text area
org.karora.cooee.ng.ImageIcon TitleAreaDialog.Image Title image
org.karora.cooee.ng.LabelEx TitleAreaDialog.TitleText Title text label
org.karora.cooee.ng.LabelEx TitleAreaDialog.TitleMessage Title message label

The title area is laid out as follows:

+-----------------------------------------------------------+
|+--------------------------------+------------------------+| <--- TitleAreaDialog.TitleArea
|| TitleAreaDialog.Title          | TitleAreaDialog.Image  ||
||+------------------------------+|                        ||
|||TitleAreaDialog.TitleText     ||                        ||
|||                              ||                        ||
||+------------------------------+|                        ||
||| TitleAreaDialog.TitleMessage ||                        ||
|||                              ||                        ||
||+------------------------------+|                        ||
|+--------------------------------+------------------------+|
+-----------------------------------------------------------+

WizardDialog

The wizard dialog simply contains a ContainerEx in the dialog area (as for the base Dialog class) for the pages of a wizard.

+-------------------------------------------------------+
| Dialog.Content - org.karora.cooee.ng.ContainerEx      |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
+-------------------------------------------------------+

Labels

 
(None)