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

Eclipse/Incubator/TK-UI

< Eclipse‎ | Incubator
Revision as of 01:23, 10 September 2008 by Azerr.redhat.com (Talk | contribs) (Declarative UI)

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

Goals

  • Provide a Customizable CSS Engine :
    • Apply styles to any object (SWT widgets, Swing Container, XML).
    • Extends the existing selectors behaviour (ex : Text#MyId {...}.
    • Manage your own selectors.
    • Extend the existing CSS Property behavior (ex: color:red).
    • Add your own CSS properties.
    • Resource caching (Color, Font, Image...).
    • Manage the resources paths (Image...).
    • Choose the SAC parser to use.
  • Can apply styles at runtime :
    • Compute the default styles.
    • Apply default styles before applying new styles.
    • Pseudo classes :focus, :hover are supported.
    • Can easily be embedded in CSS editors to enable real-time previewing.
    • Provide tools to generate a CSS stylesheet from an existing UI tree (SWT Shell...).

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

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

Related information

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

JFace Databinding DOM

Work is underway to support binding to w3c DOM node. It's DOM Observable JFace Databinding. You can read more information at JFace Databinding Wiki.

Declarative UI

  • Describe UI with any XML based markup language. Today TK-UI implements XUL and XHTML.
  • Render XML markup with any GUI library. Today TK-UI supports both SWT and Swing.
  • Use of JFace Databinding to bind UI widgets with a DOM structure (elements, attributes).
  • 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.
  • Mix several XML markup languages (ex : use XHTML and XUL in the same document, and use XAML binding expression with XUL controls).
  • 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.
  • Manage logic of the UI with a scripting language (Javascript...) or with a Java POJO (similar to JSF Backing beans).

Organization

Initial Committers

  • Angelo Zerr

Initial Code Contribution

TK-UI-Project

Interested Parties

Anyware Technologies

Back to the top