GWT - Samples

There is two type of layouts: RIA-like and web-page-like. The RIA-like layout is done using the layout panels. The app stretch to the whole available space. There is no scrollbars. The web-page-like layout is done using HTML tags (and some standard panels). The app don't stretch. If the content is larger than the viewport, scrollbars appears, like in traditional pages. Looking at the first screenshot, here is my proposal: 1) The main panel is a DockLayoutPanel attached to RootLayoutPanel. 2) The north slot contains the header. 3) The center slot contains a TabLayoutPanel. But when you show data (list, form...) you may have no enough space to show all. Here you start to use web-page-like layout. So: 4) The contain of the contact tab is a LayoutPanel with four slot: Tighformat, the list, Detail view, Relations. 5) Tighformat, Detail view and Relations are standard panels (FlowPanel) into ScrollPanels. If there not enough space, a scrollbar will appear. 6) The list is some sort of DockLayoutPanel with the headers top, the navigation buttons bottom and the contains of the list in the center with a scrollbar is needed. The exact implementation depends on the used widget for the list (SmartGWT, GXT, gwt-incubator...)

The standard approach in Java is to have separated projects for separate purposes. For example the domain model of the application is usually defined in its own project.

This chapter describes how you can make these projects available to the GWT compiler as modules.

GWT need to have access to the source files to compile them into Javascript code. If you add the project or the jar file to your GWT classpath then the Java compiler will not complain if you use the classes from the included project / jar but the GWT compiler will not be able to compile them. To make the Java files available to the GWT compiler you need to Create a gwt.xml file in the Java project / jar file which you want to use - This will instruct the GWT compiler to use the listed classes. Use the included library via the inherit definition If you are using a jar file you also need to include the source files in the jar

GWT handles the browser’s history stack by changing the hash, which is always preceded by the “#” symbol. While the JavaScript community call it a hash, GWT calls it a token, but regardless of what you call it, the token is how you are going to update the state of your web application.

The way in which you are going to capture changes in history is through the ValueChangeHandler. You will need to implement the ValueChangeHandler in your EntryPoint class,

The next step is to implement a function that will handle the logic of your state changes. So I am going to create a new method called onHistoryChange and I am going to pass in an argument called token. You will see why it is not recommended to write your logic in the onValueChange method in a moment.

The primary reason why I am writing a specific tutorial on the Anchor widget is because without it you will not be able to easily use GWT’s history framework

let’s talk about a hash, and how to use them. Since GWT is an easy way to use AJAX we are going to stay within that realm when talking about the hash. A hash is simply anything with the pound symbol in front of it. For example “#gwt” is a hash that points somewhere in your web application. We are going to learn more about the hash in the tutorial on GWT history.

Anchor anchor = new Anchor("GWT Tutorials", "http://www.gwttutorials.com?action=hello", "_blank");   String paramAction = Window.Location.getParameter("action");   //Do something with paramAction.

we're using Overlay Types to simplify JSON parsing and make our application lean-and-mean as possible

I built a basic and more complex gadgets which are demoed here. More Info here: http://code.google.com/p/gwt-examples/wiki/project_Gadget?ts=12722477... Basic Gadget is released here: IGoogle Directory: http://www.google.com/ig/directory?url=demogadgetmathflashcard.appspo...

projects which are configured manually

Mixing HTML and Widgets So how can we mix widgets and html properly? Before GWT version 2.0, the most common way was to use “RootPanel.get(’someId’)” to access an HTML element in the application host page, and then create an object there to attach the widgets to (ie. a “RootPanel”). If we need to embed only a few widgets in the host page, this technique suffices. But doing this in a real application with a large number of widgets becomes complex and slow. UiBinder scales better because it does not inject widgets into the HTML of the host page. Instead, you declare your layout in a stand-alone HTML file that can be composed with other components as many times as necessary to build more complex interfaces. Composition entails componentization, allowing the developer to create subparts of the user interface (UI components) that can be packaged, re-used and tested in isolation.

all event handlers are abstract classes, so you must implement the abstract functions. For example, the onClick method is abstract, so you need to implement it in your ClickHandler class, as well as define what the onClick method is going to do.

event dispatching and handling has become much easier with Handlers. You can invent your own Event types, and use them in the same way as all the other Handlers.

When the value of any TextBox changes I want to do something with the value but i need to know the row number of the changed TextBox

You maybe want the Grid to rather extend Composite and fire the onValueChange() events, that way you only need one ChangeHandler listening on all the TextBox’s (rather than one Handler per TextBox).

public class TreeExample implements EntryPoint { public void onModuleLoad() { // Create a tree with a few items in it. TreeItem root = new TreeItem("root"); root.addItem("item0"); root.addItem("item1"); root.addItem("item2"); // Add a CheckBox to the tree TreeItem item = new TreeItem(new CheckBox("item3")); root.addItem(item); Tree t = new Tree(); t.addItem(root); // Add it to the root panel. RootPanel.get().add(t); } }

protected void init() {                 VerticalPanel container = new VerticalPanel();                 initWidget(container);                 int pageSize = 10;                 CellTable<User> cellTable = new CellTable<User>(pageSize);                 setColumns(cellTable);                 setSelectionModel(cellTable);                 setDataSize(cellTable);                 int pageStart = 0;                 loadData(pageStart, pageSize, cellTable);                 SimplePager<User> pager = createPager(cellTable);                 container.add(cellTable);                 container.add(pager);         }

JSNI gives you the freedom to pick and choose which GWT capabilities you want to use.

JSNI is base on Java JNI which allows you to declare a Java method, but implement the definition in another language.

entire JavaScript libraries have been implemented into GWT with the use of JSNI.

11public class MyHTMLBinder extends UIObject {12 13    interface MyHTMLBinderUiBinder extends UiBinder<Element, MyHTMLBinder> {}14    private static MyHTMLBinderUiBinder uiBinder = GWT.create(MyHTMLBinderUiBinder.class);15 16    @UiField SpanElement nameSpan;17    @UiField SpanElement greetingSpan;18    @UiField DivElement divElement;19 20    public MyHTMLBinder(String firstName) {21        setElement(uiBinder.createAndBindUi(this));22 23        greetingSpan.setInnerText("Hello there ");24        nameSpan.setInnerText(firstName);25        divElement.setInnerHTML("<p> Hope you had a good time </p>");26 27    }28 29}

GWT provides a way for your apps to hook into the browser’s history mechanism, so that you can control what happens when a user hits Back or Forward in their browser. You can also programmatically manipulate the browser’s history, and even create hyperlinks in your apps that can hook into the browser’s history mechanism. You can even intercept these hyperlinks when a user clicks on them, instead of having the browser handle it, or both.

tokens allow you to map a specific state of your application to what’s in the browser’s history stack. When your app starts up, the stack is empty. When the user interacts with your app, and clicks on something, you can add tokens to this stack (either via hyperlinks or calls to History.newItem(String token)). This lets you change the history. You can also attach a HistoryListener to your app which will allow your app to respond to this change of history.

Why do it this way? I mean, if your app generates the tokens themselves, why not just change the state instead of dealing with receiving a history change notification (that you just initiated) and then respond to it? A good reason for taking the trouble to do this, is to allow people to bookmark certain states of your application. If you don’t want them to do this, then you can just plug into the history mechanism, and then ignore all the history state change events, and make it so that the Back or Forward button does not mess your app up.

I figure it is going to take me at least four iterations to get this right. The first one will be building a GWT application with a simple UI that has no server logic behind it (just to learn how layout in GWT works). Step two will be adding a fake servlet backend (not app engine, just in memory). While not exactly App Engine yet, I should have a completely specified client-server API by the end of this process that I can subsequently implement on App Engine (iteration 3). Iteration four will handle deployment, CSS and whatever I may screw up in iterations one and two. I will log my notes of things I run into while I code.

Summary:  Google Web Toolkit (GWT) lets you use the Java™ language to implement rich client user interfaces that run in a browser. In this two-part article, David Geary brings you up to speed on the latest version of GWT and shows you how to implement a desktop-like Web application.

servlet

Blobstore crash course It’ll be best if we gave a quick refresher course on the blobstore before we begin. Here’s the standard flow for a blobstore upload: Create a new blobstore session and generate an upload URL for a form to POST to. This is done using the createUploadUrl() method of BlobstoreService. Pass a callback URL to this method. This URL is where the user will be forwarded after the upload has completed. Present an upload form to the user. The action is the URL generated in step 1. Each URL must be unique: you cannot use the same URL for multiple sessions, as this will cause an error. After the URL has uploaded the file, the user is forwarded to the callback URL in your App Engine application specified in step 1. The key of the uploaded blob, a String blob key, is passed as an URL parameter. Save this URL and pass the user to their final destination