Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "E4/CSS"
< E4
m |
|||
| Line 1: | Line 1: | ||
==Overview== | ==Overview== | ||
| + | The new '''CSS''' declarative styling support provides developers with the flexibility of styling their user interface based on a set of properties defined within a CSS style sheet. Note that while the support for SWT widgets is the primary focus of the current developers that are working on the CSS code, the core engine is '''headless''' and can be used to "style" other things such as for applying arbitrary properties to a model. | ||
| − | == | + | ==Sample== |
| + | The sample code below creates a simple Label within a Shell but the Label's foreground colour is styled to a blue colour by the CSS engine. | ||
| + | <source lang="java"> | ||
| + | Display display = new Display(); | ||
| + | Shell shell = new Shell(); | ||
| + | shell.setLayout(new GridLayout()); | ||
| + | |||
| + | Label label = new Label(shell, SWT.LEAD); | ||
| + | label.setText("Hello world!"); | ||
| + | label.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true)); | ||
| + | |||
| + | CSSEngine engine = new CSSSWTEngineImpl(display); | ||
| + | engine.parseStyleSheet(new StringReader("Label { color: blue }")); | ||
| + | engine.setErrorHandler(new CSSErrorHandler() { | ||
| + | public void error(Exception e) { | ||
| + | e.printStackTrace(); | ||
| + | } | ||
| + | }); | ||
| + | engine.applyStyles(shell, /* applyStylesToChildNodes */ true); | ||
| + | |||
| + | shell.setSize(400, 300); | ||
| + | shell.open(); | ||
| + | |||
| + | while (!shell.isDisposed()) { | ||
| + | if (!display.readAndDispatch()) { | ||
| + | display.sleep(); | ||
| + | } | ||
| + | } | ||
| + | display.dispose(); | ||
| + | </source> | ||
| + | |||
| + | ==SWT Mapping== | ||
CSS style sheets can be used to modify SWT widget properties. There is a [[E4/CSS/SWT_Mapping | table ]] showing the mapping between CSS properties and SWT widget calls. | CSS style sheets can be used to modify SWT widget properties. There is a [[E4/CSS/SWT_Mapping | table ]] showing the mapping between CSS properties and SWT widget calls. | ||
| Line 8: | Line 40: | ||
*[[E4/CSS/Add Selector|Add Selection]] | *[[E4/CSS/Add Selector|Add Selection]] | ||
*[[E4/CSS/Add Styleable Property|Add Styleable Property]] | *[[E4/CSS/Add Styleable Property|Add Styleable Property]] | ||
| + | |||
| + | [[Category:E4]] | ||
Revision as of 20:03, 28 June 2009
Contents
Overview
The new CSS declarative styling support provides developers with the flexibility of styling their user interface based on a set of properties defined within a CSS style sheet. Note that while the support for SWT widgets is the primary focus of the current developers that are working on the CSS code, the core engine is headless and can be used to "style" other things such as for applying arbitrary properties to a model.
Sample
The sample code below creates a simple Label within a Shell but the Label's foreground colour is styled to a blue colour by the CSS engine.
Display display = new Display(); Shell shell = new Shell(); shell.setLayout(new GridLayout()); Label label = new Label(shell, SWT.LEAD); label.setText("Hello world!"); label.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true)); CSSEngine engine = new CSSSWTEngineImpl(display); engine.parseStyleSheet(new StringReader("Label { color: blue }")); engine.setErrorHandler(new CSSErrorHandler() { public void error(Exception e) { e.printStackTrace(); } }); engine.applyStyles(shell, /* applyStylesToChildNodes */ true); shell.setSize(400, 300); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } display.dispose();
SWT Mapping
CSS style sheets can be used to modify SWT widget properties. There is a table showing the mapping between CSS properties and SWT widget calls.