Added jscallback docs

holoviz · Oct 28, 2019 · a9a2c3d · a9a2c3d
1 parent cae69db
commit a9a2c3d
Showing 1 changed file with 79 additions and 3 deletions.
diff --git a/examples/user_guide/Links.ipynb b/examples/user_guide/Links.ipynb
@@ -212,7 +212,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "pn.Row(pn.Column(toggle, width=200, height=50), selections, pn.Spacer(width=50), selected)"
+    "pn.Row(pn.Column(toggle, width=200, height=50), selections, pn.Spacer(width=50, height=50), selected)"
    ]
   },
   {
@@ -275,6 +275,36 @@
     "#toggle.param.unwatch(watcher)"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Defining Javascript callbacks\n",
+    "\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "value1 =   pn.widgets.Spinner(value=0, width=75)\n",
+    "operator = pn.widgets.Select(value='*', options=['*', '+'], width=50, align='center')\n",
+    "value2 =   pn.widgets.Spinner(value=0, width=75)\n",
+    "button =   pn.widgets.Button(name='=', width=50)\n",
+    "result =   pn.widgets.StaticText(value='0', width=50, align='center')\n",
+    "\n",
+    "button.jscallback(clicks=\"\"\"\n",
+    "if (op.value == '*') \n",
+    "  result.text = (v1.value * v2.value).toString()\n",
+    "else\n",
+    "  result.text = (v1.value + v2.value).toString()\n",
+    "\"\"\", args={'op': operator, 'result': result, 'v1': value1, 'v2': value2})\n",
+    "\n",
+    "pn.Row(value1, operator, value2, button, result)"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -373,6 +403,39 @@
     "pn.Row(url, button)"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Defining Javascript callbacks\n",
+    "\n",
+    "Sometimes defining a simple link between to objects is not sufficient, e.g. when there are a number of objects involved. In these cases it is helpful to be able to define arbitrary Javascript callbacks. A very simple example is a very basic calculator which allows multiplying or adding two values, in this case we have two widgets to input numbers, a selector to pick the operation, a display for the result and a button.\n",
+    "\n",
+    "To implement this we define a `jscallback`, which is triggered when the `Button.clicks` property changes and provide a number of `args` allowing us to access the values of the various widgets:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "value1 =   pn.widgets.Spinner(value=0, width=75)\n",
+    "operator = pn.widgets.Select(value='*', options=['*', '+'], width=50, align='center')\n",
+    "value2 =   pn.widgets.Spinner(value=0, width=75)\n",
+    "button =   pn.widgets.Button(name='=', width=50)\n",
+    "result =   pn.widgets.StaticText(value='0', width=50, align='center')\n",
+    "\n",
+    "button.jscallback(clicks=\"\"\"\n",
+    "if (op.value == '*') \n",
+    "  result.text = (v1.value * v2.value).toString()\n",
+    "else\n",
+    "  result.text = (v1.value + v2.value).toString()\n",
+    "\"\"\", args={'op': operator, 'result': result, 'v1': value1, 'v2': value2})\n",
+    "\n",
+    "pn.Row(value1, operator, value2, button, result)"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -453,11 +516,24 @@
   }
  ],
  "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
   "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
    "name": "python",
-   "pygments_lexer": "ipython3"
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.6.8"
   }
  },
  "nbformat": 4,
- "nbformat_minor": 2
+ "nbformat_minor": 4
 }