Top Banner
Anatomy of an e4 Application The unexpected Simplicity of RCP 4.x based Applications Lars Vogel http://www.vogella.de Twitter: @vogella Kai Tödter Siemens Corporate Technology Twitter: @kaitoedter
67

Eclipse 40 - Eclipse Summit Europe 2010

Sep 01, 2014

Download

Technology

Lars Vogel

Overview of Eclipse e4 on the EclipseSummit Europe 2010.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Eclipse 40 - Eclipse Summit Europe 2010

Anatomy of an e4 Application

The unexpected Simplicity

of RCP 4.x based Applications

Lars Vogel

http://www.vogella.de

Twitter: @vogella

Kai Tödter

Siemens Corporate Technology

Twitter: @kaitoedter

Page 2: Eclipse 40 - Eclipse Summit Europe 2010

About Lars

Works for SAP as product manager

Privately active in the Open Source

Community

Eclipse committer, received the Eclipse

Top Contributor community award 2010

Webmaster of http://www.vogella.de with

more then 15 000 visitors per day

Lars Vogel

http://www.vogella.de

Twitter: @vogella

Page 3: Eclipse 40 - Eclipse Summit Europe 2010

About Kai

• 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 4: Eclipse 40 - Eclipse Summit Europe 2010

Anatomy of an e4 Application - Agenda

Page 5: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse e4 Scope

Make development for

Eclipse easier

Page 6: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse e4

Eclipse e4 is the

incubator project

which did produce

the Eclipse 4.0 SDK

Page 7: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse 4.0 SDK

Early adapter release!!!

No frozen API‟s

Page 8: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse RCP 4.x Architecture

Operating System

Java Virtual Machine

Runtime (Equinox, OSGi)

Workbench Model, Rendering Engine, CSS Styling, Dependency Injection, Services

4.0 Workbench

PDE

EMF Core UI Core (JFace, SWT)

JDTAdditionalPlatformBundles

3.x Compatibility Layer

8

Page 9: Eclipse 40 - Eclipse Summit Europe 2010

How does Eclipse e4

help me?

Page 10: Eclipse 40 - Eclipse Summit Europe 2010

from Eclipse Developer

to Eclipse Developer

Eclipse E4

Page 11: Eclipse 40 - Eclipse Summit Europe 2010

So, what’s wrong with

plugin and RCP

development in

Eclipse 3.X?

Page 12: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse 3.x programming model

• Complex

• Lots of API

• Platform functionality via singletons / static methods

• Not easy to test

• Not a consistent way to define the UI

Page 13: Eclipse 40 - Eclipse Summit Europe 2010
Page 14: Eclipse 40 - Eclipse Summit Europe 2010

The smallest Eclipse RCP app in Eclipse 3.X

Already looks like the Eclipse IDE

Lots of boilerplate code

Page 15: Eclipse 40 - Eclipse Summit Europe 2010

15

If only Eclipse development

would be easier, more

visual appealing and easier

to test.

Page 16: Eclipse 40 - Eclipse Summit Europe 2010

The first amazing change

Eclipse e4 uses Java 5

language features!

AAbout time I would say….

Page 17: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse e4 – Building blocks

Declarative Styling

Modeled Workbench

Rendering Engine

Dependency Injection

Context

Core Services

Page 18: Eclipse 40 - Eclipse Summit Europe 2010

The Modeled Workbench

Page 19: Eclipse 40 - Eclipse Summit Europe 2010

The e4 Workbench Model

Page 20: Eclipse 40 - Eclipse Summit Europe 2010

The e4 Workbench Model

• Workbench window – Menu with menu items

– Window Trim, e.g. toolbar with toolbar items

– Parts Sash Container• Parts

– Part Stack (CTabFolder)• Parts

– Handlers

– Key Bindings

– Commands

Page 21: Eclipse 40 - Eclipse Summit Europe 2010

Model is Flexible

No distinction between View and

Editor

Perspectives are optional

Stack / Sash are optional

Several windows possible

Flexible Toolbars

Page 22: Eclipse 40 - Eclipse Summit Europe 2010

Model removes the need for boilerplate code

Minimal Eclipse e4 app: zero classes

Page 23: Eclipse 40 - Eclipse Summit Europe 2010

Model URI’s

The Part in the Model

The Part’s URI

Page 24: Eclipse 40 - Eclipse Summit Europe 2010

POJO„s

Page 25: Eclipse 40 - Eclipse Summit Europe 2010

Annotations are used

To indicate which

methods are called

Page 26: Eclipse 40 - Eclipse Summit Europe 2010

Model available at runtime

Page 27: Eclipse 40 - Eclipse Summit Europe 2010

• Only models the Application (frame)

Limits of the e4 application model

Modeled Workbench

Content of the individual Parts not

included in the model

Page 28: Eclipse 40 - Eclipse Summit Europe 2010

The e4 Programming Model

Page 29: Eclipse 40 - Eclipse Summit Europe 2010

It‘s like OSGi made easys

Page 30: Eclipse 40 - Eclipse Summit Europe 2010

• Inversion of control: The necessary functionality is injected into the class

Page 31: Eclipse 40 - Eclipse Summit Europe 2010

• by the e4 DI container

DI Container rules

them all

Page 32: Eclipse 40 - Eclipse Summit Europe 2010
Page 33: Eclipse 40 - Eclipse Summit Europe 2010

• JSR 330 compatible injection implementation

– @javax.inject.Inject – Field, Constructor and Method

– @javax.inject.Named – Specify a custom qualifier to context object (default is fully qualified classname of the injected type)

• e4 specific annotations, e.g. @Optional

Page 34: Eclipse 40 - Eclipse Summit Europe 2010

public class ListView {

@Inject

private IEclipseContext context;

@Inject

private Logger logger;

@Inject

public ListView(Composite parent) {

// ...

Dependencies are

injected via the

the e4 framework

Page 35: Eclipse 40 - Eclipse Summit Europe 2010

DI and

model

Elements

Page 36: Eclipse 40 - Eclipse Summit Europe 2010

AddOns (Model Elements)

Model Elements without UI„s

Usually register to model changes

Page 37: Eclipse 40 - Eclipse Summit Europe 2010

What about non-model elements?

Non-Model Element

Can he also join the DI game?

Page 38: Eclipse 40 - Eclipse Summit Europe 2010

ContextInjectionFactory.

make(your.class,context)

Page 39: Eclipse 40 - Eclipse Summit Europe 2010

1056766

There is more... then DI

Page 40: Eclipse 40 - Eclipse Summit Europe 2010

Annotations for Handlers

• @Execute:

• @CanExecute

• Handlers can be POJO‟s too

Page 41: Eclipse 40 - Eclipse Summit Europe 2010

Lifecycle for Parts

• Parts

• @PostConstruct: Called after

Object created and Fields- and

Methods-Injection finished

• @PreDestroy: Called before

the object is destroyed (e.g. the

Part shown in the UI is

removed)

Page 42: Eclipse 40 - Eclipse Summit Europe 2010

Lifecycle for Application

• Class registered at startup

• @PostContextCreate

• @ProcessAdditions

• @ProcessRemovals

@Presave

Page 43: Eclipse 40 - Eclipse Summit Europe 2010
Page 44: Eclipse 40 - Eclipse Summit Europe 2010

– Stores information of possible Injection Values

– OSGi Services part of the Context

– Define your own services and use DI for them

– Put your own stuff into the context

Page 45: Eclipse 40 - Eclipse Summit Europe 2010

• Method identified via @Execute annotation

– Can have any number of arguments

– Use IServiceConstants for general context informations

public class AboutHandler {

@Execute

public void execute(

@Named(IServiceConstants.ACTIVE_SHELL) Shell shell){

MessageDialog.openInformation(

shell, "About", "e4 Application example.");

}

}

Page 46: Eclipse 40 - Eclipse Summit Europe 2010

Context Communication

Change the context

context.modify("selection", selection.getFirstElement());

Get Notified

@Inject

public void setPerson(

@Named("selection") @Optional Person person) {

master.setValue(person);

}

Page 47: Eclipse 40 - Eclipse Summit Europe 2010

e4 Services (aka “The 20 Things”)

e4 services:

• Core

• User Interface

• Advanced

• Domain-Specific

Most of these services are injected using DI, see also:

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

Page 48: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse Application Services (“Twenty Things”)

Long-running operations Progress reporting Error handling Navigation model Resource management Status line Drag and drop Undo/Redo Accessing preferences

Preferences Editor lifecycle Receiving input Producing selection Standard dialogs Persisting UI state Logging Interface to help system Menu contributions Authentication Authorization

Don„t forget: OSGi services are also available via dependency injection

Page 49: Eclipse 40 - Eclipse Summit Europe 2010

Contributions

Page 50: Eclipse 40 - Eclipse Summit Europe 2010

Contributions

The Workbench Model is dynamic - Other bundles can make

contributions

Contributors need to know the id of the element they want to

contribute to

Page 51: Eclipse 40 - Eclipse Summit Europe 2010

Contributions

Extension point “org.eclipse.e4.workbench.model”

There are two kind of contributions

Static fragments – XMI snippets

Dynamic processors - Processor - Code

Page 52: Eclipse 40 - Eclipse Summit Europe 2010

e4 CSS Styling

Page 53: Eclipse 40 - Eclipse Summit Europe 2010

In reality all RCP apps

look like the IDE

Page 54: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse 3.X - IDE feeling Eclipse e4 – CSS Styling

Limitations for:• Menu bar background

• Table headers

e4 supports theme switching during runtime

Page 55: Eclipse 40 - Eclipse Summit Europe 2010

How to enable CSS Styling

Extension point "org.eclipse.e4.ui.css.swt.theme“ defines the style sheet

<extension

point="org.eclipse.e4.ui.css.swt.theme">

<theme

basestylesheeturi="css/styles.css"

id="org.eclipse.e4.minimal.theme.standard"

label=“Standard">

</theme>

</extension>

Page 56: Eclipse 40 - Eclipse Summit Europe 2010

How to enable CSS Styling

Property "cssTheme” for extension point "org.eclipse.core.runtime.products" selects the initial theme

<extension

id="product"

point="org.eclipse.core.runtime.products">

<product

application="org.eclipse.e4.ui.workbench.swt.E4Application"

name="E4 Contacs Demo">

....

<property

name="cssTheme"

value="org.eclipse.e4.demo.contacts.themes.darkgradient">

</property>

....

Page 57: Eclipse 40 - Eclipse Summit Europe 2010

Example CSSLabel {

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;

}

Page 58: Eclipse 40 - Eclipse Summit Europe 2010

© Lars Vogel and others, Licensed under Creative Commons by-nc-nd-3.0 (de)

How is the model

translated into UI

components?

Page 59: Eclipse 40 - Eclipse Summit Europe 2010

Model and UI Renderers

• The Workbench model is independent of a specific UI toolkit

I don’t care who draws me

Model

Page 60: Eclipse 40 - Eclipse Summit Europe 2010

Renderers

Widget RendererRenderer Factory

Returns for every

model element

Standard SWT renderer can be exchanged

Page 61: Eclipse 40 - Eclipse Summit Europe 2010

Renderer: flexible but complex

Page 62: Eclipse 40 - Eclipse Summit Europe 2010

Eclipse e4 – There is more

XWT

Open Social Gadgets

JDT ???

Page 63: Eclipse 40 - Eclipse Summit Europe 2010

Summary

Eclipse 4.0 is fantastic

Page 64: Eclipse 40 - Eclipse Summit Europe 2010

e4: Where to go from here:Eclipse e4 Wiki

http://wiki.eclipse.org/E4

Eclipse 4.0 Application Tutorial – Lars Vogelhttp://www.vogella.de/articles/EclipseE4/article.html

Eclipse 4.0 Application Tutorial – Tom Schindlhttp://tomsondev.bestsolution.at/2010/07/28/eclipse-4-0-and-tutorial-on-writing-e4-

rcp-application-released/

Page 65: Eclipse 40 - Eclipse Summit Europe 2010
Page 66: Eclipse 40 - Eclipse Summit Europe 2010

Thank you

For further questions:

[email protected] [email protected]

http://www.vogella.de http://twitter.com/kaitoedter

http://www.twitter.com/vogella

Page 67: Eclipse 40 - Eclipse Summit Europe 2010

Photo credits

• Open Door http://www.sxc.hu/photo/1228296

• Guy http://www.sxc.hu/photo/423354

• Corn http://www.sxc.hu/photo/939151

• About time guy http://www.sxc.hu/photo/1173019

• Thinking man http://www.sxc.hu/photo/ 324541

• Cool but hurts http://www.sxc.hu/photo/ 906072

• WWW http://www.sxc.hu/photo/987822

• Present http://www.sxc.hu/photo/1140205

• Happy figure http://www.sxc.hu/photo/125901

• Chess http://www.sxc.hu/photo/ 958410

• Pill box http://www.sxc.hu/photo/ 510413

• Syringe / Injection: http://www.sxc.hu/photo/ 468493

• Smiley http://www.sxc.hu/photo/ 1211480

• Lock http://www.sxc.hu/photo/ 352344

• Life Cycle http://www.sxc.hu/photo/1265027

• Powerful but complex http://www.sxc.hu/photo/607988

• Baby photo not yet published

• Excellent http://www.sxc.hu/photo/866529

• Thank you picture http://www.sxc.hu/photo/ 986313

• Runtime model http://www.sxc.hu/photo/ 765733

• Adding numbers http://www.sxc.hu/photo/

1117095

• Renderer http://www.sxc.hu/photo/976984

• Binder: http://www.sxc.hu/photo/443042

• Praying Girl http://www.sxc.hu/photo/646227

• Box: http://www.sxc.hu/photo/502457

• Screws http://www.sxc.hu/photo/1148064

• House with compartments http://www.sxc.hu/photo/494103

• Smiling Face 884146

• Ballons 1056766

• Bucket 807354

• Boy at beach 1139530

• Stacked stones http://www.sxc.hu/photo/998524

• Thinking Guy http://www.sxc.hu/photo/130484

• Drawing Hand http://www.sxc.hu/photo/264208

• Waiter http://www.sxc.hu/photo/157966

• Dancing Girt http://www.sxc.hu/photo/1187376

• Books http://www.sxc.hu/photo/1184809