e4 css
TRANSCRIPT
![Page 1: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/1.jpg)
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 1
Eclipse 4.0Styling the UI with CSS
Kai TödterSiemens Corporate Technology
![Page 2: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/2.jpg)
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 and OSGi enthusiast Open Source advocate Committer at e4 and Platform UI E-mail: [email protected] Twitter: twitter.com/kaitoedter Blog: toedter.com/blog
![Page 3: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/3.jpg)
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
![Page 4: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/4.jpg)
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 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. 4
![Page 5: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/5.jpg)
04/12/2023
Contacts Demo without CSS Styling
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 5
![Page 6: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/6.jpg)
04/12/2023
Dark CSS Styling with radial Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 6
![Page 7: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/7.jpg)
04/12/2023
Gray CSS Styling with linear Gradients
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 7
![Page 8: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/8.jpg)
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8
Blue CSS Styling with linear Gradients
![Page 9: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/9.jpg)
04/12/2023
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. 9
![Page 10: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/10.jpg)
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. 10
![Page 11: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/11.jpg)
04/12/2023
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. 11
![Page 12: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/12.jpg)
04/12/2023
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. 12
![Page 13: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/13.jpg)
04/12/2023
How to enable CSS Styling (3)
Extension pointorg.eclipse.ui.css.swt.theme
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 13
![Page 14: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/14.jpg)
04/12/2023
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. 14
![Page 15: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/15.jpg)
04/12/2023
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. 15
![Page 16: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/16.jpg)
04/12/2023
Gradient Examples
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 16
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%
![Page 17: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/17.jpg)
04/12/2023 17
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
![Page 18: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/18.jpg)
04/12/2023
Theme Switching
DI of IThemeEngine IThemeEngine provides API for applying styles
and theme management
@Executepublic 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. 18
![Page 19: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/19.jpg)
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 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
![Page 20: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/20.jpg)
Discussion
04/12/2023 © 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
![Page 21: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/21.jpg)
04/12/2023 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 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
![Page 22: E4 css](https://reader038.vdocuments.mx/reader038/viewer/2022102901/5554f67cb4c905bb2a8b5204/html5/thumbnails/22.jpg)
04/12/2023 22
Picture Index
http://www.sxc.hu/photo/1089931 http://www.sxc.hu/photo/823108 http://www.sxc.hu/photo/922004
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Many thanks to the authors of the following pictures: