Template example (Ext GWT)

 

/*
 * Ext GWT - Ext for GWT
 * Copyright(c) 2007-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
 
 
package com.google.gwt.sample.hello.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.core.Template;
import com.extjs.gxt.ui.client.core.XTemplate;
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.util.Util;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

public class Hello implements EntryPoint {
  public void onModuleLoad() {
    RootPanel.get().add(new TemplateExample());
  }
}
class TemplateExample extends LayoutContainer {

  @Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    class Kid extends BaseModelData {
      public Kid(String name, int age) {
        set("name", name);
        set("age", age);
      }
    }

    final ModelData person = new BaseModelData();
    person.set("name", "Darrell Meyer");
    person.set("company", "Ext JS, LCC");
    person.set("product", "Ext GWT");
    person.set("location", "Washington, DC");

    List<Kid> kids = new ArrayList<Kid>();
    kids.add(new Kid("Alec", 4));
    kids.add(new Kid("Lia", 2));
    kids.add(new Kid("Andrew", 1));

    person.set("kids", kids);

    VerticalPanel vp = new VerticalPanel();
    vp.setSpacing(10);

    final ContentPanel panel = new ContentPanel();
    panel.setHeading("Basic Template");
    panel.setWidth(300);
    panel.setBodyStyleName("pad-text");

    ToolBar toolbar = new ToolBar();
    Button apply = new Button("Apply Template");
    apply.addSelectionListener(new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        Template template = new Template(getBasicTemplate());
        template.overwrite(panel.getBody().dom, Util.getJsObject(person));
      }
    });
    toolbar.add(apply);
    panel.setTopComponent(toolbar);

    final ContentPanel xpanel = new ContentPanel();
    xpanel.setHeading("XTemplate Test");
    xpanel.setWidth(300);
    xpanel.setBodyStyleName("pad-text");

    ToolBar toolBar = new ToolBar();
    toolBar.add(new Button("Apply Template", new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        XTemplate tpl = XTemplate.create(getTemplate());
        xpanel.removeAll();
        xpanel.addText(tpl.applyTemplate(Util.getJsObject(person, 3)));
        xpanel.layout();
      }
    }));
    xpanel.setTopComponent(toolBar);

    vp.add(panel);
    vp.add(xpanel);
    add(vp);
  }

  private native String getBasicTemplate() /*-{
    return ['<p>Name: {name}</p>',
    '<p>Company: {company}</p>',
    '<p>Location: {location}</p>'].join("");
  }-*/;

  private native String getTemplate() /*-{
    var html = [
    '<p>Name: {name}</p>',
    '<p>Company: {company}</p>',
    '<p>Location: {location}</p>',
    '<p>Kids:</p>',
    '<tpl for="kids" if="name==\'Darrell Meyer\'">',
    '<tpl if="age &gt; 1"><p>{#}. {parent.name}\'s kid - {name}</p></tpl>',
    '</tpl>'
    ];
    return html.join("");
  }-*/;

}

Ext-GWT.zip( 4,297 k)

1.	HTML Control With Style
2.	Output HTML with HTML control
3.	The HTMLFlow displays HTML in a free-form, flowable region (Smart GWT)
4.	HTMLPane displays standard HTML in a sizeable, scrollable pane (Smart GWT)
5.	Display different chunks of HTML (Smart GWT)
6.	Using HTMLFlow to hold large chunk of HTML (Smart GWT)
7.	Change CSS for HTMLFlow panel (Smart GWT)
8.	Combo with Templates and Ajax (Ext GWT)

Template example (Ext GWT) : HTML « GWT « Java

Related examples in the same category