GXT 3 ContentPanel Changes

Friday, March 25th, 2011

We have been busy working on Ext GWT 3. I wanted take some time to discuss some of the changes we have made to ContentPanel which reflect design changes in Ext GWT 3.

UIBinder

Rather than manually creating the DOM within Java code, as GXT 2 does, we have moved the HTML representing the panel into a UIBinder XML file. This has many advantages.

HTML is separated from Java code
DOM elements are automatically “bound” to the widget
Better performance over manually creating DOM elements

We are also working on changes that will allow you to wire up Ext GWT widgets, containers, and layouts, within UIBinder. I will post some code samples in a future post.

CssResource

We are using CssResource to define constants that our widgets use. For example, ContentPanel has a primary style of ‘x-panel’. In addition there are several dependent style names used within ContentPanel. With the current design, the base class and dependent class names all are defined using constants in CssResource. See the panel.css source code below. You will find that there are just @def entries and no actual CSS. The libraries actual CSS is still contained in external css files.

Customizations

One of the goals of the current design was to allow for customizations. The design allows developers to replace existing GXT styles and UIBinder implementations both globally and per widget instance. Take a look at the code, and let us know if you have any comments.

ContentPanel.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

  <ui:with type="com.sencha.gxt.ui.client.theme.ContentPanelStyle" field="css"></ui:with>

  <div class="{css.base}">
    <div ui:field="bwrap" class="{css.base}-{css.bodyWrap}" role="presentation">
      <div ui:field="tbar" class="{css.base}-{css.top}" role="presentation"></div>
      <div ui:field="body" class="{css.base}-{css.body}" role="presentation"></div>
      <div ui:field="bbar" class="{css.base}-{css.bottom}" role="presentation"></div>
      <div ui:field="foot" class="{css.base}-{css.footer}" role="presentation"></div>
    </div>
  </div>

</ui:UiBinder>

FramedContentPanel.ui.xml

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

  <ui:with type="com.sencha.gxt.ui.client.theme.ContentPanelStyle" field="css"></ui:with>

  <div class="{css.base}">
    <div class="{css.base}-tl">
      <div class="{css.base}-tr">
        <div ui:field="tc" class="{css.base}-tc"></div>
      </div>
    </div>
    <div ui:field="bwrap" class="{css.base}-{css.bodyWrap}">
      <div class="{css.base}-ml">
        <div class="{css.base}-mr">
          <div class="{css.base}-mc">
            <div ui:field="{css.base}-{css.top}" role="presentation"></div>
            <div ui:field="body" class="{css.base}-{css.body}" role="presentation"></div>
            <div ui:field="bbar" class="{css.base}-{css.bottom}" role="presentation"></div>
            <div ui:field="foot" class="{css.base}-{css.footer}" role="presentation"></div>
          </div>
        </div>
      </div>
      <div class="{css.base}-bl">
        <div class="{css.base}-br">
          <div ui:field="bc" class="{css.base}-bc"></div>
        </div>
      </div>
    </div>
  </div>

</ui:UiBinder>

XResources.java

public interface XResources extends ClientBundle {

  @Source("constants.css")
  BaseStyle base();

  @Source({"constants.css","button.css"})
  ButtonStyle button();

  @Source({"constants.css", "panel.css"})
  ContentPanelStyle panel();

  @Source({"constants.css", "panel.css", "window.css"})
  WindowStyle window();

  @Source({"constants.css", "panel.css", "tip.css"})
  TipStyle tip();

  @Source("field.css")
  FieldStyle field();

}

ContentPanelStyle.java

public interface ContentPanelStyle extends BaseStyle {

  String base();

  String bodyWrap();

  String top();
  
  String body();

  String bottom();

  String footer();

  String collapse();
  
  String noFooter();
  
  String noHeader();
  
  String noBorder();

}

panel.css

@def base x-panel;
@def bodyWrap bwrap;
@def top tbar;
@def body body;
@def bottom bbar;
@def footer footer;
@def collapse collapse;
@def noHeader noheader;
@def noFooter nofooter;
@def noBorder noborder;

ContentPanel.java

  interface ContentPanelUiBinder extends UiBinder<DivElement, ContentPanel> {
  }

  private static ContentPanelUiBinder uiBinder = GWT.create(ContentPanelUiBinder.class);

  @UiField
  protected Element tbar;

  @UiField
  protected Element bwrap;

  @UiField
  protected Element bbar;

  @UiField
  protected Element foot;

  @UiField
  protected Element body;

  @UiField(provided = true)
  protected ContentPanelStyle css;

  /**
   * Template method that can be overridden by subclasses.
   * 
   * @return the panel style
   */
  protected ContentPanelStyle getContentPanelStyle() {
    return GXT.getResources().panel();
  }

  protected void initBinder() {
    css = getContentPanelStyle();
    setElement(uiBinder.createAndBindUi(this));
  }

  protected void afterCollapse() {
    addStyleDependentName(css.collapse());
  }

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.

Tagged cssresource, ext gwt, gwt, gxt, uibinder

11 Comments

Mar 29, 2011

Jorg Janke

Hi Darrell,
looks great. Have my stuff working using “plain” MVP, Request Factory and UIBinder. Can’t wait for GXT 3.0 to make it look nice too.
Cheers,
Jorg

Reply
Apr 2, 2011

Isak Büyük

Hi Darrel,

When do you publish GXT 3.0?

Bye
Isak

Reply
Apr 2, 2011

Travis Camechis

Can you tell me what the plans are for Cell widgets within GXT 3.0? It looks like this release of GXT is going to move inline with what GWT is doing which is great.

Reply
Apr 4, 2011

Darrell Meyer

Iask – We plan to have 3 put into SVN in a few weeks and then have the first development preview towards the end of the month.

Travis – Could you be a little more specific in what you are asking in regards to cell widgets in GXT?

Reply
Apr 4, 2011

Travis Camechis

Basically will GXT 3 incorporate the use of Cell Widgets at all? I believe GWT is moving all of there stuff to Cell widgets eventually.

Reply
Apr 22, 2011

Daily del.icio.us for March 26th through March 29th — Vinny Carpenter's blog

[...] according to Forrester. However, only 2 percent will support employees who bring their own PC.GXT 3 ContentPanel Changes | Darrell Meyer’s Blog – We have been busy working on Ext GWT 3. I wanted take some time to discuss some of the [...]

Reply
Apr 23, 2011

Tony BenBrahim

Is ContentPanel really going away? Please keep in mind some of us have very large applications and we will not make the effort to port 50K+ lines.
In addition, many of your customers have large frameworks and supporting libraries around Gxt, that if they break, will keep them from starting new applications with 3.0.
What it means in the end is customers stuck on 2.x and lost support revenue when 2.x stops being supported.

Reply
- Apr 23, 2011
  
  Darrell Meyer
  
  Travis, 3.0 is using GWT Cells where appropriate.
  
  Tony, ContentPanel is not going anywhere in 3. This post was just about the new design.
  
  Reply
May 17, 2011

Anna Ratcliffe

Hi, the changes look great, but how easy will an upgrade be? I suppose 3.0 will not be compatible to 2.x …

Reply
- May 17, 2011
  
  Darrell Meyer
  
  The upgrade should be straightforward but will require some refactoring of your application. We will provide a migration guide to help the upgrade process. 3.0 will not be backwards compatible with 2.X.
  
  Reply
  - May 18, 2011
    
    Anna Ratcliffe
    
    Straightforward sounds good Any idea when the migration guide might be available? (And GXT 3.0, come to that.?…)
    
    Reply