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

04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 1

Eclipse RCP 4.x and 3.xCSS Styling

Kai TödterSiemens Corporate Technology


Who am I?

Software Architect/Engineer at Siemens Corporate Technology

Eclipse RCP expert Open Source advocate Committer at e4 and Platform UI E-mail: [email protected] Twitter: twitter.com/kaitoedter Blog: toedter.com/blog

04/12/2023 3

UI Styling

© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

Picture from http://www.sxc.hu/photo/1089931

04/12/2023

UI Styling

In Eclipse 3.x, UI styling can be done using The Presentation API Custom Widgets

These mechanisms are very limited It is not possible to implement a specific UI

design, created by a designer One innovation brought by Eclipse 4.0 was the

dynamic styling of the UI using CSS This 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. 4

04/12/2023

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

04/12/2023

4.x Gray CSS Styling with linear Gradients



4.x Blue CSS Styling with linear Gradients


3.x RCP Mail with no CSS Styling


3.x RCP Mail with CSS Styling


3.x RCP Mail CSS Color Demonstrator


3.x RCP Mail with blue CSS Styling

04/12/2023

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


04/12/2023

Some Things you cannot style (yet)

Menu bar background Table headers

Partly implemented: Gradients


04/12/2023

Gradient Examples


linear orange black linear orange black 60% linear orange black orange 50% 100%

radial orange black radial orange black 60% radial orange black orange 50% 100%

04/12/2023 15

Dynamic Theme Switching

It is possible to change the CSS based theme at runtime

Good for accessibility Good for user preferences

© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.



Needed Bundles for 3.x Styling org.apache.batik.css org.apache.batik.util org.apache.batik.util.gui org.apache.batik.xml org.eclipse.e4.ui.css.core org.eclipse.e4.ui.css.jface org.eclipse.e4.ui.css.legacy org.eclipse.e4.ui.css.swt org.eclipse.e4.ui.css.swt.theme org.eclipse.e4.ui.examples.css.rcp org.eclipse.e4.ui.widgets org.w3c.css.sac org.w3c.dom.smil org.w3c.dom.svg

The RCP Mail Demowith CSS Styling


How to get the bundles Checkout

:pserver:[email protected]:/cvsroot/eclipse/e4/releng

Import Project Set /releng/org.eclipse.e4.ui.releng/e4.ui.css.psf

Checkout e4/org.eclipse.e4.ui/bundles/org.eclipse.e4.ui.widgets

Delete all projects that are not on the previous slide Cleanup org.eclipse.e4.ui.css.swt

Organize Imports Delete dependencies to org.eclipse.e4.core.*

Start the CSS RCP Mail demo


3.x How to enable CSS Styling

Provide a CSS theme Provide an extension to

org.exlipse.e4.ui.css.swt.theme Enable theming support in the initialize

method of ApplicationWorkbenchAdvisor


Extension Point for Themes


3.x ApplicationWorkbenchAdvisor

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

04/12/2023

How to use custom attributes?

Java:

widget.setData(CSSSWTConstants.CSS_ID_KEY, "navigation");

CSS:

#navigation { color: #595959; background-color: #f0f1f7; }


04/12/2023

CSS Editors

CSS has a well known syntax But 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 shown

Tom Schindl is currently working on another Xtext-based editor

Let’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. 22

04/12/2023

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


Discussion




License & Acknowledgements

This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License See

http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

Many thanks to the authors of the pictures http://www.sxc.hu/photo/1089931 http://www.sxc.hu/photo/823108 http://www.sxc.hu/photo/922004



http://www.sxc.hu/photo/1089931

