• Like
Jformino
Upcoming SlideShare
Loading in...5
×

Jformino

  • 1,741 views
Uploaded on

jFormino lightning talk for JUI conference Tokyo.

jFormino lightning talk for JUI conference Tokyo.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,741
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
14
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jFormino Kang-min Liu gugod@gugod.org
  • 2. jFormino
  • 3. jQuery Form by Handlino
  • 4. What does it do
  • 5. Dynamic Form Generator
  • 6. Generate <form>
  • 7. Simple Example $(quot;<div/>quot;) .attr({ id: quot;form1quot; }) .prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ quot;field_onequot; ] });
  • 8. Extended Example $(quot;<div/>quot;).attr({ id: quot;form1quot; }).prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ // only give field name, with auto-generateed label. quot;field_onequot;, // manually assign a label { label: quot;Fooquot;, name: quot;foo_fieldquot; }, // with initial value { label: quot;Barquot;, name: quot;bar_fieldquot;, value: quot;42quot; }, // other types { name: quot;xyzquot;, label: quot;XYZquot;, type: quot;checkboxquot;, values: [ 42, 43, 44 ] } ] });
  • 9. Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 10. Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 11. Google Map $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { label: 'Standard Google Map ', name: 'm', type: 'googlemap', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 12. Form Element UI Binder
  • 13. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
  • 14. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
  • 15. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] });
  • 16. $(quot;input#fooquot;).formino({ act_as: 'datetime-calendar', buttons: [ { type: quot;submitquot;, label: quot;OKquot; }, { type: quot;cancelquot;, label: quot;Nevermindquot; }, { label: quot;Helloquot;, click: function(selected_date) { $(quot;#messagequot;) .text( quot;Hello, you select quot; + selected_date.toString() ); } } ] }); YUI Skin compatible CSS
  • 17. Why we designed it
  • 18. Requirement From Work
  • 19. Dynamic Form
  • 20. jQuery(quot;div#for-formquot;) .html(quot;<form><input/>...</formquot;);
  • 21. Not Elegant
  • 22. What’s the Problem ?
  • 23. jQuery(quot;div#for-formquot;) .html(quot;<form><input/>...</formquot;);
  • 24. Less Readable
  • 25. Extend
  • 26. Parameters
  • 27. Declarative Syntax
  • 28. Easy to Read ☺
  • 29. Very Extendable ☺
  • 30. All Parameters ☺
  • 31. Input Type
  • 32. • Primitives • text, password, select, radio, checkbox • Extended • Date, Time, Date+Time • Google Map • Date Range, Ranged Value
  • 33. How to use it
  • 34. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 35. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 36. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 37. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 38. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 39. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 40. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 41. $(quot;#form1quot;).formino({ legend: quot;jquery.form simple demoquot;, params: { quot;Titlequot;: quot;(The Title)quot;, quot;namequot;: { label: quot;Namequot; }, quot;readyquot;: { label: quot;Ready ?quot;, type: quot;radioquot;, values: [ quot;yesquot;, quot;noquot; ] }, quot;xoryorzquot;: { label: quot;X, Y, or Z?quot;, type: quot;radioquot;, values: [ quot;Xquot;, quot;Yquot;, quot;Zquot; ] }, quot;ctoquot;: { label: quot;Check These Outquot;, type: quot;checkboxquot;, values: [ quot;Checkquot;, quot;Thesequot;, quot;Outquot; ] }, quot;favorite_foodquot;: { label: quot;Favorite Foodquot;, type: quot;selectquot;, values: [quot;Hamquot;, quot;Hammerquot;, quot;Hamburgerquot;] } }, buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) .submit(function() { $(quot;#messagequot;).html(quot;You just submit that form:<pre>quot; + $(this).serialize() + quot;</pre>quot;); setTimeout(function() { $(quot;#messagequot;).empty(); }, 60000); return false; });
  • 42. $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] })
  • 43. $(quot;#form1quot;).formino({ legend: 'GoogleMap demo', params: [ { type: 'googlemap', label: 'Standard Google Map ', name: 'm', value_for_latitude: '25.08532', value_for_longitude: '121.561499', zlevel: 13 }, ], buttons: [ { quot;typequot;: quot;submitquot;, quot;labelquot;: quot;Goquot;, quot;valuequot;: quot;goquot; }, { quot;typequot;: quot;resetquot;, quot;labelquot;: quot;Resetquot; } ] }) “longitude=121561499;latitude=25.08532”
  • 44. FYI
  • 45. • : jFormino • http://st.handlino.com/hdc/?jFormino • contact: gugod@handlino.com gugod@gugod.org • http://twitter.com/gugod • http://twitter.com/handlino