Integrating Seam and GWT

Transcription

1 Integrating Seam and GWT Integrating the JBoss Seam Framework with the GWT Toolkit : Use cases and patterns Ferda Tartanoglu Neox ia 6563

2 Who we are 2 > Ferda TARTANOGLU, PhD Consultant and Software Architect at Neox ia > 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 3 > Overview > Int roducing Seam > Int roducing GWT > Why Integrate? > Integration Patterns > Conclusion

4 Overview 4 > Web application for the company Intranet > Integrating Seam and GWT Complementary technologies > It is also an integration of GWT with Seam s underlying technologies jbpm, JSF, Facelet, EJB3... Seam jbpm JSF Facelet EJB3 Google Web Toolkit > Lessons learned Architectural principles Integration patterns

5 AGENDA 5 > Overview > Introducing Seam > Int roducing GWT > Why Integrate? > Integration Patterns > Conclusion

6 Seam overview(1/ 2) 6 > 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) 7 JSF components Facelets - Richfaces Presentation JSF Request Controller Seam components & contexts Context Management EJB3 jbpm JPA Business Logic State Management

8 AGENDA 8 > Overview > Int roducing Seam > Introducing GWT > Why Integrate? > Integration Patterns > Conclusion

9 GWT overview (1/ 2) 9 > 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) 10 > 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 11 > Overview > Int roducing Seam > Int roducing GWT > Why Integrate? > Integration Patterns > Conclusion

12 A Case Study 12 > 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 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 13 > 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 14 > Seam lacks Intuitive Ajax widgets Lightweight and ex tensible UI component model JavaScript library for client side components > GWT does not provide Support for stateful services Ex tended persistence contex t Global transactions Bookmarkable pages Support for security Templates

15 Integration Issues 15 > 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 16 > Overview > Int roducing Seam > Int roducing GWT > Why Integrate? > Integration Patterns > Conclusion

17 Integration Patterns 17 > 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 18 > 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) 19 > 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) 20 > 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" " transitional.dtd"> 21 <f:view contenttype="text/html" <html> (...) xmlns=" xmlns:ui=" xmlns:h=" xmlns:f=" xmlns:a=" xmlns:s="

22 Pattern 1 GWT widget in a JSF page (4/ 4) > GWT client- side : The widget public class AskQuestionWidget extends Composite { (...) } 22 > 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 23 > 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) 24 > 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) 25 > 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) 26 > 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) 27 > 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) 28 > Server- side Seam com.neoxia.gwtseam.gwt.client.myservice") public class ServiceImpl implements MyService Credentials credentials; public String askit(string question) { String username = credentials.getusername(); return "Hello " + username; }

29 Pattern 2 GWT as the presentation layer of Seam (6/ 6) 29 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 30 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 31 > 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) 32 > We want to Describe the navigation process using Seam s pages.x ml 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 33 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) 34 > Seam navigation is based on JSF life cycle > Seam remoting bypasses JSF servlet and accesses directly to the SeamResourceServlet No FacesContex t 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) 35 > 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 request using remoting API Second request through JSF

36 Pattern 3 GWT and Seam navigation rules (5/ 6) > The first method called through Seam Remoting public String increment() { value++; return "success"; } 36 > The second method called through JSF The call is a standard JSF call, the method returns the same outcome and JSF render the page selected according to the navigation rules public String redirectme(string outcome) { return outcome; }

37 Pattern 3 GWT and Seam navigation rules (6/ 6) 37 > Generate a link or make a browser redirect to a specific URL > GWT client side code for the browser redirection public static native void redirect(string url)/*-{ $wnd.location = url; }-*/; > The call to the redirectme action with the outcome as a parameter redirect(" + outcome); > Additional navigation rules <page view-id="/redirectme" action="#{redirector.redirectme}"> <param name="outcome" value="#{outcome}"/> </page>

38 Integration Patterns 38 > 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

39 Pattern 4 GWT in a Seam conversation (2/ 5) 39 > Conversational @Scope(ScopeType.CONVERSATION) public class AskQuestionBean private private User public String begin() { (...) } begin ask ask help ask help ask end public String ask() { (...) } public String help() { (...) public String end() { (...) public void destroy() {} entitymanager user

40 Pattern 4 GWT in a Seam conversation (3/ 5) 40 > We need to get the conversation id and send it to the Seam component on the server- side > JavaScript on the client- side.xhtml page to get the conversation id <script language="javascript"> var parameters = { cid: '#{conversation.id}' }; </script> > EL expression #{conversation.id} is used to get the current conversation id

41 Pattern 4 GWT in a Seam conversation (4/ 5) 41 > GWT client- side : the remote service s async interface public interface GWTtoSeamAsync extends RemoteService { } public void askit(string cid, String question, AsyncCallback callback); > GWT client- side: the widget code The widget makes a remote call and sends the conversation id to the Seam remote service Dictionary parameters = Dictionary.getDictionary("parameters"); String cid = parameters.get("cid"); getservice().askit(cid, text, new AsyncCallback() {...});

42 Pattern 4 GWT in a Seam conversation (5/ 5) 42 > Seam server- side: the remote Seam component service Service façade: restore the context based on the conversation id and get the service instance in the contex public class GWTtoSeamImpl implements GWTtoSeam Manager public String askit(string cid, String question) { // switch to the conversation manager.switchconversation(cid); // get the seam component in the conversation cid MyService myservice = (MyService) Component.getInstance( com.neoxia.gwtseam.gwt.client.myservice"); // call the action String answer = myservice.askit(question); return answer; } }

43 Integration Patterns 43 > 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

44 Pattern 5 GWT and Seam Business Processes (1/ 4) 44

45 Pattern 5 GWT and Seam Business Processes (2/ 4) 45 > Seam > Implicit parameters : taskid and processid Value of the taskid and processid http request parameters > taskid and processid http request parameters not sent with GWT AJAX calls

46 Pattern 5 GWT and Seam Business Processes (3/ 4) 46 > 1 st solution: switch to direct jbpm API calls and programmatically get @TransactionAttribute(TransactionAttributeType.NOT_SUPPORTED) public class DemandeCongeServiceBean implements DemandeCongeService private Actor = "DemandeCongeProcess") public void createdemandecongeprocess(demandecongevo demandeconge) {( public void updateetatdemandeconge(demandecongevo demandeconge) { JbpmConfiguration jbpmconfiguration = JbpmConfiguration.getInstance(); JbpmContext jbpmcontext = jbpmconfiguration.createjbpmcontext(); TaskMgmtSession taskmgmtsession = jbpmcontext.gettaskmgmtsession(); ProcessInstance processinstance = jbpmcontext.getprocessinstance(demandeconge.getid()); TaskInstance taskinstance = jbpmcontext.gettaskinstanceforupdate(processinstance.getid()); ( )

47 Pattern 5 GWT and Seam Business Processes (4/ 4) 47 > 2 nd solution: use GWT s RequestBuilder class to make direct HTTP calls Get the taskid using Seam EL in the page <script language="javascript"> var parameters = { taskid: '#{task.id} }; </script> Send the taskid as a method parameter Dictionary parameters = Dictionary.getDictionary("parameters"); String cid = parameters.get( taskid"); Construct the HTTP GET request with taskid as a http request parameter String url = " RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL.encode(url)); builder.setheader("content-type", "application/x-www-form-urlencoded"); try { builder.sendrequest(null, new RequestCallback() { /*(...)*/ }); } catch (RequestException e) { // Couldn't connect to server }

48 Integration Patterns 48 > 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

49 Pattern 6 GWT and Seam Security (1/ 3) 49 > Hide a GWT widget based on Seam security rules > Adapting remote service behaviour based on user permissions

50 Pattern 6 GWT and Seam Security (2/ 3) 50 > Client- side, with JSF Hide a GWT widget based on Seam security rules <rich:panel > <h:panelgrid columns="2"> <s:div styleclass="info" rendered="#{identity.loggedin}"> <table align="center"> <tr><td id="slot1"></td><td id="slot2"></td></tr> </table> </s:div> </h:panelgrid> </rich:panel>

51 Pattern 6 GWT and Seam Security (3/ 3) 51 > Server- side: Accessing identity, credentials... Automatically injected by com.neoxia.gwtseam.gwt.client.myservice") public class ServiceImpl implements MyService Identity Credentials credentials;

52 AGENDA 52 > Overview > Int roducing Seam > Int roducing GWT > Why Integrate? > Integration Patterns > Conclusion

53 Conclusion 53 > We can use both GWT and Seam in the same project Some features integrate seamlessly Other features need more integration effort There are still few workarounds > GWT and Seam are both very active projects > GWT is now better integrated with Java EE standards JDK1.5 support since version 1.5 War packaging since version 1.6 > Seam is more and more decoupled from JSF and from JBoss AS Better GWT integration support since version 2.1.1

54 Questions 54

55 Ferda TARTANOGLU NEOXIA ferda.tart ia.com /