qooxdoo introduced in 0.8.3 a complete new form management component. This slides show some parts of it and what it can do for you.

1. Martin Wittemann
martin.wittemann@1und1.de
Form Management
in qooxdoo 0.8.3

2. qooxdoo <= 0.8.2
! Complete set of widgets
!
" Uniform API (interfaces) for the widgets
!
" Validation
!
" Resetting support
!
" Form rendering
!
" Serialization
!
" Data binding for the form
!

3. qooxdoo > 0.8.2
! Complete set of widgets
!
! Uniform API (interfaces) for the widgets
!
! Validation
!
! Resetting support
!
! Form rendering
!
! Serialization
!
! Data binding for the form
!

4. Uniform API
• New Interfaces for ...
• Widgets with invalid states
• Executable widgets
• Range handling widgets
• Widgets containing a value
• Widgets representing some kind of
data

5. Value Interfaces
<<interface>> <<interface>>
INumberForm IStringForm
changeValue : Data changeValue : Data
setValue(value : number) : void setValue(value : string) : void
getValue() : number getValue() : string
resetValue() : void resetValue() : void
<<interface>> <<interface>>
IDateForm IColorForm
changeValue : Data changeValue : Data
setValue(value : Date) : void setValue(value : Color) : void
getValue() : Date getValue() : Color
resetValue() : void resetValue() : void
<<interface>>
IBooleanForm
changeValue : Data
setValue(value : boolean) : void
getValue() : boolean
resetValue() : void

6. Why?
var label = new qx.ui.basic.Label();
var textField = new qx.ui.form.TextField();
var dateField = new qx.ui.form.DateField();
var checkBox = new qx.ui.form.CheckBox();
label.setContent("a");
textField.setValue("a");
dateField.setDate(new Date());
checkBox.setValue("a"); //string representation
checkBox.setChecked(true);
var spinner = new qx.ui.form.Spinner();
var slider = new qx.ui.form.Slider();
spinner.setMin(10);
slider.setMinimum(10);

7. Better...
var label = new qx.ui.basic.Label();
var textField = new qx.ui.form.TextField();
var dateField = new qx.ui.form.DateField();
var checkBox = new qx.ui.form.CheckBox();
label.setValue("a");
textField.setValue("a");
dateField.setValue(new Date());
checkBox.setValue(true);
var spinner = new qx.ui.form.Spinner();
var slider = new qx.ui.form.Slider();
spinner.setMinimum(10);
slider.setMinimum(10);

8. But I liked the old value
• Often used for storing representing data
• Was too strict because only Strings were
allowed

9. But I liked the old value
• Often used for storing representing data
• Was too strict because only Strings were
allowed
<<Interface>>
IModel
changeModel : Data
setModel(value : var) : void
getModel() : var
resetModel() : void
ListItem CheckBox
Abstract
RadioButton
TreeItem

10. But I liked the old value
• Often used for storing representing data
• Was too strict because only Strings were
allowed
<<Interface>>
IModel
changeModel : Data
setModel(value : var) : void
getModel() : var
resetModel() : void
ListItem CheckBox
Abstract
RadioButton
TreeItem

11. But I liked the old value
• Often used for storing representing data
• Was too strict because only Strings were
allowed
<<Interface>>
IModelSelection
setModelSelection(value : var) : void
getModelSelection() : var
RadioGroup Tree <<Interface>>
RadioButton IModel
changeModel : Data
SelectBox setModel(value : var) : void
Group getModel() : var
List resetModel() : void
ListItem CheckBox
Abstract
RadioButton
TreeItem

12. Visualize Invalid

13. Visualize Invalid

14. Validation
• Validation Manager
• Synchronous validation
• Asynchronous validation
• Validation of items in the form
context
• Predefined validators

15. Sync

16. Sync
var manager = new qx.ui.form.validation.Manager();
var textField = new qx.ui.form.TextField();
var checkBox = new qx.ui.form.CheckBox();
textField.setRequired(true);
manager.add(textField);

17. Sync
var manager = new qx.ui.form.validation.Manager();
var textField = new qx.ui.form.TextField();
var checkBox = new qx.ui.form.CheckBox();
manager.add(textField, qx.util.Validate.email());
textField.setRequired(true);
manager.add(textField);

18. Sync
var manager = new qx.ui.form.validation.Manager();
var textField = new qx.ui.form.TextField();
var checkBox = new qx.ui.form.CheckBox();
manager.add(textField, qx.util.Validate.email());
textField.setRequired(true);
function(value) {
manager.add(textField); 3;
return value.length >=
});

19. Sync
var manager = new qx.ui.form.validation.Manager();
var textField = new qx.ui.form.TextField();
var checkBox = new qx.ui.form.CheckBox();
manager.setValidator(function(items) { {
manager.add(textField, qx.util.Validate.email());
textField.setRequired(true);
function(value)
manager.add(textField); 3;{
if (checkBox.getValue())
return value.length >=
}); var value = textField.getValue();
if (!value || value.length == 0) {
textField.setValid(false);
return false;
}
}
textField.setValid(true);
return true;
});

20. Async
var manager = new qx.ui.form.validation.Manager();
var textField = new qx.ui.form.TextField();
var checkBox = new qx.ui.form.CheckBox();
manager.add(textField,
new qx.ui.form.validation.AsyncValidator(
function(validator, value) {
// here comes the async call
window.setTimeout(function() {
// callback for the async validation
validator.setValid(false);
}, 1000);
}
)
);

21. Async
var manager = new qx.ui.form.validation.Manager();
var textField = new qx.ui.form.TextField();
var checkBox = new qx.ui.form.CheckBox();
manager.add(textField,
new qx.ui.form.validation.AsyncValidator(
function(validator, value) {
// here comes the async call
window.setTimeout(function() {
// callback for the async validation
validator.setValid(false);
}, 1000);
}
)
);

22. Resetting
• Resetting of all form items at once
• Support for form items using
selections (List, SelectBox, ...)

23. Resetting
• Resetting of all form items at once
• Support for form items using
selections (List, SelectBox, ...)
qx.ui.form.Resetter
add(item : qx.ui.form.IForm) : void
redefine() : void
reset() : void

24. Rendering
• Form
• Uses a renderer interface
• Different default renderer available
• Combines rendering, validation and
resetting
• Handles form items and buttons

25. Sample
var form = new qx.ui.form.Form();
var name = new qx.ui.form.TextField();
name.setRequired(true);
form.add(name, "Name");
form.add(new qx.ui.form.TextField(), "Email",
qx.util.Validate.email());
var savebutton = new qx.ui.form.Button("Save");
savebutton.addListener("execute", function() {
if (form.validate()) {
alert("You can save now...");
}
});
form.addButton(savebutton);
var resetbutton = new qx.ui.form.Button("Reset");
resetbutton.addListener("execute", function() {
form.reset();
});
form.addButton(resetbutton);

26. Sample
var form = new qx.ui.form.Form();
var name = new qx.ui.form.TextField();
name.setRequired(true);
form.add(name, "Name");
form.add(new qx.ui.form.TextField(), "Email",
qx.util.Validate.email());
var savebutton = new qx.ui.form.Button("Save");
savebutton.addListener("execute", function() {
if (form.validate()) {
alert("You can save now...");
}
});
form.addButton(savebutton);
var resetbutton = new qx.ui.form.Button("Reset");
resetbutton.addListener("execute", function() {
form.reset();
});
form.addButton(resetbutton);

27. Sample
var form = new qx.ui.form.Form();
var name = new qx.ui.form.TextField();
name.setRequired(true);
form.add(name, "Name");
form.add(new qx.ui.form.TextField(), "Email",
qx.util.Validate.email());
var savebutton = new qx.ui.form.Button("Save");
savebutton.addListener("execute", function() {
if (form.validate()) {
alert("You can save now...");
}
});
form.addButton(savebutton);
var resetbutton = new qx.ui.form.Button("Reset");
resetbutton.addListener("execute", function() {
form.reset();
});
form.addButton(resetbutton);

28. Sample
var form = new qx.ui.form.Form();
var name = new qx.ui.form.TextField();
name.setRequired(true);
form.add(name, "Name");
form.add(new qx.ui.form.TextField(), "Email",
qx.util.Validate.email());
var savebutton = new qx.ui.form.Button("Save");
savebutton.addListener("execute", function() {
if (form.validate()) {
alert("You can save now...");
}
});
form.addButton(savebutton);
var resetbutton = new qx.ui.form.Button("Reset");
resetbutton.addListener("execute", function() {
form.reset();
});
form.addButton(resetbutton);

29. Renderer
this.getRoot().add(
form.createView(),
{left: 10, top: 10}
);

30. Renderer
this.getRoot().add(
form.createView(),
{left: 10, top: 10}
);
Single

31. Renderer
this.getRoot().add(
form.createView(),
form.createView(qx.ui.form.renderer.SinglePlaceholder),
{left: 10, top: 10}
);
Single SinglePlaceholder

32. Renderer
this.getRoot().add(
form.createView(),
form.createView(qx.ui.form.renderer.Double),
form.createView(qx.ui.form.renderer.SinglePlaceholder),
{left: 10, top: 10}
);
Single SinglePlaceholder
Double

33. Serialization
• Change of the serialization
perspective
• Serialization of a model and not of a
view
" Moved into the data binding layer

34. Data Binding
• Special controller for the form
• Connecting a model with the form
• Creating a model

35. Sample
var form = new qx.ui.form.Form();
form.add(new qx.ui.form.TextField(), "Salutation");
form.add(new qx.ui.form.TextField(), "First Name");
form.add(new qx.ui.form.TextField(), "Last Name",
null, "last");
this.getRoot().add(form.createView(), {left: 10,
top: 10});
var controller = new qx.data.controller.Form(null,
form);
var model = controller.createModel();
model.setSalutation("Mr.");
model.setFirstName("Martin");
model.setLast("Wittemann");

36. Sample
var form = new qx.ui.form.Form();
form.add(new qx.ui.form.TextField(), "Salutation");
form.add(new qx.ui.form.TextField(), "First Name");
form.add(new qx.ui.form.TextField(), "Last Name",
null, "last");
this.getRoot().add(form.createView(), {left: 10,
top: 10});
var controller = new qx.data.controller.Form(null,
form);
var model = controller.createModel();
model.setSalutation("Mr.");
model.setFirstName("Martin");
model.setLast("Wittemann");

37. Sample
var form = new qx.ui.form.Form();
form.add(new qx.ui.form.TextField(), "Salutation");
form.add(new qx.ui.form.TextField(), "First Name");
form.add(new qx.ui.form.TextField(), "Last Name",
null, "last");
this.getRoot().add(form.createView(), {left: 10,
top: 10});
var controller = new qx.data.controller.Form(null,
form);
var model = controller.createModel();
model.setSalutation("Mr.");
model.setFirstName("Martin");
model.setLast("Wittemann");

38. Sample
var form = new qx.ui.form.Form();
form.add(new qx.ui.form.TextField(), "Salutation");
form.add(new qx.ui.form.TextField(), "First Name");
form.add(new qx.ui.form.TextField(), "Last Name",
null, "last");
this.getRoot().add(form.createView(), {left: 10,
top: 10});
var controller = new qx.data.controller.Form(null,
form);
var model = controller.createModel();
model.setSalutation("Mr.");
model.setFirstName("Martin");
model.setLast("Wittemann");

39. Sample
var form = new qx.ui.form.Form();
form.add(new qx.ui.form.TextField(), "Salutation");
form.add(new qx.ui.form.TextField(), "First Name");
form.add(new qx.ui.form.TextField(), "Last Name",
null, "last");
this.getRoot().add(form.createView(), {left: 10,
top: 10});
var controller = new qx.data.controller.Form(null,
form);
var model = controller.createModel();
model.setSalutation("Mr.");
model.setFirstName("Martin");
model.setLast("Wittemann");

40. Sample
var form = new qx.ui.form.Form();
form.add(new qx.ui.form.TextField(), "Salutation");
form.add(new qx.ui.form.TextField(), "First Name");
form.add(new qx.ui.form.TextField(), "Last Name",
null, "last");
this.getRoot().add(form.createView(), {left: 10,
top: 10});
var controller = new qx.data.controller.Form(null,
form);
var model = controller.createModel();
model.setSalutation("Mr.");
model.setFirstName("Martin");
model.setLast("Wittemann");

41. Sample
var form = new qx.ui.form.Form();
form.add(new qx.ui.form.TextField(), "Salutation");
form.add(new qx.ui.form.TextField(), "First Name");
form.add(new qx.ui.form.TextField(), "Last Name",
null, "last");
this.getRoot().add(form.createView(), {left: 10,
top: 10});
var controller = new qx.data.controller.Form(null,
form);
var model = controller.createModel();
model.setSalutation("Mr.");
model.setFirstName("Martin");
model.setLast("Wittemann");

42. Model
• qooxdoo class with three properties
• salutation
• firstName
• last

43. Serialization
• to URI parameter
qx.util.Serializer.toUriParameter(model);
Salutation=Mr.&FirstName=Martin&last=Wittemann
• to JSON
qx.util.Serializer.toJSON(model);
{
"Salutation":"Mr.",
"FirstName": "Martin",
"last": "Wittemann"
}

44. More...
• Wiki Documentation
• Complete list of all changed widgets
• Complete list of all interfaces
• Further details on the new parts
http://qooxdoo.org/documentation/
0.8/ui_form_handling2#interfaces