{ "metadata": { "name": "", "signature": "sha256:8b8aff10d83a932d5fba7b4f348d4907a1f39c6287fb13439f114bc5401d3326" }, "nbformat": 3, "nbformat_minor": 0, "worksheets": [ { "cells": [ { "cell_type": "markdown", "metadata": [], "source": [ "> This is one of the 100 recipes of the [IPython Cookbook](http://ipython-books.github.io/), the definitive guide to high-performance scientific computing and data science in Python.\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "# 3.6. Creating a custom Javascript widget in the notebook: a spreadsheet editor for Pandas" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "You need IPython 2.0+ for this recipe. Besides, you need the [Handsontable](http://handsontable.com) Javascript library. Below are the instructions to load this Javascript library in the IPython notebook.\n", "\n", "1. Go [here](https://github.com/warpech/jquery-handsontable/tree/master/dist).\n", "2. Download `jquery.handsontable.full.css` and `jquery.handsontable.full.js`, and put these two files in `~\\.ipython\\profile_default\\static\\custom\\`.\n", "3. In this folder, add the following line in `custom.js`:\n", "`require(['/static/custom/jquery.handsontable.full.js']);`\n", "4. In this folder, add the following line in `custom.css`:\n", "`@import \"/static/custom/jquery.handsontable.full.css\"`" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Now, refresh the notebook!" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "1. Let's import a few functions and classes." ] }, { "cell_type": "code", "collapsed": false, "input": [ "from IPython.html import widgets\n", "from IPython.display import display\n", "from IPython.utils.traitlets import Unicode" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "markdown", "metadata": {}, "source": [ "2. We create a new widget. The `value` trait will contain the JSON representation of the entire table. This trait will be synchronized between Python and Javascript thanks to IPython 2.0's widget machinery." ] }, { "cell_type": "code", "collapsed": false, "input": [ "class HandsonTableWidget(widgets.DOMWidget):\n", " _view_name = Unicode('HandsonTableView', sync=True)\n", " value = Unicode(sync=True)" ], "language": "python", "metadata": {}, "outputs": [] }, { "cell_type": "markdown", "metadata": {}, "source": [ "3. Now we write the Javascript code for the widget. The three important functions that are responsible for the synchronization are:\n", "\n", " * `render` for the widget initialization\n", " * `update` for Python to Javascript update\n", " * `handle_table_change` for Javascript to Python update" ] }, { "cell_type": "code", "collapsed": false, "input": [ "%%javascript\n", "var table_id = 0;\n", "require([\"widgets/js/widget\"], function(WidgetManager){ \n", " // Define the HandsonTableView\n", " var HandsonTableView = IPython.DOMWidgetView.extend({\n", " \n", " render: function(){\n", " // Initialization: creation of the HTML elements\n", " // for our widget.\n", " \n", " // Add a