GWT training notes

1. GWT Training – Session III
Communicating with the
Server
Snehal Masne
www.TechProceed.com

2. Contents


Asynchronous HTTP Request
Submitting Data using HTML Form



Traditional
GWT
GWT RPC
www.TechProceed.com

3. 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
}
www.TechProceed.com

4. 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
www.TechProceed.com

5. Submitting Data to Server Using
HTML Form
<form name="input" action="register.php" method="post">
Username: <input type="text" name="user"><br/>
Email: <input type="text" name="email"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="Submit">
</form>
Data Submitted
POST /register.php HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=Faiz&email=faizbash%40gmail.com&password=secret
www.TechProceed.com

6. GWT Equivalent for Form Data Submission Constructing HTTP Request Manually
//build the data to post
StringBuffer postBuilder = new StringBuffer();
postBuilder.append("username=" );
postBuilder.append( URL.encodeComponent( username ) );
postBuilder.append("&email=" );
postBuilder.append( URL.encodeComponent( email ) );
postBuilder.append("&password=" );
postBuilder.append( URL.encodeComponent( password ) );
try{
//create and submit the request
RequestBuilder requestBuilder = new RequestBuilder( RequestBuilder.POST,
GWT.getModuleBaseURL()+"/register.php" );
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 }
www.TechProceed.com

7. GWT Equivalent for Form Data Submission
– Using FormPanel
//create the form panel, set its action and method
final FormPanel form = new FormPanel();
form.setAction("/register.php");
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("username");
panel.add(tb);
//create the e-mail field
TextBox tb = new TextBox();
tb.setName("email ");
panel.add(tb);
www.TechProceed.com

8. GWT Equivalent for Form Data Submission
– Using FormPanel (cont'd)‫‏‬
//create the password field
PasswordTextBox ptb = new PasswordTextBox();
ptb.setName("password");
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);
www.TechProceed.com

9. 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
www.TechProceed.com

10. GWT RPC – cont'd


In GWT, the RPC library is divided into two packages:
 com.google.gwt.user.client.rpc package used for clientside RPC support
 com.google.gwt.user.server.rpc package used for serverside 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
www.TechProceed.com

11. GWT RPC Implementation

To understand how GWT RPC works, we
would implement the data form submission
using it
www.TechProceed.com

12. 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("login")
public interface LoginService extends RemoteService {
boolean login(String username, String email, String password);
}

Add the following in /war/WEB-INF/web.xml
www.TechProceed.com

13. 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>
www.TechProceed.com

14. 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
www.TechProceed.com

15. 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("faizbash") && password.equals("secret") )
{
return true;
}
else return false;
}
}
www.TechProceed.com

16. 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("Login");
loginButton.addClickHandler( new ClickHandler() {
public void onClick(ClickEvent event) {
login(usernameBox.getText(), emailBox.getText(), passwordBox.getText();
}
});
//username widget
loginTable.setWidget(0, 0, new Label("Username"));
loginTable.setWidget(0, 1, usernameBox);
//email widget
loginTable.setWidget(1, 0, new Label("Email"));
loginTable.setWidget(1, 1, emailBox);
www.TechProceed.com

17. GWT RPC Implementation –
Step 5 (cont'd)‫‏‬
//password widget
loginTable.setWidget(2, 0, new Label("Password"));
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("Failed to login");
}
public void onSuccess(Boolean status) {
if( status )
Window.alert("Login successful");
else
Window.alert("Invalid username or passord");
}
};
www.TechProceed.com

18. 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, "Login");

Run or refresh to test
www.TechProceed.com

19. Thank you
www.TechProceed.com