examples/notebooks/widgets/Tutorials - Alignment.ipynb

{
 "metadata": {
  "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(\"../static/notebook/js/widgets/bool.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/int_range.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/int.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/selection.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/string.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/float.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/container.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/multicontainer.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/button.js\");"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "javascript": [
        "$.getScript(\"../static/notebook/js/widgets/float_range.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` also supports `start`, `center`, and `end` methods (parameterless) that 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 Start')\n",
      "container.hbox()\n",
      "container.start()\n",
      "fill_container(container)\n",
      "    \n",
      "container = make_container('HBox Center')\n",
      "container.hbox()\n",
      "container.center()\n",
      "fill_container(container)\n",
      "    \n",
      "container = make_container('HBox End')\n",
      "container.hbox()\n",
      "container.end()\n",
      "fill_container(container)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 6
    },
    {
     "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": 7
    }
   ],
   "metadata": {}
  }
 ]
}