Sencha Inc. | HTML5 Apps

Blog

Ext GWT 3.0 Developer Preview 2

July 08, 2011 | Darrell Meyer

Ext GWT 3.0 Developer Preview 2 It has been a few weeks since the release of the first Developer Preview of Ext GWT 3 and we’ve received a lot of positive feedback on the changes so far, especially on the Appearance pattern and the new XTemplate.

Today we are excited to announce Ext GWT 3 Developer Preview 2. This release features the long awaited UiBinder support, new container and layout architecture, and a raft of bug fixes and general improvements.

Download Ext GWT 3.0 Developer Preview 2

Ext GWT 3.0 requires at least GWT 2.3.0 to run, in order to take advantage of SafeHtml, UiBinder, AutoBeans, as well as other recent features. Following GWT’s deprecation of Java 1.5, Ext GWT also requires at least Java 1.6 to compile. One other book-keeping change to note: we have changed the package structure from com.extjs.gxt to com.sencha.gxt. In addition to reflecting the change the company has undergone in the last year, this may also aid efforts to update projects to use the new features in 3.0, as both old and new JARs can co-exist on the same classpath.

New Container and Layout Architecture

Before 3.0, Ext GWT had a generic container class that supported the various layouts. This design could cause confusion to developers if they neglected to specify a layout or if they did not understand how to choose a layout and its corresponding layout data.

We often received questions about these:

  • Which container to use?
  • How to set the layout?
  • How to choose the correct layout?
  • How to change a layout after one had been set?
  • What is a layout data?
  • Which layout data to set for a given layout?

To make it simpler to work with our library, the layouts are now built into the container - it’s no longer required to set a layout manually. This also means there’s no way for you to forget to set a layout as the layout is handled internally by the containers. For example, we now have RowLayoutContainer, BorderLayoutContainer, HBoxLayoutContainer, and so on. You add your child widgets directly to these containers using a strongly typed API.

Ext GWT 3.0 Layout Container Hierarchy

Also, all our new containers are completely typesafe. This means that they have add / insert methods that accept their matching layout data. This also means that only containers that could make use of the add / insert methods will have them. For example, in the BorderLayoutContainer, the order in which you add the child widgets is completely irrelevant; you directly set them to the correct region using typed methods. Specifically, BorderLayoutContainer has typed methods to set the north, east, south, west, and center widget which ensures the proper usage.

 
    BorderLayoutContainer con = new BorderLayoutContainer();
    con.setPixelSize(800, 400);
 
    ContentPanel north = new ContentPanel();
    ContentPanel west = new ContentPanel();
    ContentPanel center = new ContentPanel();
    center.setHeading("BorderLayout Example");
 
    ContentPanel east = new ContentPanel();
    ContentPanel south = new ContentPanel();
 
    BorderLayoutData northData = new BorderLayoutData(100);
    northData.setMargins(new Margins(0, 0, 5, 0));
 
    BorderLayoutData westData = new BorderLayoutData(150);
    westData.setMargins(new Margins(0, 5, 0, 0));
 
    MarginData centerData = new MarginData();
 
    BorderLayoutData eastData = new BorderLayoutData(150);
    eastData.setMargins(new Margins(0, 0, 0, 5));
 
    BorderLayoutData southData = new BorderLayoutData( 100);
    southData.setMargins(new Margins(5, 0, 0, 0));
 
    con.setNorthWidget(north, northData);
    con.setWestWidget(west, westData);
    con.setCenterWidget(center, centerData);
    con.setEastWidget(east, eastData);
    con.setSouthWidget(south, southData);
 

However, with RowLayoutContainer, ordering the widgets makes sense. Here, the container has add / insert methods.

 
    ContentPanel panel = new ContentPanel(true);
    panel.setHeading("RowLayout Example");
    panel.setPixelSize(400, 300);
    panel.setCollapsible(true);
 
    RowLayoutContainer c = new RowLayoutContainer();
    panel.setWidget(c);
 
    Text label1 = new Text("Test Label 1");
    label1.setBorders(true);
    label1.addStyleName("pad-text white-bg");
 
    Text label2 = new Text("Test Label 2");
    label2.setBorders(true);
    label2.addStyleName("pad-text white-bg");
 
    Text label3 = new Text("Test Label 3");
    label3.setBorders(true);
    label3.addStyleName("pad-text white-bg");
 
    c.add(label2, new RowLayoutData(1, 1, new Margins(0, 4, 0, 4)));
    c.add(label3, new RowLayoutData(1, -1, new Margins(4)));
    c.insert(label1, 0, new RowLayoutData(1, -1, new Margins(4)));
 

These changes should make it simpler to use and learn Ext GWT 3. We’re excited about these changes and look forward to your feedback on them.

UiBinder Support

A key feature of Ext GWT 3.0 is UiBinder support. It is now possible to use and configure Ext GWT layout containers within GWT UiBinder XML files. Today, the wait is over and we’re adding UiBinder support to Ext GWT 3 Developer Preview 2. At this time, GWT does not support customer parsers for custom elements or attributes, so we are limited to using the @UiChild annotation on our typed setters. One limitation with this approach is that layout data models cannot be created within the XML -- instead, they must be created within the Java file and marked as provided.

 
public class BorderLayoutUiBinderExample implements IsWidget, EntryPoint {
 
 interface MyUiBinder extends UiBinder<Component, BorderLayoutUiBinderExample> {
 }
 
 private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
 
 @UiField(provided=true) BorderLayoutData northData  = new BorderLayoutData(100);
 @UiField(provided=true) BorderLayoutData westData   = new BorderLayoutData(150);
 @UiField(provided=true) MarginData centerData = new MarginData();
 @UiField(provided=true) BorderLayoutData eastData   = new BorderLayoutData(150);  
 @UiField(provided=true) BorderLayoutData southData  = new BorderLayoutData(100);
 
 
 public Widget asWidget() {
    northData.setMargins(new Margins(0, 0, 5, 0));
    westData.setMargins(new Margins(0, 5, 0, 0));
    eastData.setMargins(new Margins(0, 0, 0, 5));
    southData.setMargins(new Margins(5, 0, 0, 0));
 
    return uiBinder.createAndBindUi(this);
 }
 
 public void onModuleLoad() {
    RootPanel.get().add(asWidget());
 }
 
}
 
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:border="urn:import:com.sencha.gxt.ui.client.widget.container.border"
 xmlns:gxt="urn:import:com.sencha.gxt.ui.client.widget">
 
 <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="northData" />
 <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="westData" />
 <ui:with type="com.sencha.gxt.ui.client.widget.container.common.MarginData" field="centerData" />
 <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="eastData" />
 <ui:with type="com.sencha.gxt.ui.client.widget.container.border.BorderLayoutContainer.BorderLayoutData" field="southData" />
 
 <border:BorderLayoutContainer pixelSize="800, 400">
    <border:north layoutData="{northData}">
         <gxt:ContentPanel />
    </border:north>
    <border:west layoutData="{westData}">
         <gxt:ContentPanel />
    </border:west>
    <border:center layoutData="{centerData}">
         <gxt:ContentPanel heading="BorderLayout UiBinder Example" />
    </border:center>
    <border:east layoutData="{eastData}">
         <gxt:ContentPanel />
    </border:east>
    <border:south layoutData="{southData}">
         <gxt:ContentPanel />
    </border:south>
 </border:BorderLayoutContainer>
 
</ui:UiBinder>

Although this works, it requires that layout information be kept in Java code instead of in the UiBinder xml where it belongs. To help remedy this, we’ve come up with a few ways GWT might support complex layout models to be declared in UiBinder xml -- in PR 2, we’ve selected an option that makes configuring layout models like setting up css style attributes. This extension is packaged as a separate JAR for now, so that it is available right away, but isn’t part of the main build, and can be removed if GWT provides real support for complex layouts.

When including this additional JAR, you can configure the layout data directly in the UiBinder templates. This makes the template XML files very clean, and you can create complex layouts without writing any lines of Java code. The only thing you have to do is nest the containers in your XML file. Keep in mind that this is just a proposed way to solve this, and we hope to continue working with the GWT team to come up with a permanent solution to this.

 
public class BorderLayoutUiBinderDynamicAttributeExample implements IsWidget, EntryPoint {
 
 interface MyUiBinder extends UiBinder<Component, BorderLayoutUiBinderDynamicAttributeExample> {
 }
 
 private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
 
 public Widget asWidget() {
    return uiBinder.createAndBindUi(this);
 }
 
 public void onModuleLoad() {
    RootPanel.get().add(asWidget());
 }
 
}
 
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:border="urn:import:com.sencha.gxt.ui.client.widget.container.border"
 xmlns:gxt="urn:import:com.sencha.gxt.ui.client.widget">
 
 
 <border:BorderLayoutContainer pixelSize="800, 400">
    <border:north layoutData="size:100; margins: 0 0 5 0">
         <gxt:ContentPanel />
    </border:north>
    <border:west layoutData="size:150; margins: 0 5 0 0">
         <gxt:ContentPanel />
    </border:west>
    <border:center layoutData="0">
         <gxt:ContentPanel heading="BorderLayout UiBinder Example" />
    </border:center>
    <border:east layoutData="size:150; margins: 0 0 0 5">
         <gxt:ContentPanel />
    </border:east>
    <border:south layoutData="size:100; margins: 5 0 0 0">
         <gxt:ContentPanel />
    </border:south>
 </border:BorderLayoutContainer>
 
</ui:UiBinder>

To use this style of setting up layout models in uibinder, include the uibinder-bridge.jar and gxt-uibinder.jar into your project. If using Maven, you can just add a dependency on gxt-uibinder.jar.

Charts

We have added several new chart types and features to our charting package since the last preview release. New charts include Stacked Bar Chart, Grouped Bar Chart, Custom Pie Chart, and Mixed Chart. Also, all charts now support animations and Legend. The Legend is the first chart element to support mouse events. Clicking on a legend item will hide and show the series element and in Area and Pie charts rolling over a legend item will highlight the series element. The next release will have interactive series as well.

Stacked Bar Chart Pie Chart Line Chart

Preview Notes & Gotchas

Take a look at the Explorer Demo to see the latest code in action. Since it’s just a preview, not all example are working 100%. In addition, the current code has not been fully tested in all browsers and operating systems, especially in Internet Explorer.

Summary

We hope you will like these changes and are looking forward to the further changes coming in the coming weeks. As a reminder, this is a developer preview and should not be used for production environments, as the APIs may still change between now and general availability. We recommend using these previews to get familiar with the new capabilities of Ext GWT 3.0 and to preview how you may use Ext GWT in your future projects. As always, we thank you in advance for the valuable feedback you provide during our development process.

Download Ext GWT 3.0 Developer Preview 2

There are 14 responses. Add yours.

Alan Antonio

3 years ago

Trying out now!!

Jeff

3 years ago

This stuff looks good, but I’m disappointed that the new grids aren’t in here. I had hoped they would be. Can you comment on what features the grids will have at release?

The features I’m interested in are:

Drag column reordering
Multiple column sort
Row Grouping
Column Grouping
show/hide columns

Anton Alexeyev

3 years ago

I hope MenuBar and Portal will be shipped with next Release??

Also in wondering are you going to implement constraining Windows like http://dev.sencha.com/deploy/ext-4.0.2a/examples/window/window.html  this??

And Tabs scroller like here: http://dev.sencha.com/deploy/ext-4.0.2a/examples/tabs/tab-scroller-menu.html ??

Anton Alexeyev

3 years ago

What is approximate release date??

Ribeiro

3 years ago

The features I’m interested in are:

Drag column reordering
Multiple column sort
Row Grouping
Column Grouping
show/hide columns

iran

3 years ago

Resources importanticimos supported!

Drag column reordering
Multiple column sort
Row Grouping
Column Grouping
show / hide columns

Marcos V.

3 years ago

I do have to agree with colleagues above, what else it is lacking in GWT are the features of Grids poor, had to have at least the functionality of the Grid extjs4.0, oh yes we embrace the GWT with all its potential .
Please improve greatly and Grids.
Oh yes we will have a complete product and redolent without Grids, root for them to do a great job this time.

Hansjörg Oppermann

3 years ago

When will this Developer Preview deploy to the maven repository?

Cosmo

3 years ago

Is GWT 3 backward-compatible in the layout codes? is the old style of adding a component together with the appropriate layout data still supported, and is the old style of layout considered deprecated or the new layout methods runs parallel with the old layout methods? it would be a really daunting task if we will need to convert all old layout codes to new layout codes…

raivis

3 years ago

What can be used instead of AbsoloteLayout ?

ricardo

3 years ago

What is approximate release date??

guest

3 years ago

Without proper documentation, maven dependencies etc.. dont bother to use this.

Mathias

3 years ago

As asked before, can you deploy the version to the maven repository?

dotcompany

3 years ago

does not like having to wait that long for updates from gwt everything that is proposed is very time consuming, I am seriously penssando to change my plans for the http://demo.vaadin.com/sampler #

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.