Updated alignment example to show pack&align

examples/widgets/Part 5 - Alignment.ipynb

@@ -1,5 +1,11
 {
  "metadata": {
+  "cell_tags": [
+   [
+    "<None>",
+    null
+   ]
+  ],
   "name": ""
  },
  "nbformat": 3,
@@ -22,70 +28,70
      "outputs": [
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/bool.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/button.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/int_range.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int_range.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/int.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/string.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/selection.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/multicontainer.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/string.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/bool.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/float.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/int.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/container.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/selection.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/multicontainer.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/button.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/float_range.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
       },
       {
        "javascript": [
-        "$.getScript(\"../static/notebook/js/widgets/float_range.js\");"
+        "$.getScript($(\"body\").data(\"baseProjectUrl\") + \"static/notebook/js/widgets/container.js\");"
        ],
        "metadata": {},
        "output_type": "display_data"
@@ -221,26 +227,26
      "cell_type": "markdown",
      "metadata": {},
      "source": [
-      "The `ContainerWidget` also supports `start`, `center`, and `end` methods (parameterless) that adjust the alignment of the widgets on the axis that they are being rendered on.  Below is an example of the different alignments."
+      "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."
      ]
     },
     {
      "cell_type": "code",
      "collapsed": false,
      "input": [
-      "container = make_container('HBox Start')\n",
+      "container = make_container('HBox Pack Start')\n",
       "container.hbox()\n",
-      "container.start()\n",
+      "container.pack_start()\n",
       "fill_container(container)\n",
       "    \n",
-      "container = make_container('HBox Center')\n",
+      "container = make_container('HBox Pack Center')\n",
       "container.hbox()\n",
-      "container.center()\n",
+      "container.pack_center()\n",
       "fill_container(container)\n",
       "    \n",
-      "container = make_container('HBox End')\n",
+      "container = make_container('HBox Pack End')\n",
       "container.hbox()\n",
-      "container.end()\n",
+      "container.pack_end()\n",
       "fill_container(container)"
      ],
      "language": "python",
@@ -252,6 +258,45
      "cell_type": "markdown",
      "metadata": {},
      "source": [
+      "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",
+      "        components.append(widgets.StringWidget(parent=container, default_view_name='LabelView', value=\"ABC\"[i]))\n",
+      "        components[i].set_css(child_style)\n",
+      "        components[i].set_css('height', str((i+1) * 50) + 'px')\n",
+      "        display(components[i])\n",
+      "\n",
+      "container = make_container('HBox Align Start')\n",
+      "container.hbox()\n",
+      "container.align_start()\n",
+      "fill_container(container)\n",
+      "    \n",
+      "container = make_container('HBox Align Center')\n",
+      "container.hbox()\n",
+      "container.align_center()\n",
+      "fill_container(container)\n",
+      "    \n",
+      "container = make_container('HBox Align End')\n",
+      "container.hbox()\n",
+      "container.align_end()\n",
+      "fill_container(container)"
+     ],
+     "language": "python",
+     "metadata": {},
+     "outputs": [],
+     "prompt_number": 7
+    },
+    {
+     "cell_type": "markdown",
+     "metadata": {},
+     "source": [
       "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."
      ]
     },
@@ -268,7 +313,7
      "language": "python",
      "metadata": {},
      "outputs": [],
-     "prompt_number": 7
+     "prompt_number": 8
     }
    ],
    "metadata": {}