UberFire Quick Intro and Overview (early beta Aug 2013)

UF UberFire
http://www.slideshare.net/MarkProctor/uberfire-quick-
intro-and-overview-early-beta-aug-2013
Tuesday, 6 August 13

GWT
Google committed to Open Source development
model
Steering Commit/Transparency
TimeBox releases (twice year)
Future focus
Mobile (reduced CPU utilization, more code splitting)
Easier “Hyrbid” apps
Smaller and faster executions

GWT
GWT used extensively at Google
Adwords (97% of google revenue)
Google Groups (rewrite just announced)
Major new consumer projects about to be announced
Big chunk of internal IT
100K+ monthly auto-update pings (Eclipse)
GWT considered mature
Not investing in marketing or evangalising

BRMS and BPMS
5.x

BRMS and BPMS 5.x
Authoring
Build
Deploy

BRMS and BPMS 5.x
Authoring
Build
Deploy
Monitor and Manage
Work

What we Learned

5.x Critique
UI
GWT
But not easily
extended
Fixed layouts
No perspectives

5.x Critique
JCR
Performance Issues
Everything stored as blob
No tagging, branching etc.
Webdav
Limited team providers

6.x Requirements
Modular design
Plugins
Compile time composition of plugins
Maven modules
Hybrid GWT + JS support (Runtime Plugins)
Twitter Bootstrap UI

6.x Requirements
Panels
Common Life cycles
Panel re-use in other frameworks
Eclipse, 3rd Party, etc
Security visibility.
Hybrid GWT + JS support (Runtime Plugins)

6.x Requirements
Perspectives
Flexible layout with DnD
Multiple layout managers

6.x Requirements
Menu’s, Toolbars
decoupled from components
contextual to perspective and focus panel

6.x Requirements
VFS (nio2, java backport)
GIT Backend
Seamless API for client and Server
Security
Authorization, Authentication
Seamless API for client and Server
MetaData
stored as .dot file in git for each “asset”
High Availability
GIT cluster

KIE
Knowledge is
Everything

DEMO 1
BRMS BETA

DEMO 2
BPMS Beta

UberFire Architecture

Workbench Screen

Workbench Screen
WorkBench Screen
DIV
Lifecycle events
OnStartUp, OnShutDown
OnOpen, OnMayClose, OnClose
OnFocus, OnLostFocus

Workbench Screen
@WorkbenchScreen(identifier = "MyFirstPanel")
public class MyFirstPanel extends SimplePanel {
public MyFirstPanel() {
setWidget( new Label("Hello World 1") );
}
@WorkbenchPartTitle
public String myTitle() {
return "My First Panel!";
}
}

Workbench Screen$registerPlugin({
id: "my angular js",
type: "angularjs",
templateUrl: "angular.sample.html",
title: function () {
return "angular " + Math.floor(Math.random() * 10);
},
on_close: function () {
alert("this is a pure JS alert!");
}
});
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
<form ng-submit="goto()">
<input type="text" ng-model="placeText" size="30" placeholder="place to go">
<input class="btn-primary" type="submit" value="goTo">
</form>
</div>

Workbench Editor

Workbench Editor
WorkBench Screen
DIV
Lifecycle events
OnStartUp, OnShutDown
OnOpen, OnMayClose, OnClose
OnFocus, OnLostFocus
IsDirty, OnSave

@WorkbenchEditor(identifier = "TextEditor",
supportedTypes = { TextResourceType.class,
DotResourceType.class })
public class TextEditorPresenter {
@WorkbenchPartTitle
public String getTitle() {
return "Text Editor [" + path.getFileName() + "]";
}
@WorkbenchPartView
public IsWidget getWidget() {
return view; //injected
}
(...)
}
Workbench Editor

@WorkbenchEditor(identifier = "TextEditor",
supportedTypes = { TextResourceType.class,
DotResourceType.class })
public class TextEditorPresenter {
(...)
@OnStart
public void onStart( final Path path ) {
this.path = path;
}
@OnSave
public void onSave() {
}
@IsDirty
public boolean isDirty() {
return view.isDirty();
}
}
Life Cycle Annotations

Workbench Perspective

Window Managers
NESW, with DnD
Nesting, for flexible layouts.
Supports programmatic and json
Future
Grid
Templates

@WorkbenchPerspective(
identifier = "HomePerspective",
isDefault = true)
public class HomePerspective {
@Perspective
public PerspectiveDefinition buildPerspective() {
final PerspectiveDefinition p =
new PerspectiveDefinitionImpl();
p.setName( "Home Perspective" );
p.getRoot().addPart(
new PartDefinitionImpl(
new DefaultPlaceRequest( "RepoList" ) ) );
return p;
}
}
Workbench Perspective

Workbench Perspective$registerPerspective({
"id": "Markdown Editor",
"view": {
"parts": [
{
"place": "MarkdownLiveViewer",
"parameters": {}
}
],
"panels": [
{
"width": 600,
"min_width": 300,
"position": "west",
"parts": [
{
"place": "MarkdownLiveEditor",
"parameters": {}
}
]
}
]
},
on_close: function () {
}
});

UberFire Annotations
OnStartUp,
OnShutDown
OnOpen,
OnMayClose,
OnClose
OnFocus,
OnLostFocus
IsDirty,
OnSave
WorkbenchEditor
WorkbenchPerspective
WorkbenchPopup
WorkbenchScreen
WorkbenchPartTitle
WorkbenchPartView
WorkbenchMenu
Perspective
Components Lifecycle Component
Rendering Info

Hyrbid Plugins

DEMO 3
Show Case and Dynamic
Plugins

DEMO 4
Web IDE

UberFire Quick Intro and Overview (early beta Aug 2013)

More Related Content

What's hot (12)

Viewers also liked (10)

Similar to UberFire Quick Intro and Overview (early beta Aug 2013) (20)

More from Mark Proctor (20)

Recently uploaded (20)

UberFire Quick Intro and Overview (early beta Aug 2013)