/**
   * The constants used in this Content Widget.
   */
  public static interface CwConstants extends Constants,
      ContentWidget.CwConstants {
    String cwDictionaryExampleDescription();

    String cwDictionaryExampleLinkText();

    String cwDictionaryExampleName();
  }

  /**
   * An instance of the constants.
   */
  private CwConstants constants;

  /**
   * Initialize this example.
   */
  @Override
  public Widget onInitialize() {
    // Create a vertical panel to layout the contents
    VerticalPanel layout = new VerticalPanel();

    // Show the HTML variable that defines the dictionary
    HTML source = new HTML("<pre>var userInfo = {\n"
        + "  name: \"Amelie Crutcher\",\n"
        + "  timeZone: \"EST\",\n" + "  userID: \"123\",\n"
        + "  lastLogOn: \"2/2/2006\"\n" + "};</pre>\n");
    source.getElement().setDir("ltr");
    source.getElement().getStyle().setProperty("textAlign", "left");
    layout.add(new HTML(constants.cwDictionaryExampleLinkText()));
    layout.add(source);

    // Create the Dictionary of data
    FlexTable userInfoGrid = new FlexTable();
    Dictionary userInfo = Dictionary.getDictionary("userInfo");
    Set<String> keySet = userInfo.keySet();
    int columnCount = 0;
    for (String key : keySet) {
      // Get the value from the set
      String value = userInfo.get(key);

      // Add a column with the data
      userInfoGrid.setHTML(0, columnCount, key);
      userInfoGrid.setHTML(1, columnCount, value);

      // Go to the next column
      columnCount++;
    }
    userInfoGrid.getRowFormatter().setStyleName(0,
        "cw-DictionaryExample-headerRow");
    userInfoGrid.getRowFormatter().setStyleName(1,
        "cw-DictionaryExample-dataRow");
    layout.add(new HTML("<br><br>"));
    layout.add(userInfoGrid);

    // Return the layout Widget
    return layout;
  }