What's new

Facebook Twitter

JSON. At this point, you've created the initial implementation of the StockWatcher application, simulating stock data in the client-side code.

JSON

On this page, you'll make a call to your local server to retrieve JSON-formatted stock data instead: Additional information follows: More about JSON, JSNI, Overlay types, and HTTP Note: For a broader guide to client-server communication in a GWT application, see Communicate with a Server. What is JSON? JSON is a universal, language-independent format for data.

When you encode the stock data for StockWatcher in JSON format, it will look something like this (but the whitespace will be stripped out). 1. Reviewing the existing implementation In the original StockWatcher implementation, you created a StockPrice class and used the refreshWatchList method to generate random stock data and then call the updateTable method to populate StockWatcher's flex table. In this tutorial, you'll create a servlet to generate the stock data in JSON format. Writing the servlet 2. <p. Cell Widgets. Cell widgets (data presentation widgets) are high-performance, lightweight widgets composed of Cells for displaying data.

Cell Widgets

Examples are lists, tables, trees and browsers. These widgets are designed to handle and display very large sets of data quickly. A cell widget renders its user interface as an HTML string, using innerHTML instead of traditional DOM manipulation. This design follows the flyweight pattern where data is accessed and cached only as needed, and passed to flyweight Cell objects. A cell widget can accept data from any type of data source. Cells are the basic blocks of a user interface and come in a variety of available cell types.

For example, in the CellList example of the Showcase, every selectable data record is rendered by a single Cell instance. In the CellTable example, a different Cell is used to render each Column of a row. NOTE: CellPanel is not a cell widget. Demos and Code Examples These files are referenced, where appropriate, in the sections below. Cells Text. Creating Custom Cells. If you use a CellTable or other Cell Widgets in your applications, you will probably want to create custom Cells tailored for your data.

Creating Custom Cells

Cells are like widget flyweights, so a single Cell can render multiple DOM instances of itself, and it can handle events from multiple rendered instances. This patterns lends itself well to an MVP design, as we'll show here. This developer guide describes patterns for creating simple one-off Cells, as well as creating re-usable cells that can be "skinned". If you are not familiar with the cell widgets, you should read the Cell Widgets Developer Guide before continuing. Cell Basics Implementing the render() Method Code Example ColorCell is a custom Cell that extends AbstractCell<String> and generates a single div containing the name of a color, styled with specified color as the text color. When implementing a render method, you should follow these steps: Create a subclass of AbstractCell, parameterized with the type of value you want to render.

Cell Table. A cell table (data presentation table) provides high-performance rendering of large data sets in a tabular view.

Cell Table

You can check out the Cell Table example in the GWT Showcase to see it in action. This developer guide will walk you through some advanced features specific to CellTable, such as column sorting. If you are not familiar with the cell widgets, you should read the Cell Widgets Developer Guide before continuing. Column Sorting ColumnSorting with ListDataProvider GWT provides a default implementation of ColumnSortEvent.Handler called ColumnSortEvent.ListHandler that is designed to perform local sorting of a java.util.List. Code Example - The example below adds column sorting support to a CellTable backed by a ListDataProvider. ColumnSorting with AsyncDataProvider Code Example - The example below adds column sorting support to a CellTable backed by an AsyncDataProvider. Controlling Column Widths By default, columns in a CellTable expand to fit the contents of the Cells.

Editors. Data binding for bean-like objects The GWT Editor framework allows data stored in an object graph to be mapped onto a graph of Editors.

Editors

The typical scenario is wiring objects returned from an RPC mechanism into a UI. Goals Decrease the amount of glue code necessary to move data from an object graph into a UI and back. Be compatible with any object that looks like a bean, regardless of its implementation mechanism (POJO, JSO, RPC, RequestFactory).

Quickstart Import the com.google.gwt.editor.Editor module in your gwt.xml file. Definitions Bean-like object: (henceforth "bean") An object that supports retrieval of properties through strongly-typed Foo getFoo() methods with optional void setFoo(Foo foo); methods. General workflow Instantiate and initialize the Editors. Editor contract The basic Editor type is simply a parameterized marker interface that indicates that a type conforms to the editor contract or informal protocol.

Editor delegates Editor subtypes LeafValueEditor HasEditorDelegate. HTML5 Support. For an updated list of which browsers support which HTML5 features, you can use one of the many compatibility resources provided on the web, such as this browser compatibility resource page provided by the html5rocks website.

HTML5 Support

For a list of which HTML features are supported by the GWT library, this page is the right place to look. These HTML5 features are supported by GWT: Client-side Storage – Use LocalStorage, SessionStorage, and monitor StorageEvents Canvas – Add visualizations using Canvas (Javadoc) Audio – Use Audio widgets (Javadoc) Video – Use Video widgets (Javadoc) Activities and Places. GWT 2.1 introduced a built-in framework for browser history management.

Activities and Places

The Activities and Places framework allows you to create bookmarkable URLs within your application, thus allowing the browser's back button and bookmarks to work as users expect. It builds on GWT's history mechanism and may be used in conjunction with MVP development, though not required. Strictly speaking, MVP architecture is not concerned with browser history management, but Activities and Places may be used with MVP development as shown in this article. If you're not familiar with MVP, you may want to read these articles first: Definitions An activity simply represents something the user is doing. A place is a Java object representing a particular state of the UI. You can download all of the code referenced here in this sample app. Let's take a look at each of the moving parts in a GWT 2.1 app using Places and Activities. Then we'll take at how you wire it all together and how it works. Views ClientFactory Activities. RequestFactory.

RequestFactory is an alternative to GWT-RPC for creating data-oriented services.

RequestFactory

RequestFactory and its related interfaces (RequestContext and EntityProxy) make it easy to build data-oriented (CRUD) apps with an ORM-like interface on the client. It is designed to be used with an ORM layer like JDO or JPA on the server, although this is not required. Overview Benefits RequestFactory makes it easy to implement a data access layer on both client and server. How does it relate to GWT-RPC? RequestFactory uses its own servlet, RequestFactoryServlet, and implements its own protocol for data exchange between client and server.

Coding with RequestFactory Let's take a look at the moving parts in an application that uses RequestFactory. Then we'll take a look at how to put it all together. Entities An entity is a domain class in your application that has concept of a persistent identity. Entity Proxies An entity proxy is a client-side representation of a server-side entity. Value Proxies Wiring Request. Logging. This document is for developers interested in logging client-side code in their GWT applications.

Logging

Logging is the process of recording events in an application to provide an audit trail to understand how the application executes and to diagnose problems. Logging makes it easier to troubleshoot issues encountered by developers and users. The following sections walk through a logging example application and introduce the basic functionality of the Logging framework and configuration options. Developers should already be familiar with developing a GWT application. Overview of the Logging Framework The logging framework emulates java.util.logging, so it uses the same syntax and has the same behavior as server-side logging code. Unlike java.util.logging, GWT logging is configured using .gwt.xml files. Super Simple Recipe for Adding GWT Logging Adding GWT logging is really quite simple, as simple as the following code example.

Building/Running the Logging Example Configuring GWT Logging Client vs. Speed Tracer.