Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons...
-
Upload
gwendolyn-barrett -
Category
Documents
-
view
222 -
download
2
Transcript of Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons...
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.
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
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.
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)
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.
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.
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.
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.
Worlbench Model Example
9© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Worlbench Model Example (2)
10© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
e4 Workbench Model Designer
11© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
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) { // ...
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
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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/
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.
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.
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
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.
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.
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.
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.
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.
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.
Contacts Demo without CSS Styling
34© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Dark CSS Styling with Gradients
35© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Dark CSS Styling with Gradients
36© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
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.
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.
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.
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.
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.
Gradient Examples
42© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
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.
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.
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.
Contacs Demo on RAP
46© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
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.
e4 IDE Mockup (December 2009)
48© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
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.
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.
Demo
51© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Discussion
© Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 52
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.