Oryx - Introduction

4th November 2009Nicolas Peters

Willi Tscheschner

Support of various notations

Web-basedmodeling tool Easily

extensible

Active Open SourceCommunity

The Project2005

Idea: create own process modeling tool suite at BPT group

First version: GEF-/eclipse-based BPMN editor2006

Bachelor project starts developing Oryx2007

Oryx released as open source Major interest from industry and academia First external plugin from Stuttgart (BPMN 2 BPEL)

2008 Continuous improvements More Features External plugins from Stuttgart, Australia

2009 New File-Backend Improved user interface BPMN Community Spin off Signavio GmbH for professional service

The Team

Project ManagerMatthias Kunze

matthias.kunze@hpi.uni-potsdam.de

SupportNicolas Petersnicolas.peters@signavio.com

Willi Tscheschnerwilli.tscheschner@signavio.com

Oryx Projecthttp://oryx-project.org

B3MN Google Grouphttp://groups.google.com/group/b3mn

Oryx Google Codehttp://code.google.com/p/oryx-editor

Oryx Signavio Initiativehttp://code.google.com/p/signavio-oryx-initiative

Signavio Oryx Academic http://www.signavio.com/en/academic.html

Overview

ArchitectureStencil Set /

Stencil Set Extension

Client Plugin Server Plugin

Overview

ArchitectureStencil Set /

Stencil Set Extension

Client Plugin Server Plugin

Architecture

Editor Concepts Plugin mechanism

Small core, functionalities are implemented as plugins

Easily extensible

Most of the features are implemented as plugins

Stencil sets

Declarative definition of notations

Graphical representation is defined in SVG with Oryx‘ specific attributes

Stencil set extensions

Add/remove stencils from existing stencil sets

Add/remove properties from existing stencils

I18N

Translation of the UI and the stencil sets possible

Event-handling

Over the internal event handling mechanism, plugins can be registered to mouse events or can raise their own events

Undo

For undo functionality, the command-pattern is implemented

Plugin loader

Add a plugin at runtime

Server Concepts

Counter-part of client-side plugins

No database available

Java package: org.oryxeditor.server

Common use case: Receive json from client

Parse json to stencil set specific Java data model

Perform operations on the data model

Return results as JSON, XML or binary data

Overview

ArchitectureStencil Set /

Stencil Set Extension

Client Plugin Server Plugin

Existing Stencil Sets

Business Process Modeling Notation (BPMN) 1.2

BPMN 2.0 Event-driven Process Chains (EPC) Petri Nets Workflow Nets FMC Block Diagram XForms

~10 experimental stencil sets

Stencil Set

Specified in JSON and SVG

JSON:

Attributes

Syntax definition (parent relationship, connection or cardinality rules)

Reference to the SVG

SVG:

Definition of the graphical representation

Special extensions for min/max sizes, magnets/dockers, anchors, attribute references

{"title":"Tree Graph","namespace":"http://b3mn.org/stencilset/treeGraph#","stencils" : [

{"type" : "node","title" : "Node","view" :"node.place.svg",..."properties": [

{"type" : "String","title" : "Title","refToView" : "text",...

} ]

,...],

"rules": {"cardinalityRules": [...],"connectionRules": [...],"containmentRules": [...]}

}

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg"xmlns:oryx="http://www.b3mn.org/oryx"><g><circle cx="11" cy="11" r="10" .../><text id="text" oryx:align="middle center" />

</g></svg>

Stencil Set - JSON

{

"title" : "Tree Graph",

"namespace": "http://b3mn.org/stencilset/treeGraph#",

"description" : "This is the specification of a tree graph",

"stencils" : […],

"rules": {…}

}

Stencil Set - Stencil

{"type" : "node" (others: "edge"),"id" : "Node","title" : "Node","groups" : ["Tree Graph"],"description" : "A node.","view" : "node.svg","icon" : "node.png","roles": ["node"],"properties": […]

}

Stencil Set - Properties{

"id" : "title","type" : "String" (others: "Int"|"Float"|"Boolean"|"Choice"|

"Color"|"URL"|"DateTime"|"DiagramLink"|"Complex"),"title": "Title","title_de" : "Titel","value" : "","description" : "This is the title of the node.","tooltip" : "The title of the node.","readonly" : false,"optional" : true,"refToView" : "text" (the id of the HTMLElement without

a leading #),"length" : "","wrapLines" : true,

"fill" : boolean (only for ‘Color’-properties),"stroke" : boolean (only for ‘Color’-properties),

"items" : […] (only for ’Choice’-Properties),

"dateFormat" : String (only for ‚Date‘-Properties)}

Stencil Set - Rule

{"cardinalityRules": [{

"role" : "Node", "outgoingEdges": [{

"role": "Edge", "maximum": 2 }],

"incomingEdges": [{ "role":"Edge", "maximum":1 }]

}],"connectionRules": [{

"role" : "Edge","connects" : [{

"from": Node","to": ["Node"]}]

}],"containmentRules": [{

"role": "Diagram","contains": ["Edge", "Node"]

}],"morphingRules": [{

"role": ActivitiesMorph","baseMorphs": ["Task"]

}],"layoutRules" : [{

"role": "ActivitiesMorph","outs": [{"edgeRole":"MessageFlow","t":2, "r":1, "b":2, "l":1},

{"t":1,"r":2,"b":1,"l":2}]," ins": [{"t":1, "r":2, "b":1, "l":2}]

}]}

Stencil Set - View<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg

xmlns="http://www.w3.org/2000/svg"xmlns:oryx="http://www.b3mn.org/oryx"width="40"height="40"version="1.1">

<oryx:magnets><oryx:magnet oryx:cx="2" oryx:cy="16" oryx:anchors="left" /><oryx:magnet oryx:cx="16" oryx:cy="30" oryx:anchors="bottom" /><oryx:magnet oryx:cx="30" oryx:cy="16" oryx:anchors="right" /><oryx:magnet oryx:cx="16" oryx:cy="2" oryx:anchors="top" /><oryx:magnet oryx:cx="16" oryx:cy="16" oryx:default="yes" />

</oryx:magnets><g pointer-events="fill" oryx:minimumSize="30 30" oryx:maximumSize="100 100">

<rect oryx:resize="horizontal vertical" id="rect" x="1" y="1" width="30" height="30" stroke="black" fill="white" stroke-width="1"/><text oryx:align="middle center" oryx:fittoelem="rect" font-size="12" id="text" x="16" y="16" stroke="black"></text>

</g></svg>

Stencil Set Extension

Extend existing stencil sets

Add/remove stencils

Add/remove properties

Add rules

Stencil Set Extension –Definition

{

"title": "BPMN Cost Extension",

"namespace": "http://oryx-editor.org/bpmncosts#",

"description": "Adding a cost attribute to activities",

"extends": "http://b3mn.org/stencilset/bpmn1.1#",

"removeStencils": [],

"removeProperties":[ ],

"stencils": [],

"properties": [ {

"roles": [

"Task",

"Subprocess"

],

"properties": [ {

"id": "cost",

"type": "Integer",

"title": "Cost",

"description": "Activity costs.",

"readonly": false,

"optional": true,

"min": 0

}]

}]

}

Overview

ArchitectureStencil Set /

Stencil Set Extension

Client Plugin Server Plugin

Client Plugins – Facade

ORYX::Core

ORYX::Plugins

ORYX::Editor

+offer()+getStencilSets()+getRules()+loadStencilSets()+createShape()+deleteShape()+getSelection()+setSelection()+updateSelection()+getCanvas()+importJSON()+importERDF()+getERDF()+executeCommands()+registerOnEvent()+unregisterOnEvent()+raiseEvent()+enableEvent()+disableEvent()+eventCoordinates()+addToRegion()

«interface»Facade

«uses»

Offer the plugin’s functionality Get the stencil set or rule definitions Add or remove shapes from or to the

canvas Set or get the current selection Get the canvas object (that includes

the reference of all child shapes) Generate or import JSON (or eRDF) Execution of commands Event mechanism

Helper-Methods: Get the relative mouse

coordinates Add a panel to the viewport

Editor Class Model

UIObject

Node

Control

DockerMagnet

Bounds

+bounds

1 1

Edge

Shape Canvas

*+parent

0..1

Math

SVG (Helper)

StencilSetAbstractShape

* 1

ORYX::Core

Client Editor Detailed Class Model

+update()+refreshed()+add()+remove()+getId()+getChildren() : UIObject[]+getChildById() : UIObject+absoluteBounds() : Bounds+absoluteXY()+absoluteCenterXY()+hide()+show()+addEventHandlers()#_changed()

+id+parent : UIObject+node+children : UIObject[]+bounds : Bounds+isChanged : bool = false+isVisible : bool = true+isResized : bool = false+isSelectable : bool = false+isResizeable : bool = false+isMoveable : bool = false

Core::UIObject

Controls::Control

+update()+refresh()+setReferencePoint()+getAbsoluteReferencePoint()+setDockedShape()+getDockedShape() : Shape+setDockerColor()+hide()+show()

+isMovable : bool = true+referencePoint+node+anchors

Controls::Docker

+update()+_update()+refresh()+show()

+node+anchors

Controls::Magnet

+registerCallback()+unregisterCallback()+set()+moveTo()+centerMoveTo()+moveBy()+include()+extend()+widen()+upperLeft()+lowerRight()+width()+height()+center()+midPoint()+isIncluded() : bool+clone()+serializeForERDF()

Core::Bounds

+bounds

1 1

+dockers : Docker+magnets : Magnet+incoming : Shape[]+outgoing : Shape[]+properties+node+idMe

Core::Shape

+update()+layout()+add()+remove()

+node+rootNode

Core::Canvas

*

+parent

0..1

Core::Math

Core::StencilSet

+getChildShapeByResourceId() : Shape+getChildShapes() : Shape[]+getChildNodes() : Node[]+getChildEdges() : Edge[]+getAbstractShapesAtPosition() : AbstractShape[]+isPointIncluded() : bool+layout()+setProperty()+serialize() : object+deserialize()

Core::AbstractShape

Profiles

Run editor in a configuration, that suits your –the developer’s – needs Pick plugins required

Throw out plugins not used

Do not load incompatible plugins

Profiles - Schema

Path-Segments (RFC2396#3.3) Identifies resource (editor app)

Path-Segment-Param (RFC2396#3.3) Identifies configuration of editor

Fragment (RFC2396#4.1) Identifies model (loaded at runtime through client)

/oryx/editor ;profile #/model/123

Profile Definition

<profiles><profile

name="newProfile"stencilset="stencilsets/bpmn1.1/bpmn1.1.json" depends="default">

<plugin name="ORYX.Plugins.PluginLoader"/><plugin name="ORYX.Plugins.View">

<property

zoomLevel="0" maxFitToScreenLevel="0,1" />

</plugin><plugin name="ORYX.Plugins.DragDropResize"/>

</profile>...

</profiles>

[http://code.google.com/p/oryx-editor/wiki/PROFILES]

Define name, stencilsetand dependencies(inherited profile)

Define includedplugins by name

Add or overwriteplugin properties

Overview

ArchitectureStencil Set /

Stencil Set Extension

Client Plugin Server Plugin

Java Servlets

Component-based and platform-independent technology for web-based applications

Java EE 5 - JSP technology

doGet(…), doPost(…), doPut(…), doDelete(…), …

JSON

JSON, XML, Binary

Servlet

Server Plugin - Setup

Register new Servlet in the web.xml file<servlet>

<display-name>Example Plugin</display-name><servlet-name>Example</servlet-name><servlet-class>org.oryxeditor.server.Example</servlet-

class></servlet>

<servlet-mapping><servlet-name>Example</servlet-name><url-pattern>/example</url-pattern>

</servlet-mapping>

Diagram API

Generic data model to parse json into Java objects

Base classes for specific imple-mentations

+parseJson(in jsonObject)+parseJson(in jsonString)

DiagramBuilder

-ssextensionsDiagram

-dockers-resourceId-properties

Shape

-stencilIdStencilType

-url-namespace

StencilSet

-lowerRight-upperLeft

Bounds

+parseModelToString(in Diagram)+parseMode(in Diagram)

JSONBuilder

1

-shapes*

-parent

1

-childShapes * -incomings*

-outgoings

*

«instance»

«call»

*

-stencilset

*

-stencil

* * *

-bounds

*

Server Plugins – doPost Example

protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {

//get parameter from request;

String jsonRep = req.getParameter(“model“);

//create diagram object model

org.oryxeditor.server.diagram.Diagram diagram = DiagramBuilder.parseJson(jsonRep);

//get stencil set namespace of model

String stencilset = diagram.getStencilset().getNamespace();

//do stuff

String result = null;

if(stencilset.equals(BPMN) {

result = processBPMN(diagram);

} else {

result = processDiagram(diagram);

}

res.setStatus(200);

res.setContentType(“application/json“);

res.getWriter().write(result);

}

XSLT vs. Java

+ Can be used directly in the client

+ No communication overhead, no server load

– Difficult implementation– XML as input and output– Understandability?

+ Easy to use, because of the Diagram API

+ Usage of any Java-library possible

+ Easier to understandand extend

– Communicationoverhead

Overview

ArchitectureStencil Set /

Stencil Set Extension

Client Plugin Server Plugin

ToolingFirefox 3.5http://www.mozilla-europe.org/de/firefox/

Firebughttps://addons.mozilla.org/de/firefox/addon/1843

Java 6 (and set JAVA_HOME environment variable)http://java.sun.com/javase/downloads

Eclipse IDE for Java EE Developers http://www.eclipse.org/downloads/

Subclipsehttp://subclipse.tigris.org/update_1.6.x

(Aptana Studio 2.0http://download.aptana.org/tools/studio/plugin/install/studio )

Development Guideline

Write Java code Java 6 compliant

Only use UTF-8 encoding (for source code, client/server communication etc.)

Only use Windows text file line delimiter for all source files

Folder Structure

Further InformationExtJShttp://extjs.com/deploy/dev/examples/samples.html http://www.extjs.com/deploy/ext-2.0.2/docs/

Prototype (API)http://prototypejs.org/api

Java Servlethttp://java.sun.com/products/servlet/