qooxdoo Form Management

3,382 views
3,226 views

Published on

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.

Published in: Technology, Business, Travel
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,382
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
67
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

qooxdoo Form Management

  1. 1. Martin Wittemann martin.wittemann@1und1.de Form Management in qooxdoo 0.8.3
  2. 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. 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. 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. 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. 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. 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. 8. But I liked the old value • Often used for storing representing data • Was too strict because only Strings were allowed
  9. 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. 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. 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. 12. Visualize Invalid
  13. 13. Visualize Invalid
  14. 14. Validation • Validation Manager • Synchronous validation • Asynchronous validation • Validation of items in the form context • Predefined validators
  15. 15. Sync
  16. 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. 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. 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. 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. 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. 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. 22. Resetting • Resetting of all form items at once • Support for form items using selections (List, SelectBox, ...)
  23. 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. 24. Rendering • Form • Uses a renderer interface • Different default renderer available • Combines rendering, validation and resetting • Handles form items and buttons
  25. 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. 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. 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. 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. 29. Renderer this.getRoot().add( form.createView(), {left: 10, top: 10} );
  30. 30. Renderer this.getRoot().add( form.createView(), {left: 10, top: 10} ); Single
  31. 31. Renderer this.getRoot().add( form.createView(), form.createView(qx.ui.form.renderer.SinglePlaceholder), {left: 10, top: 10} ); Single SinglePlaceholder
  32. 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. 33. Serialization • Change of the serialization perspective • Serialization of a model and not of a view " Moved into the data binding layer
  34. 34. Data Binding • Special controller for the form • Connecting a model with the form • Creating a model
  35. 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. 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. 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. 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. 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. 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. 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. 42. Model • qooxdoo class with three properties • salutation • firstName • last
  43. 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. 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

×