CSS Styling for Eclipse RCP 3.x and 4.x

Eclipse RCP 4.x and 3.xCSS StylingKai TödterSiemens Corporate Technology6/27/20111© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

Who am I?Software Architect/Engineer at Siemens Corporate TechnologyEclipse RCP expertOpen Source advocateCommitter at e4 and Platform UIE-mail: kai.toedter@siemens.comTwitter: twitter.com/kaitoedterBlog: toedter.com/blog6/27/20112© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

UI Styling6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.3Picture from http://www.sxc.hu/photo/1089931

UI StylingIn Eclipse 3.x, UI styling can be done usingThe Presentation APICustom WidgetsThese mechanisms are very limitedIt is not possible to implement a specific UI design, created by a designerOne innovation brought by Eclipse 4.0 was the dynamic styling of the UI using CSSThis new feature can now be used easily in the Eclipse 3.x world© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.46/27/2011

4.x Dark CSS Styling with radial Gradients© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.56/27/2011

4.x Gray CSS Styling with linear Gradients© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.66/27/2011

4.x Blue CSS Styling with linear Gradients© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.76/27/2011

3.x RCP Mail with no CSS Styling6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.8

3.x RCP Mail with CSS Styling6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.9

3.x RCP Mail CSS Color Demonstrator6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.10

3.x RCP Mail with blue CSS Styling© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.116/27/2011

How does the CSS look like?CTabItem, Label, Tree, Text { font-family: "Arial";}Shell { font-size: 12;}CTabItem, ToolBar, Button, CBanner, CoolBar { font-size: 9; background-color: white;}© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.126/27/2011

Some Things you cannot style (yet)Menu bar backgroundTable headersPartly implemented:Gradients© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.136/27/2011

Gradient Examples© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.146/27/2011linear orange blacklinear orange black 60%linear orange black orange 50% 100%radial orange blackradial orange black 60%radial orange black orange 50% 100%

Dynamic Theme SwitchingIt is possible to change the CSS based theme at runtimeGood for accessibilityGood for user preferences6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.15Picture from http://www.sxc.hu/photo/823108

Needed Bundles for 3.x Stylingorg.apache.batik.cssorg.apache.batik.utilorg.apache.batik.util.guiorg.apache.batik.xmlorg.eclipse.e4.ui.css.coreorg.eclipse.e4.ui.css.jfaceorg.eclipse.e4.ui.css.legacyorg.eclipse.e4.ui.css.swtorg.eclipse.e4.ui.css.swt.themeorg.eclipse.e4.ui.examples.css.rcporg.eclipse.e4.ui.widgetsorg.w3c.css.sacorg.w3c.dom.smilorg.w3c.dom.svg6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.16The RCP Mail Demowith CSS Styling

How to get the bundlesCheckout :pserver:anonymous@dev.eclipse.org:/cvsroot/eclipse/e4/relengImport Project Set /releng/org.eclipse.e4.ui.releng/e4.ui.css.psfCheckout e4/org.eclipse.e4.ui/bundles/org.eclipse.e4.ui.widgetsDelete all projects that are not on the previous slideCleanup org.eclipse.e4.ui.css.swtOrganize ImportsDelete dependencies to org.eclipse.e4.core.*Start the CSS RCP Mail demo6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.17

3.x How to enable CSS StylingProvide a CSS themeProvide an extension to org.exlipse.e4.ui.css.swt.themeEnable theming support in the initialize method of ApplicationWorkbenchAdvisor6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.18

Extension Point for Themes6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.19

3.x ApplicationWorkbenchAdvisorBundle b = FrameworkUtil.getBundle(getClass());BundleContext context = b.getBundleContext();ServiceReference serviceRef = context .getServiceReference(IThemeManager.class.getName());IThemeManager themeManager = (IThemeManager) context.getService(serviceRef);final IThemeEngine engine = themeManager.getEngineForDisplay(Display.getCurrent());engine.setTheme("org.eclipse.e4.ui.examples.css.rcp", true);…6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.20

How to use custom attributes?Java:widget.setData(CSSSWTConstants.CSS_ID_KEY, "navigation"); CSS:#navigation { color: #595959; background-color: #f0f1f7; }© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.216/27/2011

CSS EditorsCSS has a well known syntaxBut which UI elements can be styled?Which CSS attributes does a specific element support?At Eclipse Summit Europe an Xtext-based editor, with content assist for both elements and attributes, was shownTom Schindl is currently working on another Xtext-based editorLet’s see, what Eclipse 4.2 will bring© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.226/27/2011

3.x Dynamic Theme SwitchingBundleContext context = bundle.getBundleContext();ServiceReference ref = context.getServiceReference(IThemeManager.class.getName());IThemeManager manager = (IThemeManager) context.getService(ref);IThemeEngine engine =manager.getEngineForDisplay(PlatformUI.getWorkbench() .getActiveWorkbenchWindow() == null ? Display.getCurrent() : PlatformUI.getWorkbench().getActiveWorkbenchWindow() .getShell().getDisplay());engine.setTheme("org.eclipse.e4.ui.examples.css.rcp");© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.236/27/2011

Discussion6/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.24Picture from http://www.sxc.hu/photo/922004

License & AcknowledgementsThis work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany LicenseSee http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_USMany thanks to the authors of the pictureshttp://www.sxc.hu/photo/1089931http://www.sxc.hu/photo/823108http://www.sxc.hu/photo/9220046/27/2011© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.25

CSS Styling for Eclipse RCP 3.x and 4.x

Recommended

More Related Content

What's hot (20)

Similar to CSS Styling for Eclipse RCP 3.x and 4.x (20)

Recently uploaded (20)

CSS Styling for Eclipse RCP 3.x and 4.x