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
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/