##// END OF EJS Templates
Fix icons and typos in ui tour
Fix icons and typos in ui tour

File last commit:

r17946:fd20d2a3
r18171:2f66cabe
Show More
Widget Basics.ipynb
444 lines | 9.5 KiB | text/plain | TextLexer
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 {
"metadata": {
Jonathan Frederic
Updated widget examples for recent changes and,...
r17726 "kernelspec": {
"codemirror_mode": {
"name": "python",
"version": 2
},
"display_name": "Python 2",
"language": "python",
"name": "python2"
},
Brian E. Granger
Work on widget tutorials
r16098 "name": "",
Jonathan Frederic
Update examples, fixing bugs found in review.
r17946 "signature": "sha256:c8af7f5d30b29ee52fe6a79cf0d573c9c2d5b2f522b04731249e3208671741d3"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated widget notebooks for PyData2014
r17501 "[Index](Index.ipynb) - [Next](Widget List.ipynb)"
]
},
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 1,
Jonathan Frederic
Updated widget notebooks for PyData2014
r17501 "metadata": {},
Jonathan Frederic
Updated examples,...
r17510 "source": [
"Simple Widget Introduction"
]
},
{
"cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"What are widgets?"
]
Jonathan Frederic
Updated widget tutorial,...
r17509 },
{
"cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
Jonathan Frederic
Updated widget notebooks for PyData2014
r17501 "source": [
Jonathan Frederic
Updated widget tutorial,...
r17509 "Widgets are elements that exists in both the front-end and the back-end.\n",
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "\n",
Jonathan Frederic
Added images
r17514 "![Kernel & front-end diagram](../images/FrontendKernel.png)"
Jonathan Frederic
Updated widget tutorial,...
r17509 ]
},
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"What can they be used for?"
]
},
{
Jonathan Frederic
Updated widget tutorial,...
r17509 "cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"You can use widgets to build **interactive GUIs** for your notebooks. \n",
"You can also use widgets to **synchronize stateful and stateless information** between Python and JavaScript."
]
},
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"Using widgets "
]
},
{
Jonathan Frederic
Updated widget tutorial,...
r17509 "cell_type": "markdown",
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"To use the widget framework, you need to **import `IPython.html.widgets`**."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "from IPython.html.widgets import *"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
{
Jonathan Frederic
Updated widget tutorial,...
r17509 "cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"repr"
]
},
{
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated widget examples for recent changes and,...
r17726 "Widgets have their own display `repr` which allows them to be displayed using IPython's display framework. Constructing and returning an `IntSlider` automatically displays the widget (as seen below). Widgets are **displayed inside the `widget area`**, which sits between the code cell and output. **You can hide all of the widgets** in the `widget area` by clicking the grey *x* in the margin."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated widget examples for recent changes and,...
r17726 "IntSlider()"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
{
Jonathan Frederic
Updated widget tutorial,...
r17509 "cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"display()"
]
},
{
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "You can also explicitly display the widget using `display(...)`."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "from IPython.display import display\n",
Jonathan Frederic
Updated widget examples for recent changes and,...
r17726 "w = IntSlider()\n",
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "display(w)"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
{
Jonathan Frederic
Updated widget tutorial,...
r17509 "cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Multiple display() calls"
]
},
{
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated widget tutorial,...
r17509 "If you display the same widget twice, the displayed instances in the front-end **will remain in sync** with each other."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "display(w)"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"Why does displaying the same widget twice work?"
]
},
{
Jonathan Frederic
Updated widget tutorials 1-2
r14708 "cell_type": "markdown",
Jonathan Frederic
Updated widget tutorial,...
r17509 "metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Widgets are **represented in the back-end by a single object**. Each time a widget is displayed, **a new representation** of that same object is created in the front-end. These representations are called **views**.\n",
"\n",
Jonathan Frederic
Added images
r17514 "![Kernel & front-end diagram](images/WidgetModelView.png)"
Jonathan Frederic
Updated widget tutorial,...
r17509 ]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Closing widgets"
]
},
{
"cell_type": "markdown",
Jonathan Frederic
Updated widget tutorials 1-2
r14708 "metadata": {},
"source": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "You can close a widget by calling its `close()` method."
Jonathan Frederic
Updated widget tutorials 1-2
r14708 ]
},
{
Jason Grout
Intermediate changes to javascript side of backbone widgets
r14486 "cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Added images
r17514 "display(w)"
],
"language": "python",
"metadata": {},
"outputs": []
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "w.close()"
Jason Grout
Intermediate changes to javascript side of backbone widgets
r14486 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jason Grout
Intermediate changes to javascript side of backbone widgets
r14486 },
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"Widget properties"
]
},
{
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "cell_type": "markdown",
Jonathan Frederic
Updated widget tutorial,...
r17509 "metadata": {
"slideshow": {
"slide_type": "slide"
}
},
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "source": [
Jonathan Frederic
Updated widget tutorial,...
r17509 "All of the IPython widgets **share a similar naming scheme**. To read the value of a widget, you can query its `value` property."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated widget examples for recent changes and,...
r17726 "w = IntSlider()\n",
Jonathan Frederic
More updates
r17512 "display(w)"
],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
More updates
r17512 },
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "w.value"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
{
"cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "Similarly, to set a widget's value, you can set its `value` property."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "w.value = 100"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
{
Jonathan Frederic
Updated widget tutorial,...
r17509 "cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Keys"
]
},
{
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated widget tutorial,...
r17509 "In addition to `value`, most widgets share `keys`, `description`, `disabled`, and `visible`. To see the entire list of synchronized, stateful properties, of any specific widget, you can **query the `keys` property**."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "w.keys"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 },
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 3,
"metadata": {},
"source": [
"Shorthand for setting the initial values of widget properties"
]
},
{
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "cell_type": "markdown",
Jonathan Frederic
Updated widget tutorial,...
r17509 "metadata": {
"slideshow": {
"slide_type": "slide"
}
},
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "source": [
Jonathan Frederic
Updated widget tutorial,...
r17509 "While creating a widget, you can set some or all of the initial values of that widget by **defining them as keyword arguments in the widget's constructor** (as seen below)."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated widget examples for recent changes and,...
r17726 "Text(value='Hello World!', disabled=True)"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jessica B. Hamrick
Update widget basics with some information about the placeholder
r16324 },
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 2,
"metadata": {},
"source": [
"Linking two similar widgets"
]
},
{
Jessica B. Hamrick
Update widget basics with some information about the placeholder
r16324 "cell_type": "markdown",
Jonathan Frederic
Updated widget tutorial,...
r17509 "metadata": {
"slideshow": {
"slide_type": "slide"
}
},
Jessica B. Hamrick
Update widget basics with some information about the placeholder
r16324 "source": [
Jonathan Frederic
Updated widget tutorial,...
r17509 "If you need to display the same value two different ways, you'll have to use two different widgets. Instead of **attempting to manually synchronize the values** of the two widgets, you can use the `traitlet` `link` function **to link two properties together**. Below, the values of three widgets are linked together."
Jessica B. Hamrick
Update widget basics with some information about the placeholder
r16324 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "from IPython.utils.traitlets import link\n",
Jonathan Frederic
Updated widget examples for recent changes and,...
r17726 "a = FloatText()\n",
"b = FloatSlider()\n",
"c = FloatProgress()\n",
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "display(a,b,c)\n",
"\n",
"\n",
"mylink = link((a, 'value'), (b, 'value'), (c, 'value'))"
Jessica B. Hamrick
Update widget basics with some information about the placeholder
r16324 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 },
{
Jonathan Frederic
Updated examples,...
r17510 "cell_type": "heading",
"level": 3,
"metadata": {},
"source": [
"Unlinking widgets"
]
},
{
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "cell_type": "markdown",
Jonathan Frederic
Updated widget tutorial,...
r17509 "metadata": {
"slideshow": {
"slide_type": "slide"
}
},
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "source": [
"Unlinking the widgets is simple. All you have to do is call `.unlink` on the link object."
]
Jessica B. Hamrick
Update widget basics with some information about the placeholder
r16324 },
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 "mylink.unlink()"
Jessica B. Hamrick
Update widget basics with some information about the placeholder
r16324 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Clear output
r17515 "outputs": []
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 },
{
"cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated widget notebooks for PyData2014
r17501 "[Index](Index.ipynb) - [Next](Widget List.ipynb)"
Jonathan Frederic
Updated basics notebook for pydata2014
r17493 ]
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 }
],
"metadata": {}
}
]
}