Date post: | 17-Jul-2015 |
Category: |
Technology |
Upload: | mauricio-salaboy-salatino |
View: | 2,795 times |
Download: | 0 times |
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