Integrating Seam and GWT Integrating the JBoss Seam Framework with the GWT Toolkit : Use cases and patterns Ferda Tartanoglu Neoxia 6563 2 Who we are > Ferda TARTANOGLU, PhD – Consultant and Software Architect at Neoxia > Neoxia – A consulting company specialized in information system governance and architecture – Based in France (Paris) and Morocco (Casablanca) > The Seam/ GWT team – Issam EL FATMI – Nizar GARRACHE – Mohamed Amine LIMEM – Nicolas DASRIAUX 3 AGENDA > Overview > Introducing Seam > Introducing GWT > Why Integrate? > Integration Patterns > Conclusion 4 Overview > Web application for the company Intranet Seam > Integrating Seam and GWT – Complementary technologies jBPM JSF Facelet EJB3 > It is also an integration of GWT with Seam’s underlying technologies – jBPM, JSF, Facelet, EJB3 ... Google Web Toolkit > Lessons learned – Architectural principles – Integration patterns 5 AGENDA > Overview > Introducing Seam > Introducing GWT > Why Integrate? > Integration Patterns > Conclusion 6 Seam overview(1/ 2) > A Java framework – For building stateful Web applications – With or without Java EE > Glue for integrating several technologies – Presentation layer with JSF, Facelets, Richfaces – Business logic and persistence with EJB3 and JPA – Business processes and workflows with jBPM – Business rules with Drools – Third party frameworks: Wicket, Spring, GWT… > Provides advanced application security – Authentication – Identity management – Authorization 7 Seam architecture (2/ 2) JSF components – Facelets - Richfaces Presentation JSF Request Controller Seam components & contexts Context Management EJB3 jBPM JPA Business Logic State Management 8 AGENDA > Overview > Introducing Seam > Introducing GWT > Why Integrate? > Integration Patterns > Conclusion 9 GWT overview (1/ 2) > GWT provides mainly a Java- to- Javascript compiler – Code is written in Java and is compiled to JavaScript – Support for major browsers > Rich user interface library – GWT widgets – Third party widgets > Built- in Ajax – No need to code in JavaScript – Remoting based on the Servlet standard Server- side code written in Java as a Servlet 10 GWT model (2/ 2) > Programming model – Java with some restrictions – Event- based controller like Swing – Asynchronous RPC for client- server communication > Deployment model – JavaScript for client- side computing Hosted on any Web server Executed on the user’s browser – Java Servlet for server- side computing WAR packaging since v 1.6 11 AGENDA > Overview > Introducing Seam > Introducing GWT > Why Integrate? > Integration Patterns > Conclusion 12 A Case Study > An intranet business application with specific requirements – Interactive UI Ajax ! – Security Authentication Secure communication Role- based authorizations – Workflows Long- running business processes with several participants – Messaging Email – Persistence Storage in MySQL database – Transactions ACID transactions on DB resources Atomicity and Isolation properties for multi- page/ action interactive sessions 13 Overlapping Features of Seam & GWT > Rich UI components – JavaScript widgets supporting Ajax for GWT – JSF components, Richfaces, JSF4Ajax for Seam > Support for server- side computing – JavaScript remoting with servlets for GWT – Servlets or EJB beans for Seam 14 Differences of Seam & GWT > Seam lacks – Intuitive Ajax widgets – Lightweight and extensible UI component model – JavaScript library for client side components > GWT does not provide – Support for stateful services – Extended persistence context – Global transactions – Bookmarkable pages – Support for security – Templates 15 Integration Issues > GWT – Oriented single page stateless applications – Uses a subset of the JDK > Seam – Oriented multi- page stateful applications – Some features rely on JSF > We should try – Using the benefits of each technologies – Minimizing the integration effort 16 AGENDA > Overview > Introducing Seam > Introducing GWT > Why Integrate? > Integration Patterns > Conclusion 17 Integration Patterns > GWT client side widget in a JSF page > GWT as the presentation layer of Seam > GWT and Seam navigation rules > GWT in a Seam conversation > Taking part in a Seam business process > Seam Security and GWT 18 Integration Patterns > GWT client side widget in a JSF page > GWT as the presentation layer of Seam > GWT and Seam navigation rules > GWT in a Seam conversation > Taking part in a Seam business process > Seam Security and GWT 19 Pattern 1 GWT widget in a JSF page (1/ 4) > Coexistance of GWT and JSF on the same page > Using Seam for facelet layouts and themes > GWT widgets for complex components and screens 20 Pattern 1 GWT widget in a JSF page (2/ 4) > JSF Page <ui:define name="body"> <script language="javascript" src=“com.neoxia.gwtseam.gwt.MyApplication.nocache.js"></script> <rich:panel > <h:panelGrid columns="2"> <s:div styleClass="info"> <table align="center"> <tr><td id="slot1"></td><td id="slot2"></td></tr> </table> </s:div> </h:panelGrid> </rich:panel> </ui:define> 21 Pattern 1 GWT widget in a JSF page (3/ 4) > JSF Page : content type <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <f:view contentType="text/html" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:a="http://richfaces.org/a4j" xmlns:s="http://jboss.com/products/seam/taglib"> <html> (...) 22 Pattern 1 GWT widget in a JSF page (4/ 4) > GWT client- side : The widget public class AskQuestionWidget extends Composite { (...) } > GWT client- side : The entry point – Binding the widget to the placeholder in the JSF page public class MyApplication implements EntryPoint { public void onModuleLoad() { RootPanel.get("slot1").add(new AskQuestionWidget()); } } 23 Integration Patterns > GWT client side widget in a JSF page > GWT as the presentation layer of Seam > GWT and Seam navigation rules > GWT in a Seam conversation > Taking part in a Seam business process > Seam Security and GWT 24 Pattern 2 GWT as the presentation layer of Seam (1/ 6) > GWT as the only presentation layer – No JSF page – No JSF life cycle > GWT widgets access to Seam components with asynchronous requests by JavaScript (Ajax) 25 Pattern 2 GWT as the presentation layer of Seam (2/ 6) > Service interfaces – The remote service interface public interface MyService { public String askIt(String question); } – GWT client- side asynchronous interface public interface MyServiceAsync extends RemoteService { public void askIt(String question, AsyncCallback callback); } 26 Pattern 2 GWT as the presentation layer of Seam (3/ 6) > GWT widget code – The service stub to be used by the GWT client- side widget private MyServiceAsync getService() { MyServiceAsync svc = (MyServiceAsync)GWT.create(MyService.class); String endpointURL = GWT.getModuleBaseURL() + "seam/resource/gwt"; ((ServiceDefTarget)svc).setServiceEntryPoint(endpointURL); return svc; } 27 Pattern 2 GWT as the presentation layer of Seam (4/ 6) > GWT client- side: The widget code – The remote call getService().askIt(text, new AsyncCallback<String>() { public void onFailure(Throwable t) { Window.alert(t.getMessage()); } public void onSuccess(Object data) { Window.alert((String) data); } }); 28 Pattern 2 GWT as the presentation layer of Seam (5/ 6) > Server- side Seam component @Name(“com.neoxia.gwtseam.gwt.client.MyService") public class ServiceImpl implements MyService { @In Credentials credentials; @WebRemote public String askIt(String question) { String username = credentials.getUsername(); return "Hello " + username; } } 29 Pattern 2 GWT as the presentation layer of Seam (6/ 6) GWT Presentation Seam Remoting Request Controller Seam components & contexts Context Management EJB3 jBPM JPA Business Logic State Management 30 Pattern 1 & 2 GWT remoting + JSF JSF components + GWT widgets Presentation JSF Seam Remoting Request Controller Seam components & contexts Context Management EJB3 jBPM JPA Business Logic State Management 31 Integration Patterns > GWT client side widget in a JSF page > GWT as the presentation layer of Seam > GWT and Seam navigation rules > GWT in a Seam conversation > Taking part in a Seam business process > Seam Security and GWT 32 Pattern 3 GWT and Seam navigation rules (1/ 6) > We want to – Describe the navigation process using Seam’s pages.xml or jPDL notation – Make a remote call to a Seam component from GWT widget – Get the URL or render page according to the outcome of the component method and the navigation process 33 Pattern 3 GWT and Seam navigation rules (2/ 6) > Actions have outcomes public String increment() { value++; return "success"; } > Navigation rules <page view-id=“*"> <navigation> <rule if-outcome=“success"> <redirect view-id="/home.xhtml"/> </rule> </navigation> </page> 34 Pattern 3 GWT and Seam navigation rules (3/ 6) > Seam navigation is based on JSF life cycle > Seam remoting bypasses JSF servlet and accesses directly to the SeamResourceServlet – No FacesContext – No programmatic navigation API in Seam > Methods called using Seam remoting return directly the output parameter, if any, to the caller 35 Pattern 3 GWT and Seam navigation rules (4/ 6) > Re- implement JSF navigation layers in the remote service – Tight integration, JSF- dependent > Wait for Seam navigation to be promoted to the level of 1st class citizenship – JSF- independent navigation API that can be used with any presentation framework > Workaround using 2 subsequent requests – First