GWT Training - Session 3/3
Upcoming SlideShare
Loading in...5
×
 

GWT Training - Session 3/3

on

  • 13,252 views

This is the 3rd of 3 parts of GWT Training. In this session, you will learn how to communicate with your server side application using GWT.

This is the 3rd of 3 parts of GWT Training. In this session, you will learn how to communicate with your server side application using GWT.

Statistics

Views

Total Views
13,252
Views on SlideShare
12,584
Embed Views
668

Actions

Likes
5
Downloads
360
Comments
0

2 Embeds 668

http://faizbash.wordpress.com 576
http://www.slideshare.net 92

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

GWT Training - Session 3/3 GWT Training - Session 3/3 Presentation Transcript

  • GWT Training – Session III Communicating with the Server
  • Contents
    • Asynchronous HTTP Request
    • Submitting Data using HTML Form
      • Traditional
      • GWT
    • GWT RPC
  • Asynchronous HTTP Requests
    • / /create a new GET request
    • RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "/info.php”);
    • try{
      • //send the request
      • builder.sendRequest( null, new RequestCallback() {
        • public void onError(Request request, Throwable exception){
      • //log the error
        • }
        • public void onResponseReceived(Request request, Response response){
      • //process response
        • }
      • });
    • }
    • catch (RequestException e){
      • //handle request exception
    • }
  • Asynchronous HTTP Requests – cont'd
    • builder.sendRequest() method receives a string data to be sent with the request and RequestCallback object that handles the response from the server
    • null is passed if there is no data to be sent to the data
  • Submitting Data to Server Using HTML Form
    • <form name=&quot;input&quot; action=&quot;register.php&quot; method=&quot;post&quot;>
    • Username: <input type=&quot;text&quot; name=&quot;user&quot;><br/>
    • Email: <input type=&quot;text&quot; name=&quot;email&quot;><br/>
    • Password: <input type=&quot;password&quot; name=&quot;password&quot;><br/>
    • <input type=&quot;submit&quot; value=&quot;Submit&quot;>
    • </form>
    • Data Submitted
    • POST /register.php HTTP/1.1
    • Content-Type: application/x-www-form-urlencoded
    • username=Faiz&email=faizbash%40gmail.com&password=secret
  • GWT Equivalent for Form Data Submission - Constructing HTTP Request Manually
    • //build the data to post
    • StringBuffer postBuilder = new StringBuffer();
    • postBuilder.append(&quot;username=&quot; );
    • postBuilder.append( URL.encodeComponent( username ) );
    • postBuilder.append(&quot;&email=&quot; );
    • postBuilder.append( URL.encodeComponent( email ) );
    • postBuilder.append(&quot;&password=&quot; );
    • postBuilder.append( URL.encodeComponent( password ) );
    • try{
    • //create and submit the request
    • RequestBuilder requestBuilder = new RequestBuilder( RequestBuilder.POST,
    • GWT.getModuleBaseURL()+&quot;/register.php&quot; );
    • requestBuilder.sendRequest( postBuilder.toString(), new RequestCallback(){
    • public void onError(Request request, Throwable exception){
    • // handle error
    • }
    • public void onResponseReceived(Request request, Response response){
    • // handle response
    • }
    • });
    • }catch( Exception e){ // handle exception }
  • GWT Equivalent for Form Data Submission – Using FormPanel
    • //create the form panel, set its action and method
    • final FormPanel form = new FormPanel();
    • form.setAction(&quot;/register.php&quot;);
    • form.setMethod(FormPanel.METHOD_POST);
    • //set the main widget for the panel to a vertical panel
    • VerticalPanel panel = new VerticalPanel();
    • form.setWidget(panel);
    • //create the username field
    • TextBox tb = new TextBox();
    • tb.setName(&quot;username&quot;);
    • panel.add(tb);
    • //create the e-mail field
    • TextBox tb = new TextBox();
    • tb.setName(&quot;email &quot;);
    • panel.add(tb);
  • GWT Equivalent for Form Data Submission – Using FormPanel (cont'd)‏
    • //create the password field
    • PasswordTextBox ptb = new PasswordTextBox();
    • ptb.setName(&quot;password&quot;);
    • panel.add(ptb);
    • //create the Submit button
    • Button submit = new Button(“Submit”);
    • submit.addClickHandler( new ClickHandler() {
    • public void onClick(Widget sender) {
    • form.submit();
    • }
    • });
    • //add submit button to panel
    • panel.add(submit);
  • 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
  • GWT RPC – cont'd
    • In GWT, the RPC library is divided into two packages:
      • com.google.gwt.user.client.rpc package used for client-side RPC support
      • com.google.gwt.user.server.rpc 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
  • GWT RPC Implementation
    • To understand how GWT RPC works, we would implement the data form submission using it
  • GWT RPC Implementation – Step 1
    • Create the RPC interface (stub) on the client side
      • Create a new interface named LoginService under the my.utm.kase.gwttraining.client package
      • Edit the code to look like the one below:
      • import com.google.gwt.user.client.rpc.RemoteService;
      • import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
      • @RemoteServiceRelativePath(&quot;login&quot;)‏
      • public interface LoginService extends RemoteService {
        • boolean login(String username, String email, String password);
      • }
      • Add the following in /war/WEB-INF/web.xml
  • GWT RPC Implementation – Step 2
    • Configure the servlet
      • Add the following in /war/WEB-INF/web.xml <servlet>
        • <servlet-name>loginServlet</servlet-name>
        • <servlet-class>
            • my.utm.kase.gettraining.server.LoginServiceImpl
          • </servlet-class>
      • </servlet>
      • <servlet-mapping>
        • <servlet-name>loginServlet</servlet-name>
        • <url-pattern>/gwttraining/login</url-pattern>
      • </servlet-mapping>
  • GWT RPC Implementation – Step 3
    • Create an async counterpart interface of the LoginService. This interface defines the callback method that will be called when the server generates a response
      • Create another interface, LoginServiceAsync under my.utm.kase.gwttraining.client package
      • Edit the code to look like the one below:
      • import com.google.gwt.user.client.rpc.AsyncCallback;
      • public interface LoginServiceAsync {
        • boolean login(String username, String email,
          • String password, AsyncCallback<Boolean> callback);
      • }
      • The async method always returns void and takes parameters similar to its stub counterpart plus an AsyncCallback parameter which specifies the return value of the stub method which is Void in this case
  • GWT RPC Implementation – Step 4
    • Implement the remote method on the server side
      • Create a class, LoginServiceImpl under my.utm.kase.gwttraining.server package
      • Edit the code to look like the one below:
      • import my.utm.kase.gwttraining.client.LoginService;
      • import com.google.gwt.user.server.rpc.RemoteServiceServlet;
      • public class LoginServiceImpl extends RemoteServiceServlet implements LoginService {
        • public boolean login(String username, String email, String password)‏
        • {
          • if( username.equals(&quot;faizbash&quot;) && password.equals(&quot;secret&quot;) )
          • {
            • return true;
          • }
          • else return false;
        • }
      • }
  • GWT RPC Implementation – Step 5
    • Call the remote method
      • Create a login widget in my.utm.kase.gwttraining.client package to get username, email and password from user. It also captures login event and makes a RPC to loign user.
      • public class LoginWidget extends Composite {
        • public LoginWidget() {
          • //login panel
          • FlexTable loginTable = new FlexTable();
          • final TextBox usernameBox = new TextBox();
          • final TextBox emailBox = new TextBox();
          • final PasswordTextBox passwordBox = new PasswordTextBox();
          • Button loginButton = new Button(&quot;Login&quot;);
          • loginButton.addClickHandler( new ClickHandler() {
            • public void onClick(ClickEvent event) {
            • login(usernameBox.getText(), emailBox.getText(), passwordBox.getText();
            • }
          • });
          • //username widget
          • loginTable.setWidget(0, 0, new Label(&quot;Username&quot;));
          • loginTable.setWidget(0, 1, usernameBox);
          • //email widget
          • loginTable.setWidget(1, 0, new Label(&quot;Email&quot;));
          • loginTable.setWidget(1, 1, emailBox);
  • GWT RPC Implementation – Step 5 (cont'd)‏
          • //password widget
          • loginTable.setWidget(2, 0, new Label(&quot;Password&quot;));
          • loginTable.setWidget(2, 1, passwordBox);
          • //login button widget
          • loginTable.setWidget(3, 0, loginButton);
          • loginTable.getFlexCellFormatter().setColSpan(3, 0, 2);
          • //init loginTable
          • initWidget(loginTable);
        • }
        • public void login(String username, String email, String password) {
        • //create a callback method
        • AsyncCallback<Boolean> callback = new AsyncCallback<Boolean>() {
          • public void onFailure(Throwable caught) {
            • //handle failure
            • Window.alert(&quot;Failed to login&quot;);
          • }
          • public void onSuccess(Boolean status) {
            • if( status )‏
            • Window.alert(&quot;Login successful&quot;);
            • else
            • Window.alert(&quot;Invalid username or passord&quot;);
          • }
        • };
  • GWT RPC Implementation – Step 5 (cont'd)‏
          • //Create a remote service proxy to talk to the server-side Greeting service.
          • final LoginServiceAsync loginService = GWT.create(LoginService.class);
          • //invoke the remote method
          • loginService.login(username, email, password, callback);
        • }
      • }
      • Instantiate the widget in the GWTTrainingWidgets entry point class:
        • //login widget
        • LoginWidget loginWidget = new LoginWidget();
        • tabPanel.add(loginWidget, &quot;Login&quot;);
      • Run or refresh to test
  • Thank you