Dynamic Form in GWT

Question

I'm building dynamic forms in GWT, but I'm not sure how to dynamically retrieve the values upon submission.

I'm reading in question data from a DB and manually building elements that are added to a FormPanel:

    @UiField
    FormPanel formPanel;

    @Override
    protected void onLoad()
    {
       service.getFields(AysncCallbak<Fields> callback)
       {
           public void onSuccess(Fields result)
           {
              for(Object yo : fields.stuff())
              {
                  Element div = DOM.createDiv();
                  div.appendChild(DOM.createInputText());
                  formPanel.getElement().appendChild(div);
              }
           }
       }
    }

That's the gist in psuedocode, but I'm not sure how to retrieve the values after this point.

I want to serialize the form (get the HTML) and parse it with DOM, but GWT produces invalid XHTML (the input tags are not terminated, causing parse failure).

I could send the data to a Servlet, but there's a lot more stuff I need (other hidden input fields, etc.).

Most GWT form examples are incredibly trivial, or have explicit fields declared. Should I look at a 3rd party library? How do I get the dynamic values?

score 1 · Accepted Answer · edited May 23 '17 at 11:56

GWT is not JSP. Not PHP.

Using FormPanel is for beginners or for compatibility with existing form handling servlets, or for quick and dirty tasks. I have to admit, I might have forgotten how to use form panels.

Once you're up to speed with Forms, you would probably wish to move to RPC, RequestBuilder, or RES for submitting your data to the server.

First, in GWT you should avoid getting the elements of widgets unless absolutely necessary (for example tweaking the behaviour thro JSNI).

The following are some code which may not be too precise, but it gets the idea across.

protected void onLoad() {
  HashMap<String, Widget> formWidgetHash = new HashMap<String, Widget>();
  FlexTable table = new FlexTable();
  FormPanel form = new FormPanel();
  form.setWidget(table);

  service.getFields(AysncCallbak<Fields> callback) {
    public void onSuccess(Fields result) {
      int i = 0;
      for(Object yo : fields.stuff()) {
        mkFormWidget(formWidgetHash, table, i++, yo);
      }
    }
  }
}

You could memorise the form in the HashMap. You can review the values by the pacing through the HashMap.

But you don't have to do that. Just submit the form. The form will resolve the fields.

private void mkFormWidget(
  HashMap formWidgetHash, FlexTable table, int row, Object yo) {

  // LHS of table is field prompt
  String prompt = resolvePrompt(yo);
  table.setText(row, 0, prompt);
  Widget formWidget;
  if (yo instanceof Boolean){
    formWidget = new CheckBox();
  }
  else { ...
  }
  else { ...
  }
  else {
    formWidget = new TextBox();
  }

  table.setWidget(row, 1, w);
  formWidgetHash.put(prompt, w);
}

abstract protected String resolvePrompt(Object o);

I don't see why you need to access the widgets before sending the form to the server. If you need to add field validator, you should add it to the form widget while it is being instantiated in mkFormWidget.

However, if you wish to have positional as well as hash key access to the form widgets, you could follow the answer in this question: Maps (collection) that maintains insertion Order in java.

Hopefully someone reads this comment instead of that "answer". Lessons learned: don't explicitly manipulate DOM, use a container widget, and store references to the question widgets. — hisdrewness, Mar 26 '12 at 20:59

Dynamic Form in GWT

1 Answers1