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.


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, …


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


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)


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


Worlbench Model Example


Worlbench Model Example (2)


e4 Workbench Model Designer


Parts are now POJOs


public class ListView {

@Inject private IEclipseContext context;

@Inject public ListView(Composite parent) { // ...

Wiring POJOs to the Model


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


Commands & Handlers (2)

Handlersare POJOsget the necessary dependencies

injected


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


Tasks of the RendererManage Lifecycle of the UI-Element

Creation Model to widget binding Rendering Disposal


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; }

//...


Multiple Renderers

One model element (e.g. a Part Stack) could have different possible

renderers


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); }}


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


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


XWT Designer


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);


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


TM Model in EMF Editor


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


http://wiki.eclipse.org/E4/Eclipse_Application_Services

http://wiki.eclipse.org/E4/Eclipse_Application_Services

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


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


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


Domain-specific ServicesWorkspace/Resources Database Connection Getting Hold of the Domain Model


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


Contacts Demo without CSS Styling


Dark CSS Styling with Gradients


Dark CSS Styling with Gradients


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;}


Some Things you cannot style (yet)

Menu bar backgroundTable headers

Partly implemented:Gradients

Planned:Having similar capabilities compared

with WebKit’s gradients


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>


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;}


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


Dynamic Theme Switching

It is possible to change the CSS based styling at runtimeGood for accessibilityGood for user preferences


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


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


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




e4 IDE Mockup (December 2009)


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


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


Demo


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


http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

http://www.bestsolution.at/

Date post:	04-Jan-2016
Category:	Documents
Upload:	gwendolyn-barrett
View:	223 times
Download:	2 times

Kai Tödter Siemens Corporate Technology © Kai Tödter and others, Licensed under Creative Commons...

Documents