GWT - Samples

Canvas is a scriptable image. You define its dimensions like a standard img tag, e.g. <canvas id="mycanvas" width="200" height="200"> Sorry, but your browser does not support canvas. </canvas> then draw within that area using a JavaScript API. For example, to draw a blue square which is 180px in dimension at a point 10 pixels down and across: var canvas = document.getElementById("mycanvas"); if (canvas.getContext) { var ctx = mycanvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,255)"; ctx.fillRect(10, 10, 180, 180); } The browser has no access to the resulting shapes once they’ve been drawn. If you wanted to bounce the square around the canvas, you need to repeatedly clear and redraw the shape. However, the current image can be saved using ctx.toDataURL() which returns a PNG-encoded representation.

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

Let's give it a try and build an browser-only app that sends a user query to Google base and displays the results in our application.

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.

Gwittir is a library for GWT that provides a lot of interesting features including data binding, animation, reflection, and more. To help me learn more about this library, I decided to take it a spin and create a small GWT application to experiment with Gwittir’s data binding capabilities.

It allows you to glue together your user-interface widgets with the properties on your domain model. Whenever a user does something to a bound widget, its associated property in the model will be updated automatically. The binding is bi-directional as well,