Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

15,354 views

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
  • Be the first to comment

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>

×