kai tödter siemens corporate technology © kai tödter and others, licensed under creative commons...
TRANSCRIPT
![Page 1: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/1.jpg)
e4 Preview:CSS Styling &
Workbench Model
Kai TödterSiemens Corporate Technology
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 2: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/2.jpg)
OutlineObjectives of e4e4 Workbench ModelModels & RenderingOther UI ModelsServicesCSS StylingDemoDiscussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 2
![Page 3: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/3.jpg)
e4 ObjectivesMaking it easier to write plug-insAllowing better control over the look
of Eclipse based productsProviding a uniform, pervasive
platform across computing environments (Web / RIA, Desktop, Server, Cloud, Embedded)
Increasing diversity of contributors to the platform
Maintaining backward compatibility for API-clean clients
3© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 4: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/4.jpg)
4© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
The Model, a short History
EclipseCon 08 Mock up model based upon HashMaps Mock hosted „hacked“ into 3.x
E4-Summit Ottawa (22nd /23rd May) May 20th: Mail to e4-dev „A radical
approach to explore new paths for e4“▪ Platform designed from Scratch▪ No statics, no singletons, usage of
dependency injection (DI)
![Page 5: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/5.jpg)
The Model (1)EMF!? But why?
It's a proven domain model technology so why invent our own?
It already has tooling (Editor, …) Easier to build visual tools on top Integration points for different
technologies like EMF-Compare, CDO, …
5© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 6: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/6.jpg)
The Model (2)EMF, but isn't it bloat?
Distinguish between installation and runtime bloat
Installation „bloat“ about 1.5 MB Runtime size of EMF is highly optimized
▪ e.g. storage of boolean Benefit from upstream changes
▪ Ultra Slim Diet in 3.5
6© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 7: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/7.jpg)
Anatomy of an e4 ApplicationMain Building Blocks
Application model instance POJOs to fill the parts of the UI with
contentAdditional Building Blocks
CSS based theming for your RCP application
Accessing services (see next slides)
7© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 8: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/8.jpg)
Workbench Model Structure
Workbench window Menu with menu items Window Trim, e.g. toolbar with toolbar
items Parts Sash Container
▪ Part Stack▪ Parts
Handlers Key Bindings Commands
8© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 9: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/9.jpg)
Worlbench Model Example
9© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 10: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/10.jpg)
Worlbench Model Example (2)
10© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 11: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/11.jpg)
e4 Workbench Model Designer
11© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 12: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/12.jpg)
Parts are now POJOs
12© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
public class ListView {
@Inject private IEclipseContext context;
@Inject public ListView(Composite parent) { // ...
![Page 13: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/13.jpg)
Wiring POJOs to the Model
13© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
The Part in the Model
The Part’s URI => POJO
![Page 14: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/14.jpg)
Commands & Handlers (1)
Handlershave and id and a commandhave an URI for the implementing
class, e.g.platform:/plugin/...SaveHandler
Commandshave and id and a namecan be inserted in menus and
toolbars
14© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 15: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/15.jpg)
Commands & Handlers (2)
Handlersare POJOsget the necessary dependencies
injected
15© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 16: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/16.jpg)
Save Handler Examplepublic class SaveHandler {
public boolean canExecute( @Named(IServiceConstants.ACTIVE_PART) MDirtyable
dirtyable) { return dirtyable.isDirty(); }
public void execute( IEclipseContext context, @Optional IStylingEngine engine, @Named(IServiceConstants.ACTIVE_SHELL) Shell shell, @Named(IServiceConstants.ACTIVE_PART) final
MContribution contribution) throws InvocationTargetException,
InterruptedException { //... 16© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 17: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/17.jpg)
Workbench Model and Rendering
The Workbench model has no dependencies to a specific UI toolkit
During startup, the app context is asks for an IPresentationEngine service
The default is an SWT based presentation engine
The presentation engine asks a RenderFactory for Renderers
=> As a proof of concept, It would be possible to implement a Swing based presentation engine
17© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 18: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/18.jpg)
Tasks of the RendererManage Lifecycle of the UI-Element
Creation Model to widget binding Rendering Disposal
18© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 19: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/19.jpg)
RendererFactory Examplepublic class WorkbenchRendererFactory implements
IRendererFactory {
public AbstractPartRenderer getRenderer(MUIElement uiElement,
Object parent) { if (uiElement instanceof MPart) { if (contributedPartRenderer == null) { contributedPartRenderer = new
ContributedPartRenderer(); initRenderer(contributedPartRenderer); } return contributedPartRenderer; }
//...
19© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 20: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/20.jpg)
Multiple Renderers
One model element (e.g. a Part Stack) could have different possible
renderers
20© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Part Stack
CTabRenderer
...PShelfRender
er
![Page 21: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/21.jpg)
Custom Renderer Factoriespublic class RendererFactory extends WorkbenchRendererFactory {
@Override public AbstractPartRenderer getRenderer(MUIElement uiElement, Object parent) {
if (uiElement instanceof MPartStack && usePShelfRenderer() ) { if( stackRenderer == null ) { stackRenderer = new PShelfStackRenderer(); initRenderer(stackRenderer); } return stackRenderer; }
return super.getRenderer(uiElement, parent); }}
21© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 22: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/22.jpg)
Other e4 UI Models In the current e4 incubator there are
two more model approaches for fine grained UI XWT (XML Window Toolkit) TM (Toolkit Model)
The future will show, which project might betheir home after evolvingfrom the incubator status
22© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 23: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/23.jpg)
XWTDeclarative UI framework based on
XMLPhysical separation of UI definition in
XML from the run-time logic in programming language
Visual editor providedDeveloped by Soyatec
23© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 24: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/24.jpg)
XWT Designer
24© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Picture from Yves Yang’s blog: http://dev.eclipse.org/blogs/yvesyang/2009/11/02/xwt-designer/
![Page 25: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/25.jpg)
XWT Hello World<Shell
xmlns="http://www.eclipse.org/xwt/presentation" xmlns:x="http://www.eclipse.org/xwt"> <Shell.layout> <FillLayout/> </Shell.layout> <Button text="Hello, world!"> </Button></Shell>
In the Java code:
Shell shell = (Shell)XWT.load(file);
25© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 26: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/26.jpg)
TM (Toolkit Model)The Toolkit Model is an Ecore model
of the user interface (UI) components
The model includes concepts like Composite, TabFolder, Text, Layout, etc.
The model is split into a generic and toolkit-specific parts
TM is developed by Hallvard Trætteberg, Norwegian University of Science and Technology
26© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 27: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/27.jpg)
TM Model in EMF Editor
27© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Picture from http://wiki.eclipse.org/E4/UI/Toolkit_Model/org.eclipse.e4.tm.examples
![Page 28: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/28.jpg)
Services (aka “The 20 Things”)
e4 provides access to many services.These services are divided in sections:CoreUser InterfaceAdvancedDomain-Specific
Most of these services are injected using DI or
through the IEcliseContext, see also:http://wiki.eclipse.org/E4/Eclipse_Application_Services
28© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 29: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/29.jpg)
Core Services Life Cycle Authentication/Single Sign-on Status Handling Logging and Tracing Extension Registry Scheduling Work/Reporting Progress Reading/Writing of Preferences String Localization Adapting Objects Commands/Handlers Eventing System Participating in Undo/Redo Support
29© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 30: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/30.jpg)
User Interface ServicesReceiving Input Providing Selection Information Persisting State and Data Managing Shared Resources Participating in Editor/Saveable Part
Life Cycle Updating UI Elements NotificationsStatus Reporting Part Service
30© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 31: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/31.jpg)
Advanced ServicesShell Provider Reacting to Workbench Model
Changes. Participating in Label and Icon
Decoration Reacting to Changes to the Context Dynamically Contributing to the
Workbench Model Object Contributions Focus Service
31© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 32: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/32.jpg)
Domain-specific ServicesWorkspace/Resources Database Connection Getting Hold of the Domain Model
32© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 33: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/33.jpg)
Styling the User Interface 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 all the above issues
33© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 34: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/34.jpg)
Contacts Demo without CSS Styling
34© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 35: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/35.jpg)
Dark CSS Styling with Gradients
35© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 36: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/36.jpg)
Dark CSS Styling with Gradients
36© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 37: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/37.jpg)
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;}
ToolBar { background-color: #777777 #373737 #202020 50% 50%; color: white; font: Verdana 8px;}
37© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 38: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/38.jpg)
Some Things you cannot style (yet)
Menu bar backgroundTable headers
Partly implemented:Gradients
Planned:Having similar capabilities compared
with WebKit’s gradients
38© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 39: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/39.jpg)
How to enable CSS Styling
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 Demo"> <property name="applicationCSS" value="platform:/plugin/contacts/css/dark.css"> </property> </product></extension>
39© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 40: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/40.jpg)
How to use custom attributes?
Java
Label label = new Label(parent, SWT.NONE);label.setData("org.eclipse.e4.ui.css.id",
"SeparatorLabel");
CSS
#SeparatorLabel { color: #f08d00;}
40© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 41: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/41.jpg)
e4 CSS EditorsCSS has a well known syntaxBut 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
A project is already set up, stay tuned to EclipseCon 41© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 42: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/42.jpg)
Gradient Examples
42© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 43: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/43.jpg)
Dynamic Theme Switching
It is possible to change the CSS based styling at runtimeGood for accessibilityGood for user preferences
43© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 44: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/44.jpg)
CSS Styling Engine
Getting the styling engine:
Display display = shell.getDisplay();final CSSEngine engine =
(CSSEngine) display.getData( "org.eclipse.e4.ui.css.core.engine");
This is a current workaround The engine should be a service accessible
through the EclipseContext
44© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 45: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/45.jpg)
Theme Switching CodeURL url = FileLocator.resolve(new URL("platform:/plugin/org.eclipse.e4.demo.contacts/css/
new.css"));
InputStreamReader streamReader = new InputStreamReader(
url.openStream(););engine.reset();engine.parseStyleSheet(streamReader);streamReader.close();
try {shell.setRedraw(false);shell.reskin(SWT.ALL);
} finally {shell.setRedraw(true);
} 45© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 46: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/46.jpg)
Contacs Demo on RAP
46© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 47: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/47.jpg)
How will the e4 IDE look like?
Designers are working on a new e4 workbench look
Watch bug 293481 for mockups Windows XP Windows 7 Mac Cocoa
https://bugs.eclipse.org/bugs/show_bug.cgi?id=293481
47© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 48: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/48.jpg)
e4 IDE Mockup (December 2009)
48© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 49: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/49.jpg)
Running the e4 Contacts Demo (1)
Install the latest Eclipse 3.6 Integration Build SDK
Install the latest EMF SDKOpen the CVS repository:
host: dev.eclipse.orgroot: cvsroot/eclipseuser: anonymous
Check out the project e4/releng
49© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 50: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/50.jpg)
Running the e4 Contacts Demo (2)
Import the following team project setsfrom releng/org.eclipse.e4.ui.releng:e4.ui.psfe4.ui.examples.psfe4.ui.css.psf
Open project org.eclipse.e4.demo.contacts/contacts.product
In the Overview tab of the configuration editor, click “Launch an Eclipse Application”
Now the contacts demo should start with the dark CSS theme
50© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 51: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/51.jpg)
Demo
51© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
![Page 52: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/52.jpg)
Discussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52
![Page 53: Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany](https://reader035.vdocuments.site/reader035/viewer/2022062517/56649f225503460f94c3a0c4/html5/thumbnails/53.jpg)
License & Acknoledgements
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 slides about the e4 workbench model are based on the work of Tom Schindl, BestSolution See http://www.bestsolution.at
53© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.