"You first need to **import the WidgetManager**. You will use it later to register your view by name (the same name you used in the back-end). To import the widget manager, use the `require` method of [require.js](http://requirejs.org/) (as seen below)."
"You first need to **import the `widget` and `manager` modules**. You will use it later to register your view by name (the same name you used in the back-end). To import the modules, use the `require` method of [require.js](http://requirejs.org/) (as seen below)."
"Widgets have their own display `repr` which allows them to be displayed using IPython's display framework. Constructing and returning an `IntSliderWidget` 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."
"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."
"The `ButtonWidget` is not used to represent a data type. Instead the button widget is used to **handle mouse clicks**. The **`on_click` method** of the `ButtonWidget` can be used to register function to be called when the button is clicked. The doc string of the `on_click` can be seen below."
"The `Button` is not used to represent a data type. Instead the button widget is used to **handle mouse clicks**. The **`on_click` method** of the `Button` can be used to register function to be called when the button is clicked. The doc string of the `on_click` can be seen below."
"For a complete list of the widgets available to you, you can list the classes in the widget namespace (as seen below). Classes with the suffix `Widget` are widgets. `Widget` and `DOMWidget` are base classes."
"For a complete list of the widgets available to you, you can list the classes in the widget namespace (as seen below). `Widget` and `DOMWidget`, not listed below, are base classes."
]
},
{
@ -48,7 +57,7 @@
"collapsed": false,
"input": [
"from IPython.html import widgets\n",
"[w for w in dir(widgets) if w.endswith('Widget')]"
"[n for n in dir(widgets) if not n.endswith('Widget') and n[0] == n[0].upper() and not n[0] == '_']"
"There are 4 widgets that can be used to display a string value. Of those, the **`TextWidget` and `TextareaWidget` accept input**. The **`LatexWidget` and `HTMLWidget` display the string** as either Latex or HTML respectively, but **do not accept input**."
"There are 4 widgets that can be used to display a string value. Of those, the **`Text` and `Textarea` widgets accept input**. The **`Latex` and `HTML` widgets display the string** as either Latex or HTML respectively, but **do not accept input**."
"Since the representation of the widget you see is a **browser element**, **Cascading Style Sheets (CSS)** are used for styling. Widgets have a **`set_css` method** that allows you to **add and remove CSS properties** from your elements. The following example shows had `set_css` **can be used to set the background color** of a `TextWidget`."
"In the example above, **the color `lime` is specified by name**. CSS also supports specifying colors by a **3 byte hexadecimal string**. The first byte is red, second green, and third blue (**RGB**). The following example sets the `TextWidget`'s background to blue."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"text.set_css('background', '#0000FF')"
"from IPython.display import display"
],
"language": "python",
"metadata": {},
@ -110,104 +61,62 @@
},
{
"cell_type": "heading",
"level": 3,
"level": 1,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Forecolor"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In CSS the **font color is `color`.**"
"Widget Styling"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"text.set_css('color', '#FFFFFF')"
],
"language": "python",
"metadata": {},
"outputs": []
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Size"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"CSS is also used to set the **height and width** of controls. The `set_css` method also **can accept a single dictionary with multiple CSS properties** (as seen below)."
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"btn = widgets.ButtonWidget()\n",
"btn.set_css({\n",
" 'width': '100px',\n",
" 'height': '100px',\n",
" 'background': 'red',\n",
"})\n",
"btn"
],
"language": "python",
"level": 2,
"metadata": {},
"outputs": []
},
{
"cell_type": "heading",
"level": 3,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Removing"
"Basic styling"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To remove the styling, you can call `set_css` again, but use an empty string instead of a color value."
"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": [
"btn.set_css('background', '')"
"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": "markdown",
"metadata": {},
"source": [
"For more information about what can be done with CSS, please refer to the [Mozilla Developer Network's series on it](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started).\n"
]
},
{
"cell_type": "heading",
"level": 2,
@ -224,9 +133,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"To display widget A inside widget B, widget A must be a child of widget B. **Only one instance of any particular widget can be child of another (this limitation will be removed in IPython 3.0).** In other words, *widget A* cannot have *widget B* listed twice in it's list of children.\n",
"\n",
"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."
"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."
"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 **`AccordionWidget` or a `TabWidget` in combination with one `ContainerWidget` 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**."
"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**."
"Unlike the other two special containers, the `PopupWidget` is only **designed to display one set of widgets**. The `PopupWidget` can be used to **display widgets outside of the widget area**. "
"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**. "
"IPython defines a large number of **DOM (document object model) classes** that you can apply to your widgets. Applying a DOM class causes all of the **CSS associated with that class** to be applied to the element. Classes can be applied and removed using the **`add_class` and `remove_class`** methods **after a widget has been displayed**. The majority of DOM classes defined by IPython are actually **Bootstrap classes**. For more information on Bootstrap classes and CSS, please refer to [Bootstrap's website](http://getbootstrap.com/2.3.2/)."
]
},
{
"cell_type": "heading",
"level": 2,
"metadata": {
"slideshow": {
"slide_type": "slide"
}
},
"source": [
"Path dependent"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Both `add_class` and `remove_class` allow you to use **CSS selectors** to pick which sub elements of your widget get styled. Because of this, the `add_class` and `remove_class` methods are **path dependent (order specific)**. The following example shows the **same three calls** made in three **different orders** and the resulting output. **All three differ.**"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"%%html\n",
"<style>\n",
" div.cube { display: inline; padding: 5px; }\n",
" div.red { background: red; }\n",
" div.blue { background: blue; }\n",
"</style>"
],
"language": "python",
"metadata": {},
"outputs": []
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.html import widgets\n",
"from IPython.display import display\n",
"html = '<br />'.join([''.join(['<div class=\"cube\">x</div>' for i in range(8)]) for j in range(8)])\n",
"widget = [widgets.HTMLWidget(value=html) for i in range(3)]\n",
"Widgets can be aligned using IPython **alignment classes**. These classes should work with most widgets, but were **designed to be applied to `ContainerWidget`s**. Examples of these classes follow:"
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"source": [
"Orientation classes"
]
},
{
"cell_type": "heading",
"level": 4,
"metadata": {},
"source": [
"\"vbox\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Widget containers default to this orientation.\n",
"<div class=\"example-container vbox\">\n",
"<div class=\"example-box\">A</div>\n",
"<div class=\"example-box med\">B</div>\n",
"<div class=\"example-box lrg\">C</div>\n",
"</div>"
]
},
{
"cell_type": "heading",
"level": 4,
"metadata": {},
"source": [
"\"hbox\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"<div class=\"example-container hbox\">\n",
"<div class=\"example-box\">A</div>\n",
"<div class=\"example-box med\">B</div>\n",
"<div class=\"example-box lrg\">C</div>\n",
"</div>"
]
},
{
"cell_type": "heading",
"level": 3,
"metadata": {},
"source": [
"Packing classes"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"These examples use the **hbox layout** to show packing. Packing is the alignment of the widgets along the the **axis that they are displayed on**."
"These examples use the **hbox layout** to show alignment. Packing is the alignment of the widgets along the the **axis perpendicular to the one that they are displayed on**."
"To specify **how \"greedy\" a container is** when filling in the remaining space of its parent, the **`box-flexN`** classes are used (where N is 0, 1, or 2). The **higher the value of N, the more greedy** the child is. **`box-flex0` is the default behavior**, which is to not fill the parent."
]
},
{
"cell_type": "heading",
"level": 4,
"metadata": {},
"source": [
"Example 1"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"<div class=\"example-container sm hbox center\">\n",
"buttons = [widgets.Button(description=str(i)) for i in range(3)]\n",
"display(*buttons)"
],
"language": "python",
"metadata": {},
@ -1113,17 +593,15 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"To make a widget container display its widgets horizontally, you need to **remove the `vbox` class** from the container and **add the `hbox` class** in its place."
"To make widgets display horizontally, you need to **child them to a `HBox` widget**."
Jonathan Frederic
12 years ago