Book Image

ExtGWT Rich Internet Application Cookbook

By : Odili Charles Opute , Oded Nissan
Book Image

ExtGWT Rich Internet Application Cookbook

By: Odili Charles Opute , Oded Nissan

Overview of this book

<p>Get ready to build the next generation Gmail, Facebook, or Meebo, with HTML5 and Server Push, taking advantage of the power and versatility of Java with ExtGWT. Sencha Ext GWT takes GWT to the next level, giving you high-performance widgets, feature-rich templates and layouts, advanced charting, data loaders and stores,&nbsp; accessibility, and much more.<br /><br /><i>ExtGWT Rich Internet Application Cookbook will teach you to quickly build&nbsp; stunning functionality into your own apps with ExtGWT</i>.<br /><br />This is a catalog of practical solutions to get your ExtGWT web app up and running in no time, with tips for persistence and best practices. You begin by playing with panels, windows, and tabs, to learn the essentials. Next, you engage yourself with forms, buttons, toolbars and menus to build on further. Dealing with the UI and the trees will follow to help you make stunning user interfaces. Then you will be taught to work with Listview, Views, and Gridpanels, the more complex problems. The book will then deal with charts, visualization, and drag and drop to take you to the next level. Finally, you will wind up with serialization, persistence, and custom theming. Now, you are an expert!</p>

Related Content you might be interested in

Current Title:

Small book image
ExtGWT Rich Internet Application Cookbook
Odili Charles Opute | Oded Nissan
Sep, 2012 | 366 pages
No titles found
Table of Contents (22 chapters)
ExtGWT Rich Internet Application Cookbook
ExtGWT Rich Internet Application Cookbook
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Playing with Panels and Windows
Playing with Panels and Windows
Introduction
Creating a basic window
Building windows that can be maximized, resized, dragged, and made modal
Creating dialog windows
Pre-empt users with messages
Building a window management system
2
Playing Hide and Seek with Tabs
Playing Hide and Seek with Tabs
Introduction
Building tabbed content with custom tab icons
Creating bottom navigation tabs
Creating a tab panel with scrollable tab strip
Programmatically adding/removing a tab
Tab notification
Searching for, locating, and selecting a particular tab
Showing a tab strip for only two or more tabs
3
Click-ware: Buttons, Toolbars, and Menus
Click-ware: Buttons, Toolbars, and Menus
Introduction
Creating buttons with text and icons
Aligning buttons
Creating on/off toggle buttons
Organizing actions with the menu and split buttons
Building a bar of tools
Crafting multi-column buttons in ToolBar
Binding a single action to several click-wares
4
Crafting UI Real Estate
Crafting UI Real Estate
Introduction
Organizing navigation with AccordionLayout
Snapping components even when resized
UI cardinality with BorderLayout
Building a basic wizard with CardLayout
RowLayout vertical and horizontal aligning
Building grids with ColumnLayout
Building DashBoards
5
Engaging Users with Forms and Data Input
Engaging Users with Forms and Data Input
Introduction
Building a simple form with basic validation
Showing options with combos
Customizing a combo's bound model
Linking combos
Capturing multiple input selection
Simple FileUpload and processing
Binding data into forms
Building a better slider field
6
Data Hierarchy with Trees
Data Hierarchy with Trees
Introduction
Building a basic tree
Custom node labels
Decorating trees with icons
Augmenting trees with ContextMenu
Building trees with checkbox selection
Building asynchronous trees
Custom sorting within trees
7
The Venerable Grid Component
The Venerable Grid Component
Introduction
Basic grid: numbered rows, re-orderable columns
Formatting cell data
Grouping column headers
Aggregating column data
Easy record selection with checkboxes
Entering validated data into a grid
Automatic pagination in grids
Data grouping in grids
Custom rendering for grid groups
Live data group summaries
BeanModel grid
Intuitive record filtering
8
Templates and Views
Templates and Views
Introduction
Formatting data with a basic template
Doing logic in templates
Doing math in templates
Custom ComboBox displays
Giving details with RowExpander
9
Data Makeovers with Charts and Visualizations
Data Makeovers with Charts and Visualizations
Introduction
Using a bar chart
Using a pie chart
Using a line chart
Using an area chart
Visualizing data from a component
Visualizing remote Data
Drawing on a canvas
10
Drag-and-drop
Drag-and-drop
Introduction
Dragging any component
Simple DnD within components
DnD across components
DnD from desktop, with HTML5
Implementing custom DnD on tabs
11
Advanced Tips
Advanced Tips
Introduction
Client/server persistence setup
Client/server persistence
A novel UI with MVP, actions, and a bus
History and view transitions
Real-time server push
12
Theming
Theming
Introduction
Setting a default theme
Registering and using themes
Switching themes at runtime
Customizing a theme
Building a custom theme
Event Handling — Making Those GUIs Do Something
The event loop
Event handling 101
Summary
Custom Icons in GXT
GXT icons
Leveraging icons in the wild
GWT-RPC
Components of the GWT RPC mechanism
GWT-RPC development steps
RPC data types
A simple example
Handling exceptions
Summary
Jakarta Commons-FileUpload
Handling uploads
Tracking upload progress

Building a custom theme

When alterations to an existing theme via CSS and images get overwhelming, then it's time to build your own custom theme, which is not really far from the concept of styling an existing theme with CSS and images.

We will demonstrate this by making a minimal custom theme which I want to call Chrome.

How to do it...

Let's list the steps required to complete the task.

  1. 1. Ensure that there is a gxt folder on the floor of your web application's war directory, otherwise make one.

  2. 2. Ensure that there is a themes folder within it, if not, make one and then also make a chrome folder for the Chrome theme.

  3. 3. Place a css folder within the chrome folder created in step 2, and then place a css file named xtheme-chrome.css inside it.

  4. 4. Within the chrome folder created in step 2, create an images/chrome folder and place any custom images you want to use for the theme.

  5. 5. Create a Chrome class that extends the GXT Theme class. Implement the constructor to indicate the name for the theme...

Previous Section
End of Chapter 12
Next Chapter