Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit


Published on

Java Web Programming on Google App Engine, July 2012

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Java Web Programming on Google Cloud Platform [3/3] : Google Web Toolkit

  1. 1. Google Web ToolkitAssoc.Prof. Dr.Thanachart Numnonda Asst.Prof. Thanisa Kruawaisayawan July 2012
  2. 2. AgendaRIA and AJAXWhat is Google Web Toolkit?GWT ImplementationGWT ComponentsGWT RPC
  3. 3. RIA and AJAX?
  4. 4. Rich Internet ApplicationsWeb applications that have the features and functionality of traditional desktop applicationsTypically transfer the processing necessary for the user interface to the web client but keep the bulk of the data back o n the application server.Make asynchronous/synchronous calls to thebackend based on user actions/eventsThick Client Application.
  5. 5. Technologies for Building RIAsKey Technologies – Adobe Flex – Microsoft Silverlight – Java Applets/WebStart – AJAXOther Technologies and Frameworks – Java FX – Open Laszlo
  6. 6. What is AJAX?Asynchronous JavaScript And XML.DHTML plus Asynchronous communication capability through XMLHttpRequest.Pros Most viable RIA technology so far Tremendous industry momentum Several toolkits and frameworks are emerging No need to download code & no plug-in requiredCons Still browser incompatibility JavaScript is hard to maintain and debug.
  7. 7. Why AJAX?Intuitive and natural user interaction. No clicking required Mouse movement is a sufficient event triggerPartial screen update replaces the "click, wait, and refresh" user interaction modelAsynchronous communication replaces "synchronous request/ response model."
  8. 8. Interrupted useroperation whilethe data is beingfetchedUninterrupteduser operationwhile data isbeing fetched
  9. 9. Building RIAs using Java EE and AJAXClient Side AJAX Development Presentation using HTML/JSP pages using client side frameworks such as Scriptaculous, JQuery, Dojo client side components. Presentation logic using JavaScript. Server Side development using traditional Java EE Servlets/ Services exposing backend services as REST, XML RPC Web Services. Call backend business logic in the background using the JavaScript language and XMLHttpRequest object built into the browser.
  10. 10. Building RIAs using Java EE and AJAXServer Side AJAX Development Presentation using component frameworks JSTL tag libraries such as Jboss RichFaces, Icesoft Icefaces built on on top of JSF Presentation logic done as event handlers in JSF component model Call to backend business logic using JSF event Model
  11. 11. Challenges with typical AJAX developmentJavaScript Not a strongly typed language Static Type checking? Code completion? Runtime-only bugs Browser compatibilities = “if/else soup” Juggling multiple languages (JavaScript, JSP tags, Java, XML, HTML etc.) Poor debugging Window.alert(), Firebug
  12. 12. Sample Javascript
  13. 13. What is Google Web Toolkit?
  14. 14. What is GWT?GWT is an open source Java development framework.Provides set of tools for building AJAX apps in the Java language.GWT converts your Java source into equivalent JavaScript
  15. 15. History of Web FrameworksSource : COMPARING KICK-ASS WEB FRAMEWORKS, Matt Raible
  16. 16. Advantages of GWTNo need to learn/use JavaScript languageNo need to handle browser incompatibilities and quirksNo need to learn/use DOM APIsNo need to handle forward/backward buttons browser-historyNo need to build commonly used WidgetsCan send complex Java types to/from the serverLeverage various tools of Java programming language forwriting/debugging/testing
  17. 17. Disadvantages of GWTOnly for Java developers.Big learning curveCumbersome deploymentNonstandard approach to integrate JavaScriptUnusual approach
  18. 18. GWT Implementation
  19. 19. GWT FeaturesA Basic API for creating Graphical User Interfaces (GUI) Similar to Swing.API for Manipulating the Web browsers Document Object Model (DOM).Java to JavaScript Compiler. Only required to know Java, XML and CSS. No JavaScript. No HTML. No PHP/ASP/CGI.An environment for running and debugging GWT applications called the GWT shell (Hosted Mode).
  20. 20. GWT Application LayoutModule descriptor : module is the name GWT uses for an individual application configuration.Public resources : these are all files that will be served publicly (e.g. HTML page, CSS and images)Client-side code : this is the Java code that the GWT compiler translates into JavaScript, which will eventually run inside the browser.Server-side code (optional)—this is the server part of your GWT application
  21. 21. Module DescriptorInherited modules : these entries are comparable to import statements in normal Java classes, but for GWT applications.Entry point class : details which classes serve as the entry points (class implements the EntryPoint interface)Source path entries : the module descriptor allows you to customize the location of the client-side code.Public path entries : these allow you to handle public path items such as source path entries.Deferred binding rules : more advanced setting
  22. 22. Module Descriptor : Sample (Main.gwt.xml)<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?><module> <module> <inherits name=""/> <inherits name=""/> <entry-point class="org.thaijavadev.client.MainEntryPoint"/> <entry-point class="org.thaijavadev.client.MainEntryPoint"/></module> </module>
  23. 23. The Entry Point ClassBefore we start building our user interface, we need to understand the Entry Point Class.Think of this class as the main class of your application with the java main() method that the JVM invokes first.The Entry Point class contains onModuleLoad() method which is the method that the GWT compiler calls first.The class implements interface.
  24. 24. UI Components & Event : Samplepublic class ButtonExample implements EntryPoint {{ public class ButtonExample implements EntryPoint public void onModuleLoad() {{ public void onModuleLoad() final ToggleButton messageToggleButton == new ToggleButton("UP", final ToggleButton messageToggleButton new ToggleButton("UP", "DOWN"); "DOWN"); RootPanel.get().add(messageToggleButton); RootPanel.get().add(messageToggleButton); Hyperlink alertLink == new Hyperlink("Alert", "alert"); Hyperlink alertLink new Hyperlink("Alert", "alert"); alertLink.addClickListener(new ClickListener() {{ alertLink.addClickListener(new ClickListener() public void onClick(Widget widget) {{ public void onClick(Widget widget) if (messageToggleButton.isDown()) {{ if (messageToggleButton.isDown()) Window.alert("HELLLLP!!!!"); Window.alert("HELLLLP!!!!"); }} else {{ else Window.alert("Take it easy and relax"); Window.alert("Take it easy and relax"); }} }} }); }); RootPanel.get().add(alertLink); RootPanel.get().add(alertLink); }}}}
  25. 25. Public Resource (welcomeGWT.html) : Sample<html> <html> <head> <head> <meta name=gwt:module <meta name=gwt:module content=org.thaijavadev.Main=org.thaijavadev.Main> content=org.thaijavadev.Main=org.thaijavadev.Main> <link rel="stylesheet" href="Main.css"/> <link rel="stylesheet" href="Main.css"/> <title>Main</title> <title>Main</title> </head> </head> <body> <body> <script language="javascript" <script language="javascript" src="org.thaijavadev.Main/org.thaijavadev.Main.nocache.js"></script> src="org.thaijavadev.Main/org.thaijavadev.Main.nocache.js"></script> </body> </body></html> </html>
  26. 26. Public Resource (Main.css) : Sampleroot { root { display: block; display: block;}}.gwt-Label {{ .gwt-Labelfont-size: 9px; font-size: 9px;}}.gwt-Button, .gwt-TextBox, .gwt-PasswordTextBox {{ .gwt-Button, .gwt-TextBox, .gwt-PasswordTextBoxfont-size: 9px; font-size: 9px;height: 19px; height: 19px;width: 75px; width: 75px;}}
  27. 27. GWT Components
  28. 28. GWT Components
  29. 29. Available widgetsHTML primitives (Button, Radio Button, Checkbox, TextBox, PasswordTextBox, TextArea, Hyperlink, ListBox, Table etc.)PushButton, ToggleButtonMenuBarTreeTabBarDialogBox
  30. 30. Available widgetsPanels (PopupPanel, StackPanel, HorizontalPanel, VerticalPanel, FlowPanel, VerticalSplitPanel, HorizontalSplitPanel, DockPanel, TabPanel, DisclosurePanel)RichTextAreaSuggestBox (auto-complete)
  31. 31. Available widgets
  32. 32. Available widgets
  33. 33. UI components & Event Programming ModelProgramming model similar UI frameworks such as SwingPrimary difference between Swing and GWT is here widgets are dynamically transformed to HTML rather than pixel-oriented graphicsUsing widgets makes it much easier to quickly build interfaces that will work correctly on all browsers.Events in GWT use the "listener interface" model similar to other user interface frameworks (like Swing)
  34. 34. Entry Point Class : Samplepublic class MainEntryPoint implements EntryPoint { public class MainEntryPoint implements EntryPoint { public void onModuleLoad() {{ public void onModuleLoad() final Label label == new Label("Hello, GWT!!!"); final Label label new Label("Hello, GWT!!!"); final Button button == new Button("Click me!"); final Button button new Button("Click me!"); button.addClickHandler(new ClickHandler() {{ button.addClickHandler(new ClickHandler() public void onClick(ClickEvent event) {{ public void onClick(ClickEvent event) label.setVisible(!label.isVisible()); label.setVisible(!label.isVisible()); }} }); }); RootPanel.get().add(button); RootPanel.get().add(button); RootPanel.get().add(label); RootPanel.get().add(label); }}}}
  35. 35. Simple Layout PanelsPanels are used to organize the layout of the various widgets we have covered so far.GWT has several layout widgets that provide this functionalityThe simple Layout Panels include: FlowPanel VerticalPanel HorizontalPanel
  36. 36. FlowPanelIt functions like the HTML layoutChild widgets of the FlowPanel are displayed horizontally and then wrapped to the next row down when there is not enough horizontal room left:FlowPanel flowPanel == new FlowPanel(); FlowPanel flowPanel new FlowPanel();for( int ii == 1; ii <= 20; i++ )) {{ for( int 1; <= 20; i++ flowPanel.add(new Button("Button "" ++ String.valueOf(i))); flowPanel.add(new Button("Button String.valueOf(i)));}}RootPanel.get().add(flowPanel); RootPanel.get().add(flowPanel);
  37. 37. HorizontalPanel and VerticalPanelHorizontalPanel is similar to FlowPanel but uses scrollbar to display its widgets if there is no enough room instead of displacing to the next rowVerticalPanel organizes its child widgets in a vertical orientation
  38. 38. DockPanel : Samplepublic class GWTasks implements EntryPoint {{ public class GWTasks implements EntryPoint public void onModuleLoad() {{ public void onModuleLoad() DockPanel mainPanel == new DockPanel(); DockPanel mainPanel new DockPanel(); mainPanel.setBorderWidth(5); mainPanel.setBorderWidth(5); mainPanel.setSize("100%", "100%"); mainPanel.setSize("100%", "100%"); mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE); mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE); mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER); mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER); Widget header == createHeaderWidget(); Widget header createHeaderWidget(); mainPanel.add(header, DockPanel.NORTH); mainPanel.add(header, DockPanel.NORTH); mainPanel.setCellHeight(header, "30px"); mainPanel.setCellHeight(header, "30px"); Widget footer == createFooterWidget(); Widget footer createFooterWidget(); mainPanel.add(footer, DockPanel.SOUTH); mainPanel.add(footer, DockPanel.SOUTH); mainPanel.setCellHeight(footer, "25px"); mainPanel.setCellHeight(footer, "25px"); Widget categories == createCategoriesWidget(); Widget categories createCategoriesWidget(); mainPanel.add(categories, DockPanel.WEST); mainPanel.add(categories, DockPanel.WEST); mainPanel.setCellWidth(categories, "150px"); mainPanel.setCellWidth(categories, "150px"); Widget tasks == createTasksWidget(); Widget tasks createTasksWidget();
  39. 39. DockPanel : Sample (Cont.) mainPanel.add(tasks, DockPanel.EAST); mainPanel.add(tasks, DockPanel.EAST); RootPanel.get().add(mainPanel); RootPanel.get().add(mainPanel); }} protected Widget createHeaderWidget() {{ protected Widget createHeaderWidget() return new Label("Header"); return new Label("Header"); }} protected Widget createFooterWidget() {{ protected Widget createFooterWidget() return new Label("Footer"); return new Label("Footer"); }} protected Widget createCategoriesWidget() {{ protected Widget createCategoriesWidget() return new Label("Categories List"); return new Label("Categories List"); }} protected Widget createTasksWidget() {{ protected Widget createTasksWidget() return new Label("Tasks List"); return new Label("Tasks List"); }}}}
  40. 40. DockPanel : Sample Output
  41. 41. GWT-RPC
  42. 42. Communication with the ServerGWT support communication between the client-side browser and the server via GWT-RPC and Basic Ajax.GWT use asynchronous communication to provide the rich UI experience expected from RIAs.The details of communicating a message between client and server and vice versa can be abstracted away by frameworksGWT RPC allows you to program your communication by calling a method on a Java interface.
  43. 43. GWT-RPCGWT extends a browser’s capability to asynchronously communicate with the server by providing a remote procedure call (RPC) library.Calls to the server are simplified by providing you with an interface of methods that can be called similarly to regular method calls.GWT marshal the calls (convert to a stream of data) and send to the remote server.At the server side, the data, is un-marshalled the method on the server is invoked
  44. 44. GWT-RPCGWT uses a pure Java implementation.In GWT, the RPC library is divided into two packages: package used for client-side RPC support . package used for server-side RPC support . The client side provides interfaces that you can use to tag.When the client code is compiled to Javascript using the GWT compiler, the code required to do the RPC marshaling will be generated .
  45. 45. RPC Plumbing Diagram
  46. 46. Implementing GWT-RPC ServicesDefine an interface for your service that extends RemoteService and lists all your RPC methods. Define a class to implement the server-side code that extends RemoteServiceServlet and implements the interface you created above.Define an asynchronous interface to your service to be called from the client-side code.
  47. 47. A client-side Java interfaceCreate a client-side Java interface that extends the RemoteService tag interface.import; import;public interface MyService extends RemoteService {{ public interface MyService extends RemoteService public String myMethod(String s); public String myMethod(String s);}}
  48. 48. Implement the remote methodImplement the service on the server-side by a class that extend RemoteServiceServlet.import; import;import com.example.client.MyService; import com.example.client.MyService;public class MyServiceImpl extends RemoteServiceServlet implements public class MyServiceImpl extends RemoteServiceServlet implements MyService {{ MyService public String myMethod(String s) {{ public String myMethod(String s) // Do something interesting with s here on the server. // Do something interesting with s here on the server. return s; return s; }}
  49. 49. Asynchronous InterfacesThis interface defines the callback method that will be called when the server generates a response.interface MyServiceAsync {{ interface MyServiceAsync public void myMethod(String s, AsyncCallback<String> callback); public void myMethod(String s, AsyncCallback<String> callback);}} }}
  50. 50. Making an RPC from the clientInstantiate the service interface using GWT.create().Create an asynchronous callback object to be notified when the RPC has completed.Make the call .
  51. 51. Making a Call: Samplepublic class MainEntryPoint implements EntryPoint {{ public class MainEntryPoint implements EntryPoint public MainEntryPoint() {{ public MainEntryPoint() }} public void onModuleLoad() {{ public void onModuleLoad() getService().myMethod("Hello World", callback); getService().myMethod("Hello World", callback); }} final AsyncCallback callback == new AsyncCallback() {{ final AsyncCallback callback new AsyncCallback() public void onSuccess(Object result) {{ public void onSuccess(Object result) Window.alert((String)result); Window.alert((String)result); }} public void onFailure(Throwable caught) {{ public void onFailure(Throwable caught) Window.alert("Communication failed"); Window.alert("Communication failed"); }} }; };
  52. 52. Making a Call: Sample (Cont.) public static MyServiceAsync getService(){ public static MyServiceAsync getService(){ MyServiceAsync service == (MyServiceAsync) MyServiceAsync service (MyServiceAsync) GWT.create(MyService.class); GWT.create(MyService.class); ServiceDefTarget endpoint == (ServiceDefTarget) service; ServiceDefTarget endpoint (ServiceDefTarget) service; String moduleRelativeURL == GWT.getModuleBaseURL() ++ "myservice"; String moduleRelativeURL GWT.getModuleBaseURL() "myservice"; endpoint.setServiceEntryPoint(moduleRelativeURL); endpoint.setServiceEntryPoint(moduleRelativeURL); return service; return service; }}}}
  53. 53. ResourcesBuilding Rich Internet Applications Using Google Web Toolkit (GWT), Karthik Shyamsunder, Oct 2008.Introduction to Google Web Toolkit, Muhammad Ghazali.Official Google Web Tool Kit Tutorial,Beginning Google Web Toolkit from Novice to Professional, Apress, 2009
  54. 54. Thank you