Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Eclipse/Incubator/TK-UI"

(CSS Styling)
m (Introduction)
Line 1: Line 1:
 
==Introduction==
 
==Introduction==
 
[http://tk-ui.sourceforge.net/ TK-UI] is a proposed open source component under the Eclipse Platform Incubator project. TK-UI's purpose is to:
 
[http://tk-ui.sourceforge.net/ TK-UI] is a proposed open source component under the Eclipse Platform Incubator project. TK-UI's purpose is to:
* '''CSS/Styling''' : provide extensible CSS engine which is able to apply styles to any Object (SWT widget, Swing container, XML element....)
+
* '''CSS/Styling''' : provides an extensible CSS engine capable of applying styles to any Object (SWT widget, Swing container, XML element....)
* '''JFace Databinding DOM''' : provide JFace Databinding implementation to to bind DOM Node (Attribute, Element, Document...).
+
* '''JFace Databinding DOM''' : provides a JFace Databinding implementation to bind with a DOM Node (Attribute, Element, Document...).
* '''Declarative UI''' : (not sure that E4 are interested?).
+
* '''Declarative UI''' : (not sure if E4 is interested in this ?).
  
 
==CSS Styling==
 
==CSS Styling==

Revision as of 17:27, 9 September 2008

Introduction

TK-UI is a proposed open source component under the Eclipse Platform Incubator project. TK-UI's purpose is to:

  • CSS/Styling : provides an extensible CSS engine capable of applying styles to any Object (SWT widget, Swing container, XML element....)
  • JFace Databinding DOM : provides a JFace Databinding implementation to bind with a DOM Node (Attribute, Element, Document...).
  • Declarative UI : (not sure if E4 is interested in this ?).

CSS Styling

Goal

  • 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.
  • 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

CSS SWT sample

// 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);

Related information

You can find another information about TK-UI CSS engine :

JFace Databinding DOM

Declarative UI

1. Describe UI with any XML based markup language. Today TK-UI implements XUL and XHTML.
2. Render XML markup with any GUI library. Today TK-UI supports both SWT and Swing.
4. Use of JFace Databinding to bind UI widgets with a DOM structure (elements, attributes).
5. Manage binding with DBEL (Databinding expression language) to bind UI widgets with POJOs, Scriptable objects 
   or another UI   widget. XAML binding expression is implemented, and it's possible to easily implement 
   your own binding expression.
6. Mix several XML markup languages (ex : use XHTML and XUL in the same document, and use XAML binding expression 
   with XUL controls).
7. Manage the UI tree with a DOM document in a similar fashion of Javascript/HTML :
  * use DOM document.addEventListener to add UI event listener.
  * use document.createElement('input') to add a Text widget.
8. Manage logic of the UI with a scripting language (Javascript...) or with a Java POJO (similar to JSF Backing beans).

Back to the top