[eclipse-incubator-e4-dev] CSS flavor used for theming in RAP

[Ralf Sternberg <rsternberg@xxxxxxxxxxxxxx>]

Hi all,

let me first introduce myself: I'm a member of the RAP [1] team and 
developed the theming subsystem. I guess most of you already know about 
RAP, it is a platform that lets you run RCP applications on a web server 
and access them with a browser. RAP uses an implemenation of a (growing) 
subset of SWT for the web environment, called RWT, that renders widgets 
in a browser. The RWT theming allows to define the default look of these 
widgets (comparable to the theming capabilities of a desktop 
environment). A few month ago we decided to switch from theme 
definitions in simple property files to the more flexible and popular 
CSS format.

I'd like to present our theme file CSS flavor here and line out a couple 
of design choices we made. Of course, we would love to see a convergence 
between the RWT theming and the CSS support in e4. Our design is very 
similar to Matthew Hatem's work. For more details, see [2].


1. Element names are plain widget names without any namespace prefixes
   for the sake of readability. There are no name collisions in SWT,
   custom RWT widgets can declare a different name/prefix (every
   themeable widget provides an xml file that declares its widget name
   and its themeable properties). Example:

   List, Table {
     background-color: white:
   }

2. We represent every style flag as a single attribute:

   Label[BORDER], CLabel[BORDER] {
     border: 1px solid #ff0000;
   }

   An alternative had been to have a list of style flags in a single
   "style" attribute, but this would result in more complicated CSS
   declarations such as:

   Label[style~="BORDER"], CLabel[style~="BORDER"] {
     ...
   }

   Some style flags are used to select a certain widget subtype (e.g.
   SEPARATOR, RADIO). We decided to use attributes for all style flags
   for consistency instead of inventing new names like PushButton or
   Separator. CSS attributes can also be combined like this:

   Button[PUSH][BORDER] {
     ...
   }

3. We use pseudo-classes for dynamic states like hover, selected,
   focused, etc.

   Button[PUSH]:hover {
     background-color: white
   }

4. CSS class syntax for "widget variants". This is a way to style
   certain widget instances separately, comparable to classes in HTML.
   Example:

   Button.shopping-cart {
     padding: 10 px;
     background-image: url( "images/shopping-cart-bg.png" );
   }

   button.setData( WidgetUtil.CUSTOM_VARIANT, "shopping-cart" );

   We think that the .class notation is a natural fit even though the
   spec reserves this construct for HTML.
   In addition, we could also support widget ids, but this would
   restrict the style definition to one single widget instance.
   We didn't see any advantage in this so far.

5. Reuse existing CSS property names whereever possible (such as font,
   border, color, background-color, background-image, etc.)
   We only invented a few new properties where no suitable CSS property
   existed, for example "background-gradient-color".


Although both e4 CSS and RWT theme file CSS define styles for SWT 
widgets, there are some differences:

* RWT theming defines the *default* look of widgets, i.e. the styles
  that apply when no custom color, font, etc. has been set. These values
  are also restored when calling setColor( null ), setFont( null ) etc.
  In SWT, the default style is defined by the windowing system. As an
  effect, setColor( null ) would always re-install the system default no
  matter what is defined in the CSS, right?

* RAP can potentially provide more flexible styling than a widget
  toolkit on the desktop as it is not bound to the operating system's
  restrictions. For example, developers will be able to define hover
  colors, radius of rounded corners, or register their own images for
  check boxes.

* RWT theming is limited to widgets, it cannot (yet) be used to style
  workbench parts.

What do you think about how this could relate to CSS styling in e4?


Best regards,

  Ralf


[1] http://www.eclipse.org/rap
[2] 
http://help.eclipse.org/ganymede/index.jsp?topic=/org.eclipse.rap.help/help/html/advanced/theming.html