Places and Activity – advancing MVP model

In this new way of doing MVP, we need an event bus, place controller , and a view.

Place: A place basically represents a certain state of your UI. The place is identified using a name. The place string you provide is bascially the history token that will trigger things such as a presenter to activate.

PlaceController: In charge of the user’s location in the GUI.

Activity: is analogous to a presenter in MVP terminology. Activities are started and stopped by an ActivityManager associated with a container Widget.

Activity Mapper: Returns the activity to run for the given place

ActivityManager: with a given place event, it associates a representative activity to invoke. Here you can start or stop activities where they are associated with a particular widget.

History: class that lets you interact with the browser’s history stack. The stack contains a list of tokens, which in most cases is a single string object.

PlaceHistoryMapper: attach all places which the PlaceHistoryHandler should be aware of.

PlaceHistoryHandler: updates the browser URL corresponding to each Place in your app.

PlaceTokenizer:a place to URL History mapping class

PlaceManager: Place managers acts as an abstraction layer between GWT history and gwt-presenter places. It just links tokens from the History path to specific Places and vise versa.

[forum]

http://code.google.com/webtoolkit/doc/latest/DevGuideMvpActivitiesAndPlaces.html

June 8, 2011 at 12:04 am Leave a comment

Daily Mile API with GWT

My next API I decided to  tackle is from the web site  DailyMile .

http://api.dailymile.com/people/davidmbloom.json

http://api.dailymile.com/people/davidmbloom/entries.json

http://www.runmapcode.com/code/using-the-dailymile-api-to-create-a-user-feed-with-php-and-snoopy

http://k2-junior.appspot.com/Json2Java.html

January 2, 2011 at 4:56 pm Leave a comment

JSON and Twitter API detailed

This is a follow up to the initial post on working with JSON. This post is inspired from reading making-web-pages-in-java-with-google , and working with JSON .

Before we get started, lets take a look at the JSON API request.

For an example, I will use the user time line of  Evan Williams (@ev) , who is one of the founders of Twitter.

Here is the json url from the user_timeline API:

http://twitter.com/statuses/user_timeline/ev.json?page=1

December 30, 2010 at 4:51 pm Leave a comment

json with gwt

via the google tutorial, comes an overview on how to Retrieve JSON data via HTTP:

JSON reponse

This requires:

JSNI – Using JSNI you can call handwritten JavaScript methods from within the GWT module

JSNI methods  – declared native and contain JavaScript code in a specially formatted comment block between the end of the parameter list and the trailing semicolon. An example:

public final native String getText() /*-{
return this.text;
}-*/;

Again, a JSNI comment block begins with the exact token  /*-{

and ends with the exact token }-*/

GWT overlay types  are the response JSON objects that are returned  from the remote server, and are converted into JavaScript objects:

  • A class that extends JavaScriptObject, a marker type that GWT uses to denote JavaScript objects.
  • Methods on overlay types are JSNI. These getters directly access the JSON fields you know exist.

Now for the  call to the remote server:

JSON request

The getJSON Javascript Native interface method  :

public native static void getJson(int requestId, String url,
StockWatcher handler) /*-{

This is where you work around the Cross Site scripting SOP  (same origin policy) restrictions by using the src attribute of the <script> tag to make the call to the remote server.

var callback = "callback" + requestId;
var script = document.createElement("script");
script.setAttribute("src", url+callback);
script.setAttribute("type", "text/javascript");

The src attribute is the URL of the JSON data with the name of a callback function appended. When the script executes, it fetches the padded JSON;

window[callback] = function(jsonObj) {

handler.@com.google.gwt.sample.stockwatcher.client.StockWatcher::handleJsonResponse(Lcom/google/gwt/core/client/JavaScriptObject;)(jsonObj);
window[callback + "done"] = true; }

The callback function is defined on the browser’s window object. It receives as an argument a JavaScript object which is the JSON data returned by the server.


setTimeout(function() {
if (!window[callback + "done"]) {
handler.@com.google.gwt.sample.stockwatcher.client.StockWatcher::handleJsonResponse(Lcom/google/gwt/core/client/JavaScriptObject;)(null);
}
document.body.removeChild(script);
delete window[callback];
delete window[callback + "done"];
}
, 1000);

A timeout function is defined to check for an unresponsive server or network problem. It first  checks a flag to see if the JSON callback was ever called. Before the timeout function completes, it removes the new <script> element and the callback function from window.

document.body.appendChild(script);

Finally call appendChild() to attach the dynamically-loaded <script> element to the HTML document body. This causes the web browser to download the JavaScript referenced by the src attribute

public void handleJsonResponse(JavaScriptObject jso) {
if (jso == null) {
displayError("Couldn't retrieve JSON");
return;
}
...
}

When the callback function executes, it calls the Java handleJsonResponse method and passes it the JSON data as a JavaScript object. This has been an example of a bridge method which is a technique for calling back into the Java source code.

Of course, the above example doesn’t handle multiple concurrent requests. For that, you need an array of bridge methods;

gwt json concurrent requests bridge method, you can generate a bridge method, which will be used to invoke a GWT JSON callback handler (aka JSON Request Handler).

http://myhowtosandprojects.blogspot.com/2009/04/making-web-pages-in-java-with-google.html

working with JSON

November 27, 2010 at 9:43 pm Leave a comment

Host your domain on GAE

If you are already set up with Google App Engine Hosting, you may decide you want your own domain name linked to your GAE account.

The steps to do this may take you a while.

In your GAE account Dashboard, under Administration is Application settings

Keep in mind , Google App Engine hosting  requires you creating a  Google Apps account to manage your site.

November 20, 2010 at 4:42 pm Leave a comment

UI Binder

As this post says ,  the UI Binder is :

feature for defining user interfaces declaratively.

An MVP example with UI Binder

August 18, 2010 at 1:24 am Leave a comment

History and Place

A nice high level overview that defines PLACE :

“if the user has navigated to a particular place within page, they reasonably expect they can bookmark the current URL and return back to that page with that URL and the page will look similar to the point at which they bookmarked it.”

How to avoid hardcoding a PLACE

The biggest deficiency is that the page’s “place” is fully determined inside a particular UI Component. If the page was enhanced such that the page’s “place was represented by multiple UI Components, things could get messy… it will be really cumbersome if some other Presenter needs to participate in determining the current place in the application.

By having the Contact Detail UI Component know what the Contact List UI Component put in the URL string, it starts coupling the two components together and it becomes harder to have Contact Details UI Component as a standalone, reusable UI Component.

 Using History To Navigate between pages [part2]

GWT History [with places]

App Controller and the Place Manager [1]

  • The AppController: it looks like it does higher-level, app-wide event management.
  • PlaceManager : links tokens from the History path to specific Places, and vice versa. A Presenter will inject the Place for another Presenter, and call ‘reveal()’ or a specific ‘reveal()’ overload with more details.

 gwt-presenter upgrade with places

August 10, 2010 at 10:23 am Leave a comment

Older Posts Newer Posts


@davidmbloom