Rapidly Building Cloud IDEs with uberfireAlexandre Porcelli (US)Michael Anstis (EU)Mauricio Salatino (EU)

W4H

● What?

● Why?

● Who?

● Where?

● How?

● Q&A

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?

● GWT

○ Java

○ ResourceBundles

○ Browser support

● Errai

○ Client-side CDI

○ Templated views

○ Message bus

○ RPC

What?

● Workbench● VFS● VFS Metadata Indexing● Security● Extensions● Integration

What?

metadata preferences

gwt

errai

index / search

cluster

mvp

cdi

bus ui

model

securityvfs

runtime plugin

window mgmt

nsew template ...

What? Components

coreUBERFIRE EXTENSIONS

KIE EXTENSIONS

GUVNOR

DASHBUILDER

FORM MODELER

WIRES

SOCIAL

BUILD & PROVISIONING

What? Ecosystem

APPS

RUNTIME PLUGINS

● JBoss / RedHat

● Drools/jBPM team

● Working closely with Errai team

Who?

● Composition

● Integration

● Interoperability

● Legacy

Why?

http://www.uberfireframework.org/https://github.com/orgs/uberfireIRC: irc.freenode.org #uberfireGoogle Groups

Where?

● Annotation driven development● Layout managers● Perspectives● Screens● Editors● Life-cycles● PlaceManager

How? Workbench

Screen 1 JAR(s)

How? Composition

Web App WAR

Screen 2 JAR(s) Feature X JAR(s)Bootstrap /

config classes

PERSPECTIVE

How? Hierarchical composition

Workbench

PERSPECTIVE PERSPECTIVE

PANEL PANELPANEL

PARTPART PART

How? Hierarchical Composition

Workbench

How? Hierarchical Composition

Perspective

How? Hierarchical Composition

Panel

How? Hierarchical Composition

Workbench

Perspective

Panel

How? Hierarchical Composition

How? Hierarchical Menus

WORKBENCH

PERSPECTIVE

PART

Context menus

Context menus

Context menus

How? Hierarchical Menus

Workbench

How? Hierarchical Menus

Perspective

How? Hierarchical Menus

Part

How? Hierarchical Menus

● @WorkbenchPerspective

● @WorkbenchScreen

● @WorkbenchEditor

● @WorkbenchPopup

How? Components

● @WorkbenchPartTitle

● @WorkbenchPartTitleDecoration

● @WorkbenchPartView

● @WorkbenchMenu

● @WorkbenchToolBar

How? Scaffolding

● @OnStartup

● @OnClose

● @OnFocus

● @OnLostFocus

● @OnMayClose

How? Components lifecycle

@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

@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

@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

@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

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

@Inject

PlaceManager placeManager;

...

menus = MenuFactory

.newTopLevelMenu( "Go somewhere" )

.respondsWith( new Command() {

@Override

public void execute() {

placeManager.goto( "a-screen-identifier" );

}

} )

.endMenu()

.build();

...

How? PlaceManager

● Java 1.7 NIO2 backport● Consistent client-side\server-side API● Pluggable implementations

○ GIT

● Concurrency● Clustering

○ Apache ZooKeeper○ Apache Helix

How? VFS

● Lucene

● Pluggable indexers

● Pluggable query service

How? VFS indexing

● Pluggable○ Multiple backends

● Portable○ Same API for Client and Server

● Auth/Authz● Declarative/Programmatic

○ API○ Annotations

How? Security

@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

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

● Plugins● Apps● Wires● Property Editor● Social Activities● DashBuilder

How? Extensions

How? Plugins

How? Plugins / Perspectives

How? Plugins / Perspectives

How? Plugins / Screens

How? Plugins / Menus

How? Apps

How? Wires

How? Properties Editor

How? Social Activities

How? Social Activities

How? Dash Builder

● AngularJS○ Using AngularJS extensions○ Using uberFire in AngularJS

● Typescript● Coffeescript● Next fashionable script...

How? Integration

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

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

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

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

How? AngularJS + uberfire

How? Cloud provisioning

demo gods be gentle...

Demos

Q&A