public Canvas getViewPanel() {

    VLayout layout = new VLayout(15);
    layout.setWidth(650);
    layout.setAutoHeight();

    final ListGrid countryGrid = new ListGrid();
    countryGrid.setLeaveScrollbarGap(true);
    countryGrid.setCanFreezeFields(false);
    countryGrid.setCanGroupBy(false);
    countryGrid.setWidth100();
    countryGrid.setHeight(224);
    countryGrid.setDataSource(CountryXmlDS.getInstance());
    countryGrid.setAutoFetchData(true);

    // allow users to add formula and summary fields
    // accessible in the grid header context menu
    countryGrid.setCanAddFormulaFields(true);
    countryGrid.setCanAddSummaryFields(true);

    ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 50);
    countryCodeField.setAlign(Alignment.CENTER);
    countryCodeField.setType(ListGridFieldType.IMAGE);
    countryCodeField.setImageURLPrefix("flags/16/");
    countryCodeField.setImageURLSuffix(".png");
    countryCodeField.setCanSort(false);

    ListGridField nameField = new ListGridField("countryName", "Country");
    ListGridField capitalField = new ListGridField("capital", "Capital");

    ListGridField populationField = new ListGridField("population", "Population");
    populationField.setCellFormatter(
        new CellFormatter() {
          public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
            if (value == null) return null;
            try {
              NumberFormat nf = NumberFormat.getFormat("0,000");
              return nf.format(((Number) value).longValue());
            } catch (Exception e) {
              return value.toString();
            }
          }
        });

    ListGridField areaField = new ListGridField("area", "Area (km²)");
    areaField.setType(ListGridFieldType.INTEGER);
    areaField.setCellFormatter(
        new CellFormatter() {
          public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
            if (value == null) return null;
            String val = null;
            try {
              NumberFormat nf = NumberFormat.getFormat("0,000");
              val = nf.format(((Number) value).longValue());
            } catch (Exception e) {
              return value.toString();
            }
            return val + "km&sup2";
          }
        });
    countryGrid.setFields(countryCodeField, nameField, capitalField, populationField, areaField);

    ToolStripButton formulaButton =
        new ToolStripButton("Formula Builder", "crystal/oo/sc_insertformula.png");
    formulaButton.setAutoFit(true);
    formulaButton.addClickHandler(
        new ClickHandler() {
          public void onClick(ClickEvent event) {
            countryGrid.addFormulaField();
          }
        });

    ToolStripButton summaryBuilder =
        new ToolStripButton("Summary Builder", "crystal/16/apps/tooloptions.png");
    summaryBuilder.setAutoFit(true);
    summaryBuilder.addClickHandler(
        new ClickHandler() {
          public void onClick(ClickEvent event) {
            countryGrid.addSummaryField();
          }
        });

    ToolStripButton savePreference = new ToolStripButton("Persist State", "silk/database_gear.png");
    savePreference.setAutoFit(true);
    savePreference.addClickHandler(
        new ClickHandler() {
          public void onClick(ClickEvent event) {
            String viewState = countryGrid.getViewState();
            Offline.put("exampleState", viewState);
            SC.say("Preferences persisted.");
          }
        });

    // toolstrip to attach to the country grid
    ToolStrip countryGridToolStrip = new ToolStrip();
    countryGridToolStrip.setWidth100();
    countryGridToolStrip.addFill();
    countryGridToolStrip.addButton(formulaButton);
    countryGridToolStrip.addButton(summaryBuilder);
    countryGridToolStrip.addSeparator();
    countryGridToolStrip.addButton(savePreference);

    VLayout countryGridLayout = new VLayout(0);
    countryGridLayout.setWidth(650);
    countryGridLayout.addMember(countryGridToolStrip);
    countryGridLayout.addMember(countryGrid);
    layout.addMember(countryGridLayout);

    final String previouslySavedState = (String) Offline.get("exampleState");
    if (previouslySavedState != null) {
      countryGrid.addDrawHandler(
          new DrawHandler() {
            @Override
            public void onDraw(DrawEvent event) {
              // restore any previously saved view state for this grid
              countryGrid.setViewState(previouslySavedState);
            }
          });
    }

    return layout;
  }
  public Canvas getViewPanel() {

    Canvas canvas = new Canvas();
    final ListGrid countryGrid = new ListGrid();
    countryGrid.setWidth(550);
    countryGrid.setHeight(224);
    countryGrid.setShowAllRecords(true);
    countryGrid.setCellHeight(22);
    countryGrid.setDataSource(CountryXmlDS.getInstance());

    ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 40);
    countryCodeField.setAlign(Alignment.CENTER);
    countryCodeField.setType(ListGridFieldType.IMAGE);
    countryCodeField.setImageURLPrefix("flags/16/");
    countryCodeField.setImageURLSuffix(".png");
    countryCodeField.setCanEdit(false);

    ListGridField nameField = new ListGridField("countryName", "Country");
    ListGridField continentField = new ListGridField("continent", "Continent");
    ListGridField memberG8Field = new ListGridField("member_g8", "Member G8");
    ListGridField populationField = new ListGridField("population", "Population");
    populationField.setType(ListGridFieldType.INTEGER);
    populationField.setCellFormatter(
        new CellFormatter() {
          public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
            if (value != null) {
              NumberFormat nf = NumberFormat.getFormat("0,000");
              try {
                return nf.format(((Number) value).longValue());
              } catch (Exception e) {
                return value.toString();
              }
            } else {
              return null;
            }
          }
        });
    ListGridField independenceField = new ListGridField("independence", "Independence");
    countryGrid.setFields(
        countryCodeField,
        nameField,
        continentField,
        memberG8Field,
        populationField,
        independenceField);

    countryGrid.setAutoFetchData(true);
    countryGrid.setCanEdit(true);
    countryGrid.setEditEvent(ListGridEditEvent.CLICK);
    countryGrid.setListEndEditAction(RowEndEditAction.NEXT);
    canvas.addChild(countryGrid);

    IButton button = new IButton("Edit New");
    button.setTop(250);
    button.addClickHandler(
        new ClickHandler() {
          public void onClick(ClickEvent event) {
            countryGrid.startEditingNew();
          }
        });
    canvas.addChild(button);

    return canvas;
  }