This is an overview video that shows the scope of work and technology used within the Red Hat JBoss BRMS and BPMS platforms. The technology presented builds with GWT, Errai and UberFire as the foundation. Over 2015 we'll be working to make it for end users to consume the bits they need, paying for only what they use, so others can make power web platforms like BRMS and BPMS.

1. Red Hat JBoss BRMS and BPMS
Workbench and Rich Client Technology
UF UberFire

2. General Workbench

3. Drools Videos

6. Authoring Perspective

7. Org Units, Repositories and Projects

8. Organizational Unit Management

9. GIT Repository Management

10. Repository Creation Wizard

11. Repository Creation Wizard

12. Project Creation Wizard

13. Project View

14. Project View - Folder Navigation

15. Project View - Tree vs Flat Folder Navigation

16. Repository View - Folder Navigation

17. Repository View - Tree vs Flat Folder Navigation

18. Opened File with Editor

19. List Stacks

20. Drag and Drop Layout Support

21. Drag and Drop Layout Support Side

22. Drag and Drop to Side by

23. Problems Reporting

24. File Meta Data

25. File Meta Data

26. Maven Project Editor

27. Maven Project Editor

28. Maven Dependencies

29. Maven Dependencies

30. Maven Dependencies

31. Maven Repository Management

32. Design Time Editors

33. Data Modeler

34. Form Modeler

35. Limited Entry Decision Table

36. Extended Entry Decision Table

37. Rule Templates

38. Guided Rule Fragments

39. Score Cards

40. Design Time Management
Asset Promotion

41. Start Asset Promotion
• Video of early version, lots of UI improvements since
https://vimeo.com/105965931

42. Start Asset Promotion

43. Asset Selection for Promotion

44. Underlying Asset Promotion Workflow

45. User Profiles
Contributor Reporting
Social Activity

46. User Profiles and Social Activity

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

48. Developer Contributor Reporting

49. DashBuilder

50. Runtime Execution
and Management

51. Process Definitions

52. Deployment Units

53. Process Instances

54. Human Tasks - List View

55. Task Lists - Calendar Views

56. Apps

57. BootStrap Grid Views Creator

58. Sales Perspective using DashBuilder

59. Apps Directory Registration and Navigation

60. Opened App

61. Apps Demo (1m 42s)
• https://www.youtube.com/watch?v=Yhg31m4kRsM

62. RAD Extensions and
Mangement

63. RAD Extensions and Mangement UI

64. Extensions Demo (9m 20s)
• https://www.youtube.com/watch?v=KoJ5A5g7y4E

65. UberFire

66. UberFire Architecture Overview

67. Screens

68. 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

69. 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!";
}
}

70. 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>

71. Editors

72. Editors
• Extends Screen
• Additional Life cycles
• OnSave , IsDirty
• Resource type association

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

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

75. Workbench Perspective

76. 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

77. 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;
}
}

78. 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 () {
}
});

79. KIE
Knowledge is Everything

80. KIE

81. KIE

82. Web IDE

83. 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.

84. Web IDE with Maven Output

85. Web IDE with Fabric8 Provisioning

86. Pet Clinic Demo

87. Web IDE Demo (8m9s)
• https://www.youtube.com/watch?v=UG4pqk2r70Q

88. Road Map

89. 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