oxjs/examples/forms/js/example.js

/*
This example demonstrates various form elements.
*/

Ox.load('UI', function() {

    var $form = Ox.FormPanel({
            form: [
                {
                    id: 'arrayinput',
                    title: 'ArrayInput',
                    description: '<code>Ox.ArrayInput</code> allows you to enter an array of strings.',
                    items: [
                        Ox.ArrayInput({
                            id: 'names',
                            label: 'Enter up to 3 names',
                            max: 3,
                            width: 256
                        })
                    ],
                    validate: function() {
                        return true;
                    }
                },
                {
                    id: 'button',
                    title: 'Button',
                    description: 'Buttons',
                    items: [
                        Ox.Button({
                            id: 'like',
                            selectable: true,
                            title: 'like',
                            type: 'image'
                        }),
                        Ox.Button({
                            id: 'lock',
                            selectable: true,
                            title: 'lock',
                            type: 'image'
                        }).bindEvent({
                            change: function(data) {
                                this.options({
                                    title: data.value ? 'unlock' : 'lock'
                                });
                            }
                        }),
                        Ox.Button({
                            id: 'select',
                            label: 'Selectable Button',
                            labelWidth: 128,
                            selectable: true,
                            title: 'Selectable Button'
                        })
                    ],
                    validate: function() {
                        return true;
                    }
                },
                {
                    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;
                    }
                },
                {
                    id: 'checkboxes',
                    title: 'Checkboxes',
                    description: '...',
                    items: [
                        Ox.Checkbox({
                            id: 'single',
                            title: 'single',
                            width: 256
                        }),
                        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;
                    }
                },
                {
                    id: 'input',
                    title: 'Input',
                    items: [
                        Ox.Input({
                            id: 'input1',
                            width: 256
                        })
                    ],
                    validate: function() {
                        return true;
                    }
                },
                {
                    id: 'objectarrayinput',
                    title: 'ObjectArrayInput',
                    description: '...',
                    items: [
                        Ox.ObjectArrayInput({
                            buttonTitles: {
                                add: 'Add person',
                                remove: 'Remove person'
                            },
                            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;
                    }
                },
                {
                    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"]
                        })
                    ],
                    validate: function() {
                        return true;
                    }
                },
                {
                    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;
                    }
                },
                {
                    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;
                    }
                },
                {
                    id: 'spreadsheet',
                    title: 'Spreadsheet',
                    items: [
                        Ox.Spreadsheet({
                            id: 'budget',
                            columns: ['2010', '2011', '2012', '2013', '2014'],
                            rows: ['Item A', 'Item B', 'Item C'],
                            title: 'Budget'
                        })
                    ],
                    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
                    })
                );
            }
        }),

        $list = Ox.TreeList({
            data: $form.values(),
            width: 256 - Ox.UI.SCROLLBAR_SIZE
        }),

        $panel = Ox.SplitPanel({
                elements: [
                    {
                        element: $form
                    },
                    {
                        element: $list,
                        resizable: true,
                        resize: [256],
                        size: 256
                    }
                ],
                orientation: 'horizontal'
            })
            .appendTo(Ox.$body)

});