redView

riena emf dynamic views

Look and Feel

based on Riena Look and Feel (LnF)

redView LnF is based on Riena LnF – even if you’re only using redView in ‘normal’ SWT Views and not together with Riena UI + Navigation in a RCP Application (explained in open-erp-ware project). If you want to know more about Riena Look and Feel, please read here.

We added support for multiple OS (Windows, Linux, OSX) – so you can define one theme running on OSX, Linux and Windows with different Fonts, Fontsizes, Colors. Also all values of pixels are recalculated because of different dpi. With some tuning and testing your LnF will look similar on different platforms. If you start redView, Equinox DS (Declarative Services) are used to see which LnF Themes are available and wich of them fit into the running OS.

To learn how to extend redView with your own LnF – themes is explained in another chapter. TODO To learn how to use and extend Riena LnF in your RCP application please take a look at open-erp-ware project.

redView Eclipse Preferences: LnF Themes

We also added support of Eclipse Preferences: Open Eclipse Preferences, search for “redView” and you’ll find all redView themes. There you can select the redView Look and Feel (LnF).

Available themes delivered with redView:

  • white background
  • dark background
  • light blue background
  • Eclipse Galileo background
  • default

these themes are your sandbox to play with – you can(and should) extend redView and add your own LnF (explained separately TODO). All your own LnF Themes are provided as Equinox Declarative Services (DS) and automatically available in the preferences.

dynamic LnF changes in Views

If you change the LnF theme and hit “Apply” then all opened Views dynamically rendered by redView will be refreshed. Also after restarting Eclipse the last selected LnF will be used. If the LnF isn’t available (perhaps a Declarative Service missing ?) the redView default Theme (“redView Voreinstellung” in the screenshot above from german system) will be used.

The Customer View you created in this example with different LnF Themes:

Colors, Background, Foreground, …

Each UI Element has its own Style. Please inspect the styles – Metamodel (styles.ecore) found in bundle org.redview.model to see the properties and differences in detail. In this example you see the RTextStyle and RLabelStyle:

From the Metamodel ypu’ll see that most Styles implement RColorProvider:

  • bgColor: Background Color (from RColors Enumeration)
  • fgColor: Foreground Color (from RColors Enumeration)
  • bgColorRGB: a String defining the Background Color as RGB values like “255,255,255”
  • fgColorRGB: same for the Foreground Color as RGB

RColors Enumeration allows you to select one of this:

  • System Color
    • BLACK
    • WHITE
    • BLUE
    • RED
    • CYAN
    • MAGENTA
    • GREEN
    • GRAY
  • FROM_PARENT: your Background or Foreground Color will be choosen from the parent UI Element. (see below)
  • Defaults from your LnF
    • DEFAULT_FG: default Foreground Color set in the selected LnF Theme
    • DEFAULT_BG: default BackgroundColor set in the selected LnF Theme
    • DEFAULT_LABEL_FG: default Label Foreground Color set in the selected LnF Theme
    • DEFAULT_OUTPUT_FG: default Output-Only (read-only) Foreground Color set in the selected LnF Theme
    • DEFAULT_ENTRY_BG: default Entry Field Background Color set in the selected LnF Theme

FROM_PARENT inherits the Colors from the parent. If you look at the Outline above you can easy see the hierarchy:

  1. RBase
    1. RLabeledEntry
      1. RLabel
      2. RText
    2. RLabeledEntry
      1. RLabel
      2. RText

If you set all Colors as FROM_PARENT and change the Background Color of RBase -> all other Elements will get this Color, too. If you change the Color of one LabeledEntry then the contained RLabel and RText inherit this Color. If you change the Color of a RText, then only this Element was changed.

Inside the Properties View you can set the Colors:

If you set Colors as RGB values, then this has a higher priority then selecting an Enum Literal from RColors. Normaly you should only use your DEFAULTs from LnF, because if you change those DEFAULTs all designed Views are displaying the new values. But from time to time some fields or labels should have a special Color you set as RGB value.

Fonts

Styles not only implement RColorProvider, but most of them also RFontProvider.

Normaly you should only set the RFontTemplate, because then you rely on the Fonts (with Styles and Size) defined in your LnF Theme (per OS). There are following Templates available:

  • LabelFont1 … LabelFont5
  • TextFont1 … TextFont5
  • HeaderFont1 … HeaderFont5
  • ListFont1 … ListFont5
  • SpecialFont1 … SpecialFont5

So for common use cases you have 5 different Font Templates for Label, Text, Header, List or Special use. You can slightly modify these Template Fonts by setting the Font Size or Font Style. Font size “-1” means “default from template”.  If you select a Font from “font” Property, then this has priority over the Templates – Font = DEFAULT uses the Templates.

As with the Colors you can set Fonts from Properties View:

Marker, mandatory Fields, …

Mandatory Fields:

Thanks to Riena this can be done easy: You can set a Field as “required = true”, which means this Field is mandatory, there must be a value. Required fields get a special Background Color (Default: yellow) if nothing was entered.

Setting the Value from Properties View:

Validation – failed – Marker:

If a Field Validation fails, then an Error Marker was displayed (Default is a red cross at left side of the Field). You can add one or more Validators to an UI Element as usual:

How To extend redView and add your own Validator is explained in another chapter. TODO

In this example we added an EMailAddressValidator to the City Field:

Now you can easy detect required fields or fields with wrong data: missing required Field is yellow marked, Validator fails has a red-cross Marker:

and here with correct input:

—–

This was only the documentation about LnF in the redView Designer. How to extend redView with your own customized LnF or to add your own Validators is explained here. TODO

%d bloggers like this: