Jump to: navigation, search

Difference between revisions of "Riena/Look and Feel"

(Marker)
(Look&Feel Icons)
 
(42 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Riena_Project | Riena Project]] > Look & Feel
+
{{RienaBreadcrumbs |
 +
[[Riena Project]] | [[Riena Getting started|Getting Started]] | Look & Feel}}
  
= Look&Feel for Riena =
+
{| align="right"
 +
| __TOC__
 +
|}
  
Riena provides a Look&Feel for the controls of the navigation. The Riena Look&Feel remembers the Look&Feel of Swing.
+
Riena provides a Look&Feel for the controls of the navigation. The Riena Look&Feel is similar to the Look&Feel of Swing. A Riena '''Look&Feel''' consists of a ''Look&Feel'' proper plus a ''Theme'':
  
A Look&Feel of Riena consists of the Look&Feel with a Theme. The Theme provides the colors, fonts, images and some other settings. In the Look&Feel other renderers for some controls can be set.
+
; The Theme : provides the colors, fonts, images and some other settings.  
 +
; In the Look&Feel : other renderers for some controls can be set.
  
== Custom Look&Feel ==
+
== Custom Look & Feel ==
 
In your own Look&Feel you must set your Theme and an ID.
 
In your own Look&Feel you must set your Theme and an ID.
  
 
The following steps are necessary:
 
The following steps are necessary:
  
#Extent the class <tt>RienaDefaultLnf</tt>
+
#Extend the class <tt>RienaDefaultLnf</tt>
 
#Create and set the Theme
 
#Create and set the Theme
 
#Return the ID
 
#Return the ID
Line 33: Line 37:
 
</source>
 
</source>
  
To set your custom Look&Feel call the static method <tt>setLnf(lnf)</tt> of the class <tt>LnfManager</tt>. The recommended place to do that is the constructor of the Riena Application (<tt>SwtApplication</tt>):  
+
To set your custom Look&Feel, call the static method <tt> LnfManager.setLnf(lnf)</tt>. We recommend that you call it in the constructor of the Riena Application (<tt>SwtApplication</tt>):  
  
 
Example:
 
Example:
Line 43: Line 47:
 
</source>
 
</source>
  
== Custom Theme ==
+
=== Setting the custom LnF via Extension Point ===
To write your own Theme you must implements the interface <tt>ILnfTheme</tt>.
+
Since Riena 3.0 it is also possible to set the LnF by configuring an Extension Point. So instead of setting the ExampleLnf via the LnfManager programmatically do this:
  
The interface has the following four methods:
+
<source lang="xml">
 +
<extension
 +
  point="org.eclipse.riena.ui.swt.defaultLnf">
 +
  <lnf
 +
    class="org.eclipse.riena.ui.swt.lnf.ExampleLnf">
 +
  </lnf>
 +
</extension>
 +
</source>
  
<tt>addCustomColors(Map<String, ILnfResource> table)</tt>
+
== Custom Theme ==
 +
To write your own Theme you must implement the interface <tt>ILnfTheme</tt>. The interface has the following four methods, with which you define the colors, fonts, images and settings for the controls of the navigation:
  
<tt>addCustomFonts(Map<String, ILnfResource> table)</tt>
+
<source lang="java">
 +
addCustomColors(Map<String, ILnfResource> table)
 +
addCustomFonts(Map<String, ILnfResource> table)
 +
addCustomImages(Map<String, ILnfResource> table)
 +
addCustomSettings(Map<String, Object> table)
 +
</source>
  
<tt>addCustomImages(Map<String, ILnfResource> table)</tt>
+
It is recommended to extend the default theme of Riena, <tt>DefaultRienaTheme</tt>. All necessary resources and settings are already defined in the default theme. You must only put your own defaults into the tables of the Look&Feel.
  
<tt>addCustomSettings(Map<String, Object> table)</tt>
+
For example, the following line specifies the background color of a sub-module:
 
+
These methods must be implemented to define the colors, fonts, images and settings for the controls of the navigation.
+
 
+
It is recommend to extent the default theme of Riena, <tt>DefaultRienaTheme</tt>. All necessary resources and settings are already defined in the default theme. You must only put your own defaults into the tables of the Look&Feel.
+
 
+
The following line e.g. specifies the background color of a sub module:
+
 
<source lang="java">
 
<source lang="java">
 
table.put(ILnfKeyConstants.SUB_MODULE_BACKGROUND,new ColorLnfResource(186, 193, 225));
 
table.put(ILnfKeyConstants.SUB_MODULE_BACKGROUND,new ColorLnfResource(186, 193, 225));
 
</source>
 
</source>
  
All existing keys for the Look&Feel you can find in the interface <tt>ILnfKeyConstants</tt>. It is not possible to add colors from the type <tt>org.eclipse.swt.graphics.Color</tt>. The colors must be wrapped from an instance of the class <tt>ColorLnfResource</tt>. This helps the Look&Feel to dispose all resources of the Look&Feel. Also wrappers for fonts and images exist.
+
You can find all available keys for the Look&Feel in the interface <tt>ILnfKeyConstants</tt>. Note that it is not possible to add colors from the type <tt>org.eclipse.swt.graphics.Color</tt>; the colors must be wrapped from an instance of the class <tt>ColorLnfResource</tt> (this helps with correctly disposing the Look&Feel's resources). Wrappers for fonts and images exist as well.
  
 
== Custom Renderer ==
 
== Custom Renderer ==
For nearly every control of the navigation a renderer is used to paint it. This renderers can be replaced by own implementations. To write your own renderer please extent an existing default renderer
+
For nearly every control of the navigation there is a renderer responsible for painting it. These renderers can be replaced by own implementations. To ''write'' your own renderer please extend an existing default renderer.
  
To set your own renderer you can use extensions. Therefore Riena provides an extension points: <tt>org.eclipse.riena.ui.swt.lnfrenderer</tt>
+
To ''set'' your own renderer you can use extensions. For this Riena provides an extension point <tt>org.eclipse.riena.ui.swt.lnfrenderer</tt>
  
 
This extension can only have renderer elements. A renderer element has the following three attributes:
 
This extension can only have renderer elements. A renderer element has the following three attributes:
  
<tt>lnfkey</tt>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Key of the Look&Feel for the  
+
; <tt>lnfkey</tt>
renderer (see LnfKeyConstants)
+
: Key of the Look&Feel for the renderer (see <tt>LnfKeyConstants</tt>)
 
+
<tt>lnfid</tt>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ID of the your own Look&Feel (see getLnfId())
+
  
<tt>class</tt>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Class of the RendererExample:
+
; <tt>lnfid</tt>
 +
: ID of your own Look&Feel (see <tt>getLnfId()</tt>)
  
 +
; <tt>class</tt>
 +
: Class of the RendererExample
 
<source lang="xml">
 
<source lang="xml">
 
<extension point="org.eclipse.riena.ui.swt.lnfrenderer">
 
<extension point="org.eclipse.riena.ui.swt.lnfrenderer">
Line 89: Line 101:
 
</extension>
 
</extension>
 
</source>
 
</source>
 +
 
== Look&Feel Keys ==
 
== Look&Feel Keys ==
 
The class org.eclipse.riena.ui.swt.lnf.LnfKeyConstants defines a set of keys for the Look&Feel.
 
The class org.eclipse.riena.ui.swt.lnf.LnfKeyConstants defines a set of keys for the Look&Feel.
 
These keys are used to access the color, fonts, images etc. of the Look&Feel.
 
These keys are used to access the color, fonts, images etc. of the Look&Feel.
== Shell ==
+
=== Shell ===
 
The shell of the Riena application can be very different from other RCP applications.
 
The shell of the Riena application can be very different from other RCP applications.
 
So it is possible to suppress the title bar and border of the operation system.
 
So it is possible to suppress the title bar and border of the operation system.
Line 100: Line 113:
  
 
(Because it is possible to hide the title bar and border, all the other L&F keys for the Riena shell starts with ''TITLELESS_SHELL_''.)
 
(Because it is possible to hide the title bar and border, all the other L&F keys for the Riena shell starts with ''TITLELESS_SHELL_''.)
 
  
 
=== Sub-Application Switcher ===
 
=== Sub-Application Switcher ===
 
The Riena application consists of one or more sub-applications. Only one sub-application can be active.
 
The Riena application consists of one or more sub-applications. Only one sub-application can be active.
To switch between sub-applications you can use Sub-Application Switcher in the top of the application window.
+
The Sub-Application Switcher in the top of the application window allows you to switch between sub-applications:
  
 
[[Image:lnfDefaulfSwitcher.png]]
 
[[Image:lnfDefaulfSwitcher.png]]
  
With the key SUB_APPLICATION_SWITCHER_HORIZONTAL_TAB_POSITION the position of the switcher can be defined. Three values are valid: SWT.LEFT, SWT.CENTER, SWT RIGHT.
+
; SUB_APPLICATION_SWITCHER_HORIZONTAL_TAB_POSITION  
 +
: Define the position of the switcher. Three values are valid: SWT.LEFT, SWT.CENTER, SWT.RIGHT.
  
Before the text of every switcher an icon can be displayed. To turn the option on use the key SUB_APPLICATION_SWITCHER_TAB_SHOW_ICON with the value "true".
+
; SUB_APPLICATION_SWITCHER_TAB_SHOW_ICON
 +
: Set to "true" if an icon shall be displayed in front of every switcher's text.
  
 
[[Image:lnfSwitcher.png]]
 
[[Image:lnfSwitcher.png]]
 
 
''The image above has some strange colors. This colors are used to highlight the gradients.''
 
''The image above has some strange colors. This colors are used to highlight the gradients.''
  
The texts of the sub-applications has the foreground color (L&F key: SUB_APPLICATION_SWITCHER_FOREGROUND).
+
The texts of the sub-applications have the foreground color (L&F key: '''SUB_APPLICATION_SWITCHER_FOREGROUND''').
If the text is disabled the color of the key SUB_APPLICATION_SWITCHER_DISABLED_FOREGROUND is used.
+
If the text is disabled the color defined by '''SUB_APPLICATION_SWITCHER_DISABLED_FOREGROUND''' is used.
  
The backgrounds of active and passive switcher have gradients with start and end color:
+
The backgrounds of active and passive switchers have gradients with start and end color:
  
SUB_APPLICATION_SWITCHER_ACTIVE_BACKGROUND_START_COLOR
+
; SUB_APPLICATION_SWITCHER_ACTIVE_BACKGROUND_START_COLOR
 +
; SUB_APPLICATION_SWITCHER_ACTIVE_BACKGROUND_END_COLOR
 +
; SUB_APPLICATION_SWITCHER_PASSIVE_BACKGROUND_START_COLOR
 +
; SUB_APPLICATION_SWITCHER_PASSIVE_BACKGROUND_END_COLOR
 +
; SUB_APPLICATION_SWITCHER_PROCESS_FINISHED_BACKGROUND_START_COLOR
 +
; SUB_APPLICATION_SWITCHER_PROCESS_FINISHED_BACKGROUND_END_COLOR
  
SUB_APPLICATION_SWITCHER_ACTIVE_BACKGROUND_END_COLOR
+
The selected (active) tab has an additional gradient at the top. In the L&F only one color is defined: '''SUB_APPLICATION_SWITCHER_TOP_SELECTION_COLOR'''. The renderer of this tab calcutates the start and end color.
  
SUB_APPLICATION_SWITCHER_PASSIVE_BACKGROUND_START_COLOR
+
The border of active and passive tabs are defined with:
 +
; SUB_APPLICATION_SWITCHER_INNER_BORDER_COLOR (resp. SUB_APPLICATION_SWITCHER_INNER_PROCESS_FINISHED_BORDER_COLOR)
 +
; SUB_APPLICATION_SWITCHER_BORDER_TOP_RIGHT_COLOR and
 +
; SUB_APPLICATION_SWITCHER_BORDER_BOTTOM_LEFT_COLOR.
  
SUB_APPLICATION_SWITCHER_PASSIVE_BACKGROUND_END_COLOR
+
If the tab is disabled then the three keys
 +
; SUB_APPLICATION_SWITCHER_INNER_DISABLED_BORDER_COLOR
 +
; SUB_APPLICATION_SWITCHER_DISABLED_BORDER_TOP_RIGHT_COLOR and
 +
; SUB_APPLICATION_SWITCHER_DISABLED_BORDER_BOTTOM_LEFT_COLOR
 +
are important.
  
SUB_APPLICATION_SWITCHER_PROCESS_FINISHED_BACKGROUND_START_COLOR
+
=== Menu Bar / Tool Bar ===
 +
; MENUBAR_TOP_MARGIN <span style="font-weight:normal">and</span> TOOLBAR_TOP_MARGIN
 +
: Define the margin at the top of the menu bar and the tool bar of the Riena application.
 +
; TOOLBAR_WORK_AREA_VERTICAL_GAP
 +
: Define the amount of space between the bottom of the toolbar and the work area/navigation.
  
SUB_APPLICATION_SWITCHER_PROCESS_FINISHED_BACKGROUND_END_COLOR
+
[[Image:lnfToolbarMargin.png]]
 
+
The selected (active) tab of the the sub-application switcher has an addition gradient a the top. In the L&F only one color is defined: SUB_APPLICATION_SWITCHER_TOP_SELECTION_COLOR. The renderer of this tab calcutated itself the start and end color.
+
 
+
The border of active and passive tabs define the values of with the L&F keys SUB_APPLICATION_SWITCHER_INNER_BORDER_COLOR (resp. SUB_APPLICATION_SWITCHER_INNER_PROCESS_FINISHED_BORDER_COLOR), SUB_APPLICATION_SWITCHER_BORDER_TOP_RIGHT_COLOR and SUB_APPLICATION_SWITCHER_BORDER_BOTTOM_LEFT_COLOR.
+
 
+
If the tab is disabled than the three keys SUB_APPLICATION_SWITCHER_INNER_DISABLED_BORDER_COLOR, SUB_APPLICATION_SWITCHER_DISABLED_BORDER_TOP_RIGHT_COLOR and
+
SUB_APPLICATION_SWITCHER_DISABLED_BORDER_BOTTOM_LEFT_COLOR are important.
+
  
 
=== Navigation ===
 
=== Navigation ===
In a Riena application there is always on the left side the navigation view. You can set the width of the navigation in the Look&Feel.
 
  
The constant is NAVIGATION_WIDTH.
+
; NAVIGATION_WIDTH
 +
: On the left side of a Riena application there is always the navigation view. Set the width of the navigation in the Look&Feel with this constant.
 +
: If you change this width, the width of the module-groups, module und and sub-module tree will also be changed; furthermore the width of the working area will be shrunk or grown.
  
If you change this width, also the width of the module-groups, module und and sub-module tree will be changed; furthermore the with of the working area will be shrunk or grown
 
 
==== Sub-Module Tree ====
 
==== Sub-Module Tree ====
If a module has more than one sub-module, all sub-modules will be displayed in a tree. This tree is inside the view of the module, below the title bar of the module.
+
If a module has more than one sub-module, all sub-modules will be displayed in a tree. This tree is inside the view of the module, below the module's title bar. A sub-module can have children. This children are also displayed in the sub-module tree.
  
A sub-module can have children. This children are also displayed in the sub-module tree.
+
[[Image:lnfSubModuleTree.png|right]]
  
[[Image:lnfSubModuleTree.png]]
+
You can define in the Look&Feel what icons should be displayed when a folder is open or closed. Also you can define the icon of a leaf.
  
You can define in the Look&Feel what icons should be displayed, if a folder is open oree closed. Also you can define the icon of a leaf.
+
; SUB_MODULE_TREE_FOLDER_OPEN_ICON : will be displayed when a folder is open
 
+
; SUB_MODULE_TREE_FOLDER_CLOSED_ICON : will be displayed when a folder is closed
SUB_MODULE_TREE_FOLDER_OPEN_ICON - will be displayed if a folder is open
+
; SUB_MODULE_TREE_DOCUMENT_LEAF_ICON : icon of a leaf (node without children)
 
+
SUB_MODULE_TREE_FOLDER_CLOSED_ICON - will be displayed if a folder is closed
+
 
+
SUB_MODULE_TREE_DOCUMENT_LEAF_ICON - icon of a leaf (node without children)
+
  
 
===== Marker =====
 
===== Marker =====
Leaf in the sub-module can be marked. At the moment three markers exist:
+
[[Image:lnfSubModuleTreeMarker.png|right]]
 
+
[[Image:lnfSubModuleTreeMarker.png]]
+
 
+
ErrorMarker - values of the sub-module are invalid
+
 
+
MandatoryMarker - not all required values of the sub-module are entered
+
  
UIProcessFinishedMarker - a process of the sub-module is finished
+
The leaves in the sub-modules can be marked. Currently are three markers, for which you can define additional icons using the corresponding constants:
  
For these markers icons are displayed in front of the accroding leaf icon of the sub-module tree.
+
; ErrorMarker, SUB_MODULE_TREE_ERROR_MARKER_ICON
 +
: values of the sub-module are invalid.
 +
; MandatoryMarker, SUB_MODULE_TREE_MANDATORY_MARKER_ICON
 +
: not all required values of the sub-module have been entered.
 +
; UIProcessFinishedMarker, SUB_MODULE_TREE_PROCESSED_FINISHED_MARKER_ICON
 +
: a process of the sub-module is finished.
  
You can define these additional icons with the following constants:
+
By default, marker icons are displayed in front of the corresponding leaf icon in the sub-module tree. If you prefer to have the markers in one place, the following constant can be used to set the global MarkerPosition of markers in a SubModuleTree:
  
SUB_MODULE_TREE_ERROR_MARKER_ICON
+
; SUB_MODULE_TREE_MARKER_HIERARCHIC_ORDER_POSITION
 +
: If this property is set, all markers are sorted according to their priority (<tt>getPriority()</tt> in <tt>IMarker</tt>) and only the one with the highest priority is painted at the given MarkerPosition.
  
SUB_MODULE_TREE_MANDATORY_MARKER_ICON
+
Markers influence the painting of controls depending on the marker type. Rendering of the DisabledMarker can be configured by the Look and Feel. The following constants are given:
  
SUB_MODULE_TREE_PROCESSED_FINISHED_MARKER_ICON
+
; LnfKeyConstants.DISABLED_MARKER_BACKGROUND [Color] : The background for the disabled-state rendering.
 +
; LnfKeyConstants.DISABLED_MARKER_STANDARD_ALPHA [int] : The alpha value of the disabled-state rendering for simple Controls (Buttons, Labels, ...).
 +
; LnfKeyConstants.DISABLED_MARKER_COMPLEX_ALPHA [int] : The alpha value of the disabled-state rendering for more complex Controls (List, Table, Tree ...).
  
 
=== Dialog ===
 
=== Dialog ===
Line 189: Line 209:
 
[[Image:lnfDialogTitleBar.png]]
 
[[Image:lnfDialogTitleBar.png]]
  
The picture above shows a dialog with a Riena title bar.
+
The picture above shows a dialog with a Riena title bar. The text of the title bar has the foreground color (L&F key: DIALOG_FOREGROUND).
 
+
The text of the title bar has the foreground color (L&F key: DIALOG_FOREGROUND).
+
  
 
The background of the title bar is a gradient with start and end color. The keys of the L&F are DIALOG_TITLEBAR_BACKGROUND_START_COLOR and DIALOG_TITLEBAR_BACKGROUND_END_COLOR.
 
The background of the title bar is a gradient with start and end color. The keys of the L&F are DIALOG_TITLEBAR_BACKGROUND_START_COLOR and DIALOG_TITLEBAR_BACKGROUND_END_COLOR.
Line 197: Line 215:
 
At the top (left) and the bottom (right) of the Riena title bar are three different other colors to simulate a 3D effect:
 
At the top (left) and the bottom (right) of the Riena title bar are three different other colors to simulate a 3D effect:
  
DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_1
+
* DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_1
 
+
* DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_2
DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_2
+
* DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_3
 
+
* DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_1
DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_3
+
* DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_2
 
+
* DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_3
DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_1
+
 
+
DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_2
+
 
+
DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_3
+
  
 
==== Border ====
 
==== Border ====
Line 213: Line 226:
 
[[Image:lnfDialogBorder.png]]
 
[[Image:lnfDialogBorder.png]]
  
The the dialog border is a compound of two (one pixel thick) borders. Every border has different colors a the top/left and bottom/right:
+
The dialog border is a compound of two (one-pixel) borders. Every border has different colors at the top/left and bottom/right:
  
DIALOG_BORDER_BOTTOM_RIGHT_COLOR
+
* DIALOG_BORDER_BOTTOM_RIGHT_COLOR
 
+
* DIALOG_BORDER_TOP_LEFT_COLOR
DIALOG_BORDER_TOP_LEFT_COLOR
+
* DIALOG_INNER_BORDER_BOTTOM_RIGHT_COLOR
 
+
* DIALOG_INNER_BORDER_TOP_LEFT_COLOR
DIALOG_INNER_BORDER_BOTTOM_RIGHT_COLOR
+
 
+
DIALOG_INNER_BORDER_TOP_LEFT_COLOR
+
  
 
==== Buttons ====
 
==== Buttons ====
Line 229: Line 239:
  
 
===== Close Button =====
 
===== Close Button =====
DIALOG_CLOSE_ICON - ''standard'' close icon of a dialog
+
; DIALOG_CLOSE_ICON : ''standard'' close icon of a dialog
 
+
; DIALOG_CLOSE_HOVER_ICON : will be displayed when the mouse pointer is over the close button
DIALOG_CLOSE_HOVER_ICON - will be displayed when the mouse pointer is over the close button
+
; DIALOG_CLOSE_HOVER_SELECTED_ICON : will be displayed when the mouse pointer is over the close button and the mouse button is pressed  
 
+
; DIALOG_CLOSE_INACTIVE_ICON : will be displayed when a dialog is disabled  
DIALOG_CLOSE_HOVER_SELECTED_ICON - will be displayed when the mouse pointer is over the close button and the mouse button is pressed  
+
 
+
DIALOG_CLOSE_INACTIVE_ICON - will be displayed if a dialog is disabled  
+
  
 
===== Minimize Button =====
 
===== Minimize Button =====
DIALOG_MIN_ICON - ''standard'' minimize icon of a dialog
+
; DIALOG_MIN_ICON : ''standard'' minimize icon of a dialog
 
+
; DIALOG_MIN_HOVER_ICON : will be displayed when the mouse pointer is over the minimize button
DIALOG_MIN_HOVER_ICON - will be displayed when the mouse pointer is over the minimize button
+
; DIALOG_MIN_HOVER_SELECTED_ICON : will be displayed when the mouse pointer is over the minimize button and the mouse button is pressed
 
+
; DIALOG_MIN_INACTIVE_ICON : will be displayed when a dialog is disabled  
DIALOG_MIN_HOVER_SELECTED_ICON - will be displayed when the mouse pointer is over the minimize button and the mouse button is pressed
+
 
+
DIALOG_MIN_INACTIVE_ICON - will be displayed if a dialog is disabled  
+
  
 
===== Maximize/Restore Button =====
 
===== Maximize/Restore Button =====
DIALOG_MAX_ICON - ''standard'' maximize icon of a dialog
+
; DIALOG_MAX_ICON : ''standard'' maximize icon of a dialog
 
+
; DIALOG_MAX_HOVER_ICON : will be displayed when the mouse pointer is over the maximize button
DIALOG_MAX_HOVER_ICON - will be displayed when the mouse pointer is over the maximize button
+
; DIALOG_MAX_HOVER_SELECTED_ICON : will be displayed when the mouse pointer is over the maximize  button and the mouse button is pressed
 
+
; DIALOG_MAX_INACTIVE_ICON : will be displayed when a dialog is disabled  
DIALOG_MAX_HOVER_SELECTED_ICON - will be displayed when the mouse pointer is over the maximize  button and the mouse button is pressed
+
; DIALOG_RESTORE_ICON : ''standard'' restore icon of a dialog
 
+
; DIALOG_RESTORE_HOVER_ICON : will be displayed when the mouse pointer is over the restore button
DIALOG_MAX_INACTIVE_ICON - will be displayed if a dialog is disabled  
+
; DIALOG_RESTORE_HOVER_SELECTED_ICON : will be displayed when the mouse pointer is over the restore button and the mouse button is pressed
 
+
; DIALOG_RESTORE_INACTIVE_ICON : will be displayed when a dialog is disabled
DIALOG_RESTORE_ICON - ''standard'' restore icon of a dialog
+
 
+
DIALOG_RESTORE_HOVER_ICON - will be displayed when the mouse pointer is over the restore button
+
 
+
DIALOG_RESTORE_HOVER_SELECTED_ICON - will be displayed when the mouse pointer is over the restore button and the mouse button is pressed
+
 
+
DIALOG_RESTORE_INACTIVE_ICON - will be displayed if a dialog is disabled
+
  
 
=== Embedded Title Bar ===
 
=== Embedded Title Bar ===
Line 290: Line 287:
 
The passive title has other start and end colors and an other border color: EMBEDDED_TITLEBAR_PASSIVE_BACKGROUND_START_COLOR, EMBEDDED_TITLEBAR_PASSIVE_BACKGROUND_END_COLOR, EMBEDDED_TITLEBAR_PASSIVE_BORDER_COLOR
 
The passive title has other start and end colors and an other border color: EMBEDDED_TITLEBAR_PASSIVE_BACKGROUND_START_COLOR, EMBEDDED_TITLEBAR_PASSIVE_BACKGROUND_END_COLOR, EMBEDDED_TITLEBAR_PASSIVE_BORDER_COLOR
  
The disabeld title bar is similar to the passive. Only the foreground and the border color can be different: EMBEDDED_TITLEBAR_DISABLED_FOREGROUND, EMBEDDED_TITLEBAR_DISABLED_BORDER_COLOR
+
The disabled title bar is similar to the passive. Only the foreground and the border color can be different: EMBEDDED_TITLEBAR_DISABLED_FOREGROUND, EMBEDDED_TITLEBAR_DISABLED_BORDER_COLOR
  
When the mouse if over the title bar of a module then the a hover border appears. The top and the bottom of the border has tow different colors: EMBEDDED_TITLEBAR_HOVER_BORDER_TOP_COLOR, EMBEDDED_TITLEBAR_HOVER_BORDER_BOTTOM_COLOR. The left and right side of the hover border is another gradient with a start and end color: EMBEDDED_TITLEBAR_HOVER_BORDER_START_COLOR, EMBEDDED_TITLEBAR_HOVER_BORDER_END_COLOR
+
When the mouse is over a module's title bar, the hover border appears. The top and the bottom of the border has two different colors: EMBEDDED_TITLEBAR_HOVER_BORDER_TOP_COLOR, EMBEDDED_TITLEBAR_HOVER_BORDER_BOTTOM_COLOR. The left and right side of the hover border is another gradient with a start and end color: EMBEDDED_TITLEBAR_HOVER_BORDER_START_COLOR, EMBEDDED_TITLEBAR_HOVER_BORDER_END_COLOR.
 +
With EMBEDDED_TITLEBAR_HOVER_BORDER_MARGIN you can define the margin around the hover border.
  
 
==== Close Icon ====
 
==== Close Icon ====
Line 300: Line 298:
 
[[Image:lnfModuleCloseIcon.png]]
 
[[Image:lnfModuleCloseIcon.png]]
  
The constants are:
+
; EMBEDDED_TITLEBAR_CLOSE_ICON : ''standard'' close icon
 +
; EMBEDDED_TITLEBAR_CLOSE_HOVER_ICON : will be displayed when the mouse pointer is over the close ''button''
 +
; EMBEDDED_TITLEBAR_CLOSE_HOVER_SELECTED_ICON : will be displayed when the mouse pointer is over the close ''button'' and the mouse button is pressed
 +
; EMBEDDED_TITLEBAR_CLOSE_INACTIVE_ICON : will be displayed when a module is disabled
  
EMBEDDED_TITLEBAR_CLOSE_ICON - ''standard'' close icon
+
=== UI Process List ===
 +
The list that shows all the running UIProcesses (see the blue popup in the image below) can be configured by the following constants:
 +
;STATUSLINE_UI_PROCESS_LIST_BACKGROUND
 +
: the background it the popup (default RGB color: 183, 216, 236)
 +
;STATUSLINE_UI_PROCESS_LIST_WIDTH
 +
: the width of the whole popup including the ProgressBar (default width: 160px)
  
EMBEDDED_TITLEBAR_CLOSE_HOVER_ICON - will be displayed when the mouse pointer is over the close ''button''
+
[[Image:uiprocesslist.png]]
 
+
EMBEDDED_TITLEBAR_CLOSE_HOVER_SELECTED_ICON - will be displayed when the mouse pointer is over the close ''button'' and the mouse button is pressed
+
 
+
EMBEDDED_TITLEBAR_CLOSE_INACTIVE_ICON - will be displayed if a module is disabled
+
  
 
== Look&Feel and View ==
 
== Look&Feel and View ==
  
Inside working area of the active sub-module almost standard SWT widget are used. The properties of these widgets can also changed by the Riena Look&Feel.
+
Inside the working area of the active sub-module almost-standard SWT widgets are used. The properties of these widgets can also changed by the Riena Look&Feel (LnFUpdater).
  
Unfortunately not all changes of these properties have an effect on the apperance of the widget. So on Windows you can the font of every widget, but you can only change the foreground color of some widget: The foreground color of Text can be changed but not the foreground color of a Button.
+
Unfortunately not all changes of these properties have an effect on the apperance of the widget. So on Windows you can set the font of every widget, but you can only change the foreground color of some widgets: The foreground color of a Text can be changed but not that of a Button.
  
In the Thema of the Look&Feel you can define for every kind of Widget, the default property values:
+
In the Theme of the Look&Feel you can define the default property values for every kind of Widget:
  
 
<source lang="java">
 
<source lang="java">
 
 
@Override
 
@Override
 
public void addCustomColors(Map<String, ILnfResource> table) {
 
public void addCustomColors(Map<String, ILnfResource> table) {
Line 336: Line 337:
 
table.put("Text.font", getPrimaryFont());
 
table.put("Text.font", getPrimaryFont());
 
}
 
}
 
 
</source>
 
</source>
  
So that the Look&Feel set all these property values you must set the system property ''riena.lnf.update.view=true''.
+
In order for the Look&Feel to set all these property values, you must set the system property <tt>riena.lnf.update.view=true</tt>.
 +
 
 +
=== Ignore properties of custom widget ===
 +
With the annotation @IgnoreLnFUpdater you can prevent that the LnFUpdater overwrites the value of a given property. Add this annotation in front of your custom widget class. The parameter of @IgnoreLnFUpdater is the name of one property or an array of property names.
 +
<source lang="java">
 +
@IgnoreLnFUpdater("background")
 +
public class TextButtonComposite extends Composite {
 +
 
 +
  public TextButtonComposite(Composite parent, String buttonText) {
 +
    super(parent, SWT.None);
 +
    setBackground(LnfManager.getLnf().getColor(LnfKeyConstants.SUB_MODULE_BACKGROUND));
 +
  }
 +
 
 +
}
 +
</source>
  
 
== Look&Feel Style ==
 
== Look&Feel Style ==
Line 375: Line 389:
 
One prerequisite is necessary: The system property ''riena.lnf.update.view'' must set and the value is ''true''.
 
One prerequisite is necessary: The system property ''riena.lnf.update.view'' must set and the value is ''true''.
  
 +
 +
==Look&Feel Icons==
 +
 +
{|cellpadding="20" cellspacing="0" border="1"
 +
| <b>Key(L&amp;F)</b>
 +
| <b>Filename</b>
 +
| <b>Image</b>
 +
| <b>Description</b>
 +
     
 +
   
 +
|-
 +
|IMAGE_FOLDER
 +
|node_expanded.gif
 +
| [[Image:Riena_node_expanded.gif]]
 +
|[[Image:Riena_lnf01.png]]
 +
   
 +
|-
 +
|IMAGE_FOLDER_CLOSED
 +
|node_collapsed.gif
 +
| [[Image:Riena_node_collapsed.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_EMPTY_DOCUMENT
 +
|no_format.gif
 +
| [[Image:Riena_no_format.gif]]
 +
| &nbsp;   
 +
   
 +
|-
 +
|IMAGE_CLOSE_MODULE
 +
|closeModule.png
 +
| [[Image:Riena_closeModule.png]]
 +
|[[Image:Riena_lnf02.png]] [[Image:Riena_lnf03.png]]
 +
   
 +
|-
 +
|IMAGE_CLOSE_MODULE_HOVER
 +
|closeModule_hover.png
 +
| [[Image:Riena_closeModule_hover.png]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_CLOSE_MODULE_HOVER_SELECTED
 +
|closeModule_hover_selected.png
 +
| [[Image:Riena_closeModule_hover_selected.png]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_CLOSE_MODULE_INACTIVE
 +
|closeModule_inactive.png
 +
| [[Image:Riena_closeModule_inactive.png]]
 +
|<p>&nbsp;</p>
 +
     
 +
   
 +
|-
 +
|IMAGE_BACKGROUND
 +
|background.png
 +
| [[Image:Riena_background.png]]
 +
|<p>&nbsp;</p>
 +
     
 +
   
 +
|-
 +
|IMAGE_LOGO
 +
|Riena_Logo_RGB.png
 +
| [[Image:RIENA_Logo_RGB.png]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_CLOSE
 +
|mb_close.gif
 +
| [[Image:Riena_mb_close.gif]]
 +
| [[Image:Riena_lnf04.png]]
 +
   
 +
|-
 +
|IMAGE_CLOSE_HOVER
 +
|mb_close_hover.gif
 +
| [[Image:Riena_mb_close_hover.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_CLOSE_HOVER_SELECTED
 +
|mb_close_hover_selected.gif
 +
| [[Image:Riena_mb_close_hover_selected.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_CLOSE_INACTIVE
 +
|mb_close_inactive.gif
 +
| [[Image:Riena_mb_close_inactive.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MAX
 +
|mb_max.gif
 +
| [[Image:Riena_mb_max.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MAX_HOVER
 +
|mb_max_hover.gif
 +
| [[Image:Riena_mb_max_hover.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MAX_HOVER_SELECTED
 +
|mb_max_hover_selected.gif
 +
| [[Image:Riena_mb_max_hover_selected.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MAX_INACTIVE
 +
|mb_max_inactive.gif
 +
| [[Image:Riena_mb_max_inactive.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MIN
 +
|mb_min.gif
 +
| [[Image:Riena_mb_min.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MIN_HOVER
 +
|mb_min_hover.gif
 +
| [[Image:Riena_mb_min_hover.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MIN_HOVER_SELECTED
 +
|mb_min_hover_selected.gif
 +
| [[Image:Riena_mb_min_hover_selected.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_MIN_INACTIVE
 +
|mb_min_inactive.gif
 +
| [[Image:Riena_mb_min_inactive.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_RESTORE
 +
|mb_restore.gif
 +
| [[Image:Riena_mb_restore.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_RESTORE_HOVER
 +
|mb_restore_hover.gif
 +
| [[Image:Riena_mb_restore_hover.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_RESTORE_HOVER_SELECTED
 +
|mb_restore_hover_selected.gif
 +
| [[Image:Riena_mb_restore_hover_selected.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_RESTORE_INACTIVE_ICON
 +
|mb_restore_inactive.gif
 +
| [[Image:Riena_mb_restore_inactive.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_HAND
 +
|hand.png
 +
| [[Image:Riena_hand.png]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_GRAB
 +
|grab.png
 +
| [[Image:Riena_grab.png]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_GRAB_CORNER
 +
|grabCorner.png
 +
| [[Image:Riena_grabCorner.png]]
 +
| [[Image:Riena_lnf05.png]]
 +
     
 +
   
 +
|-
 +
|IMAGE_SPACER
 +
|spacer.png
 +
| [[Image:Riena_spacer.png]]
 +
| &nbsp;
 +
 +
   
 +
|-
 +
|IMAGE_ERROR
 +
|statusline_error.gif
 +
| [[Image:Riena_statusline_error.gif]]
 +
| [[Image:Riena_lnf08.png]]
 +
 +
   
 +
|-
 +
|IMAGE_WARNING
 +
|statusline_warning.gif
 +
| [[Image:Riena_statusline_warning.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_INFO
 +
|statusline_info.gif
 +
| [[Image:Riena_statusline_info.gif]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_ERROR_MARKER
 +
|errorMarker.png
 +
| [[Image:Riena_errorMarker.png]]
 +
|[[Image:Riena_lnf06.png]][[Image:Riena_lnf07.png]]
 +
   
 +
|-
 +
|IMAGE_MANDATORY_MARKER     
 +
|mandatoryMarker.png
 +
| [[Image:Riena_mandatoryMarker.png]]
 +
| &nbsp;
 +
   
 +
|-
 +
|IMAGE_PROCESS_FINISHED_MARKER   
 +
|processFinishedMarker.png
 +
| [[Image:Riena_processFinishedMarker.png]]
 +
| [[Image:Riena_lnf09.png]]
 +
     
 +
|}
 +
   
  
 
[[Category:Riena]]
 
[[Category:Riena]]

Latest revision as of 05:46, 22 June 2011

Riena ProjectGetting Started ▶ Look & Feel

Riena provides a Look&Feel for the controls of the navigation. The Riena Look&Feel is similar to the Look&Feel of Swing. A Riena Look&Feel consists of a Look&Feel proper plus a Theme:

The Theme 
provides the colors, fonts, images and some other settings.
In the Look&Feel 
other renderers for some controls can be set.

Custom Look & Feel

In your own Look&Feel you must set your Theme and an ID.

The following steps are necessary:

  1. Extend the class RienaDefaultLnf
  2. Create and set the Theme
  3. Return the ID

Example:

public class ExampleLnf extends RienaDefaultLnf {
 
  public ExampleLnf() {
    super();
    setTheme(new ExampleTheme());
  }
 
  @Override
  protected String getLnfId() {
    return ExampleLnf;
  }
 
}

To set your custom Look&Feel, call the static method LnfManager.setLnf(lnf). We recommend that you call it in the constructor of the Riena Application (SwtApplication):

Example:

public SwtExampleApplication() {
  super();
  LnfManager.setLnf(new ExampleLnf());
}

Setting the custom LnF via Extension Point

Since Riena 3.0 it is also possible to set the LnF by configuring an Extension Point. So instead of setting the ExampleLnf via the LnfManager programmatically do this:

<extension
  point="org.eclipse.riena.ui.swt.defaultLnf">
  <lnf
    class="org.eclipse.riena.ui.swt.lnf.ExampleLnf">
  </lnf>
</extension>

Custom Theme

To write your own Theme you must implement the interface ILnfTheme. The interface has the following four methods, with which you define the colors, fonts, images and settings for the controls of the navigation:

addCustomColors(Map<String, ILnfResource> table)
addCustomFonts(Map<String, ILnfResource> table)
addCustomImages(Map<String, ILnfResource> table)
addCustomSettings(Map<String, Object> table)

It is recommended to extend the default theme of Riena, DefaultRienaTheme. All necessary resources and settings are already defined in the default theme. You must only put your own defaults into the tables of the Look&Feel.

For example, the following line specifies the background color of a sub-module:

table.put(ILnfKeyConstants.SUB_MODULE_BACKGROUND,new ColorLnfResource(186, 193, 225));

You can find all available keys for the Look&Feel in the interface ILnfKeyConstants. Note that it is not possible to add colors from the type org.eclipse.swt.graphics.Color; the colors must be wrapped from an instance of the class ColorLnfResource (this helps with correctly disposing the Look&Feel's resources). Wrappers for fonts and images exist as well.

Custom Renderer

For nearly every control of the navigation there is a renderer responsible for painting it. These renderers can be replaced by own implementations. To write your own renderer please extend an existing default renderer.

To set your own renderer you can use extensions. For this Riena provides an extension point org.eclipse.riena.ui.swt.lnfrenderer

This extension can only have renderer elements. A renderer element has the following three attributes:

lnfkey
Key of the Look&Feel for the renderer (see LnfKeyConstants)
lnfid
ID of your own Look&Feel (see getLnfId())
class
Class of the RendererExample
<extension point="org.eclipse.riena.ui.swt.lnfrenderer">
  <renderer class="org.eclipse.riena.example. application.ExampleModuleGroupRenderer"
            lnfid="ExampleLnf"
            lnfkey="ModuleGroup.renderer">
  </renderer>
</extension>

Look&Feel Keys

The class org.eclipse.riena.ui.swt.lnf.LnfKeyConstants defines a set of keys for the Look&Feel. These keys are used to access the color, fonts, images etc. of the Look&Feel.

Shell

The shell of the Riena application can be very different from other RCP applications. So it is possible to suppress the title bar and border of the operation system. Therefore the key SHELL_HIDE_OS_BORDER exists.

LnfShell500.png

(Because it is possible to hide the title bar and border, all the other L&F keys for the Riena shell starts with TITLELESS_SHELL_.)

Sub-Application Switcher

The Riena application consists of one or more sub-applications. Only one sub-application can be active. The Sub-Application Switcher in the top of the application window allows you to switch between sub-applications:

LnfDefaulfSwitcher.png

SUB_APPLICATION_SWITCHER_HORIZONTAL_TAB_POSITION
Define the position of the switcher. Three values are valid: SWT.LEFT, SWT.CENTER, SWT.RIGHT.
SUB_APPLICATION_SWITCHER_TAB_SHOW_ICON
Set to "true" if an icon shall be displayed in front of every switcher's text.

LnfSwitcher.png The image above has some strange colors. This colors are used to highlight the gradients.

The texts of the sub-applications have the foreground color (L&F key: SUB_APPLICATION_SWITCHER_FOREGROUND). If the text is disabled the color defined by SUB_APPLICATION_SWITCHER_DISABLED_FOREGROUND is used.

The backgrounds of active and passive switchers have gradients with start and end color:

SUB_APPLICATION_SWITCHER_ACTIVE_BACKGROUND_START_COLOR
SUB_APPLICATION_SWITCHER_ACTIVE_BACKGROUND_END_COLOR
SUB_APPLICATION_SWITCHER_PASSIVE_BACKGROUND_START_COLOR
SUB_APPLICATION_SWITCHER_PASSIVE_BACKGROUND_END_COLOR
SUB_APPLICATION_SWITCHER_PROCESS_FINISHED_BACKGROUND_START_COLOR
SUB_APPLICATION_SWITCHER_PROCESS_FINISHED_BACKGROUND_END_COLOR

The selected (active) tab has an additional gradient at the top. In the L&F only one color is defined: SUB_APPLICATION_SWITCHER_TOP_SELECTION_COLOR. The renderer of this tab calcutates the start and end color.

The border of active and passive tabs are defined with:

SUB_APPLICATION_SWITCHER_INNER_BORDER_COLOR (resp. SUB_APPLICATION_SWITCHER_INNER_PROCESS_FINISHED_BORDER_COLOR)
SUB_APPLICATION_SWITCHER_BORDER_TOP_RIGHT_COLOR and
SUB_APPLICATION_SWITCHER_BORDER_BOTTOM_LEFT_COLOR.

If the tab is disabled then the three keys

SUB_APPLICATION_SWITCHER_INNER_DISABLED_BORDER_COLOR
SUB_APPLICATION_SWITCHER_DISABLED_BORDER_TOP_RIGHT_COLOR and
SUB_APPLICATION_SWITCHER_DISABLED_BORDER_BOTTOM_LEFT_COLOR

are important.

Menu Bar / Tool Bar

MENUBAR_TOP_MARGIN and TOOLBAR_TOP_MARGIN
Define the margin at the top of the menu bar and the tool bar of the Riena application.
TOOLBAR_WORK_AREA_VERTICAL_GAP
Define the amount of space between the bottom of the toolbar and the work area/navigation.

LnfToolbarMargin.png

Navigation

NAVIGATION_WIDTH
On the left side of a Riena application there is always the navigation view. Set the width of the navigation in the Look&Feel with this constant.
If you change this width, the width of the module-groups, module und and sub-module tree will also be changed; furthermore the width of the working area will be shrunk or grown.

Sub-Module Tree

If a module has more than one sub-module, all sub-modules will be displayed in a tree. This tree is inside the view of the module, below the module's title bar. A sub-module can have children. This children are also displayed in the sub-module tree.

LnfSubModuleTree.png

You can define in the Look&Feel what icons should be displayed when a folder is open or closed. Also you can define the icon of a leaf.

SUB_MODULE_TREE_FOLDER_OPEN_ICON 
will be displayed when a folder is open
SUB_MODULE_TREE_FOLDER_CLOSED_ICON 
will be displayed when a folder is closed
SUB_MODULE_TREE_DOCUMENT_LEAF_ICON 
icon of a leaf (node without children)
Marker
LnfSubModuleTreeMarker.png

The leaves in the sub-modules can be marked. Currently are three markers, for which you can define additional icons using the corresponding constants:

ErrorMarker, SUB_MODULE_TREE_ERROR_MARKER_ICON
values of the sub-module are invalid.
MandatoryMarker, SUB_MODULE_TREE_MANDATORY_MARKER_ICON
not all required values of the sub-module have been entered.
UIProcessFinishedMarker, SUB_MODULE_TREE_PROCESSED_FINISHED_MARKER_ICON
a process of the sub-module is finished.

By default, marker icons are displayed in front of the corresponding leaf icon in the sub-module tree. If you prefer to have the markers in one place, the following constant can be used to set the global MarkerPosition of markers in a SubModuleTree:

SUB_MODULE_TREE_MARKER_HIERARCHIC_ORDER_POSITION
If this property is set, all markers are sorted according to their priority (getPriority() in IMarker) and only the one with the highest priority is painted at the given MarkerPosition.

Markers influence the painting of controls depending on the marker type. Rendering of the DisabledMarker can be configured by the Look and Feel. The following constants are given:

LnfKeyConstants.DISABLED_MARKER_BACKGROUND [Color] 
The background for the disabled-state rendering.
LnfKeyConstants.DISABLED_MARKER_STANDARD_ALPHA [int] 
The alpha value of the disabled-state rendering for simple Controls (Buttons, Labels, ...).
LnfKeyConstants.DISABLED_MARKER_COMPLEX_ALPHA [int] 
The alpha value of the disabled-state rendering for more complex Controls (List, Table, Tree ...).

Dialog

Riena draws an own title bar and border of a dialog, if the setting DIALOG_HIDE_OS_BORDER has the value true.

Title Bar

LnfDialogTitleBar.png

The picture above shows a dialog with a Riena title bar. The text of the title bar has the foreground color (L&F key: DIALOG_FOREGROUND).

The background of the title bar is a gradient with start and end color. The keys of the L&F are DIALOG_TITLEBAR_BACKGROUND_START_COLOR and DIALOG_TITLEBAR_BACKGROUND_END_COLOR.

At the top (left) and the bottom (right) of the Riena title bar are three different other colors to simulate a 3D effect:

  • DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_1
  • DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_2
  • DIALOG_TITLEBAR_BACKGROUND_TOP_COLOR_3
  • DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_1
  • DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_2
  • DIALOG_TITLEBAR_BACKGROUND_BOTTOM_COLOR_3

Border

LnfDialogBorder.png

The dialog border is a compound of two (one-pixel) borders. Every border has different colors at the top/left and bottom/right:

  • DIALOG_BORDER_BOTTOM_RIGHT_COLOR
  • DIALOG_BORDER_TOP_LEFT_COLOR
  • DIALOG_INNER_BORDER_BOTTOM_RIGHT_COLOR
  • DIALOG_INNER_BORDER_TOP_LEFT_COLOR

Buttons

LnfDialogButtons.png

The Riena title bar of a Dialog can have three buttons at the right side and for every button the icon must be defined in the Look&Feel:

Close Button
DIALOG_CLOSE_ICON 
standard close icon of a dialog
DIALOG_CLOSE_HOVER_ICON 
will be displayed when the mouse pointer is over the close button
DIALOG_CLOSE_HOVER_SELECTED_ICON 
will be displayed when the mouse pointer is over the close button and the mouse button is pressed
DIALOG_CLOSE_INACTIVE_ICON 
will be displayed when a dialog is disabled
Minimize Button
DIALOG_MIN_ICON 
standard minimize icon of a dialog
DIALOG_MIN_HOVER_ICON 
will be displayed when the mouse pointer is over the minimize button
DIALOG_MIN_HOVER_SELECTED_ICON 
will be displayed when the mouse pointer is over the minimize button and the mouse button is pressed
DIALOG_MIN_INACTIVE_ICON 
will be displayed when a dialog is disabled
Maximize/Restore Button
DIALOG_MAX_ICON 
standard maximize icon of a dialog
DIALOG_MAX_HOVER_ICON 
will be displayed when the mouse pointer is over the maximize button
DIALOG_MAX_HOVER_SELECTED_ICON 
will be displayed when the mouse pointer is over the maximize button and the mouse button is pressed
DIALOG_MAX_INACTIVE_ICON 
will be displayed when a dialog is disabled
DIALOG_RESTORE_ICON 
standard restore icon of a dialog
DIALOG_RESTORE_HOVER_ICON 
will be displayed when the mouse pointer is over the restore button
DIALOG_RESTORE_HOVER_SELECTED_ICON 
will be displayed when the mouse pointer is over the restore button and the mouse button is pressed
DIALOG_RESTORE_INACTIVE_ICON 
will be displayed when a dialog is disabled

Embedded Title Bar

Not only the shell of the Riena application or a dialog have a title bar also other parts of the Riena have a title bar. These can be a module in the navigation or the view of the active sub-module. The name of this title bar is Embedded Titlebar.

EmbeddedTitlebar.png

LnfEmbeddedTitlebar.png

The text of the title bar has the foreground color (activated: EMBEDDED_TITLEBAR_ACTIVE_FOREGROUND, deactivated: EMBEDDED_TITLEBAR_PASSIVE_FOREGROUND). The L&F key EMBEDDED_TITLEBAR_ACTIVE_BORDER_COLOR defines the color of the border.

The background of the Embbeded Titlebar is a gradient with start and end color. (EMBEDDED_TITLEBAR_ACTIVE_BACKGROUND_START_COLOR and EMBEDDED_TITLEBAR_ACTIVE_BACKGROUND_END_COLOR)

States

A module can have other states. The following pictures shows the title bar of the same module with different states: active, passive, disabled, active and mouse over, passive and mouse over:

ActiveEmbeddedTitlebar.png

DeactiveEmbeddedTitlebar.png

DisabledEmbeddedTitlebar.png

ActiveHoverEmbeddedTitlebar.png

DeactiveHoverEmbeddedTitlebar.png

The passive title has other start and end colors and an other border color: EMBEDDED_TITLEBAR_PASSIVE_BACKGROUND_START_COLOR, EMBEDDED_TITLEBAR_PASSIVE_BACKGROUND_END_COLOR, EMBEDDED_TITLEBAR_PASSIVE_BORDER_COLOR

The disabled title bar is similar to the passive. Only the foreground and the border color can be different: EMBEDDED_TITLEBAR_DISABLED_FOREGROUND, EMBEDDED_TITLEBAR_DISABLED_BORDER_COLOR

When the mouse is over a module's title bar, the hover border appears. The top and the bottom of the border has two different colors: EMBEDDED_TITLEBAR_HOVER_BORDER_TOP_COLOR, EMBEDDED_TITLEBAR_HOVER_BORDER_BOTTOM_COLOR. The left and right side of the hover border is another gradient with a start and end color: EMBEDDED_TITLEBAR_HOVER_BORDER_START_COLOR, EMBEDDED_TITLEBAR_HOVER_BORDER_END_COLOR. With EMBEDDED_TITLEBAR_HOVER_BORDER_MARGIN you can define the margin around the hover border.

Close Icon

The Riena Look&Feel also defines the close icon of the module title bar:

LnfModuleCloseIcon.png

EMBEDDED_TITLEBAR_CLOSE_ICON 
standard close icon
EMBEDDED_TITLEBAR_CLOSE_HOVER_ICON 
will be displayed when the mouse pointer is over the close button
EMBEDDED_TITLEBAR_CLOSE_HOVER_SELECTED_ICON 
will be displayed when the mouse pointer is over the close button and the mouse button is pressed
EMBEDDED_TITLEBAR_CLOSE_INACTIVE_ICON 
will be displayed when a module is disabled

UI Process List

The list that shows all the running UIProcesses (see the blue popup in the image below) can be configured by the following constants:

STATUSLINE_UI_PROCESS_LIST_BACKGROUND
the background it the popup (default RGB color: 183, 216, 236)
STATUSLINE_UI_PROCESS_LIST_WIDTH
the width of the whole popup including the ProgressBar (default width: 160px)

Uiprocesslist.png

Look&Feel and View

Inside the working area of the active sub-module almost-standard SWT widgets are used. The properties of these widgets can also changed by the Riena Look&Feel (LnFUpdater).

Unfortunately not all changes of these properties have an effect on the apperance of the widget. So on Windows you can set the font of every widget, but you can only change the foreground color of some widgets: The foreground color of a Text can be changed but not that of a Button.

In the Theme of the Look&Feel you can define the default property values for every kind of Widget:

@Override
public void addCustomColors(Map<String, ILnfResource> table) {
	super.addCustomColors(table);
	table.put("Label.background", getPrimaryBackground());
	table.put("Label.foreground", getPrimaryForeground());
	table.put("Text.background", new ColorLnfResource(null));
	table.put("Text.foreground", getPrimaryForeground());
}
 
@Override
public void addCustomFonts(Map<String, ILnfResource> table) {
	super.addCustomFonts(table);
	table.put("Button.font", getPrimaryFont());
	table.put("Label.font", getPrimaryFont());
	table.put("Text.font", getPrimaryFont());
}

In order for the Look&Feel to set all these property values, you must set the system property riena.lnf.update.view=true.

Ignore properties of custom widget

With the annotation @IgnoreLnFUpdater you can prevent that the LnFUpdater overwrites the value of a given property. Add this annotation in front of your custom widget class. The parameter of @IgnoreLnFUpdater is the name of one property or an array of property names.

@IgnoreLnFUpdater("background")
public class TextButtonComposite extends Composite {
 
  public TextButtonComposite(Composite parent, String buttonText) {
    super(parent, SWT.None);
    setBackground(LnfManager.getLnf().getColor(LnfKeyConstants.SUB_MODULE_BACKGROUND));
  }
 
}

Look&Feel Style

With the Riena L&F you have the possibility to associate the properties of a SWT widget with a simple style of the L&F.

The name of the style will be added to property data of the SWT widget:

Label myLabel = new Label(parent,SWT.NONE);
myLabel.setData(UIControlsFactory.KEY_LNF_STYLE, "sectionLabel");

In the L&F theme the style is defined:

@Override
public void addCustomColors(Map<String, ILnfResource> table) {
	super.addCustomColors(table);
	table.put("sectionLabel.foreground", new ColorLnfResource(10, 10, 200));
}
 
@Override
public void addCustomFonts(Map<String, ILnfResource> table) {
	super.addCustomFonts(table);
	FontData fontData = getPrimaryFont().getFontData();
	table.put("sectionLabel.font", new FontLnfResource(fontData.getName(), fontData.getHeight(), SWT.BOLD));
}

One prerequisite is necessary: The system property riena.lnf.update.view must set and the value is true.


Look&Feel Icons

Key(L&F) Filename Image Description


IMAGE_FOLDER node_expanded.gif Riena node expanded.gif Riena lnf01.png
IMAGE_FOLDER_CLOSED node_collapsed.gif Riena node collapsed.gif  
IMAGE_EMPTY_DOCUMENT no_format.gif Riena no format.gif  
IMAGE_CLOSE_MODULE closeModule.png Riena closeModule.png Riena lnf02.png Riena lnf03.png
IMAGE_CLOSE_MODULE_HOVER closeModule_hover.png Riena closeModule hover.png  
IMAGE_CLOSE_MODULE_HOVER_SELECTED closeModule_hover_selected.png Riena closeModule hover selected.png  
IMAGE_CLOSE_MODULE_INACTIVE closeModule_inactive.png Riena closeModule inactive.png

 


IMAGE_BACKGROUND background.png Riena background.png

 


IMAGE_LOGO Riena_Logo_RGB.png RIENA Logo RGB.png  
IMAGE_CLOSE mb_close.gif Riena mb close.gif Riena lnf04.png
IMAGE_CLOSE_HOVER mb_close_hover.gif Riena mb close hover.gif  
IMAGE_CLOSE_HOVER_SELECTED mb_close_hover_selected.gif Riena mb close hover selected.gif  
IMAGE_CLOSE_INACTIVE mb_close_inactive.gif Riena mb close inactive.gif  
IMAGE_MAX mb_max.gif Riena mb max.gif  
IMAGE_MAX_HOVER mb_max_hover.gif Riena mb max hover.gif  
IMAGE_MAX_HOVER_SELECTED mb_max_hover_selected.gif Riena mb max hover selected.gif  
IMAGE_MAX_INACTIVE mb_max_inactive.gif Riena mb max inactive.gif  
IMAGE_MIN mb_min.gif Riena mb min.gif  
IMAGE_MIN_HOVER mb_min_hover.gif Riena mb min hover.gif  
IMAGE_MIN_HOVER_SELECTED mb_min_hover_selected.gif Riena mb min hover selected.gif  
IMAGE_MIN_INACTIVE mb_min_inactive.gif Riena mb min inactive.gif  
IMAGE_RESTORE mb_restore.gif Riena mb restore.gif  
IMAGE_RESTORE_HOVER mb_restore_hover.gif Riena mb restore hover.gif  
IMAGE_RESTORE_HOVER_SELECTED mb_restore_hover_selected.gif Riena mb restore hover selected.gif  
IMAGE_RESTORE_INACTIVE_ICON mb_restore_inactive.gif Riena mb restore inactive.gif  
IMAGE_HAND hand.png Riena hand.png  
IMAGE_GRAB grab.png Riena grab.png  
IMAGE_GRAB_CORNER grabCorner.png Riena grabCorner.png Riena lnf05.png


IMAGE_SPACER spacer.png Riena spacer.png  


IMAGE_ERROR statusline_error.gif Riena statusline error.gif Riena lnf08.png


IMAGE_WARNING statusline_warning.gif Riena statusline warning.gif  
IMAGE_INFO statusline_info.gif Riena statusline info.gif  
IMAGE_ERROR_MARKER errorMarker.png Riena errorMarker.png Riena lnf06.pngRiena lnf07.png
IMAGE_MANDATORY_MARKER mandatoryMarker.png Riena mandatoryMarker.png  
IMAGE_PROCESS_FINISHED_MARKER processFinishedMarker.png Riena processFinishedMarker.png Riena lnf09.png