Add Dashboard Builder section in DnD notebook

Author: jtpio

docs/source/examples/Drag and Drop.ipynb

@@ -539,6 +539,168 @@
     "      fig_box,\n",
     "      fig2_box])"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Dashboard Builder\n",
+    "\n",
+    "The drag and drop widgets can also be used to build a dashboard interactively.\n",
+    "\n",
+    "First let's define the structure of the dashboard by using the `AppLayout` layout template widget."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import AppLayout, Button, DropBox, Layout, VBox"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Whenever a `DraggableBox` widget is dropped in a `Dropbox`, the content of the `Dropbox` will be replaced by the widget."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def attach_to_box(box, widget):\n",
+    "    box.child = widget\n",
+    "\n",
+    "\n",
+    "def create_expanded_dropbox(button_style):\n",
+    "    box = DropBox(Button(description='Drop widget here', button_style=button_style, layout=Layout(width='100%', height='100%')))\n",
+    "    box.on_drop(lambda *args: attach_to_box(box, args[1]['widget']))\n",
+    "    return box"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Let's create the app layout:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "header = create_expanded_dropbox('success')\n",
+    "left_sidebar = create_expanded_dropbox('info')\n",
+    "center = create_expanded_dropbox('warning')\n",
+    "right_sidebar = create_expanded_dropbox('info')\n",
+    "footer = create_expanded_dropbox('success')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "app = AppLayout(\n",
+    "    header=header,\n",
+    "    left_sidebar=left_sidebar,\n",
+    "    center=center,\n",
+    "    right_sidebar=right_sidebar,\n",
+    "    footer=footer\n",
+    ")\n",
+    "app"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Now let's create the widgets that will be part of the dashboard."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from ipywidgets import DraggableBox, Dropdown, IntProgress, IntSlider, Label, Tab, Text, link"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "title = Label('My Custom Dashboard', layout=Layout(display='flex', justify_content='center', width='auto'))\n",
+    "DraggableBox(title, draggable=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "slider = IntSlider(min=0, max=10, step=1, layout=Layout(width='auto'), description='Slider')\n",
+    "DraggableBox(slider, draggable=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "progress = IntProgress(\n",
+    "    min=0,\n",
+    "    max=10,\n",
+    "    step=1,\n",
+    "    description='Loading:',\n",
+    "    orientation='horizontal',\n",
+    "    layout=Layout(width='auto')\n",
+    ")\n",
+    "link((slider, 'value'), (progress, 'value'))\n",
+    "DraggableBox(progress, draggable=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']\n",
+    "children = [Text(description=name) for name in tab_contents]\n",
+    "tab = Tab()\n",
+    "tab.children = children\n",
+    "for i in range(len(children)):\n",
+    "    tab.set_title(i, str(i))\n",
+    "\n",
+    "DraggableBox(tab, draggable=True)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Now let's drag the widgets and drop them in the app layout!\n",
+    "\n",
+    "In JupyterLab you can open the widget in a different panel by right clicking on the `AppLayout` widget and selecting `Create New View for Output`:\n",
+    "\n",
+    "![create-new-view-for-output](./images/create-new-view-for-output.png)\n",
+    "\n",
+    "This makes dragging widgets to the app layout more convenient."
+   ]
   }
  ],
  "metadata": {