##// END OF EJS Templates
Fixed bug in selection widget tests.
Fixed bug in selection widget tests.

File last commit:

r14720:48170033
r14723:e4f69ed2
Show More
Part 5 - Alignment.ipynb
312 lines | 9.9 KiB | text/plain | TextLexer
/ examples / widgets / Part 5 - Alignment.ipynb
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 {
"metadata": {
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "cell_tags": [
[
"<None>",
null
]
],
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "name": ""
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.html import widgets # Widget definitions\n",
Jonathan Frederic
Remove init_widget_js, use require.js for everything...
r14342 "from IPython.display import display # Used to display widgets in the notebook"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
Jonathan Frederic
Remove init_widget_js, use require.js for everything...
r14342 "outputs": [],
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "prompt_number": 1
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Alignment"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Most widgets have a `description` property which allows a label for the widget to be defined. The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned (as seen below) "
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated examples 3-6
r14720 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
"display(widgets.TextBoxWidget(description=\"aa:\"))\n",
"display(widgets.TextBoxWidget(description=\"aaa:\"))"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 2
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"If a label is longer than the minimum width, the widget is shifted to the right (as seen below)."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated examples 3-6
r14720 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
"display(widgets.TextBoxWidget(description=\"aa:\"))\n",
"display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
"display(widgets.TextBoxWidget(description=\"aaaaaaaaaaaaaaaaaa:\"))"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"If a `description` is not set for the widget, the label is not displayed (as seen below)."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated examples 3-6
r14720 "display(widgets.TextBoxWidget(description=\"a:\"))\n",
"display(widgets.TextBoxWidget(description=\"aa:\"))\n",
"display(widgets.TextBoxWidget(description=\"aaa:\"))\n",
"display(widgets.TextBoxWidget())"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 4
},
{
"cell_type": "heading",
"level": 1,
"metadata": {},
"source": [
"Custom Alignment"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"`ContainerWidget`s allow for custom alignment of widgets. The `hbox` and `vbox` methods (parameterless) cause the `ContainerWidget` to both horizontally and vertically align its children. The following example compares `vbox` to `hbox`."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"child_style = {\n",
" 'background': '#77CC77',\n",
" 'padding': '25px',\n",
" 'margin': '5px',\n",
" 'font-size': 'xx-large',\n",
" 'color': 'white',\n",
"}\n",
"\n",
"def make_container(title):\n",
Jonathan Frederic
Updated examples 3-6
r14720 " header = widgets.LatexWidget(value=title) \n",
" display(header)\n",
" header.set_css({\n",
" 'font-size': '30pt',\n",
" 'margin-top': '40pt',\n",
" 'margin-bottom': '20pt',\n",
" })\n",
" \n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 " container = widgets.ContainerWidget()\n",
" container.set_css('background', '#999999')\n",
" display(container)\n",
" return container\n",
"\n",
"def fill_container(container):\n",
" components = []\n",
" for i in range(3):\n",
Jonathan Frederic
Updated examples 3-6
r14720 " components.append(widgets.LatexWidget(value=\"ABC\"[i]))\n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 " components[i].set_css(child_style)\n",
Jason Grout
Example notebooks updated.
r14505 " container.children = components\n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 " \n",
"container = make_container('VBox')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('vbox')\n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "fill_container(container)\n",
"\n",
"container = make_container('HBox')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "fill_container(container)\n"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 5
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "The `ContainerWidget` `pack_start`, `pack_center`, and `pack_end` methods (parameterless) adjust the alignment of the widgets on the axis that they are being rendered on. Below is an example of the different alignments."
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "container = make_container('HBox Pack Start')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
"container.add_class('start')\n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "fill_container(container)\n",
" \n",
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "container = make_container('HBox Pack Center')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
"container.add_class('center')\n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "fill_container(container)\n",
" \n",
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "container = make_container('HBox Pack End')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
"container.add_class('end')\n",
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "fill_container(container)"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 6
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 "The `ContainerWidget` `flex0`, `flex1`, and `flex2` methods (parameterless) modify the containers flexibility. Changing a container flexibility affects how and if the container will occupy the remaining space. Setting `flex0` has the same result as setting no flex. Below is an example of different flex configurations. The number on the boxes correspond to the applied flex."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"def fill_container(container, flexes):\n",
" components = []\n",
" for i in range(len(flexes)):\n",
Jonathan Frederic
Updated examples 3-6
r14720 " components.append(widgets.ContainerWidget())\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 " components[i].set_css(child_style)\n",
" \n",
Jonathan Frederic
Updated examples 3-6
r14720 " label = widgets.LatexWidget(value=str(flexes[i]))\n",
" components[i].children = [label]\n",
" container.children = components\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 " \n",
Jonathan Frederic
Updated examples 3-6
r14720 " for i in range(len(flexes)):\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 " if flexes[i] == 0:\n",
Jonathan Frederic
Updated examples 3-6
r14720 " components[i].add_class('box-flex0')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 " elif flexes[i] == 1:\n",
Jonathan Frederic
Updated examples 3-6
r14720 " components[i].add_class('box-flex1')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 " elif flexes[i] == 2:\n",
Jonathan Frederic
Updated examples 3-6
r14720 " components[i].add_class('box-flex2')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 " \n",
"container = make_container('Different Flex Configurations')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 "fill_container(container, [0, 0, 0])\n",
" \n",
"container = make_container('')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 "fill_container(container, [0, 0, 1])\n",
" \n",
"container = make_container('')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 "fill_container(container, [0, 1, 1])\n",
" \n",
"container = make_container('')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 "fill_container(container, [0, 2, 2])\n",
" \n",
"container = make_container('')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 "fill_container(container, [0, 1, 2])\n",
" \n",
"container = make_container('')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class('hbox')\n",
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 "fill_container(container, [1, 1, 2])"
],
"language": "python",
"metadata": {},
"outputs": [],
Jonathan Frederic
Updated examples 3-6
r14720 "prompt_number": 7
Jonathan Frederic
Added flex properties example to alignment tutorial.
r14336 },
{
"cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "The `ContainerWidget` `align_start`, `align_center`, and `align_end` methods (parameterless) adjust the alignment of the widgets on the axis perpindicular to the one that they are being rendered on. Below is an example of the different alignments."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"def fill_container(container):\n",
" components = []\n",
" for i in range(3):\n",
Jonathan Frederic
Updated examples 3-6
r14720 " components.append(widgets.LatexWidget(parent=container, value=\"ABC\"[i]))\n",
Jonathan Frederic
Updated alignment example to show pack&align
r14334 " components[i].set_css(child_style)\n",
" components[i].set_css('height', str((i+1) * 50) + 'px')\n",
Jason Grout
Example notebooks updated.
r14505 " container.children = components\n",
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "\n",
"container = make_container('HBox Align Start')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class(\"hbox\")\n",
"container.add_class(\"align-start\")\n",
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "fill_container(container)\n",
" \n",
"container = make_container('HBox Align Center')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class(\"hbox\")\n",
"container.add_class(\"align-center\")\n",
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "fill_container(container)\n",
" \n",
"container = make_container('HBox Align End')\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.add_class(\"hbox\")\n",
"container.add_class(\"align-end\")\n",
Jonathan Frederic
Updated alignment example to show pack&align
r14334 "fill_container(container)"
],
"language": "python",
"metadata": {},
"outputs": [],
Jonathan Frederic
Updated examples 3-6
r14720 "prompt_number": 8
Jonathan Frederic
Updated alignment example to show pack&align
r14334 },
{
"cell_type": "markdown",
"metadata": {},
"source": [
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 "By default the widget area is a `vbox`; however, there are many uses for a `hbox`. The example below uses a `hbox` to display a set of vertical sliders, like an equalizer."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"container = widgets.ContainerWidget()\n",
Jonathan Frederic
Updated examples 3-6
r14720 "container.children=[widgets.FloatSliderWidget(orientation='vertical', description=str(i+1), value=50.0) \n",
Jason Grout
Example notebooks updated.
r14505 " for i in range(15)]\n",
Jonathan Frederic
Updated examples 3-6
r14720 "display(container)\n",
"container.add_class('hbox')"
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 ],
"language": "python",
"metadata": {},
"outputs": [],
Jonathan Frederic
Updated examples 3-6
r14720 "prompt_number": 9
Jonathan Frederic
Uploaded widget tutorial (example) notebooks.
r14323 }
],
"metadata": {}
}
]
}