1. TK-UI – Toolkit for User Interface CSS Engine

2. Akrogen TK-UI CSS Engine – Goal Try to improve Matt work http://www.eclipsecon.org/2007/index.php?pa ge=sub/&id=3631 Provide Customizable CSS Engine : – Apply styles to any object (SWT widgets, Swing Container, XML). – Extends the existing selectors behaviour (ex : Text#MyId {...}. – Manage your own selector. – Extend the existing CSS Property behaviour (ex: color:red). – Add your own CSS property. – Manage cache for the resources (Color, Font, Image...) used for the styles. – Manage path for the resources (Image...). – Choose the SAC parser to use.

3. Akrogen TK-UI CSS Engine – Goal Can apply styles at runtime : – Compute default styles. – Apply default styles before apply new styles. – Pseudo classes :focus, :hover are supported. – Useful to manage CSS editors. Provide tools to generate CSS stylesheet from an existing UI (SWT Shell...) with CSSSerializer. TK-UI sample provide SWT CSS Editor which show the CSS Engine capability....

4. Akrogen CSS Editor Sample (1) Type CSS style (2) Style is applyed at runtime (3) Change to HTML selector (4) File/New : generate default style with CSSSerializer

5. Akrogen TK-UI CSS Engine - Modules TK-UI provides : – CSS Engine Core : Manage logic of all CSS Engine (CSSEngine interface) : – Parse style sheet. – Apply styles to any Object (SWT widgets, Swing container, XML Element..)‏ Library : org.akrogen.tkui.css.core*.jar – SWT CSS Engine : Based on CSS Engine Core Apply styles to SWT widgets. Library : org.akrogen.tkui.css.swt*.jar – Swing CSS Engine : Based on CSS Engine Core Apply styles to Swing component. Library : org.akrogen.tkui.css.swing*.jar

6. Akrogen TK-UI CSS Engine - Sample SWT - Sample (Explicit Strategy)‏ // 1. Create SWT CSS Engine CSSEngine engine = new CSSSWTEngineImpl(display); // 2. Parse style sheet engine.parseStyleSheet(new StringReader( "Label {color:red;} Text {background-color:green;}")); // Label Label label1 = new Label(panel1, SWT.NONE); label1.setText("Label 0"); // Text Text text1 = new Text(panel1, SWT.NONE); text1.setText("bla bla bla..."); // 3. Apply Styles (Loop for shell children widgets)‏ engine.applyStyles(shell, true);

7. Akrogen W3C - SAC SAC Parser interface (W3C)‏ – W3C provide specification to parse StyleSheet with SAC Parser. See at http://www.w3.org/TR/SAC/ – W3C provides sac.jar which contains SAC interface. SAC Parser implementation : – All parsers implement (only) CSS2 spécification. – See at http://www.w3.org/Style/CSS/SAC/ – Flute : This implementation is using JavaCC. – Batik : Smaller and faster than flute (to check). – SteadyState.

8. Akrogen TK-UI CSS Engine – Core - SAC TK-UI CSS Engine core – Use SAC Parser (w3c interface) to parse style sheet. – Can use any SAC parser implementation. – SAC Parser implementation is chosen with ISACParserFactory. – By default CSS Engine use Flute customized Flute customized. – TK-UI customize flute to manage CSS3 namespaces. – Why have chosen flute? Because Flute is based on JavaCC and it's easy to customize grammar.

9. Akrogen W3C - CSS W3C provide specification about CSS, CSS2, CSS3. W3C provide CSS interface for Level 2 Document Object Model Style. The definitions are divided into – StyleSheets : StyleSheet, StyleSheetList, DocumentStyle...interfaces – CSS : CSSStyleSheet, CSSRuleList, CSSValue, ViewCSS, CSStyleDeclaration... See at http://www.w3.org/TR/2000/REC- DOM-Level-2-Style-20001113/java-binding

10. Akrogen TK-UI CSS Engine – Core - CSS TK-UI implement CSS W3C interfaces : – ViewCSSImpl wich implement W3C ViewCSS and manage the computing of styles. – DocumentCSSImpl which implement W3C DocumentCSS and store StyleSheet parsed. – CSSPropertiesImpl which implement W3C CSS2Properties to manage CSS2 inline style CSS2Properties style =...; style.setColor('red'); – CSSValueImpl,...

11. Akrogen TK-UI CSS Engine - Selectors Selectors are used to define widgets which must be styled. Selector are configurable. TK-UI provide by default 2 kind of selectors : – SWT Selector : use class name widget for selector. Ex : Text {...} to apply styles to SWT Text. – HTML Selector : use HTML name for selector. Ex : input {...} to apply styles to SWT Text. Why HTML selector? – You can download CSS stylesheet into the Web (ex : Zen CSS) and apply it directly to your SWT UI.

12. Akrogen HTML/SWT Selectors SWT Selector : Text { background-color:green; } Label { color:red; } HTML Selector input[type='text'] { background-color:green; } label { color:red; }

13. Akrogen ID selectors ID selectors : uses widget's getData/setData with key "id" : Label#MyId { color:red; } Label label =... label.setData("id", "MyId");

14. Akrogen Class selectors class selectors : uses widget's getData/setData with key "class" :.redColor { color:red; } Label label =.... label.setData("class", "redClass");

15. Akrogen Descendant selectors Descendant selectors : select SWT Label which is added to a SWT Composite which is added to a SWT Composite. Composite Composite Label { color:red; } Label { color:green; }

16. Akrogen Attribute selectors/style attribute style attribute : allow to distinguish the CSS style of SWT Button with style=SWT.CHECK (checkbox) with SWT Button with style=SWT.RADIO (radio) : Button[style='SWT.CHECK'] { color:red; } Button[style='SWT.RADIO'] { color:green; } Bad solution. It will be better to write : Button[style~='SWT.RADIO'] { color:green; }

17. Akrogen Attribute selectors/getter type getter type : allow to retrieve with introspection the value of a SWT widget getter. For instance SWT Text has getEditable method which return true if the widget is editable. It's possible to write style like this : Text[editable=true] { color:red; }

18. Akrogen Attribute selectors/custom type custom type : manage attributes values with setData method of SWT widget. For instance, if you define setData like this Text text =... text.setData("foo", "warning"); You can write CSS style like this : Text[foo="warning"] { color:red; }

19. Akrogen Pseudo-classes Pseudo-classes supported : :focus, :hover Text:focus { color:red; } Text:hover { color:green; } Can implement your own pseudo classes.

20. Akrogen Inline Style (1)‏ style attribute : uses widget's getData/setData with key "style" : Text text =... text.setData("style", "color:red;cursor:help;");

21. Akrogen Inline Style (2)‏ org.w3c.dom.css.CSS2Properties : get CSS2Properties instance which define the whole of CSS2 properties and therefore define style to use (like Javascript ) : Text text =... CSSStylableElement stylableElement = (CSSStylableElement) engine.getElement(text); CSS2Properties style = stylableElement.getStyle(); style.setColor("red"); style.setBackgroundColor("yellow");

22. Akrogen Inline style (3)‏ ParseAndApplyStyleDeclaration : engine method : Text text =... engine.parseAndApplyStyleDeclaration(text, "color:red;");

23. Akrogen TK-UI CSS Engine – Applying style strategy Strategies to apply style to widget : – Explicit strategy (Loop for widgets) : Apply style by putting root widgets (ex : SWT Shell) and loop for children widget to apply style for each widget. Prop : works with any Object (Swing,SWT...)‏ Cons : – Must call applyStyles method at end of UI construction. – Must iterate on each widgets parent. – Lazy strategy: Apply style as soon as Widget is added to Composite. Prop : – ApplyStyles method must not be called. – Widget root must not iterate to apply styles to widget children. Cons : works good with Swing but doesn't work good with SWT (see next Slide).

24. Akrogen TK-UI CSS Engine – Lazy strategie For Swing works very good. – Use Swing Toolkit to detect that Container is Added. Toolkit tk = Toolkit.getDefaultToolkit(); tk.addAWTEventListener(listener, AWTEvent.CONTAINER_EVENT_MASK); For SWT doesn't work very good. – SWT doesn't provide Event when Widget is added to Composite. – TK-UI simulate the Event widgetAdded with SWT.Show and SWT.Resize event.

25. Akrogen TK-UI CSS Engine – Core – SWT, Swing, XML SWT, Swing, XML CSS engine implementation extends AbstractCSSEngine (implement CSSEngine interface). For SWT CSS Engine implementation, each SWT widgets are wrapped with SWT Element (W3C) implementation. Each CSS implementation must manage : – The applying style strategie : Explicit strategie : Apply style after all SWT widgets are added into Shell by looping for each widgets and apply style to widget. Lazy strategie : Apply style as soon as a widget is added to the composite. – Apply style to the widget for each CSS property registered with ICSSPropertyHandler (color, font...).

26. Akrogen TK-UI CSS Engine – Core - CSSEngine Core provide CSSEngine interface : – parseStyleSheet : parse style sheet with SAC parser, build W3C CSSStyleSheet and store it to DocumentCSS. – applyStyles(*) : apply styles to any object (SWT Widget, Swing Container, XML...)‏ – parseStyleDeclaration (*) : load a style declaration CSSStyleDeclaration. – applyStyleDeclaration (*) : apply style declarations on widgets (Swing, SWT...). – parsePropertyValue (*) : parse a String value CSSValue – applyCSSProperty (*) : apply a CSS property on a widget. – retrieveCSSProperty (*) : retrieve a CSS property from a widget. – reset : reset the loaded stylesheet. – dispose : dispose the used resources (Color, Font...). This method also calls reset.

27. Akrogen TK-UI CSS Engine – Core - AbstractCSSEngine Core provide AbstractCSSEngine which manage logic of CSS engine : – parse style sheet – store style sheet – compute CSS style declaration... AbstractCSSEngine works with org.w3c.dom.Element to : – get children of widget (to apply styles by looping for children widgets). – Compute style with org.w3c.dom.css.ViewCSS#getComputedStyle(Ele ment,String)} – Get name of widget into CSS selector.

28. Akrogen TK-UI CSS Engine - CSSStylableElement More exactly, CSS Engine works with CSSStylableElement interface – Extends org.w3c.dom.Element – Define methods : public String getCSSId() : return the id of the widget : – Used to write Text#MyId {color:red;} – SWT Element implementation use Data methods to store the id : text.seData('id','MyId')‏ public String getCSSClass() : return the CSS class of the widget – Used to write.redClass {color:red;} – SWT Element implementation use Data methods to store class : text.setData(class'', 'redClass');

29. Akrogen TK-UI IElementProvider When CSS engine must apply style to an object (eg : SWT widget), it search CSStylableElement implementation linked by using IElementProvider. IElementProvider is interface with methods public Element getElement(Object element, CSSEngine engine); Ex for SWT SWTElementProviderImpl return SWTElement. IElementProvider allow to return customize CSSSTylableElement. So you can manage id, class, style information as you want.

30. Akrogen TK-UI CSS engine - Improvement Manage another CSS properties : – Margin, float...: manage layout (Swt or Swing). Use Miglayout? – Border : manage border correctly, manage round border (CSS3 property). Implement W3C query selector : – Retrieve widget by matching against a group of selectors. – See at http://dev.w3.org/2006/webapi/selectors- api/http://dev.w3.org/2006/webapi/selectors- api/ Can manage CSS Editor : – Store rule about CSS properties available for a widget. => can manage completion into CSS editor on CSS property.

31. Akrogen TK-UI – Target (1)‏ Describe UI with XML Markup (XHTML, XUL...) and render it into SWT or Swing. Manage UI with DOM Document (like javascript document into Web Browser): – Use w3c createElementNS, appenChild, removeChild to add/remove UI widgets. – Use w3c addEventListener to add blur, focus... events. Manage logic with Javascript or backing bean.

32. Akrogen TK-UI – Target (2)‏ Databinding : – Use JFace Databinding. Internally : Bind UI with DOM Nodes (element, attribute...) of document. DBEL (Databinding Expression language) : Bind UI with Scriptable objects, XML, JavaBeans... Ex:. – Bind Scriptable objects (javascript), Java Bean, XML... with UI widgets. Extensible : – Add your own XML Markup. – Add your own renderer.

33. Akrogen TK-UI - Target (3)‏ CSS Engine : – Use CSS style into XML Markup description : Styles inlines : Global styles : input{color:red;} Javascript : Element input =...; input.style.color='red'; – Use CSS style with pur SWT, Swing,... CSSEngine engine =...; engine.applyStyles(...)‏ Integrate TK-UI into Akrogen which is Eclipse plugin to generate code with wizard that you describe with XUL, javascript. Wizard is linked to Template (Freemarker,....) or Ant Task.