Ext GWT 2.0: Beginner's Guide

Book Image

Ext GWT 2.0: Beginner's Guide

By : Daniel Vaughan

Book Image

Ext GWT 2.0: Beginner's Guide

By: Daniel Vaughan

Overview of this book

<p>Ext GWT, also known as GXT, takes Google Web Toolkit one step further by providing a wide range of powerful user interface components. It allows a developer to create powerful web applications that are almost like desktop applications. However to leverage all the features of this powerful Java library for creating desktop-style web applications, you need to learn how and when to use the right user interface component.<br /><br />Ext GWT 2.0: Beginner's Guide is a practical book that teaches you how to use the EXT GWT library to its full potential. It provides a thorough and no-nonsense explanation of the Ext GWT library, what it offers and how to use it through practical examples. This book provides clear, step-by-step instructions for getting the most out of Ext GWT and offers practical examples and techniques that can be used for building your own applications in EXT GWT<br /><br />This book gets you up and running instantly to build powerful Rich Internet Applications (RIA) with Ext GWT. It then takes you through all the interface-building widgets and components of Ext GWT using practical examples to demonstrate when, where, and how to use each of them. Layouts, forms, panels, grids, trees, toolbars, menus, and many other components are covered in the many examples packed in this book. You will also learn to present your data in a better way with templates and use some of the most sought-after features of Ext GWT in your web applications such as drag-and-drop and charts. Throughout the book a real application is built step by step using Ext GWT and deployed to Google App Engine.</p> <p>Imagine how great you'll feel when you're able to create great-looking desktop-style user interfaces for your web applications with Ext GWT!</p>

Ext GWT 2.0 Beginner's Guide

Ext GWT 2.0 Beginner's Guide

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

Preface

Free Chapter

Getting Started with Ext GWT

Getting Started with Ext GWT

What is GWT missing?

What does Ext GWT offer?

How is Ext GWT licensed?

Alternatives to Ext GWT

Ext GWT or GXT?

Working with GXT: A different type of web development

How GXT fits into GWT

Downloading what you need

Time for action – setting up GWT

Time for action – setting up GXT

GWT project creation

Time for action – creating a GWT project

GXT project configuration

Time for action – preparing the project to use GXT

Differences of GXT controls

Time for action – adapting the GWT app to use GXT controls

The Building Blocks

The Building Blocks

The Ext GWT Explorer Demo

Essential knowledge

GXT building block 1: Component

GXT building block 2: Container

GXT building block 3: Events

Introducing the example application

Time for action – creating a blank project

Time for action – adding a Viewport

BorderLayoutData

Time for action – using BorderLayout

Loading message

Time for action – adding a loading message

Custom components

Time for action – creating custom components

First field components

Creating a Link feed button

Time for action – adding a button

Time for action – adding a tooltip

Time for action – creating a popup

SelectionListener

Time for action – adding a SelectionListener

Time for action – adding components to the Link feed popup

Popup positioning and alignment

Time for action – positioning the popup

Forms and Windows

Forms and Windows

Change of requirements

Expanding the example application

Creating a Create feed button

Time for action – adding a Create feed button

Creating a Feed class

Time for action – creating a feed data object

Creating the FeedWindow component

Time for action – creating a Window

Creating FeedForm

Time for action – creating a feed form

Validating fields

Time for action – adding field validation

Using FieldMessages

Time for action – adding FieldMessages to the fields

Submitting a form using HTTP

Alternative to submitting a form using HTTP

Creating a Feed service

Time for action – creating service for feed objects

Storing the service in the Registry

Time for action – using the Feed object

Time for action – saving an object to the registry

Creating RSS XML

Time for action – saving a Feed

Time for action – adding to the LinkFeedPopup

Data-backed Components

Data-backed Components

Working with data

ModelData interface

BeanModel class

Time for action – creating a BeanModelMarker for Feed objects

Time for action – creating and populating a ListStore

Data-backed ComboBox

Data-backed ListField

Time for action – creating a ListField for feeds

Server-side persistence

Time for action – persisting a link to an existing feed

Time for action – persisting a feed as an XML document

Server-side retrieval

Time for action – loading feeds

Using remote data

How they fit together

Time for action – using remote data with a ListField

Time for action – creating the ItemGrid

GridCellRenderer

Time for action – using a GridCellRenderer

More Components

More Components

Time for action – creating a BaseTreeModel

Time for action – providing categorized items

Time for action – using an ImageBundle

Time for action – replacing the Feed List with a Feed Tree

Advanced grid features

Time for action – providing paged data

Time for action – creating a paging grid

Menus and toolbars

Time for action – adding a toolbar

Time for action – adding a Status component

Templates

Time for action – adding to the Feed and Item

Time for action – creating the ItemPanel

Time for action – using a Template with a ListField

XTemplate class

The RowExpander class

Time for action – using a RowExpander

The ListView class

Time for action – creating a Feed overview ListView

The ModelProcessor class

Time for action – pre-processing model data

Time for action – making ListView items selectable

CheckBoxListView

Model View Controller

Model View Controller

The need for good application structure

The classic Model View Controller pattern

The GXT Model View Controller

The AppEvent class

The EventType class

Time for action – defining application events

Controller class

Time for action – creating a controller

Time for action – handling events

Time for action – creating a View

Incorporating MVC

Time for action – registering a Controller with the Dispatcher

Time for action – refactoring UI setup

Time for action – creating the navigation Controller and View

Time for action – creating the FeedPanel Controller and View

Allowing viewing of multiple feeds

Time for action – adding tabs

Wiring it together

Time for action – responding to selections

Keeping things in sync

Time for action – responding to a Feed being added

Time for action – creating a status toolbar Controller and View

Portal and Drag-and-Drop

Portal and Drag-and-Drop

The Portal class

Time for action – creating a Portal Controller and a Portlet View

Time for action – creating the Navigation Portlet

Time for action – creating more portlets

Using drag-and-drop

Time for action – dragging and dropping of feeds

Time for action – dragging and dropping items

Charts

Time for action – including the chart module

Time for action – including the chart resources

Time for action – loading the chart JavaScript library

Time for action – creating a chart Portlet

ChartModel class

ChartConfig class

PieChart.Slice class

LineChart class

AreaChart class

ScatterChart class

StackedBarChart class

Using a PieChart

Time for action – creating PieChart data

Putting It All Together

Putting It All Together

Using Google App Engine

Time for action – registering a Google App Engine application

Time for action – getting the application ready for GAE

Time for action – using the Google App Engine data store

Time for action – publishing the example application

Time for action – creating a Google Chrome application shortcut

Mobile applications

The future for GXT

Getting more information

Pop Quiz Answers

Pop Quiz Answers

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Time for action – making ListView items selectable

First, in the onRender method of the FeedOverviewView, we need to define the item selector of the ListView to be the feed-box div:
```
listView.setItemSelector("div.feed-box");
```

We can then add a Listener for the SelectionChange event to the ListView that will display the name of the feed selected in an Info box:

listView.getSelectionModel().addListener(Events.SelectionChange, new Listener<SelectionChangedEvent<BeanModel>>() {
  public void handleEvent(SelectionChangedEvent<BeanModel> be) {
    BeanModel feed = (BeanModel) be.getSelection().get(0);
    Info.display("Feed selected", (String)feed.get("title"));
  }
});

Now start the application and select a feed from the FeedOverviewView. The name of the feed will be displayed in the Info box:

What just happened?

We used the setItemSelector method of the ListView to define a selectable block in the FeedOverviewView and added a selection listener.

Have a go hero – showing item titles...