Maybe the Simplest Widget.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from IPython.html import widgets as W\n",
    "from IPython.utils import traitlets as T"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "define(\"custom_widget\", [\"widgets/js/widget\"], function(widget){\n",
       "    var CustomWidgetView = widget.WidgetView.extend({\n",
       "        render: function(){\n",
       "            this.update();\n",
       "        },\n",
       "        update: function(){\n",
       "            this.$el.text(this.model.get(\"value\"));\n",
       "        },\n",
       "        events: {\n",
       "            \"click\": \"increment\"\n",
       "        },\n",
       "        increment: function(){\n",
       "            this.model.set(\"value\", this.model.get(\"value\") + 1);\n",
       "        }\n",
       "    });\n",
       "    return {\n",
       "        CustomWidgetView: CustomWidgetView\n",
       "    }\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "define(\n",
    "    \"custom_widget\",\n",
    "    [\"widgets/js/widget\"],\n",
    "    function(widget){\n",
    "        var CustomWidgetView = widget.WidgetView.extend({\n",
    "            render: function(){\n",
    "                this.update();\n",
    "            },\n",
    "            update: function(){\n",
    "                this.$el.text(this.model.get(\"value\"));\n",
    "            },\n",
    "            events: {\n",
    "                \"click\": \"increment\"\n",
    "            },\n",
    "            increment: function(){\n",
    "                this.model.set(\"value\",\n",
    "                               this.model.get(\"value\") + 1);\n",
    "            }\n",
    "        });\n",
    "        return {\n",
    "            CustomWidgetView: CustomWidgetView\n",
    "        }\n",
    "    }\n",
    ");"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "class CustomWidget(W.DOMWidget):\n",
    "    _view_module = T.Unicode(\"custom_widget\", sync=True)\n",
    "    _view_name = T.Unicode(\"CustomWidgetView\", sync=True)\n",
    "    \n",
    "    value = T.Int(0, sync=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "cw = CustomWidget()\n",
    "cw"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "cw.value = 5"
   ]
  }
 ],
 "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",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}