The qx.ui.form package contains several classes to construct complex and powerful forms. Some widgets – like Button, List or TextField – may look familiar if you have worked with HTML before, but this package also contains more complex widgets that you may know from your Operating System or Desktop Applications (e.g. Spinner, Slider or DateField).

This is a simple contact form to demonstrate a bunch of form widgets:

// Create a layout for the main container
var layout = new qx.ui.layout.Grid(4, 2);
 
// Create the main container and set the layout
var container = new qx.ui.container.Composite(layout);
       
// Create some labels for the form elements
var lbSalutation = new qx.ui.basic.Label("Salutation:");
var lbName = new qx.ui.basic.Label("Name:");
var lbComment = new qx.ui.basic.Label("Comment:");
       
// Add the labels to the container
container.add(lbSalutation, {row: 0, column : 0});
container.add(lbName, {row: 1, column : 0});
container.add(lbComment, {row: 2, column : 0});
       
// Create a select box for the salutation
this.__sbSalutation = new qx.ui.form.SelectBox();
       
// Add some entries to it
this.__sbSalutation.add(new qx.ui.form.ListItem("Mr.", null, "Mr."));
this.__sbSalutation.add(new qx.ui.form.ListItem("Mrs.", null, "Mrs."));
this.__sbSalutation.add(new qx.ui.form.ListItem("Dr.", null, "Dr."));
this.__sbSalutation.add(new qx.ui.form.ListItem("Colonel", null, "Colonel"));
       
// Create a text field for the name
this.__tfName = new qx.ui.form.TextField();
       
// Create a text area for the comment
this.__taComment = new qx.ui.form.TextArea();
       
// And finally create a button to submit the form
var btOk = new qx.ui.form.Button("Ok");
       
// Add the form widgets to the container
container.add(this.__sbSalutation, {row: 0, column : 1});
container.add(this.__tfName, {row: 1, column : 1});
container.add(this.__taComment, {row: 2, column : 1});
container.add(btOk, {row: 3, column : 1});
       
// Add the container to the application
this.getRoot().add(container, {top: 20, left: 20});

The code snipped below shows how the user input could be selected by button click.

// Add listener for click
btOk.addListener("execute", function()
{
  var selectedSalutation = this.__sbSalutation.getSelected();
  alert("Salutation: " + selectedSalutation.getValue() + "\n" +
    "Name: " + this.__tfName.getValue() + "\n" +
    "Comment: " + this.__taComment.getValue());
}, this);

It is also possible to add a listener to get the changed value.

// Add "changeValue" listener for salutation
this.__sbSalutation.addListener("changeValue", function(e)
{
  alert("Salutation: " + e.getData());
}, this);

• Buttons
  • Button
  • RadioButton
  • RepeatButton
  • SplitButton
  • ToggleButton
• Boxes
  • SelectBox
  • ComboBox
• Text elements
  • TextField
  • PasswordField
  • TextArea
• Other
  • Slider
  • Spinner
  • List

(If you are looking for the UploadWidget: this widget is a part of qooxdoo-contrib.)

All form widgets implement this interface to offer a generic API for dealing with their value, name and enabled state.

• setEnabled(flag) Enabled or disables the widget.
• getEnabled() Returns true if the widget is enabled, otherwise false.
• setValue(value) Sets a widget-specific value to the widget.
• getValue() Retrieves the widget’s value.
• setName(name) Sets the widget’s name.
• getName() Returns the widget’s name.

• changeValue Fired when the value was modified.
• changeName Fired when the name attribute was modified.
• changeEnabled Fired when the element was enabled or disable.