uberfire quick intro and overview (early beta jul 2013)

UF UberFire

Saturday, 29 June 13

GWT


GWTGoogle committed to Open Source developmentmodel

Steering Commit/TransparencyTimeBox releases (twice year)Future focus

Mobile (reduced CPU utilization, more code splitting)Easier “Hyrbid” appsSmaller and faster executions


GWTGWT used extensively at Google

Adwords (97% of google revenue)Google Groups (rewrite just announced)Major new consumer projects about to be announcedBig chunk of internal IT100K+ monthly auto-update pings (Eclipse)

GWT considered matureNot investing in marketing or evangalising


BRMS and BPMS


BRMS and BPMS AuthoringBuildDeploy


BRMS and BPMS AuthoringBuildDeployMonitor and ManageWork


BRMS Components


What we Learned


5.x CritiqueUI

GWTBut not easilyextendedFixed layoutsNo perspectives


5.x CritiqueJCR

Performance IssuesEverything stored as blobNo tagging, branching etc.WebdavLimited team providers


6.x RequirementsModular design

PluginsCompile time composition of plugins

Maven modulesHybrid GWT + JS support (Runtime Plugins)

Twitter Bootstrap UI


6.x RequirementsPanels

Common Life cyclesPanel re-use in other frameworks

Eclipse, Portal etcSecurity visibilityHybrid GWT + JS support (Runtime Plugins)


6.x RequirementsPerspectives

Flexible layout with DnDMultiple layout managersSecurity visibilityHybrid GWT + JS support (Runtime Plugins)


6.x RequirementsMenu’s, Toolbars

decoupled form componentscontextual to perspective and focus panelSecurity visibility

GIT BackendHigh Availabilty

GIT cluster


6.x RequirementsGIT BackendVFS (nio2)

seamless API for client and ServerSecurityMetaData

stored as .dot file in git for each “asset”High Availability

GIT cluster


KIEKnowledge is Everything


KIE


UberFire


UberFire Architecture


Workbench Screen


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


@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


Screen Life Cycles

OnStart OnSave IsDirtyOnCloseOnFocusOnLostFocusOnMayCloseOnReveal

Lifecycle


@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 ManagersNESW, with DnD

Nesting, for flexible layouts.Supports programmatic and json

FutureGridTemplates


@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

OnStart OnSave IsDirtyOnCloseOnFocusOnLostFocusOnMayCloseOnReveal

WorkbenchEditorWorkbenchPerspectiveWorkbenchPopupWorkbenchScreen

WorkbenchPartTitleWorkbenchPartViewWorkbenchMenuPerspective

Components Lifecycle ComponentRendering Info


Hyrbid Plugins


DEMO 1BRMS Beta3


DEMO 2BPMS Beta4


DEMO 3Web IDE


UI Improvments


UberFire new Navigation System


DEMO 4Dynamic non-GWT Plugins

(Live, no Video)


Proof Is In The Pudding


UI Rewrite started in NovemberEntire BRMS portedNew BPMS built, all integratedTasks, Calendars, BPM DesignerOnly one person on core UI frameworkAll team memebers distributedDespite aggressive schedule

Code remains modularEasy to maintain and extend

Proof Is In The Pudding


uberfire quick intro and overview (early beta jul 2013)

Technology

gwt gwt

public myfirstpanel

workbench perspective

gwt google

workbench editor

workbench screen

isdirty public boolean

onsave public void onsave