Eclipse 3.x and 4.x CSS styling.

1. Eclipse RCP 4.x and 3.xCSS Styling Kai Tödter Siemens Corporate Technology 6/27/2011 1 © 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: kai.toedter@siemens.com Twitter: twitter.com/kaitoedter Blog: toedter.com/blog 6/27/2011 2 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

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

4. 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 6/27/2011

5. 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 6/27/2011

6. 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 6/27/2011

7. 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. 7 6/27/2011

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

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

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

11. 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. 11 6/27/2011

12. 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 6/27/2011

13. 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 6/27/2011

14. Gradient Examples © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14 6/27/2011 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%

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

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 6/27/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 16 The RCP Mail Demowith CSS Styling

17. How to get the bundles Checkout :pserver:anonymous@dev.eclipse.org:/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 6/27/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 17

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 6/27/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 18

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

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); … 6/27/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20

21. 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 6/27/2011

22. 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 6/27/2011

23. 3.x Dynamic Theme Switching BundleContext 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 6/27/2011

24. Discussion 6/27/2011 © 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

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 6/27/2011 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 25