Overview
Moomba can be styled via a Cooee XML style sheet. For the main part, the workbench will dictate what styles can and can not be set, but within each view the onus is upon the developer to create new styles as and when they are needed.
This documentation is relevant to Moomba 1.0 and above.
Resource Bundle
A resource bundle to give Moomba default styling can be found in the Maven repository with the following details:
<groupId>org.karora.moomba.eclipse</groupId> <artifactId>resource</artifactId> <version>1.0-SNAPSHOT</version>
SVN
The source for this bundle is also in the SVN repository (http://svn.karora.org/repos/themes/trunk/moomba/eclipse-moomba-resource).
Maven Archetype
There is a maven archetype for the resource bundle project. You can use this archetype to create a project with the correct directory structure. Once the project has been created, it is simply a matter of adding the required images, and editing the Default.stylesheet file. You can then deploy the built bundle into your runtime and the workbench will pick up the styling.
To create your project use the following format:
mvn archetype:create \
-DarchetypeGroupId=org.karora.archetype \
-DarchetypeArtifactId=moomba-resource \
-DarchetypeVersion=1.0 \
-DremoteRepositories=http://www.karora.org/maven-snapshots \
-DgroupId=<your-project-groupId> \
-DartifactId=<your-project-artifactId> \
-Dversion=<your-project-version> (optional)
File Format
The file format for the style sheet is incredibly simple (should possibly read simplistic), but corresponding which properties are valid for particular components can be an arduous task which is generally dictated by trial and error. See Component Styling for more information on the magic that is Cooee styling.
File Location
In a non-OSGi environment the style sheet must be on the classpath and the responsibility of loading the style sheet is the domain of the workbench. In OSGi because each bundle has its own classpath loader it can be difficult to load the style sheet from outside the Cooee bundle, but all this has been taken care of and all the end developer needs to worry about is how to deploy the style sheet bundle.
Developers who want to create a their own style for a particular project can use the resource archetype mentioned above which will build a skeleton resource project. They can then change the style sheet within it and add any images it depends upon and then build and deploy the plug-in into their runtime environment just as they would any other OSGi plugin. The workbench will then pick up the stlye sheet and use it to style the GUI.
The project directory structure is as follows:
org/karora/moomba/resource/image images org/karora/moomba/resource/style Default.stylesheet
Workbench Style Names
The workbench has pre-defined style names to allow developers to style the workbench components. The workbench is made up of the following main components.
- WorkbenchWindow - This includes such things as background, title area, workbench toolbar, status line etc.
- WorkbenchPage - The main page for the workbench which contains the perspectives
- View parts or views - The main windows held within a perspective that contain Cooee GUI components and toolbar
This document will go through each section in turn. Where possible the style name will be documented along with the Cooee component on the diagram.
WorkbenchWindow
The main window is composed of 3 sections (title, content, status line) which requires 2 horizontal SplitPane components.
It is worth noting here that wherever a SplitPane is used, both the orientation and the order in which components are added can be configured. Therefore, for the workbench window below, the title area can appear either above, below, to the left or to the right of the WorkbenchPage.
| Stlye Name | Component | Description |
|---|---|---|
| WorkbenchWindow | org.karora.cooee.ng.ContentPaneEx | Main window |
| WorkbenchWindow | org.karora.cooee.app.WindowPane | Main window (for secondary WorkbenchWindow instances) |
| Page | org.karora.cooee.app.SplitPane | SplitPane for the title and main contents |
| Title | org.karora.cooee.app.ContentPane | Title area |
| Main | org.karora.cooee.app.SplitPane | SplitPane for the main contents and status line |
| Main.Content | org.karora.cooee.app.ContentPane | Main client area |
| WorkbenchPage | org.karora.cooee.ng.ContentPaneEx | Workbench page content |
| Status | org.karora.cooee.app.Row | Status line (see Orana) |
The layout of these components is as follows:
+-------------------------------------------------------+ -------------+ | | | | Title | | | | | +-------------------------------------------------------+ | |+-----------------------------------------------------+| -+ | || || | | || Main.Content || | | || || | +--- Page || || | | || || |--- Main | || || | | |+-----------------------------------------------------+| | | || Status | | | |+-----------------------------------------------------+| -+ | +-------------------------------------------------------+ -------------+
To specify the height of the "Title" section, use the separatorPosition property on the 'Main' style. (i.e. <property name="separatorPosition" value="50px"/>).
In addition, to add a background image to the "Title" section then apply a SplitPaneLayoutData layout to the style. (See the WorkbenchPage section for details on how to apply a background image to the WorkbenchPage area). Similar styling can be done with the Status SplitPane.
Title
On the Title ContentPane sits on a vertical SplitPane which contains an ActionBar area and a Logo. The components and style names are:
| Stlye Name | Component | Description |
|---|---|---|
| TitleRow | org.karora.cooee.app.SplitPane | Title area |
| ActionBarArea | org.karora.cooee.app.Column | ActionBar area |
| Logo | org.karora.cooee.ng.ImageIcon | Logo |
+-----------------------------------------------+------------+ |+---------------------------------------------+|+----------+| <---- TitleRow || ActionBarArea ||| Logo || || ||| || || ||| || |+---------------------------------------------+|+----------+| +-----------------------------------------------+------------+
To specify the width of the Title row SplitPane section, use the separatorPosition property on the 'TitleRow' style. (i.e. <property name="separatorPosition" value="150px"/>). The width of the image might also have to be specified in the 'Logo' style.
As with the "Title" section above, a background image can be applied to both the 'Logo' and Toolbar by using the SplitPaneLayoutData layout.
ActionBarArea
The ActionBar area is for both a menu bar and the cool bar (A cool bar is simply a collection of standard tool bars). Refer to Styling Orana Components for more detailed styling information tool bars.
| Stlye Name | Component | Description |
|---|---|---|
| MenuBar | org.karora.cooee.ng.MenuBar | Menu bar |
| CoolBar | org.karora.cooee.app.Row | Cool bar |
+-------------------------------------------------------+ |+-----------------------------------------------------+| <---- ActionBarArea || MenuBar || |+-----------------------------------------------------+| || CoolBar || |+-----------------------------------------------------+| +-------------------------------------------------------+
You can apply a background image to the ActionBarArea style by applying a SplitPaneLayout layout to it.
WorkbenchPage
The WorkbenchPage styling is unfortunately somewhat complex due to the flexibility required and the lack of core component within the Cooee library. A custom component called the FunkyTabPane has been created to act as a 'smart' TabPane component.
The WorkbenchPage, therefore, is comprised of the following main components:
| Stlye Name | Component | Description |
|---|---|---|
| Main.Content | org.karora.cooee.app.ContentPane | Workbench page content |
| PerspectiveTabPane | org.karora.moomba.ui.internal.FunkyTabPane | Perspectives tab pane |
+----------------------------------------------------------+ |+--------------------------------------------------------+| <--- Main.Content || PerspectiveTabPane || || || || || || || || || || || || || || || |+--------------------------------------------------------+| +----------------------------------------------------------+
Perspective TabPane
The custom perspective tab pane component is actually a SplitPane which contains a tab area and a content area. It has the following components:
| Stlye Name | Component | Description |
|---|---|---|
| PerspectiveTabPane | org.karora.cooee.app.SplitPane | Main component split pane |
| PerspectiveTabPane.HeaderArea | org.karora.cooee.app.SplitPane | Header area split pane |
| PerspectiveTabPane.TabPane | org.karora.cooee.ng.StackedPaneEx | Tab content pane |
| Perspective.Content | org.karora.cooee.app.ContentPane | Client content area |
The perspective tab pane has the following layout:
+------------------------------------------------------------+ | PerspectiveTabPane.HeaderArea | <--- PerspectiveTabPane +------------------------------------------------------------+ | PerspectiveTabPane.TabPane | |+----------------------------------------------------------+| || Perspective.Content || || || || || || || || || |+----------------------------------------------------------+| +------------------------------------------------------------+
Header Area
The header area is where the tab pane tabs are rendered. The components are:
| Stlye Name | Component | Description |
|---|---|---|
| PerspectiveTabPane.HeaderArea | org.karora.cooee.app.SplitPane | Header area split pane |
| PerspectiveTabPane.TabArea | org.karora.cooee.app.Row | Tab area |
| PerspectiveTabPane.ViewMinMaxArea | org.karora.cooee.app.Row | Maximise button area |
| PerspectiveTabPane.ViewMinMaxArea.Button | org.karora.cooee.app.Button | Maximise button |
The header area is laid out as follows:
+-------------------------------------------+----------------+ | TabArea | ViewMinMaxArea | <--- HeaderArea | | +--------+| | | | Button || | | +--------+| +-------------------------------------------+----------------+
Tab Pane Buttons
Finally the Tab Pane buttons are actually made up of 3 buttons so that 3 separate images can be used to render the tabs. The components are:
| Stlye Name | Component | Description |
|---|---|---|
| PerspectiveTabPane.TabArea | org.karora.cooee.app.Row | Tab area |
| PerspectiveTabPane.ActiveLeadIn | org.karora.cooee.ng.ButtonEx | active lead in |
| PerspectiveTabPane.ActiveTab | org.karora.cooee.ng.ButtonEx | active tab |
| PerspectiveTabPane.ActiveLeadOut | org.karora.cooee.ng.ButtonEx | active lead out |
| PerspectiveTabPane.InactiveLeadIn | org.karora.cooee.ng.ButtonEx | inactive lead in |
| PerspectiveTabPane.InactiveTab | org.karora.cooee.ng.ButtonEx | inactive tab |
| PerspectiveTabPane.InactiveLeadOut | org.karora.cooee.ng.ButtonEx | inactive lead out |
The layout for an active example is as follows (inactive is the same):
+------------------------------------------------------------+ |+---------------+---------------+---------------+ | <--- TabArea || ActiveLeadIn | ActiveTab | ActiveLeadOut | | |+---------------+---------------+---------------+ | +------------------------------------------------------------+
PageLayout
The page layout is rendered on the Perspective.Content component. It is a collection of SplitPane components which all have the style name 'PageLayoutSplitPane'. Each part of each SplitPane contains the custom tab pane component org.karora.moomba.ui.internal.FunkyTabPane which contans a tab for each Workbench ViewPart component.
The PageLayout is comprised of the following components:
| Stlye Name | Component | Description |
|---|---|---|
| Perspective.Content | org.karora.cooee.app.ContentPane | Client content area |
| PageLayoutSplitPane | org.karora.cooee.app.SplitPane | ViewPart separator split pane |
| ViewPartTabPane | org.karora.moomba.ui.internal.FunkyTabPane | View part tab pane |
The diagram below shows a simplified page layout with just one SplitPane and therefore 2 ViewParts.
+-----------------------------------------------------------+ |+--------------------------+ | +--------------------------+| <--- PageLayoutSplitPane || ViewPartTabPane | | | ViewPartTabPane || || | | | || || | | | || || | | | || || | | | || || | | | || || | | | || || | | | || |+--------------------------+ | +--------------------------+| +-----------------------------------------------------------+
ViewPart TabPane
The custom ViewPart TabPane follows exactly the same styling as the PerspectiveTabPane component, except the style name prefix is ViewPartTabPane as opposed to PerspectiveTabPane.
Also, the main client area style name (where each ViewPart is rendered) is the following (instead of Perspective.Content):
| Stlye Name | Component | Description |
|---|---|---|
| FolderLayout.Content | org.karora.cooee.app.ContentPane | Client content area |
ViewPart
A ViewPart is comprised of the following components:
| Stlye Name | Component | Description |
|---|---|---|
| ViewPart.Main | org.karora.cooee.app.BorderPane | Main view part pane |
| ViewPart.SplitPane | org.karora.cooee.app.SplitPane | Main split pane |
| ViewPart.ToolbarPane | org.karora.cooee.app.SplitPane | ActionBar area split pane |
| ViewPart.Content | org.karora.cooee.ng.ContainerEx | View part client area |
The layout is as follows:
+--------------------------------------------------------+ |+------------------------------------------------------+| || ViewPart.ToolbarPane || <--- ViewPart.SplitPane |+------------------------------------------------------+| +--------------------------------------------------------+ |+------------------------------------------------------+| || || || ViewPart.Content || || || || || || || || || |+------------------------------------------------------+| +--------------------------------------------------------+
For more information regarding the styling of the CoolBar and the Context menu, refer to Styling Orana Components.
View Part ActionBar
A View Part ActionBar area is constructed slightly differently from the main WorkbenchWindow ActionBar area as it does not have a main menu bar. Instead it has a context menu.
| Stlye Name | Component | Description |
|---|---|---|
| ViewPart.CoolBar | org.karora.cooee.app.Row | Cool bar |
| MenuBar | org.karora.cooee.ng.MenuBar | Context menu |
+--------------------------------------+-----------------+ |+------------------------------------+|+---------------+| || ViewPart.CoolBar ||| MenuBar || <--- ViewPart.ToolbarPane |+------------------------------------+|+---------------+| +--------------------------------------+-----------------+
The View Part CoolBar follows exactly the same styling as the main WorkbenchWindow CoolBar. The only exception is that each style name is preceded with "ViewPart." (e.g. "Toolbar" becomes "ViewPart.Toolbar"). This is to allow for ViewPart CoolBars to be styled differently from the main WorkbenchWindow one.
Error View Part
The Error View Part is a view part that is displayed by the workbench should an exception be thrown whilst the workbench tries to construct a view part.
It is made up of the following components:
| Stlye Name | Component | Description |
|---|---|---|
| ErrorViewPart | org.karora.cooee.app.SplitPane | Main client area |
| ErrorViewPart.Error | org.karora.cooee.app.Row | Display area for the error information |
| ErrorViewPart.Details | org.karora.cooee.app.Row | Display area for the error details |
| ErrorViewPart.Icon | org.karora.cooee.ng.ImageIcon | Error type icon |
| ErrorViewPart.MessageText | org.karora.cooee.ng.LabelEx | Error text label |
| Dialog.Button | org.karora.cooee.ng.PushButton | Error details button |
The layout of the Error View Part is as follows:
+--------------------------------------------------------+ | Error | <--- ErrorViewPart |+------+ +---------------------------+ +---------------+| || | | | | || || Icon | | MessageText | | Dialog.Button || || | | | | || |+------+ +---------------------------+ +---------------+| +--------------------------------------------------------+ |+------------------------------------------------------+| || Details || ||+----------------------------------------------------+|| ||| MessageText ||| ||+----------------------------------------------------+|| || . || || . || || . || ||+----------------------------------------------------+|| ||| MessageText ||| ||+----------------------------------------------------+|| |+------------------------------------------------------+| +--------------------------------------------------------+
Orana Style Names
The style names for the Orana components can be found in Styling Orana Components
Add Comment