examples/Interactive Widgets/Widget Styling.ipynb

{
 "metadata": {
  "cell_tags": [
   [
    "<None>",
    null
   ]
  ],
  "celltoolbar": "Slideshow",
  "name": "",
  "signature": "sha256:b5501a34b2148c57201625da06989ae31e2d22f429b786170c96fb703e08bc58"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<style>\n",
      ".example-container { background: #999999; padding: 2px; min-height: 100px; }\n",
      ".example-container.sm { min-height: 50px; }\n",
      ".example-box { background: #9999FF; width: 50px; height: 50px; text-align: center; vertical-align: middle; color: white; font-weight: bold; margin: 2px;}\n",
      ".example-box.med { width: 65px; height: 65px; }   \n",
      ".example-box.lrg { width: 80px; height: 80px; }   \n",
      "</style>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Widget Styling"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {},
     "source": [
      "CSS"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Since the representation of the widget you see is a **browser element**, **Cascading Style Sheets (CSS)** are used for styling.  Widgets have a **`set_css` method** that allows you to **add and remove CSS properties** from your elements.  The following example shows had `set_css` **can be used to set the background color** of a `TextWidget`."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.html import widgets\n",
      "text = widgets.TextWidget(value=\"Hello World!\")\n",
      "text.set_css('background', 'lime')\n",
      "text "
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Color codes"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In the example above, **the color `lime` is specified by name**.  CSS also supports specifying colors by a **3 byte hexadecimal string**.  The first byte is red, second green, and third blue (**RGB**).  The following example sets the `TextWidget`'s background to blue."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "text.set_css('background', '#0000FF')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Forecolor"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In CSS the **font color is `color`.**"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "text.set_css('color', '#FFFFFF')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Size"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "CSS is also used to set the **height and width** of controls.  The `set_css` method also **can accept a single dictionary with multiple CSS properties** (as seen below)."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "btn = widgets.ButtonWidget()\n",
      "btn.set_css({\n",
      "    'width': '100px',\n",
      "    'height': '100px',\n",
      "    'background': 'red',\n",
      "})\n",
      "btn"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Removing"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To remove the styling, you can call `set_css` again, but use an empty string instead of a color value."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "btn.set_css('background', '')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "For more information about what can be done with CSS, please refer to the [Mozilla Developer Network's series on it](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started).\n"
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Parent/child relationships"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To display widget A inside widget B, widget A must be a child of widget B.  **Only one instance of any particular widget can be child of another (this limitation will be removed in IPython 3.0).**  In other words, *widget A* cannot have *widget B* listed twice in it's list of children.\n",
      "\n",
      "Widgets that can contain other widgets have a **`children` attribute**.  This attribute can be **set via a keyword argument** in the widget's constructor **or after construction**.  Calling display on an **object with children automatically displays those children**, too."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.display import display\n",
      "\n",
      "float_range = widgets.FloatSliderWidget()\n",
      "string = widgets.TextWidget(value='hi')\n",
      "container = widgets.ContainerWidget(children=[float_range, string])\n",
      "\n",
      "container.set_css('border', '3px dotted red')\n",
      "display(container) # Displays the `container` and all of it's children."
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "After the parent is displayed"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Children **can be added to parents** after the parent has been displayed.  The **parent is responsible for rendering its children**."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "container = widgets.ContainerWidget()\n",
      "container.set_css('border', '3px dotted red')\n",
      "display(container)\n",
      "\n",
      "int_range = widgets.IntSliderWidget()\n",
      "container.children=[int_range]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Fancy containers"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "If you need to display a more complicated set of widgets, there are **specialized containers** that you can use.  To display **multiple sets of widgets**, you can use an **`AccordionWidget` or a `TabWidget` in combination with one `ContainerWidget` per set of widgets** (as seen below).  The \"pages\" of these widgets are their children.  To set the titles of the pages, one must **call `set_title` after the widget has been displayed**."
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "AccordionWidget"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "name1 = widgets.TextWidget(description='Location:')\n",
      "zip1 = widgets.BoundedIntTextWidget(description='Zip:', min=0, max=99999)\n",
      "page1 = widgets.ContainerWidget(children=[name1, zip1])\n",
      "\n",
      "name2 = widgets.TextWidget(description='Location:')\n",
      "zip2 = widgets.BoundedIntTextWidget(description='Zip:', min=0, max=99999)\n",
      "page2 = widgets.ContainerWidget(children=[name2, zip2])\n",
      "\n",
      "accord = widgets.AccordionWidget(children=[page1, page2])\n",
      "display(accord)\n",
      "\n",
      "accord.set_title(0, 'From')\n",
      "accord.set_title(1, 'To')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "TabWidget"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "name = widgets.TextWidget(description='Name:')\n",
      "color = widgets.DropdownWidget(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n",
      "page1 = widgets.ContainerWidget(children=[name, color])\n",
      "\n",
      "age = widgets.IntSliderWidget(description='Age:', min=0, max=120, value=50)\n",
      "gender = widgets.RadioButtonsWidget(description='Gender:', values=['male', 'female'])\n",
      "page2 = widgets.ContainerWidget(children=[age, gender])\n",
      "\n",
      "tabs = widgets.TabWidget(children=[page1, page2])\n",
      "display(tabs)\n",
      "\n",
      "tabs.set_title(0, 'Name')\n",
      "tabs.set_title(1, 'Details')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "PopupWidget"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Unlike the other two special containers, the `PopupWidget` is only **designed to display one set of widgets**.  The `PopupWidget` can be used to **display widgets outside of the widget area**.  "
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "counter = widgets.IntTextWidget(description='Counter:')\n",
      "popup = widgets.PopupWidget(children=[counter], description='Popup Demo', button_text='Popup Button')\n",
      "display(popup)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "counter.value += 1"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "counter.value += 1"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "popup.close()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Alignment"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Most widgets have a **`description` attribute**, which allows a label for the widget to be defined.\n",
      "The label of the widget **has a fixed minimum width**.\n",
      "The text of the label is **always right aligned and the widget is left aligned**:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widgets.TextWidget(description=\"a:\"))\n",
      "display(widgets.TextWidget(description=\"aa:\"))\n",
      "display(widgets.TextWidget(description=\"aaa:\"))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "If a **label is longer** than the minimum width, the **widget is shifted to the right**:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widgets.TextWidget(description=\"a:\"))\n",
      "display(widgets.TextWidget(description=\"aa:\"))\n",
      "display(widgets.TextWidget(description=\"aaa:\"))\n",
      "display(widgets.TextWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "If a `description` is **not set** for the widget, the **label is not displayed**:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widgets.TextWidget(description=\"a:\"))\n",
      "display(widgets.TextWidget(description=\"aa:\"))\n",
      "display(widgets.TextWidget(description=\"aaa:\"))\n",
      "display(widgets.TextWidget())"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "DOM Classes"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "IPython defines a large number of **DOM (document object model) classes** that you can apply to your widgets.  Applying a DOM class causes all of the **CSS associated with that class** to be applied to the element.  Classes can be applied and removed using the **`add_class` and `remove_class`** methods **after a widget has been displayed**.  The majority of DOM classes defined by IPython are actually **Bootstrap classes**.  For more information on Bootstrap classes and CSS, please refer to [Bootstrap's website](http://getbootstrap.com/2.3.2/)."
     ]
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Path dependent"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Both `add_class` and `remove_class` allow you to use **CSS selectors** to pick which sub elements of your widget get styled.  Because of this, the `add_class` and `remove_class` methods are **path dependent (order specific)**.  The following example shows the **same three calls** made in three **different orders** and the resulting output.  **All three differ.**"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%html\n",
      "<style>\n",
      "    div.cube { display: inline; padding: 5px; }\n",
      "    div.red { background: red; }\n",
      "    div.blue { background: blue; }\n",
      "</style>"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.html import widgets\n",
      "from IPython.display import display\n",
      "html = '<br />'.join([''.join(['<div class=\"cube\">x</div>' for i in range(8)]) for j in range(8)])\n",
      "widget = [widgets.HTMLWidget(value=html) for i in range(3)]\n",
      "\n",
      "display(widget[0])\n",
      "widget[0].add_class('red', 'div.cube:nth-child(even)')\n",
      "widget[0].remove_class('red', 'div.red:nth-child(7n+1)')\n",
      "widget[0].add_class('blue', 'div.red:nth-child(3n+1)')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widget[1])\n",
      "widget[1].remove_class('red', 'div.red:nth-child(7n+1)')\n",
      "widget[1].add_class('blue', 'div.red:nth-child(3n+1)')\n",
      "widget[1].add_class('red', 'div.cube:nth-child(even)')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "display(widget[2])\n",
      "widget[2].add_class('red', 'div.cube:nth-child(even)')\n",
      "widget[2].add_class('blue', 'div.red:nth-child(3n+1)')\n",
      "widget[2].remove_class('red', 'div.red:nth-child(7n+1)')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Alignment classes"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Widgets can be aligned using IPython **alignment classes**.  These classes should work with most widgets, but were **designed to be applied to `ContainerWidget`s**.  Examples of these classes follow:"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Orientation classes"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"vbox\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Widget containers default to this orientation.\n",
      "<div class=\"example-container vbox\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"hbox\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container hbox\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Packing classes"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "These examples use the **hbox layout** to show packing.  Packing is the alignment of the widgets along the the **axis that they are displayed on**."
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"start\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container hbox start\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"center\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container hbox center\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"end\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "<div class=\"example-container hbox end\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Aligning classes"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "These examples use the **hbox layout** to show alignment.  Packing is the alignment of the widgets along the the **axis perpendicular to the one that they are displayed on**."
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"align-start\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container hbox align-start\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"align-center\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container hbox align-center\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "\"align-end\""
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "<div class=\"example-container hbox align-end\">\n",
      "<div class=\"example-box\">A</div>\n",
      "<div class=\"example-box med\">B</div>\n",
      "<div class=\"example-box lrg\">C</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "Flex classes"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To specify **how \"greedy\" a container is** when filling in the remaining space of its parent, the **`box-flexN`** classes are used (where N is 0, 1, or 2).  The **higher the value of N, the more greedy** the child is.  **`box-flex0` is the default behavior**, which is to not fill the parent."
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Example 1"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container sm hbox center\">\n",
      "<div class=\"example-box box-flex0\">box-flex0</div>\n",
      "<div class=\"example-box box-flex0\">box-flex0</div>\n",
      "<div class=\"example-box box-flex0\">box-flex0</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Example 2"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container sm hbox center\">\n",
      "<div class=\"example-box box-flex0\">box-flex0</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "<div class=\"example-box box-flex0\">box-flex0</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Example 3"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container sm hbox center\">\n",
      "<div class=\"example-box box-flex0\">box-flex0</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Example 4"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container sm hbox center\">\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Example 5"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "<div class=\"example-container sm hbox center\">\n",
      "<div class=\"example-box box-flex2\">box-flex2</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 4,
     "metadata": {},
     "source": [
      "Example 6"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "<div class=\"example-container sm hbox center\">\n",
      "<div class=\"example-box box-flex0\">box-flex0</div>\n",
      "<div class=\"example-box box-flex1\">box-flex1</div>\n",
      "<div class=\"example-box box-flex2\">box-flex2</div>\n",
      "</div>"
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Application to widgets"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Widget containers **default to vbox** alignment."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "buttons = [widgets.ButtonWidget(description=str(i)) for i in range(3)]\n",
      "\n",
      "container = widgets.ContainerWidget(children=buttons)\n",
      "display(container)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Using hbox"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To make a widget container display its widgets horizontally, you need to **remove the `vbox` class** from the container and **add the `hbox` class** in its place."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "container = widgets.ContainerWidget(children=buttons)\n",
      "display(container)\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "By setting the width of the container to 100% and adding the `center` class to it, you can center the buttons."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "container.set_css('width', '100%')\n",
      "container.add_class('center')"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Style classes"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In addition to alignment classes, the classes defined by Bootstrap can also be used.  This tutorial will only cover a few of the most common classes.  For a full list of Bootstrap classes, please refer to [Bootstrap's website](http://getbootstrap.com/2.3.2/)."
     ]
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {},
     "source": [
      "ButtonWidgets"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "# List of the bootstrap button styles\n",
      "classes = [\n",
      "    'btn', \n",
      "    'btn-primary', \n",
      "    'btn-info', \n",
      "    'btn-success', \n",
      "    'btn-warning', \n",
      "    'btn-danger', \n",
      "    'btn-inverse', \n",
      "    'btn-link'\n",
      "]\n",
      "\n",
      "# Display the buttons in a hbox\n",
      "container = widgets.ContainerWidget(children=[widgets.ButtonWidget(description=c) for c in classes])\n",
      "display(container)\n",
      "\n",
      "# Apply classes after display\n",
      "container.remove_class('vbox')\n",
      "container.add_class('hbox')\n",
      "ret = [container.children[i].add_class(c) for i, c in enumerate(classes)]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "ContainerWidgets"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "def create_label(cls):\n",
      "    class_name = widgets.HTMLWidget(value=cls)\n",
      "    container = widgets.ContainerWidget(children=[class_name])\n",
      "    display(container)\n",
      "    container.add_class(cls)\n",
      "\n",
      "ret = [create_label(c) for c in [\n",
      "    'alert', \n",
      "    'alert alert-error', \n",
      "    'alert alert-success', \n",
      "    'alert alert-info'\n",
      "]]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "ProgressWidgets"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "classes = [\n",
      "    'progress-info', \n",
      "    'progress-success', \n",
      "    'progress-warning', \n",
      "    'progress-danger',\n",
      "    'progress-info progress-striped', \n",
      "    'progress-success progress-striped', \n",
      "    'progress-warning progress-striped', \n",
      "    'progress-danger progress-striped',\n",
      "    'active progress-info progress-striped', \n",
      "    'active progress-success progress-striped', \n",
      "    'active progress-warning progress-striped', \n",
      "    'active progress-danger progress-striped',\n",
      "]\n",
      "ws = [widgets.IntProgressWidget(value=50, description=c) for c in classes]\n",
      "ret = [display(w) for w in ws]\n",
      "ret = [ws[i].add_class(c) for i, cs in enumerate(classes) for c in cs.split(' ')]"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 2,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Visibility"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n",
      "The `visibility` property of widgets can be used to hide or show **widgets that have already been displayed** (as seen below)."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "string = widgets.LatexWidget(value=\"Hello World!\")\n",
      "display(string) "
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "string.visible=False"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "string.visible=True"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "heading",
     "level": 3,
     "metadata": {
      "slideshow": {
       "slide_type": "slide"
      }
     },
     "source": [
      "Another example"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets.  Try toggling the student checkbox."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "form = widgets.ContainerWidget()\n",
      "first = widgets.TextWidget(description=\"First Name:\")\n",
      "last = widgets.TextWidget(description=\"Last Name:\")\n",
      "\n",
      "student = widgets.CheckboxWidget(description=\"Student:\", value=False)\n",
      "school_info = widgets.ContainerWidget(visible=False, children=[\n",
      "    widgets.TextWidget(description=\"School:\"),\n",
      "    widgets.IntTextWidget(description=\"Grade:\", min=0, max=12)\n",
      "    ])\n",
      "\n",
      "pet = widgets.TextWidget(description=\"Pet's Name:\")\n",
      "form.children = [first, last, student, school_info, pet]\n",
      "display(form)\n",
      "\n",
      "def on_student_toggle(name, value):\n",
      "    if value:\n",
      "        school_info.visible = True\n",
      "    else:\n",
      "        school_info.visible = False\n",
      "student.on_trait_change(on_student_toggle, 'value')\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)"
     ]
    }
   ],
   "metadata": {}
  }
 ]
}