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.
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
×

of

Jformino Slide 1 Jformino Slide 2 Jformino Slide 3 Jformino Slide 4 Jformino Slide 5 Jformino Slide 6 Jformino Slide 7 Jformino Slide 8 Jformino Slide 9 Jformino Slide 10 Jformino Slide 11 Jformino Slide 12 Jformino Slide 13 Jformino Slide 14 Jformino Slide 15 Jformino Slide 16 Jformino Slide 17 Jformino Slide 18 Jformino Slide 19 Jformino Slide 20 Jformino Slide 21 Jformino Slide 22 Jformino Slide 23 Jformino Slide 24 Jformino Slide 25 Jformino Slide 26 Jformino Slide 27 Jformino Slide 28 Jformino Slide 29 Jformino Slide 30 Jformino Slide 31 Jformino Slide 32 Jformino Slide 33 Jformino Slide 34 Jformino Slide 35 Jformino Slide 36 Jformino Slide 37 Jformino Slide 38 Jformino Slide 39 Jformino Slide 40 Jformino Slide 41 Jformino Slide 42 Jformino Slide 43 Jformino Slide 44 Jformino Slide 45 Jformino Slide 46 Jformino Slide 47 Jformino Slide 48
Upcoming SlideShare
Pres Syst Sh 2
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

Jformino

Download to read offline

jFormino lightning talk for JUI conference Tokyo.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • paulo.esantos

    Aug. 7, 2009

jFormino lightning talk for JUI conference Tokyo.

Views

Total views

2,493

On Slideshare

0

From embeds

0

Number of embeds

63

Actions

Downloads

15

Shares

0

Comments

0

Likes

1

×