GWT: Developing in hosted mode with php, json and XAMPP – Part 2

Now we are up and running with a xampp served frontend. Let’s go for a connection to php backend.

Php server script

1. The php server script could be created inside the current GWT project directory, or as a separate project outside. For simplicity, we here create a server folder inside the GwtPhp project, and a php file (test.php) inside of that one:

2. Populate the test.php file with something that results a valid json, for example this:

<?php

$users = array();

$user = new StdClass();
$user->name = "John";
$user->age = 23;
$users[] = $user;

$user = new StdClass();
$user->name = "Claire";
$user->age = 32;
$users[] = $user;

echo json_encode($users);

Making the http request

3. Now we are ready to create a http request from our Gwt frontend to our php server script.

In java, we can’t simply pass a function as a parameter, so setting up a callback for an asynchronous event is a bit more tricky in java than in, say, as3 or php. But we can pass an object that has the required callback functions. This is best done by using an interface. Have a look here if you want to know more.

To simplify the callback object creation and the setup of an RequestBuilder, we will use a simple utility class. Create the file se.cambiata.gwtphp.client.HttpRequestUtil.java, and populate it like this:

// se.cambiata.gwtphp.client.HttpRequestUtil.java
package se.cambiata.gwtphp.client;

import com.google.gwt.http.client.Request;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.http.client.RequestCallback;
import com.google.gwt.http.client.RequestException;
import com.google.gwt.http.client.Response;
import com.google.gwt.http.client.RequestBuilder.Method;

public class HttpRequestUtil {

	public interface HttpRequestCallback{
		void onResponseRecieved(Request request, Response response);
		void onError(Request request, Throwable exception);
	}

	public static void makeRequest(String url, String jsonData, Method method, final HttpRequestCallback httpRequestCallback) {
		RequestBuilder requestBuilder = new RequestBuilder(method, url);
		requestBuilder.setHeader("Content-Type","application/json");
		try {
			Request request = requestBuilder.sendRequest(jsonData, new RequestCallback() {
				@Override
				public void onResponseReceived(Request request, Response response) {
					httpRequestCallback.onResponseRecieved(request, response);
				}
				@Override
				public void onError(Request request, Throwable exception) {
					httpRequestCallback.onError(request, exception);
				}
			});
		} catch (RequestException e) {
			e.printStackTrace();
		}
	}
}

4. Update the GwtPhp.java btnTest.addClickHandler to the following. Make sure that the url to the test.php script is valid:

		// se.cambiata.gwtphp.client.GwtPhp.java
		btnTest.addClickHandler(new ClickHandler() {
			@Override
			public void onClick(ClickEvent event) {
				GWT.log("Hello from GwtPhp");

				HttpRequestCallback httpRequestCallback = new HttpRequestUtil.HttpRequestCallback() {
					@Override
					public void onResponseRecieved(Request request, Response response) {
						GWT.log("HttpRequestCallback.onResponseRecieved" + response.getText());
<pre>						Window.alert("HttpRequestCallback.onResponseRecieved" + response.getText());</pre>
}
 public void onError(Request request, Throwable exception) {
 GWT.log("HttpRequestCallback.onError");
 }
 };
 String url = "http://localhost/GwtPhp/server/test.php";
 String postJsonData = "{'test':123}";
 HttpRequestUtil.makeRequest(url, postJsonData, RequestBuilder.POST, httpRequestCallback);
 }
 });

5. Refresh the GwtPhp app in the browser and press the button. This should call the php script, and an alert dialog box should pop up displaying the json recieved from the server.

In the above example we’re actually posting some data to the php script, but this isn’t delt with in this article. Be my guest!

Advertisement

Posted in: Eclipse, GWT, java, PHP