From a2add1090246412cac6f23ed2ad4bd0bef8d92ef Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Thu, 14 Jun 2012 12:36:51 +0200
Subject: [PATCH] update forms example

---
 examples/forms/js/example.js | 223 ++++++++++++++++++++++++++++++++---
 1 file changed, 204 insertions(+), 19 deletions(-)

diff --git a/examples/forms/js/example.js b/examples/forms/js/example.js
index fb2b3f54..b0e14e79 100644
--- a/examples/forms/js/example.js
+++ b/examples/forms/js/example.js
@@ -2,17 +2,24 @@
 This example demonstrates various form elements.
 */
 
-Ox.load('UI', function() {
+Ox.load({Geo: {}, UI: {}, Unicode: {}}, function() {
 
-    var $form = Ox.FormPanel({
+    var countries = Ox.sortASCII(Ox.COUNTRIES.filter(function(country) {
+            return !country.dissolved && !country.disputed && !country.exception;
+        }).map(function(country) {
+            return country.name;
+        })),
+        $form = Ox.FormPanel({
             form: [
                 {
                     id: 'arrayinput',
                     title: 'ArrayInput',
-                    description: '<code>Ox.ArrayInput</code> allows you to enter an array of strings.',
+                    description: '<code>Ox.ArrayInput</code> '
+                        + 'allows you to enter an array of strings.',
                     items: [
                         Ox.ArrayInput({
-                            id: 'names',
+                            id: 'a',
+                            description: 'A: <code>{max: 3}</code>',
                             label: 'Enter up to 3 names',
                             max: 3,
                             width: 256
@@ -27,24 +34,20 @@ Ox.load('UI', function() {
                     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: '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',
@@ -86,15 +89,25 @@ Ox.load('UI', function() {
                     }
                 },
                 {
-                    id: 'checkboxes',
-                    title: 'Checkboxes',
+                    id: 'checkbox',
+                    title: 'Checkbox',
                     description: '...',
                     items: [
                         Ox.Checkbox({
                             id: 'single',
                             title: 'single',
                             width: 256
-                        }),
+                        })
+                    ],
+                    validate: function() {
+                        return true;
+                    }
+                },
+                {
+                    id: 'checkboxgroup',
+                    title: 'CheckboxGroup',
+                    description: '...',
+                    items: [
                         Ox.CheckboxGroup({
                             checkboxes: [
                                 {id: 'option1', title: 'Option 1'},
@@ -127,6 +140,91 @@ Ox.load('UI', function() {
                         return true;
                     }
                 },
+                {
+                    id: 'colorinput',
+                    title: 'ColorInput',
+                    description: '<code>Ox.ColorInput</code>',
+                    items: [
+                        Ox.ColorInput({
+                            id: 'rgb',
+                            value: [255, 0, 0]
+                        }),
+                        Ox.ColorInput({
+                            id: 'hsl',
+                            value: [0, 1, 0.5]
+                        })
+                    ],
+                    validate: function() {
+                        return true;
+                    }
+                },
+                {
+                    id: 'dateinput',
+                    title: 'DateInput',
+                    description: '<code>Ox.DateInput</code>',
+                    items: [
+                        Ox.DateInput({
+                            id: 'A',
+                            description: '<code>A {format: "short"}</code>',
+                            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;
+                    }
+                },
+                {
+                    id: 'datetimeinput',
+                    title: 'DateTimeInput',
+                    description: '<code>Ox.DateTimeInput</code>',
+                    items: [
+                        Ox.DateTimeInput({
+                            id: 'A',
+                            description: '<code>A {format: "short"}</code>',
+                            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;
+                    }
+                },
                 {
                     id: 'input',
                     title: 'Input',
@@ -134,6 +232,59 @@ Ox.load('UI', function() {
                         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;
+                    }
+                },
+                {
+                    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() {
@@ -198,6 +349,40 @@ Ox.load('UI', function() {
                             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() {