{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Easy Form\n",
    "\n",
    "BeakerX has a Groovy API for creating forms that the user can fill in and trigger execution.\n",
    "It's easy to create a form with it, and easy to access the values entered.\n",
    "Just create a form object, add fields to it, and then return it so it's displayed for the\n",
    "user to interact with.\n",
    "\n",
    "The 2nd parameter to the addButton method specifies a tag.\n",
    "All cells with that tag are executed when the button is pressed.\n",
    "Use the **View → Cell Toolbar → Tags** menu item to view and edit tags."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "f = new EasyForm(\"Form and Run\")\n",
    "f.addTextField(\"first\")\n",
    "f['first'] = \"First\"\n",
    "f.addTextField(\"last\")\n",
    "f['last'] = \"Last\"\n",
    "f.addButton(\"Go!\", \"run\")\n",
    "f"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "You can access the values from the form by treating it as an array indexed on the field names:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "run"
    ]
   },
   "outputs": [],
   "source": [
    "\"Good morning \" + f[\"first\"] + \" \" + f[\"last\"]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "f['last'].reverse() + '...' + f['first']"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The array works both ways, so you set default values on the fields by writing the array:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "f['first'] = 'Beaker'\n",
    "f['last'] = 'Berzelius'"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Event Handlers for Smarter Forms\n",
    "\n",
    "You can use `onInit` and `onChange` to handle component events. For button events use `actionPerformed` or `addAction`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "f1 = new EasyForm(\"Form and Run\")\n",
    "f1.addTextField(\"first\", 15)\n",
    "f1.addTextField(\"last\", 15).onInit({f1['last'] = \"setinit1\"}).onChange({text -> f1['first'] = text + \" extra\"})\n",
    "button = f1.addButton(\"action\", \"action_button\")\n",
    "button.actionPerformed = {f1['last'] = 'action done'}    \n",
    "f1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "action_button"
    ]
   },
   "outputs": [],
   "source": [
    "f1['last'] + \", \" + f1['first']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "f1['last'] = \"new Value\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "f1['first'] = \"new Value2\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## All Kinds of Fields"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "g = new EasyForm(\"Field Types\")\n",
    "g.addTextField(\"Short Text Field\", 10)\n",
    "g.addTextField(\"Text Field\")\n",
    "g.addPasswordField(\"Password Field\", 10)\n",
    "g.addTextArea(\"Text Area\")\n",
    "g.addTextArea(\"Tall Text Area\", 10, 5)\n",
    "g.addCheckBox(\"Check Box\")\n",
    "options = [\"a\", \"b\", \"c\", \"d\"]\n",
    "g.addComboBox(\"Combo Box\", options)\n",
    "g.addComboBox(\"Editable Combo\", options, true)\n",
    "\n",
    "g.addList(\"List\", options)\n",
    "g.addList(\"List Single\", options, false)\n",
    "g.addList(\"List Two Row\", options, 2)\n",
    "\n",
    "g.addCheckBoxes(\"Check Boxes\", options)\n",
    "g.addCheckBoxes(\"Check Boxes H\", options, EasyForm.HORIZONTAL)\n",
    "\n",
    "g.addRadioButtons(\"Radio Buttons\", options)\n",
    "g.addRadioButtons(\"Radio Buttons H\", options, EasyForm.HORIZONTAL)\n",
    "\n",
    "g.addDatePicker(\"Date\")\n",
    "\n",
    "g.addButton(\"Go!\", \"run2\")\n",
    "g"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "run2"
    ]
   },
   "outputs": [],
   "source": [
    "result = [:]\n",
    "g.keySet().each {\n",
    "  result[it] = g[it]\n",
    "}\n",
    "result"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Dates"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "gdp = new EasyForm(\"Field Types\")\n",
    "gdp.addDatePicker(\"Date\")\n",
    "gdp"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "gdp['Date']"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### SetDate "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "easyForm = new EasyForm(\"Field Types\")\n",
    "// Setup date via String (format is yyyyMMdd) also works\n",
    "easyForm.addDatePicker(\"Date\").setDate(\"20180102\")\n",
    "easyForm"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Default Values"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "h = new EasyForm(\"Default Values\")\n",
    "h.addTextArea(\"Default Value\", value = \"Initial value\")\n",
    "h.addCheckBox(\"Default Checked\", value = true)\n",
    "h.addButton(\"Press\", tag = \"check\")\n",
    "h"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "check"
    ]
   },
   "outputs": [],
   "source": [
    "result = [:]\n",
    "h.keySet().each {\n",
    "  result[it] = h[it]\n",
    "}\n",
    "result"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## JupyterJSWidgets work with EasyForm\n",
    "\n",
    "The widgets from [JupyterJSWidgets](JavaWidgets.ipynb) are compatible and can appear in forms."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import com.twosigma.beakerx.widget.IntSlider\n",
    "\n",
    "w = new IntSlider()\n",
    "\n",
    "widgetForm = new EasyForm(\"pyhton widgets\")\n",
    "widgetForm.addButton(\"Press\", \"widget_test\")\n",
    "widgetForm.addWidget(\"IntSlider\",w)\n",
    "widgetForm"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "widget_test"
    ]
   },
   "outputs": [],
   "source": [
    "widgetForm['IntSlider']"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "beakerx_kernel_parameters": {},
  "celltoolbar": "Tags",
  "classpath": [],
  "imports": [],
  "kernelspec": {
   "display_name": "Groovy",
   "language": "groovy",
   "name": "groovy"
  },
  "language_info": {
   "codemirror_mode": "groovy",
   "file_extension": ".groovy",
   "mimetype": "",
   "name": "Groovy",
   "nbconverter_exporter": "",
   "version": "2.4.3"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": false,
   "sideBar": false,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {},
   "toc_section_display": false,
   "toc_window_display": false
  },
  "widgets": {
   "state": {
    "90dc3e2a-7242-492c-905f-a7dc4ce972fa": {
     "views": [
      {
       "cell_index": 7
      }
     ]
    }
   },
   "version": "1.2.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}