{
 "metadata": {
  "name": "",
  "signature": "sha256:dc2959199e0bacb615fcd91d8d86f494bc8d3b281f910baf86a558ebcb42d1e2"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Interactive Django Forms Demonstration\n",
      "===\n",
      "\n",
      "Introduction\n",
      "---\n",
      "Increasingly, IPython notebooks are used to interactively perform calculations or to explore the behavior of simulations, APIs or libraries. User input then often consists of manipulating code manually, which is fine most of the time. But when the input variables and their validation gets more complicated, a more sophisticated handling might be useful.\n",
      "\n",
      "The Django Forms library provides handling of input forms, and can coordinate HTML display and validation using reusable \"FormField\" and \"Widget\" classes.\n",
      "\n",
      "Initialization\n",
      "---\n",
      "The first step is to import some symbols from \"nb_django_forms\", and initialize the library. The initialization sets up an empty django environment if necessary, and initializes css and javascript code."
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from nb_django_forms import init_django_forms, DjangoFormWidget, forms, interactive_form"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 1
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "init_django_forms()"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [
      {
       "html": [
        "\n",
        "<style>\n",
        "    .nb-django-form th, .nb-django-form td {\n",
        "        padding: 11px;\n",
        "        vertical-align: middle;\n",
        "    }\n",
        "    .nb-django-form input, .nb-django-form label, .nb-django-form select {\n",
        "        margin-bottom: 0px;\n",
        "    }\n",
        "    .nb-django-form input[type=\"checkbox\"] {\n",
        "        margin: 0px;\n",
        "    }\n",
        "</style>\n"
       ],
       "metadata": {},
       "output_type": "display_data"
      },
      {
       "html": [
        "\n",
        "<script type=\"text/javascript\">\n",
        "$.fn.serializeObject = function()\n",
        "{\n",
        "    var o = {};\n",
        "    var a = this.serializeArray();\n",
        "    $.each(a, function() {\n",
        "        if (o[this.name] !== undefined) {\n",
        "            if (!o[this.name].push) {\n",
        "                o[this.name] = [o[this.name]];\n",
        "            }\n",
        "            o[this.name].push(this.value || '');\n",
        "        } else {\n",
        "            o[this.name] = this.value || '';\n",
        "        }\n",
        "    });\n",
        "    return o;\n",
        "};\n",
        "console.log(\"hello world\");\n",
        "require([\"widgets/js/widget\"], function(WidgetManager){\n",
        "    var DjangoFormView = IPython.WidgetView.extend({\n",
        "        render: function(){\n",
        "            // Get rendered form data\n",
        "            var html = this.model.get(\"form_html\");\n",
        "            var $form = $(\"<div>\"+html+\"</div>\");\n",
        "            this.$form = $form;\n",
        "            this.updateFormHtml();\n",
        "            this.model.on('change:form_html', this.updateFormHtml, this);\n",
        "            this.setElement($form);\n",
        "        },\n",
        "        updateFormHtml: function(){\n",
        "                this.$form.html(this.model.get(\"form_html\"));\n",
        "                this.$form.find(\".nb-django-submit\").click($.proxy(this.submitHandler, this));\n",
        "        },\n",
        "        submitHandler: function(evt) {\n",
        "                var json = JSON.stringify(this.$form.find(\"form\").serializeObject());\n",
        "                this.send(json);\n",
        "                this.touch();\n",
        "            },\n",
        "        events: {\n",
        "        }\n",
        "    });\n",
        "    WidgetManager.register_widget_view('DjangoFormView', DjangoFormView);\n",
        "});\n",
        "</script>\n"
       ],
       "metadata": {},
       "output_type": "display_data"
      }
     ],
     "prompt_number": 2
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Defining forms\n",
      "---\n",
      "\n",
      "Forms are classes which contain named FormFields. These fields govern the validation of the textual input received from html forms (or any other object mapping keys to string values).\n",
      "\n"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "class TestForm(forms.Form):\n",
      "    name = forms.CharField(max_length=10, initial=\"Test\")\n",
      "    check = forms.BooleanField(required=False, initial=True)\n",
      "    age = forms.IntegerField()\n",
      "    choice = forms.ChoiceField(choices=[(1,\"Pizza\"), (2,\"Pasta\"), (3,\"Salad\") ], initial=1)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 3
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "To learn more about Django forms, take a look at Django's excellent [documentation](\"https://docs.djangoproject.com/en/dev/topics/forms/\"). "
     ]
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "Interacting with forms\n",
      "---"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "@interactive_form(TestForm)\n",
      "def interaction(valid, form):\n",
      "    if valid:\n",
      "        print(form.cleaned_data)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 4
    },
    {
     "cell_type": "markdown",
     "metadata": {},
     "source": [
      "DjangoFormWidget\n",
      "---\n",
      "\n",
      "For some purposes it might be useful to instantiate the DjangoFormWidget itself. This is a bit more verbose, though, and requires callbacks:"
     ]
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.core import display \n",
      "form_widget = DjangoFormWidget(TestForm)\n",
      "def  handler(form):\n",
      "    print(form.cleaned_data)\n",
      "    \n",
      "form_widget.valid_submit.register_callback(handler)\n",
      "display.display(form_widget)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": [],
     "prompt_number": 5
    }
   ],
   "metadata": {}
  }
 ]
}