XWT - Eclipse

handslustyInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

87 εμφανίσεις

1

What’s in e4

Tom Schindl, Boris Bokowski, Kai Tödter,
Hallvard Traetteberg, Yves Yang

2

e4

“The mission of the e4 project is to build a next
generation platform for pervasive, component
-
based
applications and tools.”

e4


(Historic) Facts


2008


Announcement of new project idea short before
EclipseCon


First mock up presentation at Eclipse 2008


e4 Summit in Ottawa (22
nd

/ 23
rd

May)


Project groups formed


The modeled workbench was born

e4


(Historic) Facts


2009


Release of e4 0.9 as a tech
-
preview


Backed up by an live EMF Modeled Application


Backwards compatibility layer to host important unmodified
parts of 3.5 in an e4 workbench (JDT, CVS)


Support for Declarative Styling


Embedding of WebUIs

e4


Why? Why now?


The current code is hard and is getting harder to
maintain


Different MVC implementations


Legacy code because of historic platform limitations

Shell

MenuBar

CTabFolder

PackageExplorer

Hierarchy

Shell

MenuBar

CTabFolder

PackageExplorer

Hierarchy

e4


Why? Why now?


New competitors in RCP


RIA
-
Frameworks like Flex, Sliverlight, JavaFX


GWT, Ajax
-
Frameworks (Qooxdoo, Ext
-
Js, …)


New UI
-
Requirements


Shift away from native looking UIs to „flashy“ UIs with
gradients, ...

e4


Project Overview

Modeled Application

Core Services

e4
-
Core

DI, EclipseContext

Workbench + RenderingEngine

Declarative Styling

e4
-
Addons

XWT

TM

Flexible Resources

WebUI

...

8

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

8

e4


Place for innovation


Not a product


e4 technologies will be used as the basis of Eclipse 4.0


Some e4 technologies will end up in 3.x


Eclipse 4.0 SDK may not include all technologies
explored as part of e4

9

Programming Model


Pull together and simplify the important APIs


“Eclipse Application Services”


focus on client API (separate from SPI)


Dependency Injection


static

keyword verboten (no Singletons)


API should map easily to other languages


e.g., JavaScript


avoid subclassing across component boundaries


avoid Java
-
isms

10

Why “application services”?



API surface has grown a lot



Important APIs are hard to identify (wheat / chaff)




Need a small set of “most important” Eclipse API




And, there are new requirements


E.g. embed pieces of web UI in Eclipse as first class
components


© 2009 IBM Corporation

IBM Confidential

10

Rational Software | Eclipse

11

Eclipse Application Services (“Twenty Things”)


Editor lifecycle


Receiving input


Producing selection


Standard dialogs


Persisting UI state


Logging


Interface to help system


Menu contributions


Authentication


Authorization



Long
-
running operations


Progress reporting


Error handling


Navigation model


Resource management


Status line


Drag and drop


Undo/Redo


Accessing preferences

© 2009 IBM Corporation

IBM Confidential

11

Rational Software | Eclipse

12

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

Contexts and Dependency Injection


“Context”


Locates services and provides them to consumers


Maps keys to values where values can be computed, w.
pluggable lookup


Interoperable with OSGi service registry


Dependency Injection


Constructor, method and field injection


Identified by Java annotations (JSR 330)


Eliminates dependencies on containers

12

13

Example Code

public class ExampleView {


@Inject ExampleView(Composite parent,


IWorkspace workspace,


IMemento persistedState) {


// ...


}


@Inject setInput(IResource input) {


// ...


}

}

e4


Modeled Application


e4
-
Applications are backed up by an live EMF
-
Model

e4


Modeled Application

org.eclipse.e4.workbench

e4


Modeled Application


The concept of renderers

EMF
-
Workbench
-
Model

AbstractRenderer

org.eclipse.e4.workbench.renderer.swt

SWTRenderer

at.bestsolution.e4.renderer.qtjambi

QTRenderer

Synchronize

Contribute

e4


Modeled Application

e4


Modeled Application

Kai Tödter

Siemens Corporate Technology




© Kai Tödter and others, Licensed under Creative Commons Attribution
-
Noncommercial
-
No Derivative Works 3.0 Germany License.

20

12/14/2013

20

© Kai Tödter and others, Licensed under Creative Commons Attribution
-
Noncommercial
-
No Derivative Works 3.0 Germany License.

21

12/14/2013

21

© Kai Tödter and others, Licensed under Creative Commons Attribution
-
Noncommercial
-
No Derivative Works 3.0 Germany License.

22

12/14/2013

22

© Kai Tödter and others, Licensed under Creative Commons Attribution
-
Noncommercial
-
No Derivative Works 3.0 Germany License.

23

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
;

}

12/14/2013

23

© Kai Tödter and others, Licensed under Creative Commons Attribution
-
Noncommercial
-
No Derivative Works 3.0 Germany License.

24


Menu bar background


Table headers


Partly implemented:


Gradients


Planned:


Having similar capabilities compared with
WebKit’s gradients

12/14/2013

24

© Kai Tödter and others, Licensed under Creative Commons Attribution
-
Noncommercial
-
No Derivative Works 3.0 Germany License.

25

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

e4 R0.9
-

Web Integration


We are seeing a mix of web and desktop UIs


Similar but different


Need appropriate experiences


Solution: re
-
use components, not applications



(Sub
-
)work areas:


JavaScript modularity


JavaScript debugging


Web to desktop


Desktop to web

25

26

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

JavaScript Modularity


JavaScript modularity framework based on OSGi concepts


Runs as a nested framework within an OSGi instance


Bundle and script file level dependencies (using JSON)


Communicate with Java via OSGi services or Eclipse extensions (and EAS)


Needed for building enterprise
-
grade web applications


Status: Done, but needs to be stressed/used more

26

{


"Bundle
-
SymbolicName":"sample.jsbundle",


"Bundle
-
Version":"1.0",


"Bundle
-
ScriptPath":"script.js",


"Import
-
Package":"a.resource;version=[1.0.0,2.0.0)",


"Export
-
Package":"sample.resource;version=1.0.0",


"Require
-
Bundle:"some.other.bundle",

}

27

JavaScript Debugging


Implemented a debug runtime for Rhino (extensible to
other VMs)


working on full, integrated JavaScript debugging for
Eclipse (including Java/JS boundary crossing)


Working with ATF to support Mozilla based runtimes


Expect to be able to support Chrome


Have integrated with JSDT to set breakpoints, etc.


28

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

Embedding Web UIs (Web to desktop)

28


Run web components on the desktop


Uses the SWT Browser control


Backed by IE, Mozilla, or Safari


Improved API for Java
-
JavaScript interop in 3.5


Eclipse as an OpenSocial Gadgets container


Provide first class interoperability with Eclipse


EAS / “20 things”


E.g. standard dialogs, progress reporting, preferences,
selection...


Make available to embedded pages via JS

29

OpenSocial Gadgets


30

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

e4 R0.9 Clone of PDE Site Editor

30

31

TM


Motivation


Hand
-
coding GUIs is hard


GUI frameworks can be complex


conceptual gap between concrete GUI and the GUI code


What works?


GUI builders are very useful for part of the design task


... but handles only look & feel, behavior must still be coded


HTML+DOM+Javascript has caught on


... but XML is not the best tree
-
structured data model around


Model
-
based techniques are maturing and more wide
-
spread


... but has not really been successfully applied to UIs (until now?)



Can a combination of these be used for e4?

32

TM


model and architecture


Ecore
-
based model of GUI elements


hierarchy of widgets


simple elements


label, text field, buttons, list, ...


composites


generic, group box, tab folder, ...


coming soon:


table and tree widgets


styling with CSS


2d graphics


natural extension of modeled workbench UI


EMF API & tools are used to manage TM instances


Java code with static and reflective API


generic editors and model
-
based techniques


transform with ATL, store with Teneo, share with CDO ...

33

Tree
-
based editor with preview

36

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

e4 R0.9
-

Flexible Resources


Solve some real
-
world problems, w.r.t. constraints on the layout of
projects in the workspace


Implemented to be backwards compatible with R3.x


Enhancements:


Define variables at project level, with linked resources relative to them


Groups
== virtual folders of links to resources elsewhere on disk


Exclusion filters on projects and folders


Creation/manipulation of linked resources via D&D


e.g. drag file tree onto Eclipse can create links and groups


Edit link locations; convert links between absolute and variable relative


Work underway to graduate this work in 3.x (3.6 target)

36

37

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

What’s next


“Eclipse SDK R4.0” to be delivered July 2010


Goals


All SDK R3.6 plug
-
ins hosted and running


Ready for wider consumption


But(!) this is the first release of a significantly new codebase


It will not be on the Helios release train


Early adopters in community will be moving


Need significant real
-
world testing


Help us make the compatibility bulletproof


Expect to be on 2011 release train


Requirement: All other release train projects run

38

XWT

Eclipse
X
ML
W
indowing
T
oolkit



Yves YANG (Soyatec)

yves.yang@soyatec.com

39

Agenda


What is XWT?


Architecture


Key features


Q&A

40

What is XWT?

XWT stands for XML Windowing Toolkit. It is a
XML based UI declarative solution for eclipse.


XWT targets to be a UI Presentation Foundation
for eclipse by providing:


A common infrastructure that enables UI tools to
work together


Component assembling application
development environment

41

SWT

JFace

JFace Data Binding



Abstraction / Domain

Technical
Developer

Domain
Developer

Model
Designer

Technology

XWT

Modeling

Tools

Visual

Designer

UI Code

Editor

42

Product overview

Implementation

Tools

EMF

TM

PMF

DSL



EMF

VE

XWT

UI

Control

Trigger

Event
Handling

Java

Data binding

Java

EMF

XML

...

Styling

Inline

CSS

Java

Technical
Developer

Domain
Developer

Model
Designer

43

Architecture




44

Key features


Runtime In SWT/JFace


Full integrations


JFace Data Binding


CSS


e4 workbench


Eclipse RCP 3.x


Reusable Presentation Component


High extensibility


WYSIWYG Designer





45

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

Further reading


“Eclipse has a future.”


http://dev.eclipse.org/blogs/mcqjustmcq/2009/07/25/eclipse
-
has
-
a
-
future/


“White Paper: e4 Technical Overview”


http://eclipse.org/e4/resources/e4
-
whitepaper.php


Websites:


e4 Wiki
--

http://wiki.eclipse.org/E4


e4 Homepage
--

http://eclipse.org/e4

45

46

Rational Software | Eclipse

© 2009 IBM Corporation

IBM Confidential

Comments?
Questions?

47

Why change?



“We’ve already built all our plug
-
ins.



The most important thing is
don’t break us
.”





(Yes, there will be a compatibility layer.)

48


Francois Schnell, http://www.flickr.com/photos/frenchy/30217773/