Remove references to add/remove_class methods.

examples/Interactive Widgets/Widget Styling.ipynb

@@ -1,863 +1,738
 {
  "metadata": {
   "cell_tags": [
    [
     "<None>",
     null
    ]
   ],
   "celltoolbar": "Slideshow",
   "kernelspec": {
    "codemirror_mode": {
     "name": "python",
     "version": 2
    },
    "display_name": "Python 2",
    "language": "python",
    "name": "python2"
   },
   "name": "",
-  "signature": "sha256:aead3efdf2770e2764fcf617c9e9ba6d40343cf25b01642fbd2a3e66de2b0d7c"
+  "signature": "sha256:f6e8d46c3edeaf2371bf508730c093f8d1005cc9be13072aabf71dc3f49b2c3b"
  },
  "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": "code",
      "collapsed": false,
      "input": [
       "from IPython.html import widgets\n",
       "from IPython.display import display"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 1,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Widget Styling"
      ]
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {},
      "source": [
       "Basic styling"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "The widgets distributed with IPython can be styled by setting the following traits:\n",
       "\n",
       "- width  \n",
       "- height  \n",
       "- fore_color  \n",
       "- back_color  \n",
       "- border_color  \n",
       "- border_width  \n",
       "- border_style  \n",
       "- font_style  \n",
       "- font_weight  \n",
       "- font_size  \n",
       "- font_family  \n",
       "\n",
       "The example below shows how a `Button` widget can be styled:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "button = widgets.Button(\n",
       "    description='Hello World!',\n",
       "    width=100, # Integers are interpreted as pixel measurements.\n",
       "    height='2em', # em is valid HTML unit of measurement.\n",
       "    fore_color='lime', # Colors can be set by name,\n",
       "    back_color='#0022FF', # and also by color code.\n",
       "    border_color='red')\n",
       "display(button)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "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.  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.FloatSlider()\n",
       "string = widgets.Text(value='hi')\n",
       "container = widgets.Box(children=[float_range, string])\n",
       "\n",
       "container.border_color = 'red'\n",
       "container.border_style = 'dotted'\n",
       "container.border_width = 3\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.Box()\n",
       "container.border_color = 'red'\n",
       "container.border_style = 'dotted'\n",
       "container.border_width = 3\n",
       "display(container)\n",
       "\n",
       "int_range = widgets.IntSlider()\n",
       "container.children=[int_range]"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Fancy boxes"
      ]
     },
     {
      "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 **`Accordion` or a `Tab` in combination with one `Box` 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": [
       "Accordion"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "name1 = widgets.Text(description='Location:')\n",
       "zip1 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n",
       "page1 = widgets.Box(children=[name1, zip1])\n",
       "\n",
       "name2 = widgets.Text(description='Location:')\n",
       "zip2 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n",
       "page2 = widgets.Box(children=[name2, zip2])\n",
       "\n",
       "accord = widgets.Accordion(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.Text(description='Name:')\n",
       "color = widgets.Dropdown(description='Color:', values=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n",
       "page1 = widgets.Box(children=[name, color])\n",
       "\n",
       "age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)\n",
       "gender = widgets.RadioButtons(description='Gender:', values=['male', 'female'])\n",
       "page2 = widgets.Box(children=[age, gender])\n",
       "\n",
       "tabs = widgets.Tab(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": [
       "Popup"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Unlike the other two special containers, the `Popup` is only **designed to display one set of widgets**.  The `Popup` can be used to **display widgets outside of the widget area**.  "
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "counter = widgets.IntText(description='Counter:')\n",
       "popup = widgets.Popup(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.Text(description=\"a:\"))\n",
       "display(widgets.Text(description=\"aa:\"))\n",
       "display(widgets.Text(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.Text(description=\"a:\"))\n",
       "display(widgets.Text(description=\"aa:\"))\n",
       "display(widgets.Text(description=\"aaa:\"))\n",
       "display(widgets.Text(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.Text(description=\"a:\"))\n",
       "display(widgets.Text(description=\"aa:\"))\n",
       "display(widgets.Text(description=\"aaa:\"))\n",
       "display(widgets.Text())"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 2,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Flex boxes"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widgets can be aligned using the `FlexBox`, `HBox`, and `VBox` widgets."
      ]
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Application to widgets"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "Widgets display vertically by default:"
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "buttons = [widgets.Button(description=str(i)) for i in range(3)]\n",
       "display(*buttons)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "heading",
      "level": 3,
      "metadata": {
       "slideshow": {
        "slide_type": "slide"
       }
      },
      "source": [
       "Using hbox"
      ]
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "To make widgets display horizontally, you need to **child them to a `HBox` widget**."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container = widgets.HBox(children=buttons)\n",
       "display(container)"
      ],
      "language": "python",
      "metadata": {},
      "outputs": []
     },
     {
      "cell_type": "markdown",
      "metadata": {},
      "source": [
       "By setting the width of the container to 100% and its `pack` to `center`, you can center the buttons."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
       "container.width = '100%'\n",
       "container.pack = '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.HBox(children=[widgets.Button(description=c) for c in classes])\n",
-      "display(container)\n",
-      "\n",
-      "# Apply classes after display\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.HTML(value=cls)\n",
-      "    container = widgets.Box(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.IntProgress(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.Latex(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.VBox()\n",
       "first = widgets.Text(description=\"First Name:\")\n",
       "last = widgets.Text(description=\"Last Name:\")\n",
       "\n",
       "student = widgets.Checkbox(description=\"Student:\", value=False)\n",
       "school_info = widgets.VBox(visible=False, children=[\n",
       "    widgets.Text(description=\"School:\"),\n",
       "    widgets.IntText(description=\"Grade:\", min=0, max=12)\n",
       "    ])\n",
       "\n",
       "pet = widgets.Text(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": {}
   }
  ]
 }
  No newline at end of file