[e4-dev] Re: CSS with Forms...

[code writer <code.writer@xxxxxxx>]

Hello everybody,

we've been using Akrogen CSS engine for one year now.
I wanted to make the use of CSS engine as transparent as possible for 
developpers. All the more that we use SWT Designer as GUI tool 
(http://www.instantiations.com/windowbuilder/swtdesigner/).


So we simply override the FormToolkit  (It's made for that purpose) to 
encapsulate the use CSS Engine :
public class CssFormToolkit extends FormToolkit {
   private MyCSSEngineImpl engine;
   public CssFormToolkit(Display display) {
       super(display);
       engine = new MyCSSEngineImpl(display);
           try {
               engine.parseStyleSheet(getStyleCLass());
           } catch (IOException e) {
               e.printStackTrace();
           }

   }
   public void adapt(Control control, boolean trackFocus, boolean 
trackKeyboard) {
       super.adapt(control, trackFocus, trackKeyboard);
       engine.applyStyles(control,false);
   }
   public void adapt(Composite composite) {
       super.adapt(composite);
       applyStyles(composite);
   }

It works really fine because SWT Designer generate some code like this :
Text txt = new Text(parent,SWT.NONE);
txt.setData("class","myClass");
toolkit.apdat(txt,false,false);
Even if you use a tollkit.createXXX method It works because a call is 
made to the adapt method in any case.

But It was not enough because we needed to "stylize" the form itself.

With FormToolkit, the easiest way to customize colors is to change the 
values of the colors using
"org.eclipse.ui.forms.FormColors" like this :
http://eclipsenuggets.blogspot.com/2007/03/get-custom-colored-forms-in-4-easy.html

To customize the form colors we simply override the CSSSWTEngine . The 
only thing we have to do in the style.css file it to set the colors like 
this :

FormColors {
   title: white;
   h-gradient-start: #5BBD00;
   h-gradient-end: #5BBD00;
   h-bottom-keyline1: white;
   h-bottom-keyline2: white;
   tb-bg: white;
   tb-fg: white;
   tb-border: white;
   tb-toggle: #5BBD00;
   tb-toggle-hover: #5BDF00;
}

I will submit soon some of our code to share it with the community.

I hope I will be able to share some screen capture soon to show you what 
we are able to do.

Best regards,