jFormino
Kang-min Liu gugod@gugod.org
jFormino
jQuery Form by Handlino
What does it do
Dynamic
  Form
Generator
Generate
<form>
Simple Example

$(quot;<div/>quot;)
.attr({ id: quot;form1quot; })
.prependTo(document.body)
.formino({
    legend: quot;T...
Extended Example
$(quot;<div/>quot;).attr({ id: quot;form1quot; }).prependTo(document.body)
.formino({
    legend: quot;Te...
Google Map
$(quot;#form1quot;).formino({
     legend: 'GoogleMap demo',
     params: [
         {
             label: 'Sta...
Google Map
$(quot;#form1quot;).formino({
     legend: 'GoogleMap demo',
     params: [
         {
             label: 'Sta...
Google Map
$(quot;#form1quot;).formino({
     legend: 'GoogleMap demo',
     params: [
         {
             label: 'Sta...
Form Element
  UI Binder
$(quot;input#fooquot;).formino({
    act_as: 'datetime-calendar',

      buttons: [
          { type: quot;submitquot;, la...
$(quot;input#fooquot;).formino({
    act_as: 'datetime-calendar',

      buttons: [
          { type: quot;submitquot;, la...
$(quot;input#fooquot;).formino({
    act_as: 'datetime-calendar',

      buttons: [
          { type: quot;submitquot;, la...
$(quot;input#fooquot;).formino({
    act_as: 'datetime-calendar',

      buttons: [
          { type: quot;submitquot;, la...
Why we designed it
Requirement
From Work
Dynamic
 Form
jQuery(quot;div#for-formquot;)
.html(quot;<form><input/>...</formquot;);
Not Elegant
What’s the Problem ?
jQuery(quot;div#for-formquot;)
.html(quot;<form><input/>...</formquot;);
Less Readable
Extend
Parameters
Declarative
 Syntax
Easy to Read ☺
Very Extendable ☺
All Parameters ☺
Input Type
• Primitives
 • text, password, select, radio, checkbox
• Extended
 • Date, Time, Date+Time
 • Google Map
 • Date Range, R...
How to use it
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
    legend: quot;jquery.form simple demoquot;,
    params: {
        quot;Titlequot;: quot;(...
$(quot;#form1quot;).formino({
     legend: 'GoogleMap demo',
     params: [
         {
             type: 'googlemap',
   ...
$(quot;#form1quot;).formino({
     legend: 'GoogleMap demo',
     params: [
         {
             type: 'googlemap',
   ...
FYI
•       : jFormino


• http://st.handlino.com/hdc/?jFormino
• contact:
    gugod@handlino.com
    gugod@gugod.org

• http:...
Jformino
Jformino
Jformino
Upcoming SlideShare
Loading in...5
×

Jformino

1,843

Published on

jFormino lightning talk for JUI conference Tokyo.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,843
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Jformino

  1. 1. jFormino Kang-min Liu gugod@gugod.org
  2. 2. jFormino
  3. 3. jQuery Form by Handlino
  4. 4. What does it do
  5. 5. Dynamic Form Generator
  6. 6. Generate <form>
  7. 7. Simple Example $(quot;<div/>quot;) .attr({ id: quot;form1quot; }) .prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ quot;field_onequot; ] });
  8. 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. 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. 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. 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. 12. Form Element UI Binder
  13. 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. 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. 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. 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. 17. Why we designed it
  18. 18. Requirement From Work
  19. 19. Dynamic Form
  20. 20. jQuery(quot;div#for-formquot;) .html(quot;<form><input/>...</formquot;);
  21. 21. Not Elegant
  22. 22. What’s the Problem ?
  23. 23. jQuery(quot;div#for-formquot;) .html(quot;<form><input/>...</formquot;);
  24. 24. Less Readable
  25. 25. Extend
  26. 26. Parameters
  27. 27. Declarative Syntax
  28. 28. Easy to Read ☺
  29. 29. Very Extendable ☺
  30. 30. All Parameters ☺
  31. 31. Input Type
  32. 32. • Primitives • text, password, select, radio, checkbox • Extended • Date, Time, Date+Time • Google Map • Date Range, Ranged Value
  33. 33. How to use it
  34. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 44. FYI
  45. 45. • : jFormino • http://st.handlino.com/hdc/?jFormino • contact: gugod@handlino.com gugod@gugod.org • http://twitter.com/gugod • http://twitter.com/handlino
  1. A particular slide catching your eye?

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

×