Uberfire Framework Presentation @ GWT Create 2014 US/EU

1. Rapidly Building
Cloud IDEs
with uberfire
Alexandre Porcelli (US)
Michael Anstis (EU)
Mauricio Salatino (EU)

2. W4H
● What?
● Why?
● Who?
● Where?
● How?
● Q&A

3. UberFire is a web framework for a superior
experience in building extensible workbenches and
console type applications.
It provides an Eclipse like workbench
experience for the web, helping you to make
maintainable, customizable workbench-style
apps in no time flat.
Our ultimate goal in uberfire is to provide a strong
ecosystem around it, based on a rich set of
pluggable components and a strong infrastructure,
allowing different type of users easily build Rich
Web Apps on top of it….
What?

4. ● GWT
○ Java
○ ResourceBundles
○ Browser support
● Errai
○ Client-side CDI
○ Templated views
○ Message bus
○ RPC
What?

5. ● Workbench
● VFS
● VFS Metadata Indexing
● Security
● Extensions
● Integration
What?

6. metadata preferences
gwt
errai
index / search
cluster
mvp
cdi
bus ui
model
securityvfs
runtime plugin
window mgmt
nsew template ...
What? Components

7. coreUBERFIRE
EXTENSIONS
KIE
EXTENSIONS
GUVNOR
DASHBUILDER
FORM
MODELER
WIRES
SOCIAL
BUILD &
PROVISIONING
What? Ecosystem
APPS
RUNTIME
PLUGINS

8. ● JBoss / RedHat
● Drools/jBPM team
● Working closely with Errai team
Who?

9. ● Composition
● Integration
● Interoperability
● Legacy
Why?

10. http://www.uberfireframework.org/
https://github.com/orgs/uberfire
IRC: irc.freenode.org #uberfire
Google Groups
Where?

11. ● Annotation driven development
● Layout managers
● Perspectives
● Screens
● Editors
● Life-cycles
● PlaceManager
How? Workbench

12. Screen 1 JAR(s)
How? Composition
Web App WAR
Screen 2 JAR(s) Feature X JAR(s)
Bootstrap /
config classes

13. PERSPECTIVE
How? Hierarchical composition
Workbench
PERSPECTIVE PERSPECTIVE
PANEL PANELPANEL
PARTPART PART

14. How? Hierarchical Composition

15. Workbench
How? Hierarchical Composition

16. Perspective
How? Hierarchical Composition

17. Panel
How? Hierarchical Composition

18. Workbench
Perspective
Panel
How? Hierarchical Composition

19. How? Hierarchical Menus
WORKBENCH
PERSPECTIVE
PART
Context menus
Context menus
Context menus

20. How? Hierarchical Menus

21. Workbench
How? Hierarchical Menus

22. Perspective
How? Hierarchical Menus

23. Part
How? Hierarchical Menus

24. ● @WorkbenchPerspective
● @WorkbenchScreen
● @WorkbenchEditor
● @WorkbenchPopup
How? Components

25. ● @WorkbenchPartTitle
● @WorkbenchPartTitleDecoration
● @WorkbenchPartView
● @WorkbenchMenu
● @WorkbenchToolBar
How? Scaffolding

26. ● @OnStartup
● @OnClose
● @OnFocus
● @OnLostFocus
● @OnMayClose
How? Components lifecycle

27. @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( "HomeScreen" ) ) );
return p;
}
}
How? Perspectives

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

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

30. @WorkbenchEditor( identifier = "TextEditor", supportedTypes = { TextResourceType.class })
public class TextEditorPresenter {
@Inject
TextEditorView view;
@OnStartup
public void onStart( final Path path ) {
//Load content and initialise view
this.view.setContent( loadContent( path ) );
}
}
How? Life-cycles

31. public interface PlaceManager {
void goTo( final String identifier );
void goTo( final PlaceRequest place );
void goTo( final Path path );
void closePlace( final String id );
void closePlace( final PlaceRequest place );
...
}
How? PlaceManager

32. @Inject
PlaceManager placeManager;
...
menus = MenuFactory
.newTopLevelMenu( "Go somewhere" )
.respondsWith( new Command() {
@Override
public void execute() {
placeManager.goto( "a-screen-identifier" );
}
} )
.endMenu()
.build();
...
How? PlaceManager

33. ● Java 1.7 NIO2 backport
● Consistent client-sideserver-side API
● Pluggable implementations
○ GIT
● Concurrency
● Clustering
○ Apache ZooKeeper
○ Apache Helix
How? VFS

34. ● Lucene
● Pluggable indexers
● Pluggable query service
How? VFS indexing

35. ● Pluggable
○ Multiple backends
● Portable
○ Same API for Client and Server
● Auth/Authz
● Declarative/Programmatic
○ API
○ Annotations
How? Security

36. @WorkbenchScreen(identifier = "MyScreen")
@Roles({"Admin", "Management"})
public class MyScreen {
@WorkbenchPartView
public IsWidget getView() {
return new SimplePanel();
}
@WorkbenchPartTitle
public String getTitle() {
return "My Screen";
}
}
How? Security

37. How? Security
public class Project implements RuntimeResource {
private Collection<String> roles = new ArrayList<String>();
@Override
public String getSignatureId() {
return getClass().getName() + "#" + getRootPath().toURI();
}
@Override
public Collection<String> getRoles() {
return roles;
}
@Override
public Collection<String> getTraits() {
return Collections.emptySet();
}
}

38. ● Plugins
● Apps
● Wires
● Property Editor
● Social Activities
● DashBuilder
How? Extensions

39. How? Plugins

40. How? Plugins / Perspectives

41. How? Plugins / Perspectives

42. How? Plugins / Screens

43. How? Plugins / Menus

44. How? Apps

45. How? Wires

46. How? Properties Editor

47. How? Social Activities

48. How? Social Activities

49. How? Dash Builder

50. ● AngularJS
○ Using AngularJS extensions
○ Using uberFire in AngularJS
● Typescript
● Coffeescript
● Next fashionable script...
How? Integration

51. Usage
<html>
<body>
...
<!-- Declare Uberfire application-->
<script type="text/javascript">uberfireAngularAppName = "myapp";</script>
<!-- Uberfire GWT modules -->
<script type="text/javascript" src="org.uberfire.KieUberfireJS/org.uberfire.KieUberfireJS.nocache.js"></script>
<!-- AngularJS minimum -->
<script type="text/javascript" src="js/angular-1.0.7.min.js"></script>
<!-- AngularJS Uberfire directives -->
<script type="text/javascript" src="js/uberfire.components.js"></script>
</body>
</html>
How? AngularJS + uberfire

52. Usage
...
<body>
...
<!-- AngularJS -->
<div ng-app="myapp">
What is your name?<input type="text" ng-model="sometext"/>
<h1>Hello {{ sometext }}</h1>
<uberfirecomponent id="id1" name="Dora" uf-component="welcome"></uberfirecomponent>
</div>
...
</body>
How? AngularJS + uberfire

53. Usage
@WorkbenchScreen(identifier = "welcome")
public class WelcomeScreen extends Composite {
@UiField
TextBox name;
...
@OnStartup
public void onStartup( final PlaceRequest place ) {
name.setText( place.getParameter( "name", "Who is there?" ) );
}
...
}
How? AngularJS + uberfire

54. Usage
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
<b:Hero addStyleNames="{style.welcome}">
<b:Heading size="2">Welcome to UberFire,</b:Heading>
<b:TextBox ui:field="name"/>
</b:Hero>
</ui:UiBinder>
How? AngularJS + uberfire

55. How? AngularJS + uberfire

56. How? Cloud provisioning

57. demo gods be gentle...
Demos

58. Q&A