Gwt.create

4,552 views

Published on

Uberfire Framework Presentation @ GWT Create 2014 US/EU

Published in: Technology
  • Be the first to comment

Gwt.create

  1. 1. Rapidly Building Cloud IDEs with uberfire Alexandre Porcelli (US) Michael Anstis (EU) Mauricio Salatino (EU)
  2. 2. W4H ● What? ● Why? ● Who? ● Where? ● How? ● Q&A
  3. 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. 4. ● GWT ○ Java ○ ResourceBundles ○ Browser support ● Errai ○ Client-side CDI ○ Templated views ○ Message bus ○ RPC What?
  5. 5. ● Workbench ● VFS ● VFS Metadata Indexing ● Security ● Extensions ● Integration What?
  6. 6. metadata preferences gwt errai index / search cluster mvp cdi bus ui model securityvfs runtime plugin window mgmt nsew template ... What? Components
  7. 7. coreUBERFIRE EXTENSIONS KIE EXTENSIONS GUVNOR DASHBUILDER FORM MODELER WIRES SOCIAL BUILD & PROVISIONING What? Ecosystem APPS RUNTIME PLUGINS
  8. 8. ● JBoss / RedHat ● Drools/jBPM team ● Working closely with Errai team Who?
  9. 9. ● Composition ● Integration ● Interoperability ● Legacy Why?
  10. 10. http://www.uberfireframework.org/ https://github.com/orgs/uberfire IRC: irc.freenode.org #uberfire Google Groups Where?
  11. 11. ● Annotation driven development ● Layout managers ● Perspectives ● Screens ● Editors ● Life-cycles ● PlaceManager How? Workbench
  12. 12. Screen 1 JAR(s) How? Composition Web App WAR Screen 2 JAR(s) Feature X JAR(s) Bootstrap / config classes
  13. 13. PERSPECTIVE How? Hierarchical composition Workbench PERSPECTIVE PERSPECTIVE PANEL PANELPANEL PARTPART PART
  14. 14. How? Hierarchical Composition
  15. 15. Workbench How? Hierarchical Composition
  16. 16. Perspective How? Hierarchical Composition
  17. 17. Panel How? Hierarchical Composition
  18. 18. Workbench Perspective Panel How? Hierarchical Composition
  19. 19. How? Hierarchical Menus WORKBENCH PERSPECTIVE PART Context menus Context menus Context menus
  20. 20. How? Hierarchical Menus
  21. 21. Workbench How? Hierarchical Menus
  22. 22. Perspective How? Hierarchical Menus
  23. 23. Part How? Hierarchical Menus
  24. 24. ● @WorkbenchPerspective ● @WorkbenchScreen ● @WorkbenchEditor ● @WorkbenchPopup How? Components
  25. 25. ● @WorkbenchPartTitle ● @WorkbenchPartTitleDecoration ● @WorkbenchPartView ● @WorkbenchMenu ● @WorkbenchToolBar How? Scaffolding
  26. 26. ● @OnStartup ● @OnClose ● @OnFocus ● @OnLostFocus ● @OnMayClose How? Components lifecycle
  27. 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. 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. 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. 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. 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. 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. 33. ● Java 1.7 NIO2 backport ● Consistent client-sideserver-side API ● Pluggable implementations ○ GIT ● Concurrency ● Clustering ○ Apache ZooKeeper ○ Apache Helix How? VFS
  34. 34. ● Lucene ● Pluggable indexers ● Pluggable query service How? VFS indexing
  35. 35. ● Pluggable ○ Multiple backends ● Portable ○ Same API for Client and Server ● Auth/Authz ● Declarative/Programmatic ○ API ○ Annotations How? Security
  36. 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. 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. 38. ● Plugins ● Apps ● Wires ● Property Editor ● Social Activities ● DashBuilder How? Extensions
  39. 39. How? Plugins
  40. 40. How? Plugins / Perspectives
  41. 41. How? Plugins / Perspectives
  42. 42. How? Plugins / Screens
  43. 43. How? Plugins / Menus
  44. 44. How? Apps
  45. 45. How? Wires
  46. 46. How? Properties Editor
  47. 47. How? Social Activities
  48. 48. How? Social Activities
  49. 49. How? Dash Builder
  50. 50. ● AngularJS ○ Using AngularJS extensions ○ Using uberFire in AngularJS ● Typescript ● Coffeescript ● Next fashionable script... How? Integration
  51. 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. 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. 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. 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. 55. How? AngularJS + uberfire
  56. 56. How? Cloud provisioning
  57. 57. demo gods be gentle... Demos
  58. 58. Q&A

×