From b6138ead48d71bfeffbafbbb7d8344f6173df0f7 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 14 Jun 2012 15:50:53 +0200 Subject: [PATCH] update forms example --- examples/forms/js/example.js | 974 ++++++++++++++++++++--------------- 1 file changed, 549 insertions(+), 425 deletions(-) diff --git a/examples/forms/js/example.js b/examples/forms/js/example.js index b0e14e79..73c4d653 100644 --- a/examples/forms/js/example.js +++ b/examples/forms/js/example.js @@ -9,453 +9,577 @@ Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() { }).map(function(country) { return country.name; })), - $form = Ox.FormPanel({ - form: [ - { - id: 'arrayinput', - title: 'ArrayInput', - description: 'Ox.ArrayInput ' - + 'allows you to enter an array of strings.', - items: [ - Ox.ArrayInput({ - id: 'a', - description: 'A: {max: 3}', - label: 'Enter up to 3 names', - max: 3, - width: 256 - }) - ], - validate: function() { - return true; + elements = { + ArrayInput: { + description: 'Allows you to enter an array of strings.', + options: [ + { + description: '...', + max: 3, + width: 256 + }, + { + description: '...', + label: 'Please enter up to 3 names', + max: 3, + width: 256 } - }, - { - id: 'button', - title: 'Button', - description: 'Buttons', - items: [ - Ox.Button({ - id: 'lock', - type: 'image', - values: [ - {id: 'unlocked', title: 'lock'}, - {id: 'locked', title: 'unlock'} - ] - }), - Ox.Button({ - id: 'like', - selectable: true, - title: 'like', - type: 'image' - }), - Ox.Button({ - id: 'select', - label: 'Selectable Button', - labelWidth: 128, - selectable: true, - title: 'Selectable Button' - }) - ], - validate: function() { - return true; + ] + }, + Button: { + description: '...', + options: [ + { + description: 'Selectable image button with tooltip', + selectable: true, + title: 'like', + tooltip: 'Like', + type: 'image' + }, + { + description: 'Multi-value image button with tooltip', + tooltip: ['Lock', 'Unlock'], + type: 'image', + values: [ + {id: 'unlocked', title: 'lock'}, + {id: 'locked', title: 'unlock'} + ] + }, + { + description: 'Selectable button', + selectable: true, + title: 'Select me' + }, + { + description: 'Multi-value button with fixed width', + values: [ + {id: 'off', title: 'Off'}, + {id: 'on', title: 'On'} + ], + width: 64 } - }, - { - id: 'buttongroup', - title: 'ButtonGroup', - description: 'Buttons', - items: [ - Ox.ButtonGroup({ - buttons: [ - {id: 'exclamation', title: 'warning'}, - {id: 'question', title: 'help'} - ], - id: 'buttongroup_image', - selectable: true, - type: 'image' - }), - Ox.ButtonGroup({ - buttons: [ - {id: 'option1', title: 'Option 1'}, - {id: 'option2', title: 'Option 2'}, - {id: 'option3', title: 'Option 3'} - ], - id: 'buttongroup_text', - selectable: true - }) - ], - validate: function() { - return true; + ] + }, + ButtonGroup: { + description: '...', + options: [ + { + description: 'Image buttons, select one', + buttons: [ + {id: 'grid', title: 'grid'}, + {id: 'iconlist', title: 'iconlist'}, + {id: 'list', title: 'list'}, + {id: 'columns', title: 'columns'} + ], + selectable: true, + type: 'image' + }, + { + description: 'Image buttons, select any', + buttons: [ + {id: 'check', title: 'check'}, + {id: 'flag', title: 'flag'}, + {id: 'like', title: 'like'}, + {id: 'star', title: 'star'} + ], + max: -1, + min: 0, + selectable: true, + type: 'image' + }, + { + description: 'Text buttons, select one', + buttons: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'or select me'}, + {id: 'c', title: 'or select me'} + ], + selectable: true + }, + { + description: 'Text buttons, select one or two', + buttons: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'and select me'}, + {id: 'c', title: 'or select me'} + ], + max: 2, + min: 1, + selectable: true + }, + { + description: 'Text buttons, select two', + buttons: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'and select me'}, + {id: 'c', title: 'or select me'} + ], + max: 2, + min: 2, + selectable: true + }, + { + description: 'Text buttons, select any', + buttons: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'and select me'}, + {id: 'c', title: 'and select me'} + ], + max: -1, + min: 0, + selectable: true } - }, - { - id: 'checkbox', - title: 'Checkbox', - description: '...', - items: [ - Ox.Checkbox({ - id: 'single', - title: 'single', - width: 256 - }) - ], - validate: function() { - return true; + ] + }, + Checkbox: { + description: '...', + options: [ + { + description: 'Checkbox' + }, + { + description: 'Checkbox with label', + title: 'Check me', + width: 128 } - }, - { - id: 'checkboxgroup', - title: 'CheckboxGroup', - description: '...', - items: [ - Ox.CheckboxGroup({ - checkboxes: [ - {id: 'option1', title: 'Option 1'}, - {id: 'option2', title: 'Option 2'}, - {id: 'option3', title: 'Option 3'} - ], - description: 'Description...', - id: 'group' - }), - Ox.CheckboxGroup({ - checkboxes: [ - {id: 'optiona', title: 'Option 1'}, - {id: 'optionb', title: 'Option 2'}, - {id: 'optionc', title: 'Option 3'} - ], - id: 'list', - type: 'list', - width: 256 - }), - Ox.CheckboxGroup({ - checkboxes: [ - {id: 'option1', title: 'Option 1'}, - {id: 'option2', title: 'Option 2'}, - {id: 'option3', title: 'Option 3'} - ], - id: 'group2' - }), - ], - validate: function() { - return true; + ] + }, + CheckboxGroup: { + description: '...', + options: [ + { + description: 'Checkboxes, select one', + checkboxes: [ + {id: 'a', title: 'Check me'}, + {id: 'b', title: 'or check me'}, + {id: 'c', title: 'or check me'} + ], + width: 360 + }, + { + description: 'Checkboxes, select one or two', + checkboxes: [ + {id: 'a', title: 'Check me'}, + {id: 'b', title: 'and check me'}, + {id: 'c', title: 'or check me'} + ], + max: 2, + min: 1, + width: 360 + }, + { + description: 'Checkboxes, select two', + checkboxes: [ + {id: 'a', title: 'Check me'}, + {id: 'b', title: 'and check me'}, + {id: 'c', title: 'or check me'} + ], + max: 2, + min: 2, + width: 360 + }, + { + description: 'Checkboxes, select any', + checkboxes: [ + {id: 'a', title: 'Check me'}, + {id: 'b', title: 'and check me'}, + {id: 'c', title: 'and check me'} + ], + max: -1, + min: 0, + width: 360 } - }, - { - id: 'colorinput', - title: 'ColorInput', - description: 'Ox.ColorInput', - items: [ - Ox.ColorInput({ - id: 'rgb', - value: [255, 0, 0] - }), - Ox.ColorInput({ - id: 'hsl', - value: [0, 1, 0.5] - }) - ], - validate: function() { - return true; + ] + }, + ColorInput: { + description: '...', + options: [ + { + description: 'RGB', + value: [255, 0, 0] + }, + { + description: 'HSL', + mode: 'hsl' } - }, - { - id: 'dateinput', - title: 'DateInput', - description: 'Ox.DateInput', - items: [ - Ox.DateInput({ - id: 'A', - description: 'A {format: "short"}', - format: 'short' - }), - Ox.DateInput({ - id: 'medium', - description: 'Medium', - format: 'medium' - }), - Ox.DateInput({ - id: 'long', - description: 'Long', - format: 'long' - }), - Ox.DateInput({ - id: 'mediumweekday', - description: 'Medium with weekday', - format: 'medium', - weekday: true - }), - Ox.DateInput({ - id: 'longweekday', - description: 'Long with weekday', - format: 'long', - weekday: true - }) - ], - validate: function() { - return true; + ] + }, + DateInput: { + description: '...', + options: [ + { + description: 'Short date input' + }, + { + description: 'Medium date input', + format: 'medium' + }, + { + description: 'Long date input', + format: 'long' + }, + { + description: 'Medium date input with weekday', + format: 'medium', + weekday: true + }, + { + description: 'Long date input with weekday', + format: 'long', + weekday: true } - }, - { - id: 'datetimeinput', - title: 'DateTimeInput', - description: 'Ox.DateTimeInput', - items: [ - Ox.DateTimeInput({ - id: 'A', - description: 'A {format: "short"}', - ampm: true, - format: 'short' - }), - Ox.DateTimeInput({ - id: 'medium', - description: 'Medium', - format: 'medium', - seconds: true, - weekday: true - }), - Ox.DateTimeInput({ - id: 'long', - description: 'Long', - format: 'long', - seconds: true, - weekday: true - }) - ], - validate: function() { - return true; + ] + }, + DateTimeInput: { + description: '...', + options: [ + { + description: 'Short date/time input with am/pm', + ampm: true + }, + { + description: 'Medium date/time input with seconds', + format: 'medium', + seconds: true + }, + { + description: 'Long date/time input with weekday', + format: 'long', + weekday: true } - }, - { - id: 'input', - title: 'Input', - items: [ - Ox.Input({ - id: 'input1', - width: 256 - }), - Ox.Input({ - arrows: true, - description: 'Integer Input', - id: 'inputInt', - min: 0, - max: 100, - type: 'int' - }), - Ox.Input({ - autocomplete: countries, - autocompleteReplace: true, - autocompleteReplaceCorrect: true, - autocompleteSelect: true, - autocompleteSelectHighlight: true, - id: 'auto2', - width: 256 - }), - Ox.Input({ - description: 'Textarea', - id: 'textarea', - height: 128, - type: 'textarea', - width: 256 - }) - ], - validate: function() { - return true; + ] + }, + FormElementGroup: { + description: '...', + options: [ + { + description: '...', + elements: [ + Ox.Select({ + items: [ + {id: 'departure', title: 'Departure'}, + {id: 'arrival', title: 'Arrival'} + ], + overlap: 'right', + width: 96 + }), + Ox.Select({ + items: [ + {id: 'before', title: 'is before'}, + {id: 'after', title: 'is after'} + ], + overlap: 'right', + width: 96 + }), + Ox.DateInput() + ] } - }, - { - id: 'inputgroup', - title: 'InputGroup', - items: [ - Ox.InputGroup({ - id: 'inputgroupWidthHeight', - inputs: [ - Ox.Input({ - id: 'width', - placeholder: 'Width', - type: 'int', - width: 64 - }), - Ox.Input({ - id: 'height', - placeholder: 'Height', - type: 'int', - width: 64 - }) - ], - separators: [ - {title: 'x', width: 16} - ] - }) - ], - validate: function() { - return true; + ] + }, + Input: { + description: '...', + options: [ + { + description: '...', + arrows: true, + max: 100, + min: 0, + type: 'int' + }, + { + description: 'Input with placeholder', + placeholder: 'Placeholder' + }, + { + description: 'Input with label', + label: 'Label' + }, + { + description: 'Input with clear button', + clear: true + }, + { + description: 'Autocomplete with replace', + autocomplete: countries, + autocompleteReplace: true, + width: 256 + }, + { + description: 'Autocomplete with replace and correct', + autocomplete: countries, + autocompleteReplace: true, + autocompleteReplaceCorrect: true, + width: 256 + }, + { + description: 'Autocomplete with select and highlight', + autocomplete: countries, + autocompleteSelect: true, + autocompleteSelectHighlight: true, + width: 256 + }, + { + description: 'Autocomplete with replace and select', + autocomplete: countries, + autocompleteReplace: true, + autocompleteSelect: true, + width: 256 + }, + { + description: 'Autocomplete with replace, correct and select', + autocomplete: countries, + autocompleteReplace: true, + autocompleteReplaceCorrect: true, + autocompleteSelect: true, + width: 256 + }, + { + description: 'Password', + type: 'password', + width: 256 + }, + { + description: 'Password with label, placeholder and clear button', + clear: true, + label: 'Label', + placeholder: 'Placeholder', + type: 'password', + width: 256 + }, + { + description: 'Textarea with placeholder', + height: 128, + placeholder: 'Placeholder', + type: 'textarea', + width: 256 } - }, - { - id: 'objectarrayinput', - title: 'ObjectArrayInput', - description: '...', - items: [ - Ox.ObjectArrayInput({ - buttonTitles: { - add: 'Add person', - remove: 'Remove person' + ] + }, + InputGroup: { + description: '...', + options: [ + { + description: '...', + inputs: [ + Ox.Input({ + id: 'width', + placeholder: 'Width', + type: 'int', + width: 64 + }), + Ox.Input({ + id: 'height', + placeholder: 'Height', + type: 'int', + width: 64 + }) + ], + separators: [ + {title: 'x', width: 16} + ] + } + ] + }, + ObjectArrayInput: { + description: '...', + options: [ + { + buttonTitles: { + add: 'Add contact', + remove: 'Remove contact' + }, + inputs: [ + { + element: 'Input', + options: {id: 'firstname', label: 'First Name'} }, - id: 'people', - inputs: [ - { - element: 'Input', - options: {id: 'firstname', label: 'First Name'} - }, - { - element: 'Input', - options: {id: 'lastname', label: 'Last Name'} - }, - { - element: 'ArrayInput', - options: {id: 'phonenumbers', label: 'Phone Numbers'} - }, - { - element: 'Input', - options: {id: 'email', label: 'E-Mail Address'} - }, - ] - }) - ], - validate: function() { - return true; + { + element: 'Input', + options: {id: 'lastname', label: 'Last Name'} + }, + { + element: 'ArrayInput', + options: {id: 'phone', label: 'Phone Numbers', max: 3} + }, + { + element: 'Input', + options: {id: 'email', label: 'E-Mail Address'} + }, + ] } - }, - { - id: 'range', - title: 'Range', - description: '...', - items: [ - Ox.Range({ - arrows: true, - id: 'foobar', - label: 'FOOBAR', - max: 10, - min: 0, - size: 256, - thumbSize: 32, - thumbValue: true - }), - Ox.Range({ - id: 'on_or_off', - max: 1, - min: 0, - size: 48, - thumbSize: 32, - thumbValue: true, - values: ["Off", "On"] - }), - Ox.Range({ - id: 'w', - description: 'foo', - size: 360, - thumbValue: true, - trackColors: [ - 'rgb(255, 0, 0)', - 'rgb(255, 255, 0)', - 'rgb(0, 255, 0)', - 'rgb(0, 255, 255)', - 'rgb(0, 0, 255)', - 'rgb(255, 0, 255)' - ], - values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta'] - }), - Ox.Range({ - id: 'x', - description: 'foo', - max: 359, - min: 0, - size: 360, - thumbSize: 36, - thumbValue: true, - trackColors: [ - 'rgb(255, 0, 0)', - 'rgb(255, 255, 0)', - 'rgb(0, 255, 0)', - 'rgb(0, 255, 255)', - 'rgb(0, 0, 255)', - 'rgb(255, 0, 255)', - 'rgb(255, 0, 0)' - ], - trackGradient: true - }) - ], - validate: function() { - return true; + ] + }, + ObjectInput: { + description: '...', + options: [ + { + description: '...', + elements: [ + Ox.Input({id: 'firstname', label: 'First Name'}), + Ox.Input({id: 'lastname', label: 'First Name'}), + Ox.ArrayInput({id: 'phone', label: 'Phone Numbers', max: 3}), + Ox.Input({id: 'email', label: 'E-Mail Address'}) + ] } - }, - { - id: 'select', - title: 'Select', - items: [ - Ox.Select({ - id: 'select', - items: [ - {id: 'option1', title: 'Option 1'}, - {id: 'option2', title: 'Option 2'}, - {id: 'option3', title: 'Option 3'} - ], - title: 'Please select...', - width: 256 - }) - ], - validate: function() { - return true; + ] + }, + Range: { + description: '...', + options: [ + { + description: '...', + arrows: true, + max: 10, + min: 0, + size: 256, + thumbSize: 32, + thumbValue: true + }, + { + description: '...', + max: 1, + min: 0, + size: 48, + thumbSize: 32, + thumbValue: true, + values: ['Off', 'On'] + }, + { + description: '...', + size: 360, + thumbValue: true, + trackColors: [ + 'rgb(255, 0, 0)', + 'rgb(255, 255, 0)', + 'rgb(0, 255, 0)', + 'rgb(0, 255, 255)', + 'rgb(0, 0, 255)', + 'rgb(255, 0, 255)' + ], + values: ['Red', 'Yellow', 'Green', 'Cyan', 'Blue', 'Magenta'] + }, + { + description: '...', + max: 359, + min: 0, + size: 360, + thumbSize: 36, + thumbValue: true, + trackColors: [ + 'rgb(255, 0, 0)', + 'rgb(255, 255, 0)', + 'rgb(0, 255, 0)', + 'rgb(0, 255, 255)', + 'rgb(0, 0, 255)', + 'rgb(255, 0, 255)', + 'rgb(255, 0, 0)' + ], + trackGradient: true } - }, - { - id: 'selectinput', - title: 'SelectInput', - items: [ - Ox.SelectInput({ - id: 'selectinput', - inputWidth: 128, - items: [ - {id: 'option1', title: 'Option 1'}, - {id: 'option2', title: 'Option 2'}, - {id: 'option3', title: 'Option 3'}, - {id: 'other', title: 'Other...'} - ], - placeholder: 'Please specify...', - title: 'Please select...', - width: 256 - }) - ], - validate: function() { - return true; + ] + }, + Select: { + description: '...', + options: [ + { + description: '...', + items: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'or select me'}, + {id: 'c', title: 'or select me'} + ], + type: 'image', + width: 16 // fixme! + }, + { + description: '...', + items: [ + {id: 'a', title: 'Select me'}, + {id: 'b', title: 'or select me'}, + {id: 'c', title: 'or select me'} + ] } - }, - { - id: 'spreadsheet', - title: 'Spreadsheet', - items: [ - Ox.Spreadsheet({ - id: 'budget', - columns: ['2010', '2011', '2012', '2013', '2014'], - rows: ['Item A', 'Item B', 'Item C'], - title: 'Budget' - }) - ], + ] + }, + SelectInput: { + description: '...', + options: [ + { + description: '...', + items: [ + {id: 'male', title: 'Male'}, + {id: 'female', title: 'Female'}, + {id: 'other', title: 'Other...'} + ], + value: 'male', + width: 256 + } + ] + }, + Spreadsheet: { + description: '...', + options: [ + { + title: 'Budget', + value: { + columns: [2010, 2011, 2012], + rows: ['Item A', 'Item B', 'Item C'] + } + } + ] + }, + TimeInput: { + description: '...', + options: [ + { + description: 'Time input with am/pm', + ampm: true + }, + { + description: 'Time input with seconds', + seconds: true + }, + { + description: 'Time input with milliseconds', + milliseconds: true + } + ] + } + } + $form = Ox.FormPanel({ + form: Object.keys(elements).sort().map(function(name) { + var element = elements[name]; + return { + id: name.toLowerCase(), + title: name, + description: 'Ox.' + name + ' ' + + element.description[0].toLowerCase() + + element.description.slice(1), + descriptionWidth: 360, + items: element.options.map(function(options, i) { + return Ox[name](Ox.extend(options, { + id: Ox.char(97 + i), + description: Ox.char(65 + i) + '. ' + + options.description + })); + }), validate: function() { return true; } } - ] + }) }) .bindEvent({ change: function(data) { - $panel.replaceElement(1, - $list = Ox.TreeList({ - data: $form.values(), - expanded: true, - width: 256 - Ox.UI.SCROLLBAR_SIZE - }) - ); + setTimeout(function() { + $panel.replaceElement(1, + $list = Ox.TreeList({ + data: $form.values(), + expanded: true, + width: 256 - Ox.UI.SCROLLBAR_SIZE + }) + ); + }, 250); } }),