
Creating Custom Widgets Displayed in the Jupyter Notebook
Widgets are eventful python objects that have a representation in the browser such as sliders, Google charts, and Plotly charts. Widgets can be used to build interactive GUIs for your notebooks, synchronize information between Python and JavaScript, and display HTML elements in the Jupyter notebook. Jupyter notebook allows us to develop custom widgets to be presented in the Jupyter notebook.
In addition to Python and web technologies (HTML, CSS, and JavaScript) knowledge, there are three main things that we need to know before developing custom widgets.
1. Built-in Magic Commands
Magic commands are supported by the IPython kernel. They are prefixed by the %
or %%
characters. These magic commands are designed to solve common problems in data analysis and control the behavior of IPython itself. The magic command used to create custom widgets are:
%%html
is used to render and define HTML templates and cascading style sheets for widgets%%javascript
is used to run the cell block of JavaScript code for widgets. Typically, it is used to create JavaScript modules and views for the widget front-end components
2. Traitlets
Traitlets is a framework that allows attributes in Python classes to support type checking, default values, and change events (observer pattern). Widgets use Traitlets to notify changes of the Python classes’ properties to JavaScript. Then JavaScript will update the HTML elements according to the changes.
3. Backbone.js
Backbone.js is a lightweight JavaScript library designed for developing single-page web applications. It is based on the MVC (model–view–controller) framework. The IPython widget framework relies heavily on Backbone.js for the front-end components.Â
In the next section, I will use this knowledge including CSS bootstrap and jQuery to create a Quote widget displaying real-time financial data in the Jupyter notebook.
Quote Widget
Quote Widget is a widget that displays real-time financial data in the Jupyter notebook.Â
There are three steps to implement this quote widget. All code is written in the Jupyter notebook (QuoteWidget.ipynb).Â
1. Python Widget Class
The first step is defining a Python class inheriting from the DOMWidget
 base class. The DOMWidget
 class defined in the ipywidgets
 package represents a widget that is displayed on the page as an HTML DOM element.Â
The QuoteWidget
 class contains several traitlets properties. The _view_module
, _view_module_version
, and _view_name
properties define the Backbone.js
view class for the model. The payload
, status
, and name
 are the properties of the model. The name
 property contains the unique name of the quote widget. It represents a unique ID in the HTML DOM element. The status
 property contains a text representing the status of the quote widget. The payload
 property contains real-time financial data in the field list format.
 The data in the quote widget will be updated when the value of the payload
 property has been changed. The sync=True
keyword argument tells the widget framework to synchronize the value to the Backbone.js front end.Â
2. HTML Template
The next step is using the %%html
built-in magic command to define an HTML template and styles of the quote widget. The template is defined inside the script tag with the text/template type. The ID of the template is quote-template. This template will be loaded by the Backbone.js front end. It uses the Bootstrap CSS framework to create a layout of the widget.Â
Credit: Source link