Enviar búsqueda
Cargar
E4 css
•
1 recomendación
•
1,509 vistas
Kai Tödter
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 22
Descargar ahora
Descargar para leer sin conexión
Recomendados
CSS Styling for Eclipse RCP 3.x and 4.x
CSS Styling for Eclipse RCP 3.x and 4.x
Kai Tödter
Developing Rich Clients with the Eclipse 4 Application Platform
Developing Rich Clients with the Eclipse 4 Application Platform
Kai Tödter
Eclipse 4.0 - Dynamic Models
Eclipse 4.0 - Dynamic Models
Lars Vogel
Web-based development with Orion and Flux (APIcon 2014)
Web-based development with Orion and Flux (APIcon 2014)
Mike Milinkovich
Introduction to Eclipse Che / EclipseCon 2014
Introduction to Eclipse Che / EclipseCon 2014
Florent BENOIT
Eclipse platform news and how to contribute to the Eclipse Open Source project
Eclipse platform news and how to contribute to the Eclipse Open Source project
Lars Vogel
Democamp Munich 2013: Are you still manually coding UIs?
Democamp Munich 2013: Are you still manually coding UIs?
Maximilian Kögel
What's New in Visual Studio 2010
What's New in Visual Studio 2010
Adil Mughal
Más contenido relacionado
La actualidad más candente
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Tonny Madsen
Developing a Google Wave Extension
Developing a Google Wave Extension
Brian Kennish
Eclipse 2011 Hot Topics
Eclipse 2011 Hot Topics
Lars Vogel
Getting started with code composer studio v4 for tms320 f2812
Getting started with code composer studio v4 for tms320 f2812
Pantech ProLabs India Pvt Ltd
Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022
Moon Technolabs Pvt. Ltd.
Getting started with code composer studio v3.3 for tms320 f2812
Getting started with code composer studio v3.3 for tms320 f2812
Pantech ProLabs India Pvt Ltd
What do you need to know about g rpc on .net
What do you need to know about g rpc on .net
Moon Technolabs Pvt. Ltd.
La actualidad más candente
(7)
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Eclipse Demo Camp 2010 - Eclipse e4 – The Status and the Future
Developing a Google Wave Extension
Developing a Google Wave Extension
Eclipse 2011 Hot Topics
Eclipse 2011 Hot Topics
Getting started with code composer studio v4 for tms320 f2812
Getting started with code composer studio v4 for tms320 f2812
Angular.js vs. vue.js – which one is the better choice in 2022
Angular.js vs. vue.js – which one is the better choice in 2022
Getting started with code composer studio v3.3 for tms320 f2812
Getting started with code composer studio v3.3 for tms320 f2812
What do you need to know about g rpc on .net
What do you need to know about g rpc on .net
Similar a E4 css
Highway to heaven - Microservices Meetup Berlin
Highway to heaven - Microservices Meetup Berlin
Christian Deger
ALM on the shoulders of Giants - Visual Studio Online
ALM on the shoulders of Giants - Visual Studio Online
Flavius-Radu Demian
Dev340 Thake Coates
Dev340 Thake Coates
Andrew Coates
Tizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK Overview
Ryo Jin
ASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big Deal
Jim Duffy
VS Code and Modern Development Environment Preview
VS Code and Modern Development Environment Preview
Roberto Stefanetti
Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24
Christian Deger
TopicHero Descriptions Tutorial
TopicHero Descriptions Tutorial
Justin Coven, Ph.D.
Java fx ap is
Java fx ap is
Tom Schindl
Model Driven Applications Using Visual Studio Code Name Rosario
Model Driven Applications Using Visual Studio Code Name Rosario
Clint Edmonson
Ppt0000000
Ppt0000000
rakesh191
Overview
Overview
rakesh191
CheConf 2018 - Building Extensibility and Community for Che
CheConf 2018 - Building Extensibility and Community for Che
melbats
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
STEAMism.com
Debunking Myths About Cloud Portability
Debunking Myths About Cloud Portability
VMware Tanzu
Benefits of cello framework
Benefits of cello framework
Techcello
TFS 2013 Care and Feeding
TFS 2013 Care and Feeding
Angela Dugan
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Shige Fukushima
Visual Studio Automation Object Model. EnvDTE interfaces
Visual Studio Automation Object Model. EnvDTE interfaces
PVS-Studio
Azure Media Services Step-by-Step Tutorial Docs Series - Agenda
Azure Media Services Step-by-Step Tutorial Docs Series - Agenda
Shige Fukushima
Similar a E4 css
(20)
Highway to heaven - Microservices Meetup Berlin
Highway to heaven - Microservices Meetup Berlin
ALM on the shoulders of Giants - Visual Studio Online
ALM on the shoulders of Giants - Visual Studio Online
Dev340 Thake Coates
Dev340 Thake Coates
Tizen-based Samsung TV SDK Overview
Tizen-based Samsung TV SDK Overview
ASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big Deal
VS Code and Modern Development Environment Preview
VS Code and Modern Development Environment Preview
Building Microservices in the cloud at AutoScout24
Building Microservices in the cloud at AutoScout24
TopicHero Descriptions Tutorial
TopicHero Descriptions Tutorial
Java fx ap is
Java fx ap is
Model Driven Applications Using Visual Studio Code Name Rosario
Model Driven Applications Using Visual Studio Code Name Rosario
Ppt0000000
Ppt0000000
Overview
Overview
CheConf 2018 - Building Extensibility and Community for Che
CheConf 2018 - Building Extensibility and Community for Che
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
STEAMism presents: Autodesk Inventor tutorial series - Lesson 1 - Introductio...
Debunking Myths About Cloud Portability
Debunking Myths About Cloud Portability
Benefits of cello framework
Benefits of cello framework
TFS 2013 Care and Feeding
TFS 2013 Care and Feeding
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Azure Media Services Step-by-Step Tutorial Docs Series - Part 8
Visual Studio Automation Object Model. EnvDTE interfaces
Visual Studio Automation Object Model. EnvDTE interfaces
Azure Media Services Step-by-Step Tutorial Docs Series - Agenda
Azure Media Services Step-by-Step Tutorial Docs Series - Agenda
E4 css
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
Descargar ahora