Re: [eclipse-incubator-e4-dev] Feedback about TK-UI CSS engine

[Tom Schindl <tom.schindl@xxxxxxxxxxxxxxx>]

Angelo zerr schrieb:
> Hi,
> 
> At first I would like say a great Thank to Kevin which have integrate
> TK-UI CSS engine into E4.
> Thank a lot Kevin!
> 
> I send you mail because I have received some feedback about TK-UI CSS
> engine and I would like share it with E4.
> 
> 1. CSS & SWT FormToolKit
> 
> A company sent mail to tell me that thea are using TK-UI CSS engine in
> their RCP application.
> They use CSS engine with SWT FormToolkit with very interesting mean I find.
> 
> They have extended the FormToolKit to have CSSFormToolkit and apply
> styles into adpat mehod.
> So with this solution :
> 
> * No need to loop for SWT widgets hierarchies (it's like the non
> existing widgetAdded SWT event which have already spoken).
> * if I have understood, they are using CSS engine into this SWT Designer
> <http://www.instantiations.com/windowbuilder/swtdesigner/index.html>, so
> thay can manage CSS in the same time than UI is designed.
>   Is not cool?
> 
> I think E4 could implement CSSFormToolKit. What do you think?

I don't think the FormToolKit-API is needed once we have a real styling
story. The nice looking API could IMHO better created nested
SWT-Composite, ...

Say for example we want to build a form with a title. I'd envision we do
it like this:

--------8<--------
Composite form = new Composite(parent,SWT.NONE);
form.setBackgroundMode(SWT.INHERIT_DEFAULT);
form.setData("class","form");
form.setLayout(new GridLayout());

Composite header = new Composite(form,SWT.NONE);
header.setBackgroundMode(SWT.INHERIT_DEFAULT);
header.setData("class","form_header");
header.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
header.setLayout(new GridLayout(2,false));

Label headerImage = new Label(header,SWT.NONE);

Label headerText = new Label(header,SWT.NONE);
headerText.setData("form_header_text");

Composite body = new Composite(form,SWT.NONE);
body.setData("class","form_body");
body.setLayoutData(new GridData(GridData.FILL_BOTH));

// .... your standard code
--------8<--------

Then we style this whole with these style informations:

Composite.form {
   background-color: white;
}

Composite.form_header {
   background-gradient: vertical, #FF0000, #00FF00;
}

Label.form_header_text {
   color: #0000FF;
}


Whether we wrap this behind a reusable API is another question.

Tom

-- 
B e s t S o l u t i o n . a t                        EDV Systemhaus GmbH
------------------------------------------------------------------------
tom schindl                               leiter softwareentwicklung/CSO
------------------------------------------------------------------------
eduard-bodem-gasse 8/3    A-6020 innsbruck      phone    ++43 512 935834