Added flex properties example to alignment tutorial.

examples/widgets/Part 5 - Alignment.ipynb

@@ -1,322 +1,378 b''
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "name": ""
  },
  "nbformat": 3,
  "nbformat_minor": 0,
  "worksheets": [
   {
    "cells": [
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets # Widget definitions\n",
       "from IPython.display import display # Used to display widgets in the notebook\n",
       "\n",
       "# Enable widgets in this notebook\n",
       "widgets.init_widget_js()"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
         "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       }
      ],
      "prompt_number": 1
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Alignment"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Most widgets have a `description` property which allows a label for the widget to be defined.  The label of the widget has a fixed minimum width.  The text of the label is always right aligned and the widget is left aligned (as seen below) "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 2
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "If a label is longer than the minimum width, the widget is shifted to the right (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))\n",
       "display(widgets.StringWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 3
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "If a `description` is not set for the widget, the label is not displayed (as seen below)."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "display(widgets.StringWidget(description=\"a:\"))\n",
       "display(widgets.StringWidget(description=\"aa:\"))\n",
       "display(widgets.StringWidget(description=\"aaa:\"))\n",
       "display(widgets.StringWidget())"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 4
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {},
      "source": [
       "Custom Alignment"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "`ContainerWidget`s allow for custom alignment of widgets.  The `hbox` and `vbox` methods (parameterless) cause the `ContainerWidget` to both horizontally and vertically align its children.  The following example compares `vbox` to `hbox`."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "child_style = {\n",
       "    'background': '#77CC77',\n",
       "    'padding': '25px',\n",
       "    'margin': '5px',\n",
       "    'font-size': 'xx-large',\n",
       "    'color': 'white',\n",
       "}\n",
       "\n",
       "def make_container(title):\n",
       "    display(widgets.StringWidget(default_view_name='LabelView', value='<h2><br>' + title + '</h2>'))\n",
       "    container = widgets.ContainerWidget()\n",
       "    container.set_css('background', '#999999')\n",
       "    display(container)\n",
       "    return container\n",
       "\n",
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
       "        components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "        display(components[i])\n",
       "    \n",
       "container = make_container('VBox')\n",
       "container.vbox()\n",
       "fill_container(container)\n",
       "\n",
       "container = make_container('HBox')\n",
       "container.hbox()\n",
       "fill_container(container)\n"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 5
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The `ContainerWidget` `pack_start`, `pack_center`, and `pack_end` methods (parameterless) adjust the alignment of the widgets on the axis that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = make_container('HBox Pack Start')\n",
       "container.hbox()\n",
       "container.pack_start()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack Center')\n",
       "container.hbox()\n",
       "container.pack_center()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Pack End')\n",
       "container.hbox()\n",
       "container.pack_end()\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
      "prompt_number": 6
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
+      "The `ContainerWidget` `flex0`, `flex1`, and `flex2` methods (parameterless) modify the containers flexibility.  Changing a container flexibility affects how and if the container will occupy the remaining space.  Setting `flex0` has the same result as setting no flex.  Below is an example of different flex configurations.  The number on the boxes correspond to the applied flex."
+     ]
+    },
+    {
+     "cell_type": "code",
+     "collapsed": false,
+     "input": [
+      "def fill_container(container, flexes):\n",
+      "    components = []\n",
+      "    for i in range(len(flexes)):\n",
+      "        components.append(widgets.ContainerWidget(parent=container))\n",
+      "        components[i].set_css(child_style)\n",
+      "        \n",
+      "        label = widgets.StringWidget(parent=components[i], default_view_name='LabelView', value=str(flexes[i]))\n",
+      "        \n",
+      "        if flexes[i] == 0:\n",
+      "            components[i].flex0()\n",
+      "        elif flexes[i] == 1:\n",
+      "            components[i].flex1()\n",
+      "        elif flexes[i] == 2:\n",
+      "            components[i].flex2()\n",
+      "        display(components[i])\n",
+      "        \n",
+      "container = make_container('Different Flex Configurations')\n",
+      "container.hbox()\n",
+      "fill_container(container, [0, 0, 0])\n",
+      "        \n",
+      "container = make_container('')\n",
+      "container.hbox()\n",
+      "fill_container(container, [0, 0, 1])\n",
+      "        \n",
+      "container = make_container('')\n",
+      "container.hbox()\n",
+      "fill_container(container, [0, 1, 1])\n",
+      "        \n",
+      "container = make_container('')\n",
+      "container.hbox()\n",
+      "fill_container(container, [0, 2, 2])\n",
+      "        \n",
+      "container = make_container('')\n",
+      "container.hbox()\n",
+      "fill_container(container, [0, 1, 2])\n",
+      "        \n",
+      "container = make_container('')\n",
+      "container.hbox()\n",
+      "fill_container(container, [1, 1, 2])"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 7
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
       "The `ContainerWidget` `align_start`, `align_center`, and `align_end` methods (parameterless) adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on.  Below is an example of the different alignments."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "def fill_container(container):\n",
       "    components = []\n",
       "    for i in range(3):\n",
       "        components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
       "        components[i].set_css(child_style)\n",
       "        components[i].set_css('height', str((i+1) * 50) + 'px')\n",
       "        display(components[i])\n",
       "\n",
       "container = make_container('HBox Align Start')\n",
       "container.hbox()\n",
       "container.align_start()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align Center')\n",
       "container.hbox()\n",
       "container.align_center()\n",
       "fill_container(container)\n",
       "    \n",
       "container = make_container('HBox Align End')\n",
       "container.hbox()\n",
       "container.align_end()\n",
       "fill_container(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 7
+     "prompt_number": 8
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "By default the widget area is a `vbox`; however, there are many uses for a `hbox`.  The example below uses a `hbox` to display a set of vertical sliders, like an equalizer."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.ContainerWidget()\n",
       "container.hbox()\n",
       "for i in range(15):\n",
       "    widgets.FloatRangeWidget(orientation='vertical', parent=container, description=str(i+1), value=50.0)\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 8
+     "prompt_number": 9
     }
    ],
    "metadata": {}
   }
  ]
 }
  No newline at end of file