Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Eclipse 4.0
Styling the UI with CSS
Kai Tödter
Siemens Corporate Technology
1/30/2015 1© Kai Tödter and others, Licensed u...
Who am I?
 Software Architect/Engineer at
Siemens Corporate Technology
 Eclipse RCP expert and OSGi enthusiast
 Open So...
UI Styling
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Work...
UI Styling
 In Eclipse 3.x, UI styling can be done using
 The Presentation API
 Custom Widgets
 These mechanisms are v...
Contacts Demo without CSS Styling
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommer...
Dark CSS Styling with radial Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-...
Gray CSS Styling with linear Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-...
Blue CSS Styling with linear Gradients
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Nonc...
How does the CSS look like?
Label {
font: Verdana 8px;
color: rgb(240, 240, 240);
}
Table {
background-color: gradient rad...
Some Things you cannot style (yet)
 Menu bar background
 Table headers
Partly implemented:
 Gradients
© Kai Tödter and ...
How to enable CSS Styling (1)
Create a contribution to the extension point
org.eclipse.e4.ui.css.swt.theme
<extension
poin...
How to enable CSS Styling (2)
Create a contribution to the extension point
org.eclipse.core.runtime.products
<extension
id...
How to enable CSS Styling (3)
 Extension point
org.eclipse.ui.css.swt.theme
© Kai Tödter and others, Licensed under Creat...
How to use custom attributes?
 Java:
Label label = new Label(parent, SWT.NONE);
label.setData("org.eclipse.e4.ui.css.id",...
e4 CSS Editors
 CSS has a well known syntax
 But which UI elements can be styled?
 Which CSS attributes does a specific...
Gradient Examples
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3...
Dynamic Theme Switching
 It is possible to change the
CSS based theme at runtime
 Good for accessibility
 Good for user...
Theme Switching
 DI of IThemeEngine
 IThemeEngine provides API for applying styles
and theme management
@Execute
public ...
Using e4 CSS with RCP 3.x
 It is possible today…
 … but not as easy as it could be
 Read my blog about it
 http://www....
1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germa...
License & Acknowledgements
 This work is licensed under the Creative Commons
Attribution-Noncommercial-No Derivative Work...
Picture Index
 http://www.sxc.hu/photo/1089931
 http://www.sxc.hu/photo/823108
 http://www.sxc.hu/photo/922004
1/30/201...
Upcoming SlideShare
Loading in …5
×

E4 css

2,360 views

Published on

  • Be the first to comment

E4 css

  1. 1. Eclipse 4.0 Styling the UI with CSS Kai Tödter Siemens Corporate Technology 1/30/2015 1© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
  2. 2. Who am I?  Software Architect/Engineer at Siemens Corporate Technology  Eclipse RCP expert and OSGi enthusiast  Open Source advocate  Committer at e4 and Platform UI  E-mail: kai.toedter@siemens.com  Twitter: twitter.com/kaitoedter  Blog: toedter.com/blog 1/30/2015 2© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
  3. 3. UI Styling 1/30/2015 © 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. 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  e4 provides a CSS based UI styling that addresses many of the above issues © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 41/30/2015
  5. 5. Contacts Demo without CSS Styling 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 5
  6. 6. Dark CSS Styling with radial Gradients © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 61/30/2015
  7. 7. Gray CSS Styling with linear Gradients © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 71/30/2015
  8. 8. Blue CSS Styling with linear Gradients 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8
  9. 9. How does the CSS look like? Label { font: Verdana 8px; color: rgb(240, 240, 240); } Table { background-color: gradient radial #575757 #101010 100%; color: rgb(240, 240, 240); font: Verdana 8px; } .MTrimBar { background-color: #777777 #373737 #202020 50% 50%; color: white; font: Verdana 8px; } © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 91/30/2015
  10. 10. 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. 101/30/2015
  11. 11. How to enable CSS Styling (1) Create a contribution to the extension point org.eclipse.e4.ui.css.swt.theme <extension point="org.eclipse.e4.ui.css.swt.theme"> <theme basestylesheeturi="css/blue.css" id="org.eclipse.e4.tutorial.contacts.themes.blue" label="Blue Theme"> </theme> </extension> © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 111/30/2015
  12. 12. How to enable CSS Styling (2) Create a contribution to the extension point org.eclipse.core.runtime.products <extension id="product" point="org.eclipse.core.runtime.products"> <product application="org.eclipse.e4.ui.workbench.swt.application" name="e4 Contacs"> <property name="applicationCSS" value="org.eclipse.e4.tutorial.contacts.themes.blue"> </property> </product> </extension> © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 121/30/2015
  13. 13. How to enable CSS Styling (3)  Extension point org.eclipse.ui.css.swt.theme © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 131/30/2015
  14. 14. How to use custom attributes?  Java: Label label = new Label(parent, SWT.NONE); label.setData("org.eclipse.e4.ui.css.id", "SeparatorLabel");  Workbench Model: Give the element an id  CSS: #SeparatorLabel { color: #f08d00; } © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 141/30/2015
  15. 15. e4 CSS Editors  CSS has a well known syntax  But which UI elements can be styled?  Which CSS attributes does a specific element support?  The first approach for the above questions might be an Xtext-based editor, with content assist for both elements and attributes  Join Sven’s and Sebastian’s talk on Thursday, 11:30 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 151/30/2015
  16. 16. Gradient Examples © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 161/30/2015 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%
  17. 17. Dynamic Theme Switching  It is possible to change the CSS based theme at runtime  Good for accessibility  Good for user preferences 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 17 Picture from http://www.sxc.hu/photo/823108
  18. 18. Theme Switching  DI of IThemeEngine  IThemeEngine provides API for applying styles and theme management @Execute public void execute( IThemeEngine engine ) { engine.setTheme( "org.eclipse.e4.demo.contacts.themes.darkgradient"); } © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 181/30/2015
  19. 19. Using e4 CSS with RCP 3.x  It is possible today…  … but not as easy as it could be  Read my blog about it  http://www.toedter.com/blog/?p=295  Demo: CSS RCP Mail 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 19
  20. 20. 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20 Picture from http://www.sxc.hu/photo/922004
  21. 21. 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 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 21
  22. 22. Picture Index  http://www.sxc.hu/photo/1089931  http://www.sxc.hu/photo/823108  http://www.sxc.hu/photo/922004 1/30/2015 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 22 Many thanks to the authors of the following pictures:

×