Jformino

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

Slide 2: jFormino

Slide 3: jQuery Form by Handlino

Slide 4: What does it do

Slide 6: Dynamic Form Generator

Slide 7: Generate <form>

Slide 8: Simple Example $("<div/>") .attr({ id: "form1" }) .prependTo(document.body) .formino({ legend: "Test Purpose Form", params: [ "field_one" ] });

Slide 9: Extended Example $("<div/>").attr({ id: "form1" }).prependTo(document.body) .formino({ legend: "Test Purpose Form", params: [ // only give field name, with auto-generateed label. "field_one", // manually assign a label { label: "Foo", name: "foo_field" }, // with initial value { label: "Bar", name: "bar_field", value: "42" }, // other types { name: "xyz", label: "XYZ", type: "checkbox", values: [ 42, 43, 44 ] } ] });

Slide 10: Google Map $("#form1").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: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })

Slide 11: Google Map $("#form1").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: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })

Slide 12: Google Map $("#form1").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: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })

Slide 14: Form Element UI Binder

Slide 15: $("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ] });

Slide 16: $("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ] });

Slide 17: $("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ] });

Slide 18: $("input#foo").formino({ act_as: 'datetime-calendar', buttons: [ { type: "submit", label: "OK" }, { type: "cancel", label: "Nevermind" }, { label: "Hello", click: function(selected_date) { $("#message") .text( "Hello, you select " + selected_date.toString() ); } } ] }); YUI Skin compatible CSS

Slide 19: Why we designed it

Slide 20: Requirement From Work

Slide 21: Dynamic Form

Slide 22: jQuery("div#for-form") .html("<form><input/>...</form");

Slide 23: Not Elegant

Slide 24: What’s the Problem ?

Slide 25: jQuery("div#for-form") .html("<form><input/>...</form");

Slide 26: Less Readable

Slide 27: Extend

Slide 28: Parameters

Slide 29: Declarative Syntax

Slide 30: Easy to Read ☺

Slide 31: Very Extendable ☺

Slide 32: All Parameters ☺

Slide 33: Input Type

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

Slide 35: How to use it

Slide 36: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 37: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 38: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 39: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 40: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 41: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 42: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 43: $("#form1").formino({ legend: "jquery.form simple demo", params: { "Title": "(The Title)", "name": { label: "Name" }, "ready": { label: "Ready ?", type: "radio", values: [ "yes", "no" ] }, "xoryorz": { label: "X, Y, or Z?", type: "radio", values: [ "X", "Y", "Z" ] }, "cto": { label: "Check These Out", type: "checkbox", values: [ "Check", "These", "Out" ] }, "favorite_food": { label: "Favorite Food", type: "select", values: ["Ham", "Hammer", "Hamburger"] } }, buttons: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) .submit(function() { $("#message").html("You just submit that form:<pre>" + $(this).serialize() + "</pre>"); setTimeout(function() { $("#message").empty(); }, 60000); return false; });

Slide 44: $("#form1").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: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] })

Slide 45: $("#form1").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: [ { "type": "submit", "label": "Go", "value": "go" }, { "type": "reset", "label": "Reset" } ] }) “longitude=121561499;latitude=25.08532”

Slide 46: FYI

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