##// END OF EJS Templates
upstream » ipython
RSS

Clone from https://github.com/ipython/ipython.git

Update date picker widget example...
Thomas Kluyver -
Show More
Show file before | Show file after | Hide comments
@@ -14,7 +14,7 b''
14 14 },
15 15 {
16 16 "cell_type": "code",
17 "execution_count": 1,
17 "execution_count": null,
18 18 "metadata": {
19 19 "collapsed": false
20 20 },
@@ -70,7 +70,7 b''
70 70 },
71 71 {
72 72 "cell_type": "code",
73 "execution_count": 2,
73 "execution_count": null,
74 74 "metadata": {
75 75 "collapsed": false
76 76 },
@@ -108,27 +108,11 b''
108 108 },
109 109 {
110 110 "cell_type": "code",
111 "execution_count": 3,
111 "execution_count": null,
112 112 "metadata": {
113 113 "collapsed": false
114 114 },
115 "outputs": [
116 {
117 "data": {
118 "application/javascript": [
119 "\n",
120 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
121 "\n",
122 "});"
123 ],
124 "text/plain": [
125 "<IPython.core.display.Javascript at 0x109491690>"
126 ]
127 },
128 "metadata": {},
129 "output_type": "display_data"
130 }
131 ],
115 "outputs": [],
132 116 "source": [
133 117 "%%javascript\n",
134 118 "\n",
@@ -146,53 +130,30 b''
146 130 "**A render function must be defined**.\n",
147 131 "The render function is used to render a widget view instance to the DOM.\n",
148 132 "For now, the render function renders a div that contains the text *Hello World!*\n",
149 "Lastly, the view needs to be registered with the widget manager.\n",
133 "Lastly, the view needs to be registered with the widget manager, for which we need to load another module.\n",
150 134 "\n",
151 135 "**Final JavaScript code below:**"
152 136 ]
153 137 },
154 138 {
155 139 "cell_type": "code",
156 "execution_count": 4,
140 "execution_count": null,
157 141 "metadata": {
158 142 "collapsed": false
159 143 },
160 "outputs": [
161 {
162 "data": {
163 "application/javascript": [
164 "\n",
165 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
166 " \n",
167 " // Define the DatePickerView\n",
168 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
169 " render: function(){ this.$el.text('Hello World!'); },\n",
170 " });\n",
171 " \n",
172 " // Register the DatePickerView with the widget manager.\n",
173 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
174 "});"
175 ],
176 "text/plain": [
177 "<IPython.core.display.Javascript at 0x1094917d0>"
178 ]
179 },
180 "metadata": {},
181 "output_type": "display_data"
182 }
183 ],
144 "outputs": [],
184 145 "source": [
185 146 "%%javascript\n",
186 147 "\n",
187 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
148 "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
188 149 " \n",
189 150 " // Define the DatePickerView\n",
190 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
151 " var DatePickerView = widget.DOMWidgetView.extend({\n",
191 152 " render: function(){ this.$el.text('Hello World!'); },\n",
192 153 " });\n",
193 154 " \n",
194 155 " // Register the DatePickerView with the widget manager.\n",
195 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
156 " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
196 157 "});"
197 158 ]
198 159 },
@@ -212,7 +173,7 b''
212 173 },
213 174 {
214 175 "cell_type": "code",
215 "execution_count": 5,
176 "execution_count": null,
216 177 "metadata": {
217 178 "collapsed": false
218 179 },
@@ -248,7 +209,7 b''
248 209 },
249 210 {
250 211 "cell_type": "code",
251 "execution_count": 6,
212 "execution_count": null,
252 213 "metadata": {
253 214 "collapsed": false
254 215 },
@@ -278,47 +239,18 b''
278 239 },
279 240 {
280 241 "cell_type": "code",
281 "execution_count": 7,
242 "execution_count": null,
282 243 "metadata": {
283 244 "collapsed": false
284 245 },
285 "outputs": [
286 {
287 "data": {
288 "application/javascript": [
289 "\n",
290 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
291 " \n",
292 " // Define the DatePickerView\n",
293 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
294 " render: function(){\n",
295 " \n",
296 " // Create the date picker control.\n",
297 " this.$date = $('<input />')\n",
298 " .attr('type', 'date')\n",
299 " .appendTo(this.$el);\n",
300 " },\n",
301 " });\n",
302 " \n",
303 " // Register the DatePickerView with the widget manager.\n",
304 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
305 "});"
306 ],
307 "text/plain": [
308 "<IPython.core.display.Javascript at 0x109491750>"
309 ]
310 },
311 "metadata": {},
312 "output_type": "display_data"
313 }
314 ],
246 "outputs": [],
315 247 "source": [
316 248 "%%javascript\n",
317 249 "\n",
318 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
250 "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
319 251 " \n",
320 252 " // Define the DatePickerView\n",
321 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
253 " var DatePickerView = widget.DOMWidgetView.extend({\n",
322 254 " render: function(){\n",
323 255 " \n",
324 256 " // Create the date picker control.\n",
@@ -329,7 +261,7 b''
329 261 " });\n",
330 262 " \n",
331 263 " // Register the DatePickerView with the widget manager.\n",
332 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
264 " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
333 265 "});"
334 266 ]
335 267 },
@@ -342,54 +274,18 b''
342 274 },
343 275 {
344 276 "cell_type": "code",
345 "execution_count": 8,
277 "execution_count": null,
346 278 "metadata": {
347 279 "collapsed": false
348 280 },
349 "outputs": [
350 {
351 "data": {
352 "application/javascript": [
353 "\n",
354 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
355 " \n",
356 " // Define the DatePickerView\n",
357 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
358 " render: function(){\n",
359 " \n",
360 " // Create the date picker control.\n",
361 " this.$date = $('<input />')\n",
362 " .attr('type', 'date')\n",
363 " .appendTo(this.$el);\n",
364 " },\n",
365 " \n",
366 " update: function() {\n",
367 " \n",
368 " // Set the value of the date control and then call base.\n",
369 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
370 " return DatePickerView.__super__.update.apply(this);\n",
371 " },\n",
372 " });\n",
373 " \n",
374 " // Register the DatePickerView with the widget manager.\n",
375 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
376 "});"
377 ],
378 "text/plain": [
379 "<IPython.core.display.Javascript at 0x109491750>"
380 ]
381 },
382 "metadata": {},
383 "output_type": "display_data"
384 }
385 ],
281 "outputs": [],
386 282 "source": [
387 283 "%%javascript\n",
388 284 "\n",
389 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
285 "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
390 286 " \n",
391 287 " // Define the DatePickerView\n",
392 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
288 " var DatePickerView = widget.DOMWidgetView.extend({\n",
393 289 " render: function(){\n",
394 290 " \n",
395 291 " // Create the date picker control.\n",
@@ -407,7 +303,7 b''
407 303 " });\n",
408 304 " \n",
409 305 " // Register the DatePickerView with the widget manager.\n",
410 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
306 " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
411 307 "});"
412 308 ]
413 309 },
@@ -426,65 +322,19 b''
426 322 },
427 323 {
428 324 "cell_type": "code",
429 "execution_count": 9,
325 "execution_count": null,
430 326 "metadata": {
431 327 "collapsed": false
432 328 },
433 "outputs": [
434 {
435 "data": {
436 "application/javascript": [
437 "\n",
438 "\n",
439 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
440 " \n",
441 " // Define the DatePickerView\n",
442 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
443 " render: function(){\n",
444 " \n",
445 " // Create the date picker control.\n",
446 " this.$date = $('<input />')\n",
447 " .attr('type', 'date')\n",
448 " .appendTo(this.$el);\n",
449 " },\n",
450 " \n",
451 " update: function() {\n",
452 " \n",
453 " // Set the value of the date control and then call base.\n",
454 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
455 " return DatePickerView.__super__.update.apply(this);\n",
456 " },\n",
457 " \n",
458 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
459 " events: {\"change\": \"handle_date_change\"},\n",
460 " \n",
461 " // Callback for when the date is changed.\n",
462 " handle_date_change: function(event) {\n",
463 " this.model.set('value', this.$date.val());\n",
464 " this.touch();\n",
465 " },\n",
466 " });\n",
467 " \n",
468 " // Register the DatePickerView with the widget manager.\n",
469 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
470 "});"
471 ],
472 "text/plain": [
473 "<IPython.core.display.Javascript at 0x109491b10>"
474 ]
475 },
476 "metadata": {},
477 "output_type": "display_data"
478 }
479 ],
329 "outputs": [],
480 330 "source": [
481 331 "%%javascript\n",
482 332 "\n",
483 333 "\n",
484 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
334 "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
485 335 " \n",
486 336 " // Define the DatePickerView\n",
487 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
337 " var DatePickerView = widget.DOMWidgetView.extend({\n",
488 338 " render: function(){\n",
489 339 " \n",
490 340 " // Create the date picker control.\n",
@@ -511,7 +361,7 b''
511 361 " });\n",
512 362 " \n",
513 363 " // Register the DatePickerView with the widget manager.\n",
514 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
364 " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
515 365 "});"
516 366 ]
517 367 },
@@ -531,7 +381,7 b''
531 381 },
532 382 {
533 383 "cell_type": "code",
534 "execution_count": 10,
384 "execution_count": null,
535 385 "metadata": {
536 386 "collapsed": false
537 387 },
@@ -550,7 +400,7 b''
550 400 },
551 401 {
552 402 "cell_type": "code",
553 "execution_count": 11,
403 "execution_count": null,
554 404 "metadata": {
555 405 "collapsed": false
556 406 },
@@ -568,22 +418,11 b''
568 418 },
569 419 {
570 420 "cell_type": "code",
571 "execution_count": 12,
421 "execution_count": null,
572 422 "metadata": {
573 423 "collapsed": false
574 424 },
575 "outputs": [
576 {
577 "data": {
578 "text/plain": [
579 "u''"
580 ]
581 },
582 "execution_count": 12,
583 "metadata": {},
584 "output_type": "execute_result"
585 }
586 ],
425 "outputs": [],
587 426 "source": [
588 427 "my_widget.value"
589 428 ]
@@ -597,7 +436,7 b''
597 436 },
598 437 {
599 438 "cell_type": "code",
600 "execution_count": 13,
439 "execution_count": null,
601 440 "metadata": {
602 441 "collapsed": false
603 442 },
@@ -622,7 +461,7 b''
622 461 },
623 462 {
624 463 "cell_type": "code",
625 "execution_count": 14,
464 "execution_count": null,
626 465 "metadata": {
627 466 "collapsed": false
628 467 },
@@ -659,7 +498,7 b''
659 498 },
660 499 {
661 500 "cell_type": "code",
662 "execution_count": 15,
501 "execution_count": null,
663 502 "metadata": {
664 503 "collapsed": false
665 504 },
@@ -682,7 +521,7 b''
682 521 },
683 522 {
684 523 "cell_type": "code",
685 "execution_count": 16,
524 "execution_count": null,
686 525 "metadata": {
687 526 "collapsed": false
688 527 },
@@ -709,7 +548,7 b''
709 548 },
710 549 {
711 550 "cell_type": "code",
712 "execution_count": 17,
551 "execution_count": null,
713 552 "metadata": {
714 553 "collapsed": false
715 554 },
@@ -749,7 +588,7 b''
749 588 },
750 589 {
751 590 "cell_type": "code",
752 "execution_count": 18,
591 "execution_count": null,
753 592 "metadata": {
754 593 "collapsed": false
755 594 },
@@ -811,80 +650,18 b''
811 650 },
812 651 {
813 652 "cell_type": "code",
814 "execution_count": 19,
653 "execution_count": null,
815 654 "metadata": {
816 655 "collapsed": false
817 656 },
818 "outputs": [
819 {
820 "data": {
821 "application/javascript": [
822 "\n",
823 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
824 " \n",
825 " // Define the DatePickerView\n",
826 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
827 " render: function(){\n",
828 " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
829 " it fit with the other built in widgets.*/\n",
830 " // Create a label.\n",
831 " this.$label = $('<div />')\n",
832 " .addClass('widget-hlabel')\n",
833 " .appendTo(this.$el)\n",
834 " .hide(); // Hide the label by default.\n",
835 " \n",
836 " // Create the date picker control.\n",
837 " this.$date = $('<input />')\n",
838 " .attr('type', 'date')\n",
839 " .appendTo(this.$el);\n",
840 " },\n",
841 " \n",
842 " update: function() {\n",
843 " \n",
844 " // Set the value of the date control and then call base.\n",
845 " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n",
846 " \n",
847 " // Hide or show the label depending on the existance of a description.\n",
848 " var description = this.model.get('description');\n",
849 " if (description == undefined || description == '') {\n",
850 " this.$label.hide();\n",
851 " } else {\n",
852 " this.$label.show();\n",
853 " this.$label.text(description);\n",
854 " }\n",
855 " \n",
856 " return DatePickerView.__super__.update.apply(this);\n",
857 " },\n",
858 " \n",
859 " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n",
860 " events: {\"change\": \"handle_date_change\"},\n",
861 " \n",
862 " // Callback for when the date is changed.\n",
863 " handle_date_change: function(event) {\n",
864 " this.model.set('value', this.$date.val());\n",
865 " this.touch();\n",
866 " },\n",
867 " });\n",
868 " \n",
869 " // Register the DatePickerView with the widget manager.\n",
870 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
871 "});"
872 ],
873 "text/plain": [
874 "<IPython.core.display.Javascript at 0x1094eef90>"
875 ]
876 },
877 "metadata": {},
878 "output_type": "display_data"
879 }
880 ],
657 "outputs": [],
881 658 "source": [
882 659 "%%javascript\n",
883 660 "\n",
884 "require([\"widgets/js/widget\"], function(WidgetManager){\n",
661 "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n",
885 662 " \n",
886 663 " // Define the DatePickerView\n",
887 " var DatePickerView = IPython.DOMWidgetView.extend({\n",
664 " var DatePickerView = widget.DOMWidgetView.extend({\n",
888 665 " render: function(){\n",
889 666 " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n",
890 667 " it fit with the other built in widgets.*/\n",
@@ -928,7 +705,7 b''
928 705 " });\n",
929 706 " \n",
930 707 " // Register the DatePickerView with the widget manager.\n",
931 " WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
708 " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n",
932 709 "});"
933 710 ]
934 711 },
@@ -948,15 +725,15 b''
948 725 },
949 726 {
950 727 "cell_type": "code",
951 "execution_count": 20,
728 "execution_count": null,
952 729 "metadata": {
953 730 "collapsed": false
954 731 },
955 732 "outputs": [],
956 733 "source": [
957 734 "# Add some additional widgets for aesthetic purpose\n",
958 "display(widgets.TextWidget(description=\"First:\"))\n",
959 "display(widgets.TextWidget(description=\"Last:\"))\n",
735 "display(widgets.Text(description=\"First:\"))\n",
736 "display(widgets.Text(description=\"Last:\"))\n",
960 737 "\n",
961 738 "my_widget = DateWidget()\n",
962 739 "display(my_widget)\n",
@@ -972,7 +749,7 b''
972 749 },
973 750 {
974 751 "cell_type": "code",
975 "execution_count": 21,
752 "execution_count": null,
976 753 "metadata": {
977 754 "collapsed": false
978 755 },
@@ -988,7 +765,7 b''
988 765 },
989 766 {
990 767 "cell_type": "code",
991 "execution_count": 22,
768 "execution_count": null,
992 769 "metadata": {
993 770 "collapsed": false
994 771 },
@@ -1000,7 +777,7 b''
1000 777 },
1001 778 {
1002 779 "cell_type": "code",
1003 "execution_count": 23,
780 "execution_count": null,
1004 781 "metadata": {
1005 782 "collapsed": false
1006 783 },
@@ -1012,25 +789,23 b''
1012 789 },
1013 790 {
1014 791 "cell_type": "code",
1015 "execution_count": 24,
792 "execution_count": null,
1016 793 "metadata": {
1017 794 "collapsed": false
1018 795 },
1019 "outputs": [
1020 {
1021 "data": {
1022 "text/plain": [
1023 "u'2014-12-02'"
1024 ]
1025 },
1026 "execution_count": 24,
1027 "metadata": {},
1028 "output_type": "execute_result"
1029 }
1030 ],
796 "outputs": [],
1031 797 "source": [
1032 798 "my_widget.value"
1033 799 ]
800 },
801 {
802 "cell_type": "code",
803 "execution_count": null,
804 "metadata": {
805 "collapsed": true
806 },
807 "outputs": [],
808 "source": []
1034 809 }
1035 810 ],
1036 811 "metadata": {
@@ -1039,7 +814,23 b''
1039 814 "<None>",
1040 815 null
1041 816 ]
1042 ]
817 ],
818 "kernelspec": {
819 "display_name": "Python 3",
820 "name": "python3"
821 },
822 "language_info": {
823 "codemirror_mode": {
824 "name": "ipython",
825 "version": 3
826 },
827 "file_extension": ".py",
828 "mimetype": "text/x-python",
829 "name": "python",
830 "nbconvert_exporter": "python",
831 "pygments_lexer": "ipython3",
832 "version": "3.4.2"
833 }
1043 834 },
1044 835 "nbformat": 4,
1045 836 "nbformat_minor": 0
General Comments 0
You need to be logged in to leave comments. Login now