0
CRUD with Dojo The bread and butter of IT Eugene Lazutkin ClubAJAX, 2009
What is CRUD? <ul><li>Common database operations: </li></ul><ul><ul><li>C reate </li></ul></ul><ul><ul><li>R ead </li></ul...
CRUD in IT <ul><li>Common forms: </li></ul><ul><ul><li>Data entry. </li></ul></ul><ul><ul><li>Looking for records. </li></...
Our goals <ul><ul><li>Improve scalability. </li></ul></ul><ul><ul><li>Improve usability. </li></ul></ul><ul><ul><li>Reduce...
Improved scalability <ul><li>Try to move to the client-side: </li></ul><ul><ul><li>Presentation logic. </li></ul></ul><ul>...
Improved usability <ul><ul><li>Immediate validation. </li></ul></ul><ul><ul><li>Dynamic hints, helpers. </li></ul></ul><ul...
Reduced complexity <ul><li>Make advanced forms possible: </li></ul><ul><ul><li>Validate several fields at once. </li></ul>...
Come to the Client Side, Luke.
What Dojo offers <ul><li>Low-level plumbing: </li></ul><ul><ul><li>XHR (asynchronous I/O). </li></ul></ul><ul><ul><li>Even...
What Dojo offers <ul><li>Two major projects: </li></ul><ul><ul><li>Dijit </li></ul></ul><ul><ul><ul><li>UI components. </l...
Dijit and DojoX for CRUD <ul><li>Hard to implement components: </li></ul><ul><ul><li>Extensible rich text editor. </li></u...
Dijit and DojoX for CRUD <ul><li>Two major groups: </li></ul><ul><ul><li>Layout widgets: </li></ul></ul><ul><ul><ul><li>Us...
Dijit and DojoX for CRUD <ul><li>Two major groups: </li></ul><ul><ul><li>Layout widgets: </li></ul></ul><ul><ul><ul><li>Us...
Form widgets <ul><li>How they improve on form elements: </li></ul><ul><ul><li>Skinnable. </li></ul></ul><ul><ul><li>Unifie...
Skins: Demo <ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html </li></ul>
Unified API <ul><li>All form elements look the same from the server side: </li></ul><ul><ul><li>name1 = val1 & name2 = val...
Unified API <ul><li>What is wrong with form elements? </li></ul><ul><li>API depends on element: </li></ul><ul><ul><li>Gett...
Example: <select> <ul><li>Getting state: </li></ul><ul><ul><li>select.value, if singular. </li></ul></ul><ul><ul><li>All <...
Example: value changed <ul><li>onkeyup: </li></ul><ul><ul><li> <textarea>, <input  type=text >, <input  type=password > <...
Problem: not flexible <ul><li>Real life case of UI redesign: </li></ul><ul><ul><li>Initially a field was a validated text ...
Problem: not flexible <ul><li>All UI redesigns would be painful: </li></ul><ul><ul><li>We need to rewrite our code. </li><...
Solving the problem <ul><li>There are two ways to go about it: </li></ul><ul><ul><li>Let's provide better building blocks....
Better building blocks <ul><li>Form widgets are better building blocks: </li></ul><ul><ul><li>Unified API. </li></ul></ul>...
Form widget: props <ul><li>Exposed properties: </li></ul><ul><ul><li>Normal: </li></ul></ul><ul><ul><ul><li>name ,  value ...
Form widget: methods <ul><li>Exposed methods: </li></ul><ul><ul><li>attr() : get/set attributes including  value  and  dis...
Example: form widget <ul><li>var  widget =  new   dijit.form.SomeWidget (...); </li></ul><ul><li>... </li></ul><ul><li>doj...
Available form widgets <ul><li>dijit.form : </li></ul><ul><ul><li>Button, CheckBox, ComboBox, ComboButton, CurrencyTextBox...
Available form widgets <ul><li>dijit.form : </li></ul><ul><ul><li>NumberSpinner, RadioButton, RangeBoundTextBox, Select, S...
Available form widgets <ul><li>dojox.form : </li></ul><ul><ul><li>BusyButton, CheckedMultiSelect, DateTextBox, DropDownSta...
Available form widgets <ul><li>dojox.form : </li></ul><ul><ul><li>RadioStack, RangeSlider, Rating, TimeSpinner. </li></ul>...
Form widgets: Demo <ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/ </li></ul><ul><li>http://a...
Validation <ul><li>Special group of widgets based on <input> with helpers and validators: </li></ul><ul><ul><li>Value can ...
Validation <ul><li>More: </li></ul><ul><ul><li>Constraints. </li></ul></ul><ul><ul><li>Integrated visual cues. </li></ul><...
Constraints <ul><li>dijit.form.RangeBoundTextBox : </li></ul><ul><ul><li>min, max </li></ul></ul><ul><li>dijit.form.Number...
Constraints <ul><li>dijit.form.CurrencyTextBox : </li></ul><ul><ul><li>all numeric constraints </li></ul></ul><ul><ul><li>...
Constraints <ul><li>dijit.form.DateTextBox ,  dijit.form.TimeTextBox : </li></ul><ul><ul><li>overriding AM and PM. </li></...
Example: validation <ul><li><input type=&quot;text&quot; name=&quot;age&quot;> </li></ul><ul><li><!-- can be decorated: --...
Validation: Demo <ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_validate.html </li></ul>...
dijit.formForm <ul><li>Simple form helper: </li></ul><ul><ul><li>Augments <form>. </li></ul></ul><ul><ul><li>Validates all...
Beyond static forms <ul><li>We want more: </li></ul><ul><ul><li>Validation rules involving several fields at once. </li></...
Form orchestration <ul><li>dojox.form.manager : </li></ul><ul><ul><li>Declarative form definition. </li></ul></ul><ul><ul>...
Form orchestration <ul><li>dojox.form.manager : </li></ul><ul><ul><li>Use  observers  to watch for controlled form fields....
Example: simple form <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot;> </li></ul><ul><li>   <input type=&quot;...
Example: adding manager <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot; </li></ul><ul><li>     dojoType=&quot...
Example: using manager <ul><li>var  mgr =  dijit.byId ( &quot;myForm&quot; ); </li></ul><ul><li>// read a field, modify it...
Example: using manager <ul><li>// read all fields </li></ul><ul><li>var  values = mgr. gatherFormValues (); </li></ul><ul>...
Example: adding observers <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot; </li></ul><ul><li>     dojoType=&qu...
Example: using observers <ul><li>// this function should be added </li></ul><ul><li>// to our custom form manager </li></u...
Example: using observers <ul><li>// let's do something more complex </li></ul><ul><li>onNameChange:  function (value){ </l...
Example: controlling nodes <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot; </li></ul><ul><li>     dojoType=&q...
Example: controlling nodes <ul><li>// hiding example </li></ul><ul><li>onNameChange:  function (value){ </li></ul><ul><li>...
Example: controlling nodes <ul><li>// more complex hiding example </li></ul><ul><li>onNameChange:  function (value){ </li>...
Reduced complexity <ul><li>Make advanced forms possible: </li></ul><ul><ul><li>Validate several fields at once. </li></ul>...
Beyond callbacks Asynchronous operations
Next time... Stay tuned...
Documentation links <ul><li>dijit.form : </li></ul><ul><ul><li>http://docs.dojocampus.org/dijit/form </li></ul></ul><ul><l...
About me <ul><li>My web site: </li></ul><ul><ul><li>http://lazutkin.com/ </li></ul></ul>
Upcoming SlideShare
Loading in...5
×

CRUD with Dojo

14,209

Published on

CRUD, form management, and how Dojo solves it. It was delivered at ClubAJAX on 12/2/2009. Blog post: http://lazutkin.com/blog/2009/dec/2/crud-with-dojo/

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,209
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
160
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Transcript of "CRUD with Dojo"

  1. 1. CRUD with Dojo The bread and butter of IT Eugene Lazutkin ClubAJAX, 2009
  2. 2. What is CRUD? <ul><li>Common database operations: </li></ul><ul><ul><li>C reate </li></ul></ul><ul><ul><li>R ead </li></ul></ul><ul><ul><li>U pdate </li></ul></ul><ul><ul><li>D elete </li></ul></ul>
  3. 3. CRUD in IT <ul><li>Common forms: </li></ul><ul><ul><li>Data entry. </li></ul></ul><ul><ul><li>Looking for records. </li></ul></ul><ul><ul><li>Editing existing records. </li></ul></ul><ul><ul><li>Drilling down. </li></ul></ul><ul><ul><li>Calculators. </li></ul></ul>
  4. 4. Our goals <ul><ul><li>Improve scalability. </li></ul></ul><ul><ul><li>Improve usability. </li></ul></ul><ul><ul><li>Reduce complexity. </li></ul></ul>
  5. 5. Improved scalability <ul><li>Try to move to the client-side: </li></ul><ul><ul><li>Presentation logic. </li></ul></ul><ul><ul><li>Error processing. </li></ul></ul><ul><ul><li>Internationalization (i18n). </li></ul></ul><ul><ul><li>Localization (l10n). </li></ul></ul><ul><ul><li>Accessibility (a11y). </li></ul></ul><ul><li>The goal is to off-load servers as much as possible. </li></ul>
  6. 6. Improved usability <ul><ul><li>Immediate validation. </li></ul></ul><ul><ul><li>Dynamic hints, helpers. </li></ul></ul><ul><ul><li>Consistent L&F. </li></ul></ul><ul><ul><li>Present only relevant choices. </li></ul></ul>
  7. 7. Reduced complexity <ul><li>Make advanced forms possible: </li></ul><ul><ul><li>Validate several fields at once. </li></ul></ul><ul><ul><li>Assemble form from several sources. </li></ul></ul><ul><ul><li>Save form to several sources. </li></ul></ul><ul><ul><li>Get additional data asynchronously. </li></ul></ul><ul><ul><ul><li>Asynchronous calculations. </li></ul></ul></ul><ul><ul><ul><li>Asynchronous server-side validation. </li></ul></ul></ul>
  8. 8. Come to the Client Side, Luke.
  9. 9. What Dojo offers <ul><li>Low-level plumbing: </li></ul><ul><ul><li>XHR (asynchronous I/O). </li></ul></ul><ul><ul><li>Event normalization. </li></ul></ul><ul><ul><li>DOM traversal and manipulations. </li></ul></ul><ul><li>Practically all major JavaScript libraries offer these facilities. </li></ul>
  10. 10. What Dojo offers <ul><li>Two major projects: </li></ul><ul><ul><li>Dijit </li></ul></ul><ul><ul><ul><li>UI components. </li></ul></ul></ul><ul><ul><li>DojoX </li></ul></ul><ul><ul><ul><li>Advanced components. </li></ul></ul></ul>
  11. 11. Dijit and DojoX for CRUD <ul><li>Hard to implement components: </li></ul><ul><ul><li>Extensible rich text editor. </li></ul></ul><ul><ul><li>Flexible grid. </li></ul></ul><ul><ul><li>Tree. </li></ul></ul><ul><ul><li>Charts. </li></ul></ul><ul><ul><li>Alternative widgets: </li></ul></ul><ul><ul><ul><li>Calendar, color picker, spinners, sliders, progress bars, menu... </li></ul></ul></ul>
  12. 12. Dijit and DojoX for CRUD <ul><li>Two major groups: </li></ul><ul><ul><li>Layout widgets: </li></ul></ul><ul><ul><ul><li>Used to layout a page when you cannot do it with CSS. </li></ul></ul></ul><ul><ul><ul><li>Dialogs and tooltips. </li></ul></ul></ul><ul><ul><li>Form widgets: </li></ul></ul><ul><ul><ul><li>Can be used instead of regular form elements. </li></ul></ul></ul>
  13. 13. Dijit and DojoX for CRUD <ul><li>Two major groups: </li></ul><ul><ul><li>Layout widgets: </li></ul></ul><ul><ul><ul><li>Used to layout a page when you cannot do it with CSS. </li></ul></ul></ul><ul><ul><ul><li>Dialogs and tooltips. </li></ul></ul></ul><ul><ul><li>Form widgets : </li></ul></ul><ul><ul><ul><li>Can be used instead of regular form elements. </li></ul></ul></ul>
  14. 14. Form widgets <ul><li>How they improve on form elements: </li></ul><ul><ul><li>Skinnable. </li></ul></ul><ul><ul><li>Unified API. </li></ul></ul><ul><ul><li>Validation-aware. </li></ul></ul><ul><li>They play nice with regular forms, keyboard, i18n, l10n, a11y. </li></ul>
  15. 15. Skins: Demo <ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html </li></ul>
  16. 16. Unified API <ul><li>All form elements look the same from the server side: </li></ul><ul><ul><li>name1 = val1 & name2 = val2 ... </li></ul></ul><ul><ul><li>exceptions: </li></ul></ul><ul><ul><ul><li><input type=image> </li></ul></ul></ul><ul><ul><ul><li><input type=file> </li></ul></ul></ul><ul><li>What is the problem? </li></ul>
  17. 17. Unified API <ul><li>What is wrong with form elements? </li></ul><ul><li>API depends on element: </li></ul><ul><ul><li>Getting state. </li></ul></ul><ul><ul><li>Setting state. </li></ul></ul><ul><ul><li>Processing change events.  </li></ul></ul>
  18. 18. Example: <select> <ul><li>Getting state: </li></ul><ul><ul><li>select.value, if singular. </li></ul></ul><ul><ul><li>All <option> values with selected=&quot;selected&quot; . </li></ul></ul><ul><li>Setting state: </li></ul><ul><ul><li>Go over all <option> and select/deselect accordingly. </li></ul></ul>
  19. 19. Example: value changed <ul><li>onkeyup: </li></ul><ul><ul><li> <textarea>, <input type=text >, <input type=password > </li></ul></ul><ul><li>onchange: </li></ul><ul><ul><li><select> </li></ul></ul><ul><li>onclick: </li></ul><ul><ul><li>the rest. </li></ul></ul>
  20. 20. Problem: not flexible <ul><li>Real life case of UI redesign: </li></ul><ul><ul><li>Initially a field was a validated text box. </li></ul></ul><ul><ul><li>Later on it was replaced with a select + fixed set of values. </li></ul></ul><ul><ul><li>Based on user's feedback the select was replaced with a set of radio buttons. </li></ul></ul>
  21. 21. Problem: not flexible <ul><li>All UI redesigns would be painful: </li></ul><ul><ul><li>We need to rewrite our code. </li></ul></ul><ul><ul><li>We may introduce new bugs. </li></ul></ul><ul><li>We need an abstraction to cover the differences. </li></ul>
  22. 22. Solving the problem <ul><li>There are two ways to go about it: </li></ul><ul><ul><li>Let's provide better building blocks. </li></ul></ul><ul><ul><li>Let's work with forms using higher-level tools. </li></ul></ul><ul><li>Dojo provides both solutions. </li></ul>
  23. 23. Better building blocks <ul><li>Form widgets are better building blocks: </li></ul><ul><ul><li>Unified API. </li></ul></ul><ul><ul><li>UI widgets beyond the standard set. </li></ul></ul><ul><li>All form widgets are based on dijit.form._FormWidget . Let's look at it in details. </li></ul>
  24. 24. Form widget: props <ul><li>Exposed properties: </li></ul><ul><ul><li>Normal: </li></ul></ul><ul><ul><ul><li>name , value , disabled , tabIndex . </li></ul></ul></ul><ul><ul><li>Advanced: </li></ul></ul><ul><ul><ul><li>intermediateChanges : fire on every change, or onblur . </li></ul></ul></ul><ul><ul><ul><li>scrollOnFocus : show the whole widget when focused. </li></ul></ul></ul>
  25. 25. Form widget: methods <ul><li>Exposed methods: </li></ul><ul><ul><li>attr() : get/set attributes including value and disabled . </li></ul></ul><ul><ul><li>focus() : set a focus on this widget. </li></ul></ul><ul><ul><li>onChange() : callback for change notifications. </li></ul></ul><ul><ul><li>onClick() : callback for button clicks. </li></ul></ul>
  26. 26. Example: form widget <ul><li>var widget = new dijit.form.SomeWidget (...); </li></ul><ul><li>... </li></ul><ul><li>dojo.connect (widget, &quot;onChange&quot; , </li></ul><ul><li>   function (newValue){ </li></ul><ul><li>     console.log ( &quot;value changed: &quot; , newValue); </li></ul><ul><li>   }); </li></ul><ul><li>... </li></ul><ul><li>widget. attr ( &quot;value&quot; , &quot;42&quot; ); </li></ul><ul><li>widget. focus (); </li></ul><ul><li>... </li></ul><ul><li>var val = widget. attr ( &quot;value&quot; ); </li></ul>
  27. 27. Available form widgets <ul><li>dijit.form : </li></ul><ul><ul><li>Button, CheckBox, ComboBox, ComboButton, CurrencyTextBox, DateTextBox, DropDownButton, FilteringSelect, HorizontalRule, HorizontalRuleLabels, HorizontalSlider, MappedTextBox, MultiSelect (continued). </li></ul></ul>
  28. 28. Available form widgets <ul><li>dijit.form : </li></ul><ul><ul><li>NumberSpinner, RadioButton, RangeBoundTextBox, Select, SimpleTextarea, Slider, Textarea, TextBox, TimeTextBox, ToggleButton, ValidationTextBox, VerticalRule, VerticalRuleLabels, VerticalSlider. </li></ul></ul>
  29. 29. Available form widgets <ul><li>dojox.form : </li></ul><ul><ul><li>BusyButton, CheckedMultiSelect, DateTextBox, DropDownStack, FileInput, FileInputAuto, FileInputBlind, FilePickerTextBox, FileUploader, ListInput, MultiComboBox, PasswordValidator (continued). </li></ul></ul>
  30. 30. Available form widgets <ul><li>dojox.form : </li></ul><ul><ul><li>RadioStack, RangeSlider, Rating, TimeSpinner. </li></ul></ul><ul><li>Even more widgets can be found in dojox.widget . </li></ul>
  31. 31. Form widgets: Demo <ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/ </li></ul><ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/ </li></ul><ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/ </li></ul>
  32. 32. Validation <ul><li>Special group of widgets based on <input> with helpers and validators: </li></ul><ul><ul><li>Value can be edited manually. </li></ul></ul><ul><ul><li>Visible value and &quot;real&quot; value can be different. </li></ul></ul><ul><ul><li>Visible value can be formatted. </li></ul></ul>
  33. 33. Validation <ul><li>More: </li></ul><ul><ul><li>Constraints. </li></ul></ul><ul><ul><li>Integrated visual cues. </li></ul></ul><ul><ul><li>Tooltip hints. </li></ul></ul><ul><ul><li>&quot;Required&quot; flag. </li></ul></ul>
  34. 34. Constraints <ul><li>dijit.form.RangeBoundTextBox : </li></ul><ul><ul><li>min, max </li></ul></ul><ul><li>dijit.form.NumberTextBox : </li></ul><ul><ul><li>places </li></ul></ul><ul><ul><li>locale (e.g., &quot;en-us&quot;) </li></ul></ul><ul><ul><li>pattern (e.g., &quot;0#.##&quot;) </li></ul></ul>
  35. 35. Constraints <ul><li>dijit.form.CurrencyTextBox : </li></ul><ul><ul><li>all numeric constraints </li></ul></ul><ul><ul><li>currency code, symbol </li></ul></ul><ul><ul><li>fractional (include fractions or not) </li></ul></ul>
  36. 36. Constraints <ul><li>dijit.form.DateTextBox , dijit.form.TimeTextBox : </li></ul><ul><ul><li>overriding AM and PM. </li></ul></ul><ul><ul><li>range, increment. </li></ul></ul><ul><ul><li>locale, selector, patterns, format. </li></ul></ul>
  37. 37. Example: validation <ul><li><input type=&quot;text&quot; name=&quot;age&quot;> </li></ul><ul><li><!-- can be decorated: --> </li></ul><ul><li><input type=&quot;text&quot; name=&quot;age&quot; </li></ul><ul><li>   dojoType=&quot; dijit.form.NumberTextBox &quot; </li></ul><ul><li>   constraints=&quot; {min: 0, max: 150, places: 0} &quot; </li></ul><ul><li>   promptMessage=&quot; Enter your age &quot; </li></ul><ul><li>   maxLength=&quot; 3 &quot; required=&quot; true &quot; > </li></ul>
  38. 38. Validation: Demo <ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_validate.html </li></ul><ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_TimeTextBox.html </li></ul><ul><li>http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Spinner.html </li></ul>
  39. 39. dijit.formForm <ul><li>Simple form helper: </li></ul><ul><ul><li>Augments <form>. </li></ul></ul><ul><ul><li>Validates all fields on submit. </li></ul></ul><ul><ul><li>Gets/sets form fields as a dictionary (key-value pairs). </li></ul></ul>
  40. 40. Beyond static forms <ul><li>We want more: </li></ul><ul><ul><li>Validation rules involving several fields at once. </li></ul></ul><ul><ul><li>Depending on user choices: </li></ul></ul><ul><ul><ul><li>Get/set CSS classes. </li></ul></ul></ul><ul><ul><ul><li>Enable/disable fields. </li></ul></ul></ul><ul><ul><ul><li>Hide/show parts of a form. </li></ul></ul></ul>
  41. 41. Form orchestration <ul><li>dojox.form.manager : </li></ul><ul><ul><li>Declarative form definition. </li></ul></ul><ul><ul><li>Seamless key-value access to: </li></ul></ul><ul><ul><ul><li>Form widgets. </li></ul></ul></ul><ul><ul><ul><li>DOM form elements. </li></ul></ul></ul><ul><ul><ul><li>Attached DOM nodes. </li></ul></ul></ul>
  42. 42. Form orchestration <ul><li>dojox.form.manager : </li></ul><ul><ul><li>Use observers to watch for controlled form fields. </li></ul></ul><ul><ul><li>Implemented as a set of mixins. </li></ul></ul><ul><ul><ul><li>Pay only for what you use. </li></ul></ul></ul><ul><ul><ul><li>Write your own widgets. </li></ul></ul></ul>
  43. 43. Example: simple form <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot;> </li></ul><ul><li>   <input type=&quot;text&quot; name=&quot;name&quot;> </li></ul><ul><li>   ... </li></ul><ul><li>   <textarea name=&quot;notes&quot;></textarea> </li></ul><ul><li></form> </li></ul>
  44. 44. Example: adding manager <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot; </li></ul><ul><li>     dojoType=&quot; dojox.form.Manager &quot; > </li></ul><ul><li>   <input type=&quot;text&quot; name=&quot;name&quot;> </li></ul><ul><li>   ... </li></ul><ul><li>   <textarea name=&quot;notes&quot;></textarea> </li></ul><ul><li></form> </li></ul>
  45. 45. Example: using manager <ul><li>var mgr = dijit.byId ( &quot;myForm&quot; ); </li></ul><ul><li>// read a field, modify it, write it back </li></ul><ul><li>var name = mgr. elementValue ( &quot;name&quot; ); </li></ul><ul><li>if (name == &quot;Mike&quot; ) { name = &quot;Bob&quot; ; } </li></ul><ul><li>mgr. elementValue ( &quot;name&quot; , name); </li></ul>
  46. 46. Example: using manager <ul><li>// read all fields </li></ul><ul><li>var values = mgr. gatherFormValues (); </li></ul><ul><li>values.name = &quot;Bob&quot; ; </li></ul><ul><li>// read some fields </li></ul><ul><li>values = mgr. gatherFormValues ( </li></ul><ul><li>   [ &quot;name&quot; , &quot;notes&quot; ]); </li></ul><ul><li>// write all back </li></ul><ul><li>mgr. setFormValues (values); </li></ul>
  47. 47. Example: adding observers <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot; </li></ul><ul><li>     dojoType=&quot;dojox.form.Manager&quot;> </li></ul><ul><li>   <input type=&quot;text&quot; name=&quot;name&quot; </li></ul><ul><li>     observer=&quot;onNameChange&quot; > </li></ul><ul><li>   ... </li></ul><ul><li>   <textarea name=&quot;notes&quot;></textarea> </li></ul><ul><li></form> </li></ul>
  48. 48. Example: using observers <ul><li>// this function should be added </li></ul><ul><li>// to our custom form manager </li></ul><ul><li>onNameChange: function (value, field){ </li></ul><ul><li>   console.log ( &quot;changed field: &quot; , field); </li></ul><ul><li>   console.log ( &quot;new value: &quot; , value); </li></ul><ul><li>}; </li></ul>
  49. 49. Example: using observers <ul><li>// let's do something more complex </li></ul><ul><li>onNameChange: function (value){ </li></ul><ul><li>   // &quot;this&quot; is our form manager </li></ul><ul><li>   var notes = this . elementValue ( &quot;notes&quot; ); </li></ul><ul><li>   if (value == &quot;Bob&quot; && !notes){ </li></ul><ul><li>     this . elementValue ( &quot;notes&quot; , &quot;Likes JS&quot; ); </li></ul><ul><li>     this . disable ([ &quot;notes&quot; ]); </li></ul><ul><li>   } </li></ul><ul><li>}; </li></ul>
  50. 50. Example: controlling nodes <ul><li><form action=&quot;/sink&quot; id=&quot;myForm&quot; </li></ul><ul><li>     dojoType=&quot;dojox.form.Manager&quot;> </li></ul><ul><li>   <input type=&quot;text&quot; name=&quot;name&quot;> </li></ul><ul><li>   ... </li></ul><ul><li>   <div dojoAttachPoint=&quot;optional&quot;> </li></ul><ul><li>     <textarea name=&quot;notes&quot;></textarea> </li></ul><ul><li>   </div> </li></ul><ul><li></form> </li></ul>
  51. 51. Example: controlling nodes <ul><li>// hiding example </li></ul><ul><li>onNameChange: function (value){ </li></ul><ul><li>   // &quot;this&quot; is our form manager </li></ul><ul><li>   if (value == &quot;Mike&quot; ){ </li></ul><ul><li>     this . hide ([ &quot;optional&quot; ]); </li></ul><ul><li>   } </li></ul><ul><li>}; </li></ul>
  52. 52. Example: controlling nodes <ul><li>// more complex hiding example </li></ul><ul><li>onNameChange: function (value){ </li></ul><ul><li>   // &quot;this&quot; is our form manager </li></ul><ul><li>   this . show ({optional: value !=  &quot;Mike&quot; }); </li></ul><ul><li>}; </li></ul>
  53. 53. Reduced complexity <ul><li>Make advanced forms possible: </li></ul><ul><ul><li>Validate several fields at once. </li></ul></ul><ul><ul><li>Assemble form from several sources. </li></ul></ul><ul><ul><li>Save form to several sources. </li></ul></ul><ul><ul><li>Get additional data asynchronously. </li></ul></ul><ul><ul><ul><li>Asynchronous calculations. </li></ul></ul></ul><ul><ul><ul><li>Asynchronous server-side validation. </li></ul></ul></ul>
  54. 54. Beyond callbacks Asynchronous operations
  55. 55. Next time... Stay tuned...
  56. 56. Documentation links <ul><li>dijit.form : </li></ul><ul><ul><li>http://docs.dojocampus.org/dijit/form </li></ul></ul><ul><li>Constraints: </li></ul><ul><ul><li>http://docs.dojocampus.org/quickstart/numbersDates </li></ul></ul><ul><li>dojox.form.manager : </li></ul><ul><ul><li>http://docs.dojocampus.org/dojox/form/manager </li></ul></ul>
  57. 57. About me <ul><li>My web site: </li></ul><ul><ul><li>http://lazutkin.com/ </li></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×