Part 3 - Placement.ipynb
328 lines
| 9.4 KiB
| text/plain
|
TextLexer
Jonathan Frederic
|
r14323 | { | |
"metadata": { | |||
Jonathan Frederic
|
r14342 | "cell_tags": [ | |
[ | |||
"<None>", | |||
null | |||
] | |||
], | |||
Jonathan Frederic
|
r14323 | "name": "" | |
}, | |||
"nbformat": 3, | |||
"nbformat_minor": 0, | |||
"worksheets": [ | |||
{ | |||
"cells": [ | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jason Grout
|
r14505 | "\n", | |
"\n", | |||
"\n", | |||
Jonathan Frederic
|
r14323 | "from IPython.html import widgets # Widget definitions\n", | |
Jonathan Frederic
|
r14342 | "from IPython.display import display # Used to display widgets in the notebook" | |
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jonathan Frederic
|
r14342 | "outputs": [], | |
Jonathan Frederic
|
r14323 | "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. With IPython widgets, the widgets are instances that live in the back-end (usally Python). There can be multiple views displayed in the front-end that represent one widget in the backend. Each view can be displayed at a different time, or even displayed two or more times in the same output. Because of this, the parent of a widget can only be set before the widget has been displayed.\n", | |||
"\n", | |||
"Every widget has a `parent` property. This property can be set via a kwarg in the widget's constructor or after construction, but before display. Calling display on an object with children automatically displays those children too (as seen below)." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"\n", | |||
Jason Grout
|
r14486 | "floatrange = widgets.FloatRangeWidget() # You can set the parent in the constructor,\n", | |
Jonathan Frederic
|
r14323 | "\n", | |
Jason Grout
|
r14486 | "string = widgets.StringWidget(value='hi')\n", | |
Jason Grout
|
r14505 | "container = widgets.ContainerWidget(children=[floatrange, string])\n", | |
Jonathan Frederic
|
r14323 | "\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. If the children are added after the parent has already been displayed, the children must be displayed themselves.\n", | |||
"\n", | |||
"In the example below, the IntRangeWidget is never rendered since display was called on the parent before the parent/child relationship was established." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
Jason Grout
|
r14505 | "intrange = widgets.IntRangeWidget() # Never gets displayed.\n", | |
"container = widgets.MulticontainerWidget(children=[intrange])\n", | |||
Jonathan Frederic
|
r14323 | "\n", | |
Jason Grout
|
r14505 | "display(container)\n" | |
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
Jason Grout
|
r14505 | "prompt_number": 5 | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"Calling display on the child fixes the problem." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"container = widgets.MulticontainerWidget()\n", | |||
"display(container)\n", | |||
"\n", | |||
"intrange = widgets.IntRangeWidget(parent=container)\n", | |||
"display(intrange) # This line is needed since the `container` has already been displayed." | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 4 | |||
}, | |||
{ | |||
"cell_type": "heading", | |||
"level": 1, | |||
"metadata": {}, | |||
"source": [ | |||
"Changing Child Views" | |||
] | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"The view used to display a widget must defined by the time the widget is displayed. If children widgets are to be displayed along with the parent in one call, their `view_name`s can't be set since all of the widgets are sharing the same display call. Instead, their `default_view_name`s must be set (as seen below)." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"\n", | |||
Jason Grout
|
r14505 | "floatrange = widgets.FloatRangeWidget()\n", | |
Jonathan Frederic
|
r14323 | "floatrange.default_view_name = \"FloatTextView\" # It can be set as a property.\n", | |
"\n", | |||
"string = widgets.StringWidget(default_view_name = \"TextAreaView\") # It can also be set in the constructor.\n", | |||
Jason Grout
|
r14505 | "container = widgets.MulticontainerWidget(children=[floatrange, string])\n", | |
Jonathan Frederic
|
r14323 | "display(container)" | |
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
Jason Grout
|
r14505 | "prompt_number": 6 | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"However, if the children are displayed after the parent, their `view_name` can also be set like normal. Both methods will work. The code below produces the same output as the code above." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"container = widgets.MulticontainerWidget()\n", | |||
"display(container)\n", | |||
"\n", | |||
"floatrange = widgets.FloatRangeWidget()\n", | |||
"floatrange.parent=container\n", | |||
"display(floatrange, view_name = \"FloatTextView\") # view_name can be set during display.\n", | |||
"\n", | |||
"string = widgets.StringWidget()\n", | |||
"string.parent = container\n", | |||
"string.default_view_name = \"TextAreaView\" # Setting default_view_name still works.\n", | |||
"display(string)\n" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 6 | |||
}, | |||
{ | |||
"cell_type": "heading", | |||
"level": 1, | |||
"metadata": {}, | |||
"source": [ | |||
"Visibility" | |||
] | |||
}, | |||
{ | |||
"cell_type": "markdown", | |||
"metadata": {}, | |||
"source": [ | |||
"Sometimes it's necessary to hide/show widget views in place, without ruining the order that they have been displayed on the page. Using the `display` method, the views are always added to the end of their respective containers. Instead the `visibility` property of widgets can be used to hide/show widgets that have already been displayed (as seen below)." | |||
] | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"string = widgets.StringWidget(value=\"Hello World!\")\n", | |||
Jason Grout
|
r14486 | "display(string, view_name=\"HTMLView\") " | |
Jonathan Frederic
|
r14323 | ], | |
"language": "python", | |||
"metadata": {}, | |||
Jason Grout
|
r14505 | "outputs": [], | |
"prompt_number": 7 | |||
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"string.visible=False" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
Jason Grout
|
r14505 | "prompt_number": 8 | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"string.visible=True" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
Jason Grout
|
r14505 | "prompt_number": 9 | |
Jonathan Frederic
|
r14323 | }, | |
{ | |||
"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", | |||
Jason Grout
|
r14486 | "first = widgets.StringWidget(description=\"First Name:\")\n", | |
"last = widgets.StringWidget(description=\"Last Name:\")\n", | |||
Jonathan Frederic
|
r14323 | "\n", | |
Jason Grout
|
r14486 | "student = widgets.BoolWidget(description=\"Student:\", value=False)\n", | |
"form.children=[first, last, student]\n", | |||
"display(form)" | |||
], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [], | |||
"prompt_number": 2 | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [ | |||
"form = widgets.ContainerWidget()\n", | |||
"first = widgets.StringWidget(description=\"First Name:\")\n", | |||
"last = widgets.StringWidget(description=\"Last Name:\")\n", | |||
"\n", | |||
"student = widgets.BoolWidget(description=\"Student:\", value=False)\n", | |||
"school_info = widgets.ContainerWidget(visible=False, children=[\n", | |||
" widgets.StringWidget(description=\"School:\"),\n", | |||
" widgets.IntRangeWidget(description=\"Grade:\", min=0, max=12, default_view_name='IntTextView')\n", | |||
" ])\n", | |||
Jonathan Frederic
|
r14323 | "\n", | |
Jason Grout
|
r14486 | "pet = widgets.StringWidget(description=\"Pet's Name:\")\n", | |
"form.children = [first, last, student, school_info, pet]\n", | |||
Jonathan Frederic
|
r14323 | "display(form)\n", | |
"\n", | |||
"def on_student_toggle(name, value):\n", | |||
Jason Grout
|
r14486 | " print value\n", | |
Jonathan Frederic
|
r14323 | " 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": {}, | |||
Jason Grout
|
r14486 | "outputs": [ | |
{ | |||
"output_type": "stream", | |||
"stream": "stdout", | |||
"text": [ | |||
"True\n" | |||
] | |||
}, | |||
{ | |||
"output_type": "stream", | |||
"stream": "stdout", | |||
"text": [ | |||
"False\n" | |||
] | |||
}, | |||
{ | |||
"output_type": "stream", | |||
"stream": "stdout", | |||
"text": [ | |||
"True\n" | |||
] | |||
}, | |||
{ | |||
"output_type": "stream", | |||
"stream": "stdout", | |||
"text": [ | |||
"False\n" | |||
] | |||
}, | |||
{ | |||
"output_type": "stream", | |||
"stream": "stdout", | |||
"text": [ | |||
"True\n" | |||
] | |||
}, | |||
{ | |||
"output_type": "stream", | |||
"stream": "stdout", | |||
"text": [ | |||
"False\n" | |||
] | |||
} | |||
], | |||
"prompt_number": 2 | |||
}, | |||
{ | |||
"cell_type": "code", | |||
"collapsed": false, | |||
"input": [], | |||
"language": "python", | |||
"metadata": {}, | |||
"outputs": [] | |||
Jonathan Frederic
|
r14323 | } | |
], | |||
"metadata": {} | |||
} | |||
] | |||
} |