Jformino
Upcoming SlideShare
Loading in...5
×
 

Jformino

on

  • 2,999 views

jFormino lightning talk for JUI conference Tokyo.

jFormino lightning talk for JUI conference Tokyo.

Statistics

Views

Total Views
2,999
Views on SlideShare
2,894
Embed Views
105

Actions

Likes
1
Downloads
13
Comments
0

7 Embeds 105

http://blog.gugod.org 84
http://gugod.org 9
http://coderwall.com 7
http://handlino.github.com 2
http://localhost 1
http://pub.gugod.org 1
http://www.linkedin.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jformino Jformino Presentation Transcript

  • jFormino Kang-min Liu gugod@gugod.org
  • jFormino
  • jQuery Form by Handlino View slide
  • What does it do View slide
  • Dynamic Form Generator
  • Generate <form>
  • Simple Example $(quot;<div/>quot;) .attr({ id: quot;form1quot; }) .prependTo(document.body) .formino({ legend: quot;Test Purpose Formquot;, params: [ quot;field_onequot; ] });
  • 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 ] } ] });
  • 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; } ] })
  • 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; } ] })
  • 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; } ] })
  • Form Element UI Binder
  • $(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() ); } } ] });
  • $(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() ); } } ] });
  • $(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() ); } } ] });
  • $(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
  • 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, Ranged Value
  • How to use it
  • $(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; });
  • $(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; });
  • $(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; });
  • $(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; });
  • $(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; });
  • $(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; });
  • $(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; });
  • $(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; });
  • $(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; } ] })
  • $(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”
  • FYI
  • • : jFormino • http://st.handlino.com/hdc/?jFormino • contact: gugod@handlino.com gugod@gugod.org • http://twitter.com/gugod • http://twitter.com/handlino