examples/widgets/Part 3 - Placement.ipynb

{
 "metadata": {
  "cell_tags": [
   [
    "<None>",
    null
   ]
  ],
  "name": ""
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "[< Back to Part 2](Part 2 - Events.ipynb) or [Index](index.ipynb)"
     ]
    },
    {
     "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"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "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.  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 kwarg 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": [
      "float_range = widgets.FloatSliderWidget()\n",
      "string = widgets.TextWidget(value='hi')\n",
      "container = widgets.ContainerWidget(children=[float_range, string])\n",
      "\n",
      "display(container) # Displays the `container` and all of it's children."
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Children can also 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",
      "display(container)\n",
      "\n",
      "int_range = widgets.IntSliderWidget()\n",
      "container.children=[int_range]\n"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 3
    },
    {
     "cell_type": "heading",
     "level": 1,
     "metadata": {},
     "source": [
      "Visibility"
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Sometimes it is necessary to hide or show widgets in place, without having to redisplay 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": [],
     "prompt_number": 4
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "string.visible=False"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "string.visible=True"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 6
    },
    {
     "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": [],
     "prompt_number": 7
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "In [Part 4](Part 4 - Styles.ipynb) of this [series](index.ipynb), you will learn about widget styling."
     ]
    }
   ],
   "metadata": {}
  }
 ]
}