Ext JS - Blog

Archive for the ‘Ext GWT’ Category

Tree Grid, Grouped Headers and Aggregation Rows - Ext GWT 2.0 M3 Released

Monday, June 15th, 2009

The Ext team is pleased to announce the availability of Ext GWT 2.0 M3. M3 will be the last milestone release. We will be releasing a release candidate before the final release of Ext GWT 2.0. Many thanks to the early adopters in the community that have been using 2.0 and reporting bugs.

Ext GWT 2.0 M3 contains several new features and components.

Grid Enhancements

We have added two new features we hope you will enjoy. First is column grouping, which allows multi-row headers with colspan and rowspan support. In addition, widgets can be added to the headers.

The follow code creates the two rows of column groups:

    cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Header Grouping Example", 1, 5));
    cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2)); 
    cm.addHeaderGroup(1, 0, new HeaderGroupConfig(yourWidget, 1, 2));

The second enhancement is aggregation rows. One to many rows can be added to the bottom of a Grid. You can specify one of the predefined aggregations types, such as max, min, and avg, or use renderers to display any data.

The following code creates a single aggregation row:

AggregationRowConfig<Stock> averages = new AggregationRowConfig<Stock>();
averages.setHtml("name", "Average");
 
// with summary type and format
averages.setSummaryType("last", SummaryType.AVG);
averages.setSummaryFormat("last", NumberFormat.getCurrencyFormat());
 
// with renderer
averages.setSummaryType("change", SummaryType.AVG);
averages.setRenderer("change", new AggregationRenderer<Stock>() {
  public Object render(Number value, int colIndex, Grid<Stock> grid, ListStore<Stock> store) {
    // you can return html here
    return number.format(value.doubleValue());
  }
});
cm.addAggregationRow(averages);

Tree Panel & Tree Grid

With the M3 release there are some exciting changes.

M3 introduces the TreePanel component. TreePanel binds directly to a TreeStore and replaces Tree, TreeItem, TreeBinder. Even more exciting, the new TreeGrid replaces TreeTable, TreeTableItem, and TreeTableBinder.

This new design gives you all the benefits and features of Grid - fast rendering, widget support, and inline editing - with the additional features of widget support previously found in Table. Grid now supports placing widgets in cells using a GridCellRenderer.

The following screenshot is of the new TreeGrid using a RowEditor:

ImageBundle Support

ImageBundle support has been an often requested feature. With M3, we have added ImageBundle support. Icons can be specified in three different methods:

AbstractImagePrototype (typically from an ImageBundle)
CSS style name (existing method)
Image path (String)

All components that support icons now implement the new IconSupport interface:

/**
 * Interface for objects that support icons.
 */
public interface IconSupport {
  /**
   * Returns the icon.
   * 
   * @return the icon
   */
  public AbstractImagePrototype getIcon();
 
  /**
   * Sets the icon.
   * 
   * @param icon the icon
   */
  public void setIcon(AbstractImagePrototype icon);
 
  /**
   * Sets the icon style.
   * 
   * @param icon a CSS style name
   */
  public void setIconStyle(String icon);
}

In addition, there is a helper class, IconHelper, that can be used to create image prototypes from CSS style names, and image paths. Here is an example setting an icon 3 different ways:

    // from bundle
    item.setIcon(GXT.IMAGES.editor_bold());
    // CSS style name
    item.setIconStyle("my-icon");
    // image path
    item.setIcon(IconHelper.createPath("/my/url/foo.gif"));

When using ImageBundles, you create classes that extends ImageBundle. Here is a partial look of the new XImages class, which is the ImageBundle GXT uses for all it’s icons:

public interface XImages extends ImageBundle {
  @Resource("hmenu-asc.gif")
  AbstractImagePrototype grid_sortAsc();
 
  @Resource("hmenu-desc.gif")
  AbstractImagePrototype grid_sortDesc();
  ....
}

One immediate benefit we have noticed, is that the icons display immediately when first displayed in the application, rather than incrementally as a page loads. This happens since all the images are combined into one on the server at compile time, and therfore, 1 http request. While we are talking about it, here is a sreenshot of the image GWT generates from the individual icons we specified in our XImage class:

Binders Deprecated

Ext GWT 1.0 included a set of “binders” classes that added store and model support to widgets. With the binders, you worked with stores and models, rather than widgets directly such as TreeItem’s and TableItem’s. With binders, there is the wrapped widget, the wrapped widget’s child widget, and the binder itself:

Tree & TreeItem with TreeBinder
TreeTable & TreeTableItem with TreeTableBinder
Table & TableItem with TableBinder
DataList & DataListItem with DataListBinder

With 2.0, the “binders” and their wrapped widgets have been deprecated. Don’t confuse “binders” with our data binding code, which is something different. As mentioned above, Tree, TreeItem, TreeBinder TreeTable, TreeTableItem, and TreeTableBinder have been deprecated. In addition, DataList, DataListItem, and DataListBinder have been deprecated in favor of the existing ListView component which binds directly to a ListStore. With these changes, all of our data bound components have the same design, using stores and models. There are equivalents to every function and feature the deprecated functions provided, so there’s a smooth upgrade path.

Upgrading

Ext GWT 2.0 is a major upgrade from 1.0. There are a number of breaking changes to consider when moving from 1.X. There is a migration guide in the Ext GWT download which documents the API changes. Make sure to take a look at this before you begin upgrading to 2.0.

We are offering a pre-release sale with hefty discounts to upgrade your 1.x license. If you’ve thought about purchasing an Ext License, for a limited time, you can purchase online for less than an Ext GWT 1.x License. There’s no better time to support the Ext team.

Posted in Ext GWT | 29 Comments »

Building a Rating Widget with Ext Core 3.0 Final and Google CDN

Wednesday, June 10th, 2009

We are very proud to announce the final release of Ext Core under the MIT license. Your feedback was invaluable. Thank you for all the bugs reported and test cases created. For those of you who are new to Ext Core, we suggest you read the previous blog post about the all the features and examples that we released as part of the beta. You can find a list of changes and fixes we made for the final here.

For this post we will leverage the power of Ext by creating and dissecting a useful star rating example. We hope to share some of the general best practices behind creating unobtrusive, reusable code with Ext Core to liven up your pages.

Making a Splash

Including Ext Core on your site is easier than ever. We are honored to share with the community that Ext Core is now available via the Google AJAX Library API. Many thanks to Ben Lisbakken at Google for working with us to make this a reality.

//any of these will work ;)  <script type="text/javascript" src="....
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core.js
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core.js
http://ajax.googleapis.com/ajax/libs/ext-core/3.0/ext-core-debug.js
http://ajax.googleapis.com/ajax/libs/ext-core/3/ext-core-debug.js

Alternatively, you can use Google AJAX API Loader's google.load() method:

google.load('ext-core', '3');
google.load('ext-core', '3', {uncompressed : true});

Getting Started

Ext Core is a perfect fit for adding behavior to existing HTML. When designing a widget, having a markup structure that provides graceful degradation is an added plus. For this example, we will be using radio buttons. We can "group" the elements to specify which radio buttons are part of the control. It could look something like the following:

<div id="rating1">
    <input type="radio" name="rating1" value="1" title="Very poor">
    <input type="radio" name="rating1" value="2" title="Not that bad">
    <input type="radio" name="rating1" value="3" title="Average">
    <input type="radio" name="rating1" value="4" title="Good">
    <input type="radio" name="rating1" value="5" title="Perfect">
</div>

This markup allows user to have the ability to rate an item even without the fancy stars and additional functionality that we have in mind. Take notice that this simple markup contains powerful information like the name, value and title for each item which we can reuse with our rating widget.

The API

One of the most important aspects of building reusable code is providing your developers a powerful API. Our aim here is to allow developers to progressively enhance and convert the markup into a star rating with a simple API. In this case we will need the element that wraps around the radio controls, and some optional configuration to customize the behavior of the widget. Following the Ext tradition we will provide these configuration options in the form of an object literal. A possible API for our widget could look like this:

//Keep it simple
new Ext.ux.Rating('rating1', {
    showTitles: true
});

Ext.util.Observable

So now that we know how we want to use our component, lets go ahead and actually look at some details on how to write it! In our previous post we mentioned that Ext Core allows you to write neatly structured object-oriented code. Whenever you want to create a piece of functionality, you should try to bundle it into a separate class. In most cases you will need to be able to listen for events on instances of your class. Ext provides a power class, the Ext.util.Observable class, to springboard your development. This is the same class that almost all classes in Ext JS extend from! Our basic shell for our rating plugin could look something like this:

Ext.ns('Ext.ux');
Ext.ux.Rating = Ext.extend(Ext.util.Observable, {
    // Configuration default options
    showTitles: true,
 
    // Our class constructor
    constructor : function(element, config) {
        Ext.apply(this, config);      
        Ext.ux.Rating.superclass.constructor.call(this);     
 
        this.addEvents( 'change');  
 
        this.el = Ext.get(element);
        this.init()
    }
});

For those of you familiar with Ext JS will recognize this pattern. In this piece of code we have created a namespace to put our class into using the Ext.ns() function. Then we create our class using the Ext.extend method with Ext.util.Observable as the base class. We define some configuration options with default values and then set up our constructor method which will be called when we create a new instance of our class. We also define some custom events and wrap the element passed to the constructor with an Ext.Element instance. We use the Ext.get() flexible nature to have support of passing an id string, DOM Element or Ext.Element to our constructor.

Reaching the stars

It is time to think about the things we need to get our widget working. First we want to replace the radio buttons with our stars, we will need to store the values and titles for each star, we want to create a hidden input to put the current value in and finally we need to set up event listeners to listen for mouse hovers and clicks.

init : function() {
    var me = this; 
 
    // Some arrays we are going to store data in
    this.values = [];
    this.titles = [];
    this.stars = [];
 
    // We create a container to put all our stars into
    this.container = this.el.createChild({
        cls: 'ux-rating-container ux-rating-clearfix'
    });
 
    // We use DomQuery to select the radio buttons
    // Then we can loop over the CompositeElement using each
    this.radioBoxes = this.el.select('input[type=radio]');
    this.radioBoxes.each(this.initStar, this);
 
    // We use DomHelper to create our hidden input
    this.input = this.el.createChild({
        tag: 'input',
        type: 'hidden',
        name: this.name,
        value: this.values[this.defaultSelected]
    });
 
    // Lets remove all the radio buttons from the DOM
    this.radioBoxes.remove();
 
    if(this.disabled) {
        this.disable();
    } else {
        // Enable will set up our event listeners
        this.enable();
    }
}

Creating Stars - using DomHelper and accessing the DOM from Ext Element

 
initStar : function(item, all, i) {
    // We use the name and disabled attributes of the first radio button 
    if(i == 0) {
        this.name = item.dom.name;
        this.disabled = item.dom.disabled;		
    }
 
    // Saving the value and title for this star     
    this.values[i] = item.dom.value;
    this.titles[i] = item.dom.title;
 
    // Now actually create the star!
    var star = this.container.createChild({
        cls: 'ux-rating-star'
    });
 
    // Save the reference to this star so we can easily access it later
    this.stars.push(star.dom);
},

Enable and Select Stars - listening for events, using the target of an event and firing custom events

 
enable : function() {
    // ... some code missing here ...
 
    // We will be using the technique of event delegation by listening
    // for bubbled up events on the container       
    this.container.on({
        click: this.onStarClick, 
        mouseover: this.onStarOver,
        mouseout: this.onStarOut,
        scope: this,
        delegate: 'div.ux-rating-star'
    });        
},
 
onStarClick : function(ev, t) {
    if(!this.disabled) {
        this.select(this.stars.indexOf(t));
    }
},
 
select : function(index) {
    // ... some code missing here ...
    else if(index !== this.selected) {
        // Update some properties           
        this.selected = index;
        this.value = this.values[index];
        this.title = this.titles[index];
 
        // Set the value of our hidden input so the rating can be submitted			
        this.input.dom.value = this.value;
 
        // the fillTo() method will fill the stars up until the selected one
        this.fillTo(index, false);
 
        // Lets also not forget to fire our custom event!         
        this.fireEvent('change', this, this.values[index], this.stars[index]);  
}

Filler Up - dom manipulation (adding classes)

 
fillTo : function(index) {
    var cls = 'ux-rating-star-on';
 
    // We add a css class to each star up until the selected one   
    Ext.each(this.stars.slice(0, index+1), function() {
        Ext.fly(this).addClass(cls);
    });
 
    // And then remove the same class from all the stars after this one
    Ext.each(this.stars.slice(index), function() {
        Ext.fly(this).removeClass(cls);
    });      
}

We won't discuss all the details since most of it is pretty straightforward, but the final product should give you a general idea of how to use the basic functionality available in Ext Core to tie together all the missing pieces.

Wrapping it up

In this example we used the following cross-browser compatible functionality available in Ext core:

Classical Inheritance Class System
Observable Class
DomQuery
DOM manipulation and traversal
Event handling
Markup generation

Ext Core makes it fun to write code, and helps you create clean, well-structured classes using a set of cross-browser abstractions on the existing browser API's. For those of you who want to use it or are just interested in seeing the completed work, we have included a version of the widget in the Ext Core Final build. You can see the working widget embedded in the post below:

The example page illustrating this widget can be found here.

Final words

We hope that this library will find its way into many of your dynamic web pages and make your lives as web developers easier and more enjoyable. We are looking forward to seeing the great things you will create using it. We are always looking for ways to make this library better and we think the best way to do that is by listening to your suggestions. So, don't be shy and tell us what you think.

Posted in Community, Ext Core, Ext GWT, Ext JS, Ext Tips, Google, News, Open Source, Tutorials | 27 Comments »

Ext GWT 2.0 Milestone 2 Released

Wednesday, May 20th, 2009

The Ext Team is happy to announce the availability of Ext GWT 2.0 Milestone 2 available for immediate download. Ext GWT 2.0 M2 is packed full of new components and features, expanding on the Ext GWT 1.0 feature set. Included in this release, are several performance improvements which noticeably improve initial render and layout execution times. Most notably, Ext GWT has closed the feature gap that once existed between its sister project Ext JS. Developers looking to use Ext GWT can now rest easy knowing that they are not missing out on any cool features.

GWT 1.6

Ext GWT 2.0 works with GWT 1.6. With GWT 1.6, the application deployment design was changed to make it easier to integrate your GWT application into an existing J2EE application. Ext GWT 2.0 has been updated to take advantage of the new GWT design.

Ext GWT 2.0 introduces several new UI Components and enhancements to many existing components. Here is a partial listing of some of the new and enhanced components:

New UI Components

Charting
HtmlEditor (with ColorPalette)
RowEditor
Widget Renderer Grid
ButtonGroup
Status
HBoxLayout & VBoxLayout

Live Charting

The chart package will allow you to visualize your data with flash based charting. Each chart binds directly to a ListStore. The new FlashComponent class, which extends BoxComponent, allows you to easily create custom Flash Components. By binding the charts directly to a ListStore, you don’t have to worry about updating your chart, they will update automatically. Included is a full Java object model for configuring and constructing the charts, no need to mess with JSON or XML.

HTML Editor - Rich Text Editor

The often requested components is now available. HtmlEditor is a lightweight WYSIWYG editor that integrates well with the other Ext components. The HtmlEditor component is easy to customize with other features you may need.

RowEditor

Editing a row in a grid just got a lot easier. The RowEditor is another great new UI component allowing you to rapidly edit full rows in a grid. You can even enable a validation mode which uses the new AnchorTips to notify the user of all validation errors at once.

Widget Renderer

It is now possible to add widgets to cells in Grid. To use widgets, simply use a GridCellRenderer and return a widget, rather than a HTML fragment.

ButtonGroup

ButtonGroup is a new component that will allow you to group together Buttons of different sizes to create complex toolbars enabling your users to find the most common actions first.

Status

The new Status component can be used with a ToolBar to replicate the status area of an application.

HBoxLayout & VBoxLayout

Two new and extremely flexible layouts for layout out children in a single row or column. Box layouts allow precise control of the size and position of the children in a container.

Enhanced Components

Buttons
Toolbar Overflow
Menu Overflow
AnchorTips
Buffered GridView

Buttons

Buttons in Ext GWT 2.0 have been refactored to be a valid BoxComponent which enables them to partake in layout management. Buttons can now scale to any height or width and have advanced text positioning.

Toolbar Overflow

Toolbars can now create a menu for items that don’t fit the visible toolbar area. The items in the menu still react with the same handlers as the toolbar items. This new behavior is turned on by default and can be disabled with the configuration option enableOverflow.

Menu Overflow

Menus now also handle overflowing in a more gracious manner. Whenever a menu gets so long that the items won’t fit the viewable area, it provides the user with an easy UI to scroll the menu. This feature is turned on by default and can be disabled by the configuration option enableScrolling.

ToolTips

Tooltips now support an anchor configuration which will allow you to bring attention to a particular element or component with a small callout arrow.

Buffered GridView

Buffered GridView enhances performance by waiting to render rows until they are visible. As your user scrolls away from content which is no longer visible, the BufferedGridView will clean up the old DOM markup to minimize the DOM structure. As a result of the smaller markup, the performance of resizing, forceFit, autoExpandColumn and other layout and DOM manipulation features in a large grid will improve substantially. Buffer GridView is limited to working on fixed height rows.

Upgrading

Google IO

I will be attending the Google IO conference next week. If anyone is interested in having an informal discussion about Ext GWT, I will be available. You can private message me in the forums if you would like to meet up (darrellmeyer).

Posted in Ext GWT | 24 Comments »

Ext GWT 1.2 Released

Monday, December 1st, 2008

We are pleased to announce the release of Ext GWT 1.2. This release is packed full of new features and components. Ext GWT 1.2 is a recommended upgrade for all Ext GWT 1.1 users.

New Features

Although a minor release, Ext GWT introduces many exciting new features to help build your rich internet application. With this release, Ext GWT shortens the feature set gap between Ext JS.

Drag and Drop

Ext GWT 1.2 introduces a new Drag and Drop (DND) framework. It is now trivial to add DND support to your applications. Support is is added via the DragSource and DroptTarget classes with specialized subclasses for Grid, Trees, and Lists. The DND code exposes a rich event model to allow precise control of your DND operations.

Form Data Binding

With the new data binding framework, your model can be “bound” to forms and fields. The relationship is bi-directional with updates propagating in both directions. In addition, the data binding code supports editing via a store where multiple changes can queued and then committed and rejected in a single operation.

File Upload

Ext GWT 1.2 introduces a few new fields including the FileUploadField which allows files to be uploaded to the server via standard HTML form submissions.

Notable New Examples

Ext GWT 1.2 includes several new examples added to the demo applications.

Grid to Grid DND

This example demonstrates how model instances can be dragged between two grids. You can change whether data is appended or inserted by changing the value in the combo box.

Reordering Tree

In this example, both nodes and leafs can be reordered. In addition, both nodes and leafs can be dragged to a new parent.

Image Organizer

Drag and drop operations do not have to be between like components. The image organizer shows an example of dragging a picture from a list to a folder in a tree. In this example,the data is copied, not moved.

Grid Binding

Demonstrates an example of “binding” a model to a form based on the selection of a grid. In another example, the edits made to the grid are done via the store via records. Edits are cached and can be committed or rejected.

DualListField

This new form field supports dragging and dropping items between two lists.

Download

To download Ext GWT 1.2 please visit the Ext GWT download page. The release notes can be viewed here. Please visit our Examples Demo to see 1.2 in action and take a look at our roadmap to see what is planned for our next release.

Posted in Ext GWT | 23 Comments »

Testing Ext JS & Ext GWT Applications With Selenium

Monday, November 3rd, 2008

Overview

As developers we can create great software. Unfortunately, we usually introduce a few bugs along the way. Using a testing tool can ensure we catch the bugs and resolve them quickly.

There are many different approaches to testing. Some advocate writing the tests within the application, others suggest a separate testing environment entirely. There are merits to both these approaches. For this blog post, I’ve focused our attention on Selenium as both Ext JS and Ext GWT and benifit from this “black box” testing methodology.

Selenium provides a powerful mechanism to test your Ext applications. Selenium works by executing tests against your running application within the browser of your choice. Selenium tests emulate the way a user would interact with your application by executing JavaScript to simulate user actions. Selenium tests run as a form of “integration” tests as they execute against your running application.

Both Ext JS and Ext GWT applications can benefit from Selenium tests. In fact, with few exceptions, the tests created for one product should be interchangeable as both products produce the same DOM structure.

With GXT applications, GWT provides built in JUnit support. This provides a great way to test your application. However, these tests run only in host mode. Being able to test your compiled application in multiple browsers is important as some issues only appear within your compiled application.

In general, you create Selenium tests and then execute them in a variety of ways. This tutorial will demonstrate creating tests with Selenium IDE, a Firefox plugin, and creating tests within Java. Tests will be loaded and executed within the Selenium IDE, and Java JUnit tests will be executed using Selenium Remote Control.

Selenium IDE

Selenium IDE is a Firefox extension that allows you to create, edit, and execute your tests. Tests can either be created manually, or by “recording” your actions. Recording can help you get a feel on how the Selenium commands are generated, but in most cases you will want to tweak the generated commands.

A Selenium test is a list of commands. Commands can be seen as actions, such as “click this element”, “type into this field”, and “assert an element exists”.

Install Selenium IDE

First, you will need to install the plugin which can be found here. Once installed you can choose Tools / Selenium IDE or View / Sidebar / Selenium IDE from the Firefox application menu.

Spend some time playing around with Selenium IDE. You can use the record button (red circle) to have the tool record your actions or you can enter commands manually. Most commands require a locator string. The locater string is repsonsible for identifying elements. There are various “types” of locator strings which are covered later.

Using Selenium IDE you can save and load tests. Also, notice the source tab. This tab allows you to view the test source. Selenium tests are saved as HTML files and can be exported to multiple server-side languages PHP, Ruby, Java, C#, Perl, and Python.

Creating a new Selenium Test

In this example, we will be testing both an Ext JS and Ext GWT form and it’s fields. First, let us take a look at the example code we will be testing. You can find the source code here:

Test Source Code (Ext JS, Ext GWT)
Test URLs (Ext JS, Ext GWT)
Selenium Tests (Ext JS, Ext GWT)

Rather than creating a test from scratch, we will load an existing test file (listed above). Download this either the Ext JS or Ext GWT file to your file system. Then open the test in the Selenium IDE by selecting File / Open. Once loaded, Selenium IDE should look this this:

Notice the list of commands. Take a look at each command to get a feel of what the test is doing. If you opened Selenium IDE as seperate window, close it. Then open Selenium IDE using View / Sidebar / Selenium IDE. This will place selenium in the sidebar making it easier to run and monitor tests.

You can execute the test by clicking the first icon with the green arrow in the tool bar. Notice that you can control execution speed, use break points, execute individual commands, etc. After running your test, you screen should look like this:

Notice the form fields have been filled out. Examine the commands closely to see what actions were taken and what assertions where made. This test only touches the surface of things you can accomplish with commands. Note: When running the Ext JS test file, the radios and check boxes will not show the checked state, however, the true state will be correct, and the tests will run successfully.

Selenium Locators

Many Selenium commands require a locator to be specified. A locator is a way to identify an element in the page (the DOM to be specific). There are various types of locators including id, name, dom, xpath, link, and css. For this tutorial, XPath expressions where used. XPath expressions provide a powerful mechanism to identify elements. Example expressions look like this:

//input[@name='name']

//input[@name='name' and contains(@class, 'x-form-invalid')]

//input[@name='company']/following-sibling::img

//div[@id='Apple']

//div[@class='x-combo-list-item'][3]

Here are a few examples using CSS selectors:

css=html:root

css=div#structuralPseudo :nth-last-child(2)

css=a[class~="class2"]

Executing Tests with Selenium Remote Control (RC)

Selenium IDE provides a great way to create your tests and execute them in Firefox. Tests can only be run by manually opening Firefox and executing tests. What if you want to run you want to automate your tests and run them in other browsers? This is where Selenium Remote Control comes into play.

From the Selenium website: “Selenium Remote Control (RC) is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. Selenium RC comes in two parts. 1. A server which automatically launches and kills browsers, and acts as a HTTP proxy for web requests from them. 2. Client libraries for your favorite computer language.”

Download Selenium RC

In addition to Selenium IDE, Selenium RC must be downloaded and can be found here. After downloading, unzip the file to your file system.

Starting the Server

The first step in using Selenium is to start the server. The server is responsible for executing your tests. The server will open browser instances, run tests, and close browsers. The server is written in Java and can be started by executing this command:

java -jar selenium-server.jar

The command should be executed from the folder where the selenium-server.jar is located.

To run your tests in Java, you must reference the Java client library. See selenium-java-client-driver.jar in the Selenium RC download.

Creating a test in Java

Selenium RC supports various languages, we will focus on Java. Rather than creating the Java test from scratch, Selenium IDE can be used to create the base Java code needed to create the test. From Selenium IDE, select the source tab, then choose Options / Format / Java. You will see the test is converted form HTML to Java. You can then copy and past the Java code to be used in your Java test. You can use the same steps to create code in other languages such as PHP and Ruby.

Here is the Java code that was created using the template code from Selenium IDE:

public class SeleniumTestCase extends SeleneseTestCase  {
 
  private Selenium selenium;
 
  public void setUp() {
    selenium = new DefaultSelenium("localhost", 4444, "*iexplore", "http://extjs.com");
    selenium.start();
  }
 
  public void testForm() {
    selenium.open("http://extjs.com/playpen/gxt/selenium/");
    pause(500);
    selenium.type("//input[@name='name']", "John");
    selenium.fireEvent("//input[@name='name']", "blur");
    assertTrue(selenium.isElementPresent("//input[@name='name' and contains(@class, 'x-form-invalid')]"));
    selenium.type("//input[@name='name']", "Darrell");
    selenium.fireEvent("//input[@name='name']", "blur");
    assertFalse(selenium.isElementPresent("//input[@name='name' and contains(@class, 'x-form-invalid')]"));
    selenium.type("//input[@name='email']", "darrell@foo.com");
    assertEquals("Darrell", selenium.getValue("//input[@name='name']"));
    assertEquals("darrell@foo.com", selenium.getValue("//input[@name='email']"));
    selenium.focus("//input[@name='company']");
    selenium.click("//input[@name='company']/following-sibling::img");
    assertEquals("43", selenium.getXpathCount("//div[@class='x-combo-list-item']"));
    selenium.click("//div[@id='Apple']");
    assertEquals("Apple Inc.", selenium.getValue("//input[@name='company']"));
    selenium.click("//input[@name='birthday']/following-sibling::img");
    selenium.click("//button[contains(text(), \"Today\")]");
    assertTrue(selenium.getValue("//input[@name='birthday']").matches("^[\\s\\S]*$"));
    selenium.check("//input[@value='Classical']");
    assertEquals("on", selenium.getValue("//input[@value='Classical']"));
    selenium.check("//input[@value='Blue']");
    assertEquals("on", selenium.getValue("//input[@value='Blue']"));
  }
 
  public void tearDown() {
    selenium.stop();
  }
 
}

Notice the use of “pause” after opening the application. This is needed to allow the GWT application to load. Other than that, the test code is a direct paste from the code generated in Selenium IDE. Notice that the test is using “*explorer” to execute the test. Firefox, Opera, Safari, Chrome are also supported. Keep in mind that the browser must be installed on the same maching where the Selnium server is running.

The new JUnit test can be executed just like any other JUnit test. The test can be executed with Eclipse.

Selenium Grid

Although it is not used in the tutorial, Selenium Grid is worth mentioning. From the website: “Based on the excellent Selenium web testing tool, Selenium Grid allows you to run multiple instances of Selenium Remote Control in parallel. Even better, it makes all these Selenium Remote Controls appear as a single one, so your tests do not have to worry about the actual infrastructure. Selenium Grid cuts down on the time required to run a Selenium test suite to a fraction of the time that a single instance of Selenium instance would take to run.”

Summary

The tutorial demonstrated how load and run tests within Selenium IDE. The test code was ported to Java where it was run using Selenium Remote Control in a JUnit. This tutorial demonstrated the major moving parts involved in Selenium tests. It is recommended to take a look at the Selenium documentation and tutorials for more information.

Many thanks go out to the Selenium Team. There is a slight learning curve getting familiar with the product but I found it straightforward. The time was well spent as it opens up a new approach to testing web applications.

Tags: Ext GWT, Selenium
Posted in Ext GWT, Ext JS, Tutorials | 56 Comments »

Ext GWT Grid Performance Improvements

Monday, September 29th, 2008

The Ext GWT Grid component, which was introduced in 1.1, plays an important role in most applications. Because of this, it is important for Grid to perform as fast as possible, especially when rendering large amounts of data. For the upcoming 1.1.1 release we took a fine grained look at the code to identify any performance bottlenecks. Code was tested and analyzed in host mode as well as all supported browsers. After this research, a couple of key changes to the code resulted in much faster rendering times. The new code was so much faster that I thought it would be nice to share the results.

A new test page was setup to allow both the old code and new code to be executed and timed. The tests were conducted on 3 different machines, with multiple browsers. For each test, rendering times where measured for 200 and 400 row grids. Here are the results of the tests:

Browser	200 Old	200 New	Change	400 Old	400 New	Change
Dual Xeon 3.16GZ , 8GB Mem
Host Mode IE	344 ms	362 ms	95%	1562 ms	719 ms	217%
IE7	3200 ms	1470 ms	218%	20064 ms	2906 ms	690%
FF2	2469 ms	469 ms	526%	7218 ms	843 ms	856%
FF3	711 ms	264 ms	269%	3368 ms	585 ms	576%
Safari Windows	860 ms	172 ms	500%	2594 ms	344 ms	754%
Mac Duo Core 2.5GZ, 2GB Mem
Safari	1343 ms	287 ms	468%	3719 ms	565 ms	658%
FF3	1276 ms	419 ms	305%	3056 ms	818 ms	374%
Intel Duo Core 2.4GZ, 3.5GB Mem
IE7	12716 ms	1855 ms	685%	37171 ms	3691 ms	1007%
FF2	5174 ms	828 ms	625%	18274 ms	1805 ms	1012%
Safari	1787 ms	327 ms	546%	5293 ms	654 ms	809%

As you can see, rendering times have been significantly reduced. You can run the test page yourself to see the improvements first hand.

The new grid code is available to SVN users, and will be included in our next release.

Posted in Ext GWT | 35 Comments »

Ext GWT 1.1 Released

Thursday, September 18th, 2008

We are pleased to announce the release of Ext GWT 1.1. This release is packed full of new features and components. Ext GWT 1.1 is a recommended upgrade for all Ext GWT 1.0 users.

New Features

Although a minor release, Ext GWT introduces many exciting new features to help build your rich internet application. With this release, Ext GWT shortens the feature set gap between Ext JS.

Grid

Ext 1.1 introduces the Grid component which includes the same feature set as the Ext JS Grid. Grids include an improved rendering model for improved rendering times.

Grid Plugins

Ext GWT 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. Included in this release are plugins for expanding rows, numbered rows, and check box rows.

Grid Grouping & Totaling

The new Grid supports both grouping and totaling. Grouping is implemented by using the new GroupingStore which adds the ability to group the store’s data. The new Live Summary example demonstrates an editable grid with dynamic summary calculations.

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.

ComboBox Additions

Auto complete and auto fill behavior has been added to ComboBox. Auto complete queries the data store as the user types into the field. Both local, and remote (AJAX) searches are supported. With auto fill, as the user types, the first matching selecting is appended to the current entry in the text field.

Portals

Portal is a custom layout container that uses a multi-column layout on contains Portlets. Each Porlet can be drag and dropped to change order or move to another column. Each Portlet can contain any content and supports icons to expand / collapse, close, etc.

Web Desktop

The desktop mimics the behavior of the operating system look at feel. It is now possible to create multi-window applications with support for a task bar and start menu. Windows support normal, maximize, and minimize states. The start menu is a custom menu that allows new menu items. In addition, there is support for a “task” area for adding additional items.

Slate Theme

The popular Slate Theme is included with this release. Many thanks to J.C. Bize for donating the theme to Ext JS.

Java Bean Support with BeanModel

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. More information can be found in this blog post.

Notable New Examples

Now included in Ext GWT 1.1, is a new Samples Demo application. Unlike the Explorer Demo, each of the examples in the demo can be opened individually, with each example having its own HTML file. The same example code and data model is shared between both demo applications.

Forum Search

Forum search is an example of a combo box, using a custom XTemplate, and remote data. The data can be paged with built-in support for a paging toolbar.

Image Chooser

This example shows loading a ListView in a Window. Each item has a linked details view, and the ListView supports custom sorting and filtering.

Anchor Layout Dialog

This example shows a Dialog using an AnchorLayout to “anchor” the form fields to the dialog dimensions. When resized, the fields will adjust their size to match the dimensions of the dialog.

See the 1.1 release notes for more information on this release.

We are very happy with this release and hope that it will provide a lot of value to our community. We have begun work on 1.2 so you can expect more great features included drag and drop support in the near future.

Download Ext GWT 1.1

Posted in Ext GWT | 22 Comments »

Ext GWT: Now with Portal and Web Desktop

Tuesday, August 26th, 2008

Ext GWT 1.1 is right around the corner and incorporates the popular Portal and Web Desktop interface.

WebDesktop

Portals

Portal is a custom layout container that uses a multi-column layout on contains Portlets. Each Portlet can be drag and dropped to change order or move to another column. Each Portlet can contain any content and supports icons to expand / collapse, close, etc.

It could not be much easier to create content for a Portal:

    // create a portal
    Portal portal = new Portal(3);
    portal.setBorders(true);
    portal.setStyleAttribute("backgroundColor", "white");
 
    // set colum widts as pixels or percentages
    portal.setColumnWidth(0, .33);
    portal.setColumnWidth(1, .33);
    portal.setColumnWidth(2, .33);
 
    // create and add a potal to a column
    Portlet portlet = new Portlet();
    portlet.setHeading("Grid in a Portlet");
    portlet.setCollapsible(true);
    portal.add(portlet, 0);

Preview Now Available

There have been many new additions to the 1.1 release including all items from our Roadmap:

Anyone interested in a sneak peak can download the build here. 1.1 final will be released soon and work has already begun on 1.2. Drag and drop is the first item on the agenda for 1.2

Posted in Ext GWT, Ext JS | 27 Comments »

Preview: Ext GWT Grid, Grid Plugins, and EditableGrid

Wednesday, July 23rd, 2008

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

Next Up

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

Posted in Ext GWT | 19 Comments »

Preview: Java Bean support with Ext GWT

Monday, July 14th, 2008

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.

Posted in Ext GWT, Tutorials | 19 Comments »

Ext GWT v1.0 Released

Monday, July 7th, 2008

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.

Mail Demo

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.

ColumnForm

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.

New API

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.

Help Center

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.

UML

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.

Posted in Ext GWT, News | 18 Comments »

Ext GWT v1.0 Beta 4 Released

Monday, June 2nd, 2008

Ext JS is pleased to announce the Ext GWT 1.0 beta4 release. This release includes numerous enhancements and bug fixes since the beta3 release and is a recommended upgrade for those using beta 3. For first time users of Ext GWT, the new Help Center includes new articles to get you setup up and running your first Ext GWT application in GWT.

GWT RC1

GWT RC 1 was released recently. Ext GWT beta 4 is compiled and tested using RC1. Ext GWT utilizes the new Animation classes, as well as the new DOM API.

Performance

Many classes have been refactored to enhance their performance. Layouts in particular will receive a huge performance boost by upgrading. Initial rendering times are quicker and the new layout code reacts quicker to window resizing. Other performance improvements were made to TabPanel and Table.

Advanced Form Layouts

With beta 4, it is possible to create multi-column forms and to also embed child containers such as TabPanel. These layouts are supported by both AnchorLayout, and the new ColumnLayout. A new Column Form and TabPanel Form have been added to the Explorer Demo.

ColumnForm

Mail Demo

A new mail application has been developed as an Ext GWT reference application. This app can be found in the samples directory of your download and will be updated with each release to illustrate best practices in an Ext GWT application. The code demonstrates:

Data loading with GWT RPC
MVC
Custom components
Stores and Binders

Mail Demo

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.

New API

Documentation

A new Help Center is now available and will serve as the repository for GXT documentation. Beta 4 adds a significant amount of new documentation including a new Eclipse Help Plugin. New articles and tutorials have been added. This includes:

Project Setup Guide
Building from SVN Guild
Component Reference
Data Loading Reference
LayoutContainer Reference
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.

Help Center

UML

Download

To download the beta 4 build 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 beta 4 samples, please visit the Ext GWT overview. To see beta 4 in action, take a look at the Explorer Demo or the Mail Demo.

Posted in Ext GWT, Ext JS | 40 Comments »

Ext GWT v1.0 Beta 2 Released

Tuesday, April 29th, 2008

Ext JS is pleased to announce the Ext GWT 1.0 beta2 release. This release includes numerous enhancements and bug fixes since the beta1 release and is a recommended upgrade for those using beta 1.

What’s New

Getters / Setters
Based on community feedback, getters and setters where added to replace public fields for component configuration. This should be more in line with Java best practices and the JavaBean standard.

HtmlContainer
Beta 2 includes a new container that can be built from static markup, a remote URL, an existing element, or element id. Child components can then be inserted into the container using CSS selectors to control the insert location (for example: panel.add(button, “td:first-child”;). This allows easy use of complex HTML layouts designed outside of GWT.

SelectionModel
The selection model code was refactored for Table, Tree, and List. SelectionModel is a new interface that all selection models implement.

SelectionService
The new selection service allows selection providers (all viewers for example) to register with the service. Any listeners are notified of any selections by a registered provider. In the Explorer Demo, the applications navigation tree, navigation list, and main tab panel share selections with each other using the new service. This allows all 3 components to stay “synchronized” no matter where and how selections are made.

Themes
In beta 2, there is a new Themes module which includes the Slate theme by J.C. Bize. Unlike with beta 1, it is only necessary to add ext-all.css to your host page html. Other style sheets are added dynamically based on the users current theme.

State
Restore and save state functionality has been added to component. StateManager now supports the serialization and deserialization of Map types using cookies. BorderLayout uses the new API to persist region sizes and collapse state across user sessions.

Events
New fine-grained event hierarchy. The event code has been updated and revised to support component level events. Also, a new template method has been added to component that allows subclasses to specify the type of component event created when a DOM event is received which stops the need to “translate” component events.
SelectionModel
Menu
The Menu and all MenuItems are now fully implemented. This includes sub menus, checkbox, radio, and date menu items.

Download

To download the beta 2 build or view the full release notes, please visit the Ext GWT download page. To find out more about Ext GWT and view the latest beta 2 samples, please visit the Ext GWT overview. To see beta 2 in action, take a look at the Explorer Demo.

Posted in Ext GWT | 15 Comments »

You are currently browsing the archives for the Ext GWT category.
Archives

Categories
- Adobe AIR (5)
- Applications (11)
- Community (20)
- Ext Core (2)
- Ext GWT (13)
- Ext JS (61)
- Ext Tips (3)
- Extensions (7)
- Google (4)
- Jaxer (1)
- News (12)
- Open Source (3)
- Services (3)
- Tutorials (5)