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
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 2
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
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 6
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 7
4.x Blue CSS Styling with linear Gradients
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8
3.x RCP Mail with no CSS Styling
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 9
3.x RCP Mail with CSS Styling
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 10
3.x RCP Mail CSS Color Demonstrator
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 11
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;}
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 12
04/12/2023
Some Things you cannot style (yet)
Menu bar background Table headers
Partly implemented: Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 13
04/12/2023
Gradient Examples
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14
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.
Picture from http://www.sxc.hu/photo/823108
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 16
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
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 17
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
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 18
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
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 19
Extension Point for Themes
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20
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; }
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 21
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");
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 23
Discussion
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 24
Picture from http://www.sxc.hu/photo/922004
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 25
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
Top Related