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": [ - "" - ] - }, - "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": [ - "" - ] - }, - "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 = $('')\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": [ - "" - ] - }, - "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 = $('')\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": [ - "" - ] - }, - "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 = $('')\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": [ - "" - ] - }, - "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 = $('
')\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 = $('')\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": [ - "" - ] - }, - "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 @@ "", 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 +}