diff --git a/examples/Interactive Widgets/Date Picker Widget.ipynb b/examples/Interactive Widgets/Date Picker Widget.ipynb
index 42f3e80..5916174 100644
--- a/examples/Interactive Widgets/Date Picker Widget.ipynb
+++ b/examples/Interactive Widgets/Date Picker Widget.ipynb
@@ -14,7 +14,7 @@
},
{
"cell_type": "code",
- "execution_count": 1,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -70,7 +70,7 @@
},
{
"cell_type": "code",
- "execution_count": 2,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -108,27 +108,11 @@
},
{
"cell_type": "code",
- "execution_count": 3,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "application/javascript": [
- "\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
- "\n",
- "});"
- ],
- "text/plain": [
- "<IPython.core.display.Javascript at 0x109491690>"
- ]
- },
- "metadata": {},
- "output_type": "display_data"
- }
- ],
+ "outputs": [],
"source": [
"%%javascript\n",
"\n",
@@ -146,53 +130,30 @@
"**A render function must be defined**.\n",
"The render function is used to render a widget view instance to the DOM.\n",
"For now, the render function renders a div that contains the text *Hello World!*\n",
- "Lastly, the view needs to be registered with the widget manager.\n",
+ "Lastly, the view needs to be registered with the widget manager, for which we need to load another module.\n",
"\n",
"**Final JavaScript code below:**"
]
},
{
"cell_type": "code",
- "execution_count": 4,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "application/javascript": [
- "\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
- " \n",
- " // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
- " render: function(){ this.$el.text('Hello World!'); },\n",
- " });\n",
- " \n",
- " // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
- "});"
- ],
- "text/plain": [
- "<IPython.core.display.Javascript at 0x1094917d0>"
- ]
- },
- "metadata": {},
- "output_type": "display_data"
- }
- ],
+ "outputs": [],
"source": [
"%%javascript\n",
"\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+ "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
" \n",
" // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
+ " var DatePickerView = widget.DOMWidgetView.extend({\n",
" render: function(){ this.$el.text('Hello World!'); },\n",
" });\n",
" \n",
" // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+ " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
"});"
]
},
@@ -212,7 +173,7 @@
},
{
"cell_type": "code",
- "execution_count": 5,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -248,7 +209,7 @@
},
{
"cell_type": "code",
- "execution_count": 6,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -278,47 +239,18 @@
},
{
"cell_type": "code",
- "execution_count": 7,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "application/javascript": [
- "\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
- " \n",
- " // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
- " render: function(){\n",
- " \n",
- " // Create the date picker control.\n",
- " this.$date = $('<input />')\n",
- " .attr('type', 'date')\n",
- " .appendTo(this.$el);\n",
- " },\n",
- " });\n",
- " \n",
- " // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
- "});"
- ],
- "text/plain": [
- "<IPython.core.display.Javascript at 0x109491750>"
- ]
- },
- "metadata": {},
- "output_type": "display_data"
- }
- ],
+ "outputs": [],
"source": [
"%%javascript\n",
"\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+ "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
" \n",
" // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
+ " var DatePickerView = widget.DOMWidgetView.extend({\n",
" render: function(){\n",
" \n",
" // Create the date picker control.\n",
@@ -329,7 +261,7 @@
" });\n",
" \n",
" // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+ " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
"});"
]
},
@@ -342,54 +274,18 @@
},
{
"cell_type": "code",
- "execution_count": 8,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "application/javascript": [
- "\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
- " \n",
- " // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
- " render: function(){\n",
- " \n",
- " // Create the date picker control.\n",
- " this.$date = $('<input />')\n",
- " .attr('type', 'date')\n",
- " .appendTo(this.$el);\n",
- " },\n",
- " \n",
- " update: function() {\n",
- " \n",
- " // Set the value of the date control and then call base.\n",
- " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
- " return DatePickerView.__super__.update.apply(this);\n",
- " },\n",
- " });\n",
- " \n",
- " // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
- "});"
- ],
- "text/plain": [
- "<IPython.core.display.Javascript at 0x109491750>"
- ]
- },
- "metadata": {},
- "output_type": "display_data"
- }
- ],
+ "outputs": [],
"source": [
"%%javascript\n",
"\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+ "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
" \n",
" // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
+ " var DatePickerView = widget.DOMWidgetView.extend({\n",
" render: function(){\n",
" \n",
" // Create the date picker control.\n",
@@ -407,7 +303,7 @@
" });\n",
" \n",
" // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+ " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
"});"
]
},
@@ -426,65 +322,19 @@
},
{
"cell_type": "code",
- "execution_count": 9,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "application/javascript": [
- "\n",
- "\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
- " \n",
- " // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
- " render: function(){\n",
- " \n",
- " // Create the date picker control.\n",
- " this.$date = $('<input />')\n",
- " .attr('type', 'date')\n",
- " .appendTo(this.$el);\n",
- " },\n",
- " \n",
- " update: function() {\n",
- " \n",
- " // Set the value of the date control and then call base.\n",
- " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
- " return DatePickerView.__super__.update.apply(this);\n",
- " },\n",
- " \n",
- " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
- " events: {\"change\": \"handle_date_change\"},\n",
- " \n",
- " // Callback for when the date is changed.\n",
- " handle_date_change: function(event) {\n",
- " this.model.set('value', this.$date.val());\n",
- " this.touch();\n",
- " },\n",
- " });\n",
- " \n",
- " // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
- "});"
- ],
- "text/plain": [
- "<IPython.core.display.Javascript at 0x109491b10>"
- ]
- },
- "metadata": {},
- "output_type": "display_data"
- }
- ],
+ "outputs": [],
"source": [
"%%javascript\n",
"\n",
"\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+ "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
" \n",
" // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
+ " var DatePickerView = widget.DOMWidgetView.extend({\n",
" render: function(){\n",
" \n",
" // Create the date picker control.\n",
@@ -511,7 +361,7 @@
" });\n",
" \n",
" // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+ " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
"});"
]
},
@@ -531,7 +381,7 @@
},
{
"cell_type": "code",
- "execution_count": 10,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -550,7 +400,7 @@
},
{
"cell_type": "code",
- "execution_count": 11,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -568,22 +418,11 @@
},
{
"cell_type": "code",
- "execution_count": 12,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "text/plain": [
- "u''"
- ]
- },
- "execution_count": 12,
- "metadata": {},
- "output_type": "execute_result"
- }
- ],
+ "outputs": [],
"source": [
"my_widget.value"
]
@@ -597,7 +436,7 @@
},
{
"cell_type": "code",
- "execution_count": 13,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -622,7 +461,7 @@
},
{
"cell_type": "code",
- "execution_count": 14,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -659,7 +498,7 @@
},
{
"cell_type": "code",
- "execution_count": 15,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -682,7 +521,7 @@
},
{
"cell_type": "code",
- "execution_count": 16,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -709,7 +548,7 @@
},
{
"cell_type": "code",
- "execution_count": 17,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -749,7 +588,7 @@
},
{
"cell_type": "code",
- "execution_count": 18,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -811,80 +650,18 @@
},
{
"cell_type": "code",
- "execution_count": 19,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "application/javascript": [
- "\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
- " \n",
- " // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
- " render: function(){\n",
- " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
- " it fit with the other built in widgets.*/\n",
- " // Create a label.\n",
- " this.$label = $('<div />')\n",
- " .addClass('widget-hlabel')\n",
- " .appendTo(this.$el)\n",
- " .hide(); // Hide the label by default.\n",
- " \n",
- " // Create the date picker control.\n",
- " this.$date = $('<input />')\n",
- " .attr('type', 'date')\n",
- " .appendTo(this.$el);\n",
- " },\n",
- " \n",
- " update: function() {\n",
- " \n",
- " // Set the value of the date control and then call base.\n",
- " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
- " \n",
- " // Hide or show the label depending on the existance of a description.\n",
- " var description = this.model.get('description');\n",
- " if (description == undefined || description == '') {\n",
- " this.$label.hide();\n",
- " } else {\n",
- " this.$label.show();\n",
- " this.$label.text(description);\n",
- " }\n",
- " \n",
- " return DatePickerView.__super__.update.apply(this);\n",
- " },\n",
- " \n",
- " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
- " events: {\"change\": \"handle_date_change\"},\n",
- " \n",
- " // Callback for when the date is changed.\n",
- " handle_date_change: function(event) {\n",
- " this.model.set('value', this.$date.val());\n",
- " this.touch();\n",
- " },\n",
- " });\n",
- " \n",
- " // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
- "});"
- ],
- "text/plain": [
- "<IPython.core.display.Javascript at 0x1094eef90>"
- ]
- },
- "metadata": {},
- "output_type": "display_data"
- }
- ],
+ "outputs": [],
"source": [
"%%javascript\n",
"\n",
- "require([\"widgets/js/widget\"], function(WidgetManager){\n",
+ "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
" \n",
" // Define the DatePickerView\n",
- " var DatePickerView = IPython.DOMWidgetView.extend({\n",
+ " var DatePickerView = widget.DOMWidgetView.extend({\n",
" render: function(){\n",
" this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
" it fit with the other built in widgets.*/\n",
@@ -928,7 +705,7 @@
" });\n",
" \n",
" // Register the DatePickerView with the widget manager.\n",
- " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
+ " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
"});"
]
},
@@ -948,15 +725,15 @@
},
{
"cell_type": "code",
- "execution_count": 20,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"# Add some additional widgets for aesthetic purpose\n",
- "display(widgets.TextWidget(description=\"First:\"))\n",
- "display(widgets.TextWidget(description=\"Last:\"))\n",
+ "display(widgets.Text(description=\"First:\"))\n",
+ "display(widgets.Text(description=\"Last:\"))\n",
"\n",
"my_widget = DateWidget()\n",
"display(my_widget)\n",
@@ -972,7 +749,7 @@
},
{
"cell_type": "code",
- "execution_count": 21,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -988,7 +765,7 @@
},
{
"cell_type": "code",
- "execution_count": 22,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -1000,7 +777,7 @@
},
{
"cell_type": "code",
- "execution_count": 23,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
@@ -1012,25 +789,23 @@
},
{
"cell_type": "code",
- "execution_count": 24,
+ "execution_count": null,
"metadata": {
"collapsed": false
},
- "outputs": [
- {
- "data": {
- "text/plain": [
- "u'2014-12-02'"
- ]
- },
- "execution_count": 24,
- "metadata": {},
- "output_type": "execute_result"
- }
- ],
+ "outputs": [],
"source": [
"my_widget.value"
]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "metadata": {
+ "collapsed": true
+ },
+ "outputs": [],
+ "source": []
}
],
"metadata": {
@@ -1039,8 +814,24 @@
"<None>",
null
]
- ]
+ ],
+ "kernelspec": {
+ "display_name": "Python 3",
+ "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
-}
\ No newline at end of file
+}
diff --git a/examples/Interactive Widgets/Widget List.ipynb b/examples/Interactive Widgets/Widget List.ipynb
index 52f12cc..ef91fbc 100644
--- a/examples/Interactive Widgets/Widget List.ipynb
+++ b/examples/Interactive Widgets/Widget List.ipynb
@@ -298,8 +298,8 @@
"source": [
"from IPython.display import display\n",
"w = widgets.Dropdown(\n",
- " values=[1, 2, 3],\n",
- " value=2,\n",
+ " values=['1', '2', '3'],\n",
+ " value='2',\n",
" description='Number:',\n",
")\n",
"display(w)"
@@ -565,16 +565,22 @@
],
"metadata": {
"kernelspec": {
- "codemirror_mode": {
- "name": "python",
- "version": 2
- },
"display_name": "Python 2",
- "language": "python",
"name": "python2"
},
- "signature": "sha256:83b39d018a7a6ae0a324b9f3d38debafbfb2ed0a114e4bbd357fb318f8f23438"
+ "language_info": {
+ "codemirror_mode": {
+ "name": "ipython",
+ "version": 2
+ },
+ "file_extension": ".py",
+ "mimetype": "text/x-python",
+ "name": "python",
+ "nbconvert_exporter": "python",
+ "pygments_lexer": "ipython2",
+ "version": "2.7.8"
+ }
},
"nbformat": 4,
"nbformat_minor": 0
-}
\ No newline at end of file
+}