jFormino lightning talk for JUI conference Tokyo.

1. jFormino
Kang-min Liu gugod@gugod.org

2. jFormino

3. jQuery Form by Handlino

4. What does it do

6. Dynamic
Form
Generator

7. Generate
<form>

8. Simple Example
$(quot;<div/>quot;)
.attr({ id: quot;form1quot; })
.prependTo(document.body)
.formino({
legend: quot;Test Purpose Formquot;,
params: [ quot;field_onequot; ]
});

9. 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 ]
}
]
});

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. 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;
}
]
})

14. Form Element
UI Binder

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() );
}
}
]
});

17. $(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() );
}
}
]
});

18. $(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

19. Why we designed it

20. Requirement
From Work

21. Dynamic
Form

22. jQuery(quot;div#for-formquot;)
.html(quot;<form><input/>...</formquot;);

23. Not Elegant

24. What’s the Problem ?

25. jQuery(quot;div#for-formquot;)
.html(quot;<form><input/>...</formquot;);

26. Less Readable

27. Extend

28. Parameters

29. Declarative
Syntax

30. Easy to Read ☺

31. Very Extendable ☺

32. All Parameters ☺

33. Input Type

34. • Primitives
• text, password, select, radio, checkbox
• Extended
• Date, Time, Date+Time
• Google Map
• Date Range, Ranged Value

35. How to use it

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: 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;
});

43. $(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;
});

44. $(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;
}
]
})

45. $(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”

46. FYI

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