UberFire Quick Intro and Overview (early beta Aug 2013)

UF UberFirehttp://www.slideshare.net/MarkProctor/uberfire-quick-

intro-and-overview-early-beta-aug-2013

Tuesday, 6 August 13

http://www.slideshare.net/MarkProctor/uberfire-quick-intro-and-overview-early-beta-aug-2013




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 BPMS5.x


BRMS and BPMS 5.xAuthoringBuildDeploy


BRMS and BPMS 5.xAuthoringBuildDeployMonitor and ManageWork





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, 3rd Party, etcSecurity visibility.Hybrid GWT + JS support (Runtime Plugins)


6.x RequirementsPerspectives

Flexible layout with DnDSecurity visibility.Multiple layout managers


6.x RequirementsMenu’s, Toolbars

decoupled from componentscontextual to perspective and focus panelSecurity visibility.


6.x RequirementsVFS (nio2, java backport)

GIT BackendSeamless API for client and Server

SecurityAuthorization, AuthenticationSeamless API for client and Server

MetaDatastored as .dot file in git for each “asset”

High AvailabilityGIT cluster


KIEKnowledge is Everything


KIE


KIE


DEMO 1BRMS BETA


DEMO 2BPMS Beta



UberFire


UberFire Architecture



Workbench Screen


Workbench ScreenWorkBench Screen

DIVLifecycle events

OnStartUp, OnShutDownOnOpen, OnMayClose, OnCloseOnFocus, 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 EditorWorkBench Screen

DIVLifecycle events

OnStartUp, OnShutDownOnOpen, OnMayClose, OnCloseOnFocus, OnLostFocusIsDirty, 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 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

OnStartUp, OnShutDownOnOpen, OnMayClose, OnCloseOnFocus, OnLostFocusIsDirty, OnSave

WorkbenchEditorWorkbenchPerspectiveWorkbenchPopupWorkbenchScreen

WorkbenchPartTitleWorkbenchPartViewWorkbenchMenuPerspective

Components Lifecycle ComponentRendering Info


Hyrbid Plugins



DEMO 3Show Case and Dynamic

Plugins


DEMO 4Web IDE



Technology

UberFire Quick Intro and Overview (early beta Aug 2013)