{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example demonstrates **how to dynamically replace widgets in a layout** to create responsive user interfaces (requires a live Python server)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "selector = pn.widgets.Select(\n",
    "    value=pn.widgets.ColorPicker, options=[\n",
    "    pn.widgets.ColorPicker,\n",
    "    pn.widgets.DatePicker,\n",
    "    pn.widgets.FileInput,\n",
    "    pn.widgets.FloatSlider,\n",
    "    pn.widgets.RangeSlider,\n",
    "    pn.widgets.Spinner,\n",
    "    pn.widgets.TextInput,\n",
    "], css_classes=['panel-widget-box'])\n",
    "\n",
    "row = pn.Row(selector, pn.widgets.ColorPicker(), pn.pane.Str())\n",
    "\n",
    "def update_value(event):\n",
    "    row[2].object = 'Current Value: ' + str(event.new)\n",
    "\n",
    "def update_widget(event):\n",
    "    widget = event.new()\n",
    "    widget.param.watch(update_value, 'value')\n",
    "    widget.param.trigger('value')\n",
    "    row[1] = widget\n",
    "\n",
    "selector.param.watch(update_widget, 'value')\n",
    "selector.param.trigger('value')\n",
    "\n",
    "pn.Column(\n",
    "    '## Dynamically generated user interfaces',\n",
    "    row\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve dynamic_ui.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(site=\"Panel\", title=\"Dynamic UI\", main=[\"This example demonstrates **how to dynamically replace widgets in a layout** to create responsive user interfaces\", row]).servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}