@Override protected void onRender(Element parent, int index) { super.onRender(parent, index); final Stock stock = TestData.getStocks().get(0); HorizontalPanel hp = new HorizontalPanel(); hp.setSpacing(10); StringBuffer sb = new StringBuffer(); sb.append("<div class=text style='line-height: 1.5em'>"); sb.append("<b>Name:</b> {name}<br>"); sb.append("<b>Symbol:</b> {symbol}<br>"); sb.append("<b>Last:</b> {last}<br>"); sb.append("<b>Change:</b> {[new Number(values.change).toFixed(2)]}<br>"); sb.append("<b>Updated:</b> {date:date(\"MM/dd/y\")}<br>"); sb.append("</div>"); final XTemplate template = XTemplate.create(sb.toString()); final HTML html = new HTML(); html.setWidth("160px"); template.overwrite(html.getElement(), Util.getJsObject(stock)); hp.add(html); // update template when model changes stock.addChangeListener( new ChangeListener() { public void modelChanged(ChangeEvent event) { template.overwrite(html.getElement(), Util.getJsObject(stock)); } }); FormPanel panel = new FormPanel(); panel.setHeaderVisible(false); panel.setWidth(350); TextField<String> name = new TextField<String>(); name.setName("nameField"); name.setFieldLabel("Name"); panel.add(name); TextField<String> symbol = new TextField<String>(); symbol.setName("symbol"); symbol.setFieldLabel("Symbol"); panel.add(symbol); NumberField open = new NumberField(); open.setName("last"); open.setFieldLabel("Last"); panel.add(open); NumberField change = new NumberField(); change.setName("change"); change.setFieldLabel("Change"); change.setFormat(NumberFormat.getDecimalFormat()); panel.add(change); DateField last = new DateField(); last.setName("date"); last.setFieldLabel("Updated"); panel.add(last); SimpleComboBox<String> scb = new SimpleComboBox<String>(); for (Stock s : TestData.getStocks()) { scb.add(s.getName()); } scb.setFieldLabel("Name"); scb.setForceSelection(true); scb.setTypeAhead(true); scb.setName("company"); scb.setTriggerAction(TriggerAction.ALL); panel.add(scb); hp.add(panel); FormBinding binding = new FormBinding(panel); // manually add bindings binding.addFieldBinding(new FieldBinding(name, "name")); binding.addFieldBinding(new FieldBinding(symbol, "symbol")); binding.addFieldBinding(new SimpleComboBoxFieldBinding(scb, "name")); // auto bind remaining fields, field name must match model property name binding.autoBind(); binding.bind(stock); add(hp); }