{ "metadata": { "cell_tags": [ [ "", null ] ], "celltoolbar": "Slideshow", "kernelspec": { "codemirror_mode": { "name": "python", "version": 2 }, "display_name": "Python 2", "language": "python", "name": "python2" }, "name": "", "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", "" ], "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": [ "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": {} } ] }