update file selection example

examples/forms/file_selection/css/example.css

@@ -0,0 +1,5 @@
+.OxSplitPanel .OxFileButton,
+.OxSplitPanel .OxFileInput {
+    position: absolute;
+    left: 16px;
+}

examples/forms/file_selection/index.html

@@ -5,6 +5,7 @@
         <meta http-equiv="Keywords" content="Forms"/>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <link rel="shortcut icon" type="image/png" href="../../../source/Ox.UI/themes/classic/png/icon16.png"/>
+        <link rel="stylesheet" type="text/css" href="css/example.css"/>
         <script type="text/javascript" src="../../../dev/Ox.js"></script>
         <script type="text/javascript" src="js/example.js"></script>
         <script>window.addEventListener('message', function(e) { e.origin == window.location.origin && eval(e.data); });</script>

examples/forms/file_selection/js/example.js

@@ -1,17 +1,97 @@
 /*
-...
+This examples shows how to do file selection — usually for upload —
+in Ox.UI.
 */
+'use strict';
 
+/*
+Load the UI module.
+*/
 Ox.load('UI', function() {
 
-    var $menu = Ox.MainMenu({
+    var $elements = [
+            /*
+            Ox.FileButton creates a simple button. It has the following options:
+            <pre>
+            disabled
+                If true, the button is disabled
+            image
+                Symbol name (if type is 'image'),
+                default is 'file' or 'files'
+                (depending on maxFiles)
+            maxFiles
+                Maximum number of files,
+                default is -1 (unlimited)
+            maxSize
+                Maximum total size in bytes,
+                default is -1 (unlimited)
+            title
+                Button title (if type is 'text')
+                and tooltip text
+            type
+                Type, either 'text' or 'image',
+                default is 'text'
+            width
+                Width in px (if type is 'text')
+            </pre>
+            Ox.FileButton fires a `click` event (not on click, like Ox.Button,
+            but once the user has selected one or more files) that we can bind
+            to like this:
+            <pre>
+            $fileButton.bindEvent({
+                click: function(data) {
+                    Ox.print(data.files);
+                }
+            })
+            </pre>
+            We create two image buttons and two text buttons: one of each to
+            select a single file, one for multiple files.
+            */
+            Ox.FileButton({
+                maxFiles: 1,
+                title: 'Select File...',
+                type: 'image'
+            }),
+            Ox.FileButton({
+                title: 'Select Files...',
+                type: 'image'
+            }),
+            Ox.FileButton({
+                maxFiles: 1,
+                title: 'Select File...',
+                width: 128
+            }),
+            Ox.FileButton({
+                title: 'Select Files...',
+                width: 128
+            }),
+            /*
+            ...
+            */
+            Ox.FileInput({
+                disabled: true,
+                maxFiles: 1,
+                maxSize: 1000000,
+                width: 256
+            }),
+            Ox.FileInput({
+                maxSize: 1000000,
+                width: 256
+            })
+        ],
+        /*
+        A basic menu item looks like `{id: 'id', title: 'Title'}`. By adding a
+        `file` property (which takes the same `maxFiles`, `maxSize` and `width`
+        options as Ox.FileButton), ...
+        */
+        $menu = Ox.MainMenu({
                 menus: [
                     {id: 'file', title: 'File', items: [
                         {id: 'file', title: 'Select File...', file: {
-                            maxFiles: 1, width: 96
+                            maxFiles: 1, width: 80
                         }},
                         {id: 'files', title: 'Select Files...', file: {
-                            width: 96
+                            width: 80
                         }}
                     ]}
                 ]
@@ -22,41 +102,7 @@ Ox.load('UI', function() {
                     openDialog(data);
                 }
             }),
-        $main = Ox.Element()
+        $main = Ox.Element(),
-            .append(
-                Ox.FileButton({
-                    maxFiles: 1,
-                    title: 'Select File...',
-                    width: 128
-                })
-                .css({position: 'absolute', left: '16px', top: '16px'})
-                .bindEvent({click: showEvent})
-            )
-            .append(
-                Ox.FileButton({
-                    title: 'Select Files...',
-                    width: 128
-                })
-                .css({position: 'absolute', left: '16px', top: '48px'})
-                .bindEvent({click: showEvent})
-            )
-            .append(
-                Ox.FileInput({
-                    maxFiles: 1,
-                    maxSize: 1000000,
-                    width: 256
-                })
-                .css({position: 'absolute', left: '16px', top: '80px'})
-                .bindEvent({click: showEvent})
-            )
-            .append(
-                Ox.FileInput({
-                    maxSize: 1000000,
-                    width: 256
-                })
-                .css({position: 'absolute', left: '16px', top: '112px'})
-                .bindEvent({click: showEvent})
-            ),
         $list = Ox.TreeList({
             data: {},
             expanded: true,
@@ -78,6 +124,18 @@ Ox.load('UI', function() {
         })
         .appendTo(Ox.$body);    
 
+    $elements.forEach(function($element, i) {
+        $element
+            .css({top: 16 + 32 * i + 'px'})
+            .bindEvent(
+                $element.is('.OxFileButton') ? 'click' : 'change', showEvent
+            )
+            .appendTo($main);
+    });    
+
+    window.$elements = $elements;
+    window.$menu = $menu;
+
     function openDialog(data) {
         var $button = Ox.Button({
                     id: 'close',