resizable_widget in the IPython notebook

resizable_widget

{
 "metadata": {
  "name": "",
  "signature": "sha256:bf7f38242e6bc10a68b17ad7a285e23952febabe99e0a86fbb908b4e0511e141"
 },
 "nbformat": 3,
 "nbformat_minor": 0,
 "worksheets": [
  {
   "cells": [
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "from IPython.html.widgets import DOMWidget\n",
      "from IPython.utils.traitlets import Unicode\n",
      "class MyWidget(DOMWidget):\n",
      "    _view_name = Unicode('MyView', sync=True)"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "%%javascript\n",
      "require([\"widgets/js/widget\"], function(WidgetManager){\n",
      "    var MyView = IPython.DOMWidgetView.extend({\n",
      "        render: function(){\n",
      "            var that = this;\n",
      "            var c = $('<canvas style=\"width: 500px; height=200px; background-color: black;\"/>');\n",
      "            this.$el.append(c);\n",
      "            c.resizable();\n",
      "        },\n",
      "    });\n",
      "    \n",
      "    WidgetManager.register_widget_view('MyView', MyView);\n",
      "});"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    },
    {
     "cell_type": "code",
     "collapsed": false,
     "input": [
      "widget = MyWidget()\n",
      "widget"
     ],
     "language": "python",
     "metadata": {},
     "outputs": []
    }
   ],
   "metadata": {}
  }
 ]
}