Add example for PlaceProxy

ihaskell-display/ihaskell-widgets/Examples/Box Widgets.ipynb

@@ -160,7 +160,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The `ProxyWidget` widget allows for zero-or-one widgets to be placed inside it. Placing the widget inside itself has no effect.\n",
+    "The `ProxyWidget` widget allows for zero-or-one widgets to be placed inside it.\n",
     "\n",
     "From the IHaskell perspective, this is similar to the `Output` widget, but supports only widgets inside it."
    ]
@@ -197,6 +197,57 @@
     "proxy"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The `PlaceProxy` widget allows for more flexible use-cases involving arbitrary widgets. It is similar to `ProxyWidget`, but allows more control over where the widget is displayed.\n",
+    "\n",
+    "This widget can be used to display widgets inside markdown cells, among other places such as custom widgets or custom html elements. For example, we can create a html `div` inside this markdown cell, and cause the child widget to display in it using its CSS selector.\n",
+    "\n",
+    "`<div id=\"widget_out\"></div>`\n",
+    "\n",
+    "<div id=\"widget_out\"></div>"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": false,
+    "scrolled": false
+   },
+   "outputs": [],
+   "source": [
+    "pp <- mkPlaceProxy\n",
+    "button <- mkButton\n",
+    "setField button Description \"(0,0)\"\n",
+    "\n",
+    "-- Put button inside the place proxy widget\n",
+    "setField pp Child (Just $ ChildWidget button)\n",
+    "\n",
+    "-- Output to the div created above\n",
+    "setField pp Selector \"#widget_out\""
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The widget doesn't yet display, but when we try to display it, the child widget shows in the div as expected."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "collapsed": true
+   },
+   "outputs": [],
+   "source": [
+    "pp"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},