Red Hat JBoss BRMS and BPMS Workbench and Rich Client Technology

UF UberFire

General Workbench

Drools Videos

Authoring Perspective

Org Units, Repositories and Projects

Organizational Unit Management

GIT Repository Management

Repository Creation Wizard

Repository Creation Wizard

Project Creation Wizard

Project View

Project View - Folder Navigation

Project View - Tree vs Flat Folder Navigation

Repository View - Folder Navigation

Repository View - Tree vs Flat Folder Navigation

Opened File with Editor

List Stacks

Drag and Drop Layout Support

Drag and Drop Layout Support Side

Drag and Drop to Side by

Problems Reporting

File Meta Data

File Meta Data

Maven Project Editor

Maven Project Editor

Maven Dependencies

Maven Dependencies

Maven Dependencies

Maven Repository Management

Design Time Editors

Data Modeler

Form Modeler

Limited Entry Decision Table

Extended Entry Decision Table

Rule Templates

Guided Rule Fragments

Score Cards

Design Time Management Asset Promotion

Start Asset Promotion• Video of early version, lots of UI improvements since

https://vimeo.com/105965931

Start Asset Promotion

Asset Selection for Promotion

Underlying Asset Promotion Workflow

User Profiles Contributor Reporting Social Activity

User Profiles and Social Activity

Activity Collector• http://blog.athico.com/2014/07/kie-uberfire-social-

activities.html

Developer Contributor Reporting

DashBuilder

Runtime Execution and Management

Process Definitions

Deployment Units

Process Instances

Human Tasks - List View

Task Lists - Calendar Views

Apps

BootStrap Grid Views Creator

Sales Perspective using DashBuilder

Apps Directory Registration and Navigation

Opened App

Apps Demo (1m 42s)

• https://www.youtube.com/watch?v=Yhg31m4kRsM

RAD Extensions and Mangement

RAD Extensions and Mangement UI

Extensions Demo (9m 20s)

• https://www.youtube.com/watch?v=KoJ5A5g7y4E

UberFire

UberFire Architecture Overview

Screens

Screens• Smallest component

• CDI discovery, or programmatically registered

• DIV on a page

• Life cycle

• OnStart, OnClose, OnFocus, OnLostFocus, OnMayClose, OnReveal

• Decoupling via Errai Bus

• Components do not invoke each other, all communication handled by a bus

Screen Plugin with GWT

@WorkbenchScreen(identifier = "MySecondPanel")public class MySecondPanel extends SimplePanel {

public MySecondPanel() { setWidget( new Label("Hello World 2") ); }

@WorkbenchPartTitle public String myTitle() { return "My Second Panel!"; }

}

Screen Plugin with AngularJS$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>

Editors

Editors• Extends Screen

• Additional Life cycles

• OnSave , IsDirty

• Resource type association

Editor Plugin with GWT

@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 } (...) }

Editor Plugin - Lifecycle Annotations

@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(); } }

Workbench Perspective

Perspectives• Composition of Screens

• Pluggable Window Management

• NESW

• In place drag and drop

• Bootstrap Grid Views

• Separate design time and runtime

• Templates

• Absolute user control

NESW Perspective with GWT

@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; }}

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

KIE Knowledge is Everything

KIE

KIE

Web IDE

Web IDE• BxMS is “citizen developer focused”

• 2 days to make it more developer oriented

• Expose pom.xml

• Tab stacks, instead of list stack

• Technical repository explorer only

• Intellij style side bars (will go back into main BxMS)

• Directly exposes Maven

• Also demonstrates

• ACE editor integration (part of BxMS now)

• Live Fabric8 provisioning and management

• Live deployment of spring Pet Clinic WAR Spring app.

Web IDE with Maven Output

Web IDE with Fabric8 Provisioning

Pet Clinic Demo

Web IDE Demo (8m9s)

• https://www.youtube.com/watch?v=UG4pqk2r70Q

Road Map

Road Map• Want to deliver a RAD platform for “Self Service Applications”in 2015

• Strong Forms and Data Modeller with additional DB integration will be key.

• Social Activities and profiles will be improved, OSX style notification centre bar

• Cross reference already exists, will be extended for refactoring support - of class names, we won’t be doing method content refactoring for now.

• Further work to micro-service-enable our architecture

• Further provisioning and deployment management improvements

• Further GIT “flow” improvements.

• Focus on authoring collaboration, multiple live document authors etc