Ext

We love to see all the different types of applications developed using Ext. SingleHop has developed LEAP, a server management application that gives the end user significant power over administering their remote servers via the web. They started off by customizing our popular web desktop example, but have added lots of neat goodies like dynamic charting, visual server provisioning and built-in SSH and remote desktop capabilities.

I recently spoke with Dan Ushman, a co-founder of SingleHop, to get the scoop on LEAP and find out more about how they used Ext.

Tell us a little bit about LEAP.

LEAP is a first-of-its-kind server management portal designed to allow our dedicated server clients to easily and effectively manage multiple servers from one interface.

Did you evaluate other JavaScript frameworks before deciding on Ext? How did you choose?

We selected Ext JS because, frankly, there is nothing quite like it out there. We thought that our unique product deserved a unique framework that offered true desktop-like UI features. The framework was also selected from about a half dozen other options by our developers for being easiest to work with and most flexible.

How does Ext fit into your overall technical architecture?

We integrated Ext JS into our own back end system, called Manage, built in PHP. The system is purely a LAMP-based setup, using CentOS and Apache with MySQL and PHP running the code. SingleHop has always been a supporter of open source projects, such as Kernel.org and the CentOS project and we’re proud to have built our infrastructure on open source software.

You have customized the Ext desktop example in LEAP — what other types of custom components did you create?

We have not created any custom components/extensions for our initial release, but we did take advantage of a large number of community-created components and hope to give back to the community in the future with any custom components that do get created.

LEAP has a custom theme that nicely fits your company look. Did you use a community theme or create your own?

We did in fact use madrabaz’s Olive Theme in LEAP. The color palette perfectly fit in with our corporate color scheme.

What has been your overall experience using Ext so far?

After some initial confusion with the radically different development process that goes along with an Ext-based site, our development team fell in love in Ext JS. The plethora of components available really help to accelerate the development schedule and are a pleasure to work with.

Do you have any advice for developers just starting out with Ext for the first time?

We found that the best way to dive into Ext was to simply dissect the sample code that it comes with. Most of the common uses for all the components seem to be represented in the sample code. We also found the community forums to be an invaluable resource. The wealth of knowledge represented was large enough for us to not even have to make a single post on the forums.

Ext GWT 1.1 development is moving along nicely and includes a new Grid component. Grid is based on the Ext JS Grid and will support the same features including grid plugins, grouping, totaling, and inline editing.

Grid vs. Table

One if the biggest differences between Table and Grid is performance. Table does not scale well with a large number of rows. Grid renders its data much faster and can handle larger data sets with noticeable differences in initial rendering times.

Table is a container of TableItems which work without a model. TableItems deal directly will cell values. Model support is added using a TableBinder which works with a Store. With Grid, there are no child components and Grid works with the Store directly. This design simplifies use and the binder is no longer needed.

Grid Plugins

1.1 adds support for component plugins with the new ComponentPlugin interface which are objects that can “plug” into a component’s lifecycle. With Grid, plugins are used to modify the behavior of Grid to add new features. The following features are provided using plugins and custom renderers.

RowExpander

CheckBox Grid

RowNumberer

EditableGrid

EditableGrid is a Grid subtype that provides inline editing support using cell editors. Each editor wraps a Field subclass and provides editors based on the data type being edited. A nice feature of Grid is dirty cell marking. A cell shows a visual indicator when it is dirty as defined by the bound Store and Record. All changes to the Grid can be rejected or committed via the Store with the UI updating automatically.

Next Up

Grid, EditorGrid, and the grid plugins are available in SVN. Next, we will be adding grouping and totaling support to Grid.

Early last week Yahoo announced they had released a new search API dubbed “BOSS” for “Build your Own Search Service” - wow, snazzy name. So being the explorer that I am, I started to play with it and poke around in the API - hold on! this is just the same search API service they offered up a while ago - what gives?

Benefits of the new Program

Turns out that BOSS comes without the limitations imposed on their previous search API. This gives everyone the ability to take Yahoo’s search result and re-use them in any way they want. No branding needed, no restrictions on how you are able re-format or merge the information, and no limit on the number of queries you can run.

They provide data for the following categories:

• Web
• News
• Images
• Spelling

The Job at Hand

So with my new-found knowledge of Yahoo’s guilt-free data, I put together a panel that displays the data, allowing integration of custom searches into a single interface. The searches run using BOSS to acquire web, news, and image results from Yahoo. Data is displayed in a DataView, with each result formatted to my liking using a custom template. Results can be paged, and the ComboBox in the paging bar can be used to switch between search services in this example.

Communication between ExtJS and Yahoo is done via a server side proxy, which also handles some data cleanup. This was fairly simple to accomplish - the Yahoo BOSS group even has some user contributed classes to use. I ended up implementing the PHP class posted by Jake. They also provide a callback feature so the data store could be populated without having to use a server side proxy.

Summary

In this example used to display BOSS results, a few form fields provide the functionality that allows searching. Results are displayed using DataView with a paging toolbar. I enabled template swapping based on the type of search that’s performed - that way image results are displayed two wide and web search results display in single rows.

The source files for this experiment can be found here and the live demo here. Play around with BOSS in your ExtJS applications! The possible uses of BOSS are endless.

The Ext GWT Store and Binder API work with ModelData instances. The primary goal of ModelData is to provide a type of “introspection” as GWT does not allow runtime inspection of Java objects. You can query ModelData for a list of properties it contains, and these properties can be retrieved and set using the parameter name with the get and set methods.

Although this approach works, it forces you to either implement the ModelData interface in your Java Beans or extend the Ext GWT base classes that implement the ModelData interface. What is missing is a way to use your Java Beans as is, without having to extend the Ext GWT base classes or implement an “invasive” interface.

With the 1.1 release of Ext GWT, it is possible to use any Java Beans in the Store and Binder API. This allows you to send your Java Beans from server to client using GWT RPC.

Java Bean support is provided by dynamically creating new BeanModel instances using any bean. The new type will “wrap” the bean, and all get and set calls on the model will be delegated to the underlying bean. Also, the original bean is available via the new bean model instance. The new model instances are created using a GWT Generator. Basically, the generator allows “new” types to be created at compile time using GWT.create(). The GXT generator will create a BeanModelFactory than can create new BeanModel instances from a Java Bean.

Identifying Java Beans

There are 2 ways of identifying Java Beans. The first method requires a new interface that extends BeanModelMarker and uses annotations. This method does not require the JavaBean to be modified. With the second method, your Java Bean implements the BeanModelTag interface.

BeanModellMarker Interface

The first step to enable Java Bean support is to identify the Class you would like to “adapt”. Rather than specifying the class directly, a new interface is created that extends BeanModelMarker. Then, a @BEAN annotation is added to the interface to identify the actual bean. This approach is beneficial, as it allows a single deferred binding rule to be used to identify your bean. Also, by using a marker interface, other configuration information can be specified by annotations.

public class Customer implements Serializable {
 
  private String name;
  private int age;
 
  public int getAge() {
    return age;
  }
  public void setAge(int age) {
    this.age = age;
  }
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
 
}
 
@BEAN(Customer.class)
public interface CustomerBeanModel extends BeanModelMarker {
 
}

BeanModelTag Interface

With this method, a new interface is not required as you tag the Java Bean directly. This means your beans will have a reference to a GXT interface.

public class Customer implements BeanModelTag, Serializable {
 
  private String name;
  private int age;
 
  public int getAge() {
    return age;
  }
 
  public void setAge(int age) {
    this.age = age;
  }
 
  public String getName() {
    return name;
  }
 
  public void setName(String name) {
    this.name = name;
  }
}

BeanModelLookup

BeanModelLookup is used to obtain a BeanModelFactory instance for a given bean type. You will use the BeanModelLookup singleton to obtain a BeanModelFactory for your given bean. The BeanModelFactory can be used to create new bean model instances from your bean instances.

BeanModelFactory factory = BeanModelLookup.get().getFactory(Customer.class);

With the factory, you are able to create new BeanModel instances that wrap your bean.

Customer c = new Customer();
c.setName("Darrell");
BeanModel model = factory.createModel(c);

BeanModelReader

It is common to use the GXT data loading API to retrieve remote data and populate a Store. The BeanModelReader can be used to handle creating new model instances from the beans being returned from the data proxy. With this approach, you can return any Java Beans from the RPC call. BeanModelReader will lookup the factory given the type of the objects being returned from the data proxy.

Store

When using this approach, the type of objects in the store will be the dynamically created types that were created based on the bean. These objects will extend BeanModel. BeanModel provides access to the “wrapped” bean via the getBean method.

Customer customer = (Customer)model.getBean();

Grid Example

Here is a snippet of code from the Explorer demo. It demonstrates uses a BeanModelReader with a Grid.

    // gwt service
    final ExplorerServiceAsync service = (ExplorerServiceAsync) Registry.get("service");
 
    // proxy and reader
    RpcProxy proxy = new RpcProxy() {
      @Override
      public void load(Object loadConfig, AsyncCallback callback) {
        service.getCustomers(callback);
      }
    };
    BeanModelReader reader = new BeanModelReader();
 
    // loader and store
    ListLoader loader = new BaseListLoader(proxy, reader);
    ListStore<BeanModel> store = new ListStore<BeanModel>(loader);
 
    loader.load();
 
    // column model
    List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    columns.add(new ColumnConfig("name", "Name", 200));
    columns.add(new ColumnConfig("email", "Email", 100));
    columns.add(new ColumnConfig("age", "Age", 50));
    ColumnModel cm = new ColumnModel(columns);
 
    Grid<BeanModel> grid = new Grid<BeanModel>(store, cm);
    grid.setAutoExpandColumn("name");
    grid.setWidth(400);
    grid.setAutoHeight(true);
    grid.setBorders(true);

Summary

The new Java Bean support allows easy data integration of your existing Java Bean objects. Sending any Java Bean over the wire is possible, and Ext GWT can create bean model instances on the client.

These features will be available with the 1.1 release of Ext GWT. For those with access to SVN, the working code is in the trunk.

A commonly requested piece of functionality is to load additional data when scrolling to the bottom of a dataset. DZone is a popular technology news site that uses this type of functionality on their home page. As you scroll to the bottom of a page, a loading indicator displays and then loads new content. This is not a feature which Ext provides out of the box, however by leveraging existing Ext components the task becomes simple. I have created a widget to support this type of functionality named Ext.ux.LiveDataPanel.

When should you use a LiveDataPanel?

A LiveDataPanel is a great widget to use for scrolling through recent chronological data which a user will be reading. Good examples of places would be recent news, recent blog entries, recent alerts, etc. Check out the demo of it showing recent blog entries. LiveDataPanel is not built to load overly large datasets or provide a live paging effect. It is meant to be used when your users will actually be reading the content shown, rather scanning a table row. If you are looking for the live paging effect to support huge datasets take a look at Thorsten Suckow’s excellent LiveGrid component.

How to use a LiveDataPanel

Setting up a live data panel is very similar to implementing an Ext.DataView. You will need to setup an Ext.data.Store (or subclass) which will hold the data you want to display and then an XTemplate to render that data. Here is the code used to create the Blog Entry demo.

// Creating the panel is easy
var p = new Ext.ux.LiveDataPanel({
    frame: true,
    title: 'Latest Blog Entries',
    height: 400,
    width: 590,
    itemSelector: '.entry',
    tpl: Ext.XTemplate.from('tplBlog'),
    store: myStore
});
p.render('entry-list');

Additional Configurations

This component also supports a limit configuration to load different page sizes (defaults to 10) and a loadingIndicatorTxt configuration to change the loading indicator text. LiveDataPanel is a subclass of Panel and therefore supports participating in layout management this component can be dropped into any layout and/or rendered to the page directly.

Summary

A LiveDataPanel can enhance your site by deferring the load of additional content until the user is ready to see it. Markup will never be generated unless it’s needed and therefore the browsers DOM will have a smaller footprint. It’s important to remember to use this component where approriate, because it will load every record into memory and render that record’s markup to the browser. By building upon Ext’s foundation classes, we were able to create a useful component without having to do a lot of the lower level work.

The Ext team is proud to announce that the official release of Ext GWT v1.0 is available for download. This is the first release of Ext GWT which is the culmination of many weeks of development from the Ext development team as well as our community of testers and supporters.

New users should take a look at the new screencasts which demonstrate how to setup your develop environment and create your first Ext GWT application.

GWT 1.5

Ext GWT 1.0 is compiled and tested with GWT 1.5 RC1.

Ext GWT is a 100% native GWT application written in Java. Ext GWT does not wrap any 3rd party JavaScript and does not use any external JavaScript files. Ext GWT fully leverages the GWT API including the widget lifecylce, events, listeners, messaging, and RPC.

Performance

Performance was a high priority item for the Ext GWT 1.0 release. Many changes were made since the first beta releases. Initial rendering times are quicker and the new layout code reacts quicker to window resizing. Improvements can easily be seen in the Explorer demo.

Demo Applications

Ext GWT 1.0 includes two demo applications that serve as a great resource for using the library. The complete source code for the Explorer and Mail demo are included in the release.

Advanced Form Layouts

With Ext GWT 1.0, advanced form layouts are supported, allowing developers to easily create multi-column forms and to also embed child containers such as TabPanel. These layouts are supported by both AnchorLayout, and the new ColumnLayout.

Improved Data Loading, Store, Binder, and Field API

A number of enhancements and updates were applied to the data related classes. More information on data loading can be found in the Help Center.

Documentation

A new Help Center is now available and will serve as the repository for Ext GWT documentation. Ext GWT 1.0 adds a significant amount of new documentation including a new Eclipse Help Plugin. We’ve added a number of new articles and tutorials to complement the 1.0 release, including:

• Project Setup Guide
• Building from SVN Guide
• Component Reference
• Data Loading Reference
• LayoutContainer Reference
• Model Mapping With Dozer
• Remote TreeTable Tutorial

In addition, a new Eclipse Help Plugin is available. All the above listed content can be integrated into the Eclipse Help Info Center. The plugin is available via the new Update Site.

The Ext GWT API is now available with integrated UML diagrams. These diagrams make it easy to visualize the package structure and details of all Ext GWT classes. The diagrams are available in the Help Center under Reference.

Download

To download Ext GWT 1.0 or view the full release notes (API changes documented), please visit the Ext GWT download page. To find out more about Ext GWT and view the latest 1.0 samples, please visit the Ext GWT overview. To see 1.0 in action, take a look at the Explorer Demo or the Mail Demo.

Theres no doubt that Google has some interesting and very useful JavaScript API’s - most of which I end up using over and over again. So why not package them up into an Ext component? Well thats exactly what I decided to do, adding a simple component centered around the Google Maps API.

• Maps Panel
• StreetView Panel

These are components that extend from Panel and showcase just how easy it is to make ExtJS do whatever you need. Since they extend from Panel, it means you can use them anywhere a panel can be used - such as a window, viewport or layout.

In this first release I am only supporting map types of ‘map’ (what Google refers to as the ‘Normal Map’) and the street view ‘panorama’, but I hope to be able to integrate the Moon, Mars and Sky maps soon enough.

With the extended component and a little bit of code we have a functional Google street view window with panning, zoom and navigation.

var panwin = new Ext.Window({
	layout: 'fit',
	closeAction: 'hide',
	title: 'GPanorama Window',
	width:400,
	height:300,
	x: 480,
	y: 60,
        items: {
		xtype: 'gmappanel',
		gmapType: 'panorama',
		setCenter: {
			lat: 42.345573,
			'long': -71.098326
		}
	}
});

It’s just as easy to create a Google map window that maps addresses and places markers at their locations (which could just as easily be nested in a layout instead).

A couple of the primary Google maps handlers and settings are setup as configuration options. For instance, ‘addControl’ allows adding of a standard Google map control (zoom, pan, etc) and the ‘zoomLevel’ sets a default zoom level for the map.

Geocoding can be used by substituting the lat/long configuration options with a ‘geoCodeAddr’ string.

The ’setCenter’ configuration allows the default center location of the map to be set, along with a marker. More markers can be added to the map using the ‘markers’ array.

var mapwin = new Ext.Window({
        layout: 'fit',
	title: 'GMap Window',
        closeAction: 'hide',
	width:400,
	height:400,
	x: 40,
	y: 60,
        items: {
            xtype: 'gmappanel',
            region: 'center',
    		zoomLevel: 14,
    		gmapType: 'map',
    		addControl: new GSmallMapControl(),
    		setCenter: {
    			geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
    			marker: {title: 'Fenway Park'}
    		},
    		markers: [{
    			lat: 42.339641,
    			'long': -71.094224,
    			marker: {title: 'Boston Museum of Fine Arts'}
    		},{
    			lat: 42.339419,
    			'long': -71.09077,
    			marker: {title: 'Northeastern University'}
    		}]
        }
});

With a bit more work, we could have the many offerings of the Google Maps API integrated for easy usage with ExtJS. For now the functionality thats missing can be accessed using the ‘getMap’ handler.

Take a look at the code, see how to use it, or just play with the example.