Your SlideShare is downloading. ×
0
Eclipse RCP 4.x and 3.xCSS Styling<br />Kai Tödter<br />Siemens Corporate Technology<br />6/27/2011<br />1<br />© Kai Tödt...
Who am I?<br />Software Architect/Engineer at Siemens Corporate Technology<br />Eclipse RCP expert<br />Open Source advoca...
UI Styling<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Deriv...
UI Styling<br />In Eclipse 3.x, UI styling can be done using<br />The Presentation API<br />Custom Widgets<br />These mech...
4.x Dark CSS Styling with radial Gradients<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Nonco...
4.x Gray CSS Styling with linear Gradients<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Nonco...
4.x Blue CSS Styling with linear Gradients<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Nonco...
3.x RCP Mail with no CSS Styling<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-...
3.x RCP Mail with CSS Styling<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Non...
3.x RCP Mail CSS Color Demonstrator<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attributi...
3.x RCP Mail with blue CSS Styling<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial...
How does the CSS look like?<br />CTabItem, Label, Tree, Text {<br />    font-family: "Arial";<br />}<br />Shell {<br />   ...
Some Things you cannot style (yet)<br />Menu bar background<br />Table headers<br />Partly implemented:<br />Gradients<br ...
Gradient Examples<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Wo...
Dynamic Theme Switching<br />It is possible to change the CSS based theme at runtime<br />Good for accessibility<br />Good...
Needed Bundles for 3.x Styling<br />org.apache.batik.css<br />org.apache.batik.util<br />org.apache.batik.util.gui<br />or...
How to get the bundles<br />Checkout :pserver:anonymous@dev.eclipse.org:/cvsroot/eclipse/e4/releng<br />Import Project Set...
3.x How to enable CSS Styling<br />Provide a CSS theme<br />Provide an extension to org.exlipse.e4.ui.css.swt.theme<br />E...
Extension Point for Themes<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncom...
3.x ApplicationWorkbenchAdvisor<br />Bundle b = FrameworkUtil.getBundle(getClass());<br />BundleContext context = b.getBun...
How to use custom attributes?<br />Java:<br />widget.setData(CSSSWTConstants.CSS_ID_KEY, <br />                           ...
CSS Editors<br />CSS has a well known syntax<br />But which UI elements can be styled?<br />Which CSS attributes does a sp...
3.x Dynamic Theme Switching<br />BundleContext context = bundle.getBundleContext();<br />ServiceReference ref = context.ge...
Discussion<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Deriv...
License & Acknowledgements<br />This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative W...
Upcoming SlideShare
Loading in...5
×

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

8,933

Published on

Eclipse 3.x and 4.x CSS styling.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,933
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
66
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "CSS Styling for Eclipse RCP 3.x and 4.x"

  1. 1. Eclipse RCP 4.x and 3.xCSS Styling<br />Kai Tödter<br />Siemens Corporate Technology<br />6/27/2011<br />1<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  2. 2. Who am I?<br />Software Architect/Engineer at Siemens Corporate Technology<br />Eclipse RCP expert<br />Open Source advocate<br />Committer at e4 and Platform UI<br />E-mail: kai.toedter@siemens.com<br />Twitter: twitter.com/kaitoedter<br />Blog: toedter.com/blog<br />6/27/2011<br />2<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />
  3. 3. UI Styling<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />3<br />Picture from http://www.sxc.hu/photo/1089931<br />
  4. 4. UI Styling<br />In Eclipse 3.x, UI styling can be done using<br />The Presentation API<br />Custom Widgets<br />These mechanisms are very limited<br />It is not possible to implement a specific UI design, created by a designer<br />One innovation brought by Eclipse 4.0 was the dynamic styling of the UI using CSS<br />This new feature can now be used easily in the Eclipse 3.x world<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />4<br />6/27/2011<br />
  5. 5. 4.x Dark CSS Styling with radial Gradients<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />5<br />6/27/2011<br />
  6. 6. 4.x Gray CSS Styling with linear Gradients<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />6<br />6/27/2011<br />
  7. 7. 4.x Blue CSS Styling with linear Gradients<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />7<br />6/27/2011<br />
  8. 8. 3.x RCP Mail with no CSS Styling<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />8<br />
  9. 9. 3.x RCP Mail with CSS Styling<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />9<br />
  10. 10. 3.x RCP Mail CSS Color Demonstrator<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />10<br />
  11. 11. 3.x RCP Mail with blue CSS Styling<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />11<br />6/27/2011<br />
  12. 12. How does the CSS look like?<br />CTabItem, Label, Tree, Text {<br /> font-family: "Arial";<br />}<br />Shell {<br /> font-size: 12;<br />}<br />CTabItem, ToolBar, Button, CBanner, CoolBar {<br /> font-size: 9;<br /> background-color: white;<br />}<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />12<br />6/27/2011<br />
  13. 13. Some Things you cannot style (yet)<br />Menu bar background<br />Table headers<br />Partly implemented:<br />Gradients<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />13<br />6/27/2011<br />
  14. 14. Gradient Examples<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />14<br />6/27/2011<br />linear orange black<br />linear orange black 60%<br />linear orange black orange 50% 100%<br />radial orange black<br />radial orange black 60%<br />radial orange black orange 50% 100%<br />
  15. 15. Dynamic Theme Switching<br />It is possible to change the CSS based theme at runtime<br />Good for accessibility<br />Good for user preferences<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />15<br />Picture from http://www.sxc.hu/photo/823108<br />
  16. 16. Needed Bundles for 3.x Styling<br />org.apache.batik.css<br />org.apache.batik.util<br />org.apache.batik.util.gui<br />org.apache.batik.xml<br />org.eclipse.e4.ui.css.core<br />org.eclipse.e4.ui.css.jface<br />org.eclipse.e4.ui.css.legacy<br />org.eclipse.e4.ui.css.swt<br />org.eclipse.e4.ui.css.swt.theme<br />org.eclipse.e4.ui.examples.css.rcp<br />org.eclipse.e4.ui.widgets<br />org.w3c.css.sac<br />org.w3c.dom.smil<br />org.w3c.dom.svg<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />16<br />The RCP Mail Demowith CSS Styling<br />
  17. 17. How to get the bundles<br />Checkout :pserver:anonymous@dev.eclipse.org:/cvsroot/eclipse/e4/releng<br />Import Project Set /releng/org.eclipse.e4.ui.releng/e4.ui.css.psf<br />Checkout e4/org.eclipse.e4.ui/bundles/org.eclipse.e4.ui.widgets<br />Delete all projects that are not on the previous slide<br />Cleanup org.eclipse.e4.ui.css.swt<br />Organize Imports<br />Delete dependencies to org.eclipse.e4.core.*<br />Start the CSS RCP Mail demo<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />17<br />
  18. 18. 3.x How to enable CSS Styling<br />Provide a CSS theme<br />Provide an extension to org.exlipse.e4.ui.css.swt.theme<br />Enable theming support in the initialize method of ApplicationWorkbenchAdvisor<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />18<br />
  19. 19. Extension Point for Themes<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />19<br />
  20. 20. 3.x ApplicationWorkbenchAdvisor<br />Bundle b = FrameworkUtil.getBundle(getClass());<br />BundleContext context = b.getBundleContext();<br />ServiceReference serviceRef = context<br /> .getServiceReference(IThemeManager.class.getName());<br />IThemeManager themeManager = <br /> (IThemeManager) context.getService(serviceRef);<br />final IThemeEngine engine = <br /> themeManager.getEngineForDisplay(Display.getCurrent());<br />engine.setTheme("org.eclipse.e4.ui.examples.css.rcp", true);<br />…<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />20<br />
  21. 21. How to use custom attributes?<br />Java:<br />widget.setData(CSSSWTConstants.CSS_ID_KEY, <br /> "navigation"); <br />CSS:<br />#navigation {<br /> color: #595959;<br /> background-color: #f0f1f7;<br /> }<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />21<br />6/27/2011<br />
  22. 22. CSS Editors<br />CSS has a well known syntax<br />But which UI elements can be styled?<br />Which CSS attributes does a specific element support?<br />At Eclipse Summit Europe an Xtext-based editor, with content assist for both elements and attributes, was shown<br />Tom Schindl is currently working on another Xtext-based editor<br />Let’s see, what Eclipse 4.2 will bring<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />22<br />6/27/2011<br />
  23. 23. 3.x Dynamic Theme Switching<br />BundleContext context = bundle.getBundleContext();<br />ServiceReference ref = context.getServiceReference(IThemeManager.class.getName());<br />IThemeManager manager = (IThemeManager) context.getService(ref);<br />IThemeEngine engine =manager.getEngineForDisplay(PlatformUI.getWorkbench()<br /> .getActiveWorkbenchWindow() == null ? Display.getCurrent()<br /> : PlatformUI.getWorkbench().getActiveWorkbenchWindow()<br /> .getShell().getDisplay());<br />engine.setTheme("org.eclipse.e4.ui.examples.css.rcp");<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />23<br />6/27/2011<br />
  24. 24. Discussion<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />24<br />Picture from http://www.sxc.hu/photo/922004<br />
  25. 25. License & Acknowledgements<br />This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License<br />See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US<br />Many thanks to the authors of the pictures<br />http://www.sxc.hu/photo/1089931<br />http://www.sxc.hu/photo/823108<br />http://www.sxc.hu/photo/922004<br />6/27/2011<br />© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.<br />25<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×