1. B-4Dojo XPages Dojo 2013/11/07 2013 IBM Corporation1

2. IBMIBMDB2LotusLotusNotesLotusDominoQuickrSametimeWorkplaceWebSphereInternationalBusinessMachinesCorporation JavaJavaSunMicrosystems,Inc. Microsoft,WindowsMicrosoftCorporation LinuxLinusTorvalds 2013/11/07 2013 IBM Corporation2 3. Twitter@onoatpizza bot XPages Dojo ICS (Lotus) BPTE XPages Dojo Dojo Mobile Dojo Mobile ECM Dojo UI ICS Lotus XPages Extension Library Japan 2013/11/07 2013 IBM Corporation3 4. Web jQuery Dojo 2013/11/07 2013 IBM Corporation4 5. xxx Q: Dojo A: Dojo jQuery 2013/11/07 2013 IBM Corporation5 6. Dojo XPages 2013/11/07jQuery Dojo 2013 IBM Corporation6 7. Dojo jQuery jQuery jQuery Dojo XPages DojojQuery JavaScript 2013/11/07 2013 IBM Corporation7 8. jQuery Dojo XPages Dojo 2013/11/07 2013 IBM Corporation8 9. jQuery Dojo 2013/11/07 2013 IBM Corporation9 10. jQuery Dojo JavaScript jQuery http://jquery.com/ 1.10.2 2.0.3 Dojo Dojo Toolkit http://dojotoolkit.org/ 1.9.1 2.x Web DOM AJAX2013/11/07 2013 IBM Corporation10 11. jQuery Dojo HTML API UI 2013/11/07 2013 IBM Corporation11 12. jQuery Dojo HTML API UI 2013/11/07 2013 IBM Corporation12 13. jQuery js 1.10.1 jquery-1.10.1-min.js jquery-1.10.1.js js css jQuery UI js jquery-ui.js css jquery.ui.all.css i18n jQuery UI datepicker jquery-ui-i18n.js2013/11/07 2013 IBM Corporation13 14. jQueryHTML js css script link JavaScript jQuery API 2013/11/07 2013 IBM Corporation14 15. jQuery write less, do more $ jQuery DOM AJAX jQuery UI jQuery UI DOM class red div $("div.red").css("background-color", "red").show(); 2013/11/07 2013 IBM Corporation15 16. Dojo dojo dijitUI dojox dojo dojo.js JavaScript dijit.Calendar dojo.require(dijit.Calendar) require([dijit/Calendar], function(Calendar){ }) 1.7 AMD js css dojodojo/resources/dojo.css dijitdijit/themes/claro/claro.css claro 2013/11/07 2013 IBM Corporation16 17. AMD AMD: Asynchronous Module Definition Dojo11Dojo - Asynchronous Module Definition http://codezine.jp/article/detail/6482 CommonJS JavaScript http://www.commonjs.org/ require http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition JavaScript dojo 1.7 jQuery 1.7 dojo.require(dijit.Calendar) require([dijit/Calendar], function(Calendar){ .. }); 9.0 XPages 2013/11/07 2013 IBM Corporation ...17 18. DojoHTML dojo.js css script link data-dojo-config load JavaScript dojo API AMD 2013/11/07 jQuery 2013 IBM Corporation18 19. Dojo jQuery dojo.provide or define) dojo.require or require AMD (dojo.declare) dojo dojox jQuery gridx https://github.com/oria/gridx/2013/11/07 2013 IBM Corporation19 20. Dojo jQuery DOM dojo dojo.query() dojo.query dojo API dojo.query("div.red").style("backgroundColor", "red"); dojo.query("div.red").forEach(function(node){ dojo.style(node, "backgroundColor", "red"); }); 2013/11/07 2013 IBM Corporation20 21. jQueryjQueryDojo jQuery Java Web Web 2013/11/07 2013 IBM Corporation Web 21 22. jQuery Dojo HTML API UI 2013/11/07 2013 IBM Corporation22 23. API jQuery API DOM Ajax Deferred Dojo API dojo.query dojo.addClass, dojo.style, etc dojo.xhr, dojo.xhrGet, etc dojo.connect / dojo.on dojo.fadeIn, dojo.animateProperty, etc dojo.Deferred dojo.dnd (API 2013/11/07 2013 IBM Corporation23 24. APIDOM td div red

a

b

c

jQuery $("td > div.red").css("background-color", "red"); Dojo dojo.query("td > div.red").style("backgroundColor", "red"); dojo.query("td > div.red").forEach(function(node){ dojo.style(node, "backgroundColor", "red"); }); 2013/11/07 2013 IBM Corporation24 25. APIAJAX message.txt jQuery $.get("message.txt", function(data){ $("#messages").html(data); }); Dojo dojo.xhrGet({ url: "message.txt", handleAs: "text", load: function(data){ dojo.byId("messages").innerHTML = data; } });2013/11/07 2013 IBM Corporation25 26. API id == pizza jQuery $("#pizza").fadeIn(1000); Dojo dojo.fadeIn({ node: "pizza", duration: 1000 }).play();Dojo5 http://codezine.jp/article/detail/57592013/11/07 2013 IBM Corporation26 27. UI jQuery UI Dojo dijit.layout.AccordionContainer dijit.form.ComboBox dijit.form.Button dijit.form.DateTextBox dijit.Dialog dijit.Menu dijit.ProgressBar dijit.form.HorizontalSlider dijit.form.NumberSpinner dijit.form.TabContainer dijit.TooltipUI 2013/11/07 2013 IBM Corporation27 28. jQuery Dojo API APIUI jQuery jQuery Dojo Deferred Dojo Deferred jQuery Deferred XPages API 2013/11/07 2013 IBM Corporation28 29. Lotus 2011/01/21Dojo Toolkit https://www.ibm.com/developerworks/community/files/app?lang=ja#/ collection/46fe748d-f171-4c53-9afd-41aa95393682 Dojo http://codezine.jp/article/corner/397 API Dojo Toolkit API Documentation http://dojotoolkit.org/api/ Dojo Toolkit Documentation http://dojotoolkit.org/documentation/ 2013/11/07 2013 IBM Corporation29 30. XPages Dojo 2013/11/07 2013 IBM Corporation30 31. XPages Dojo XPages Dojo dojo Dojo CSS JavaScript XPages Notes/Domion 8.5.3 Dojo resources Dojo Notes/Domino Dojo Notes/Domino8.58.5.18.5.28.5.39.09.0.1Dojo Toolkit1.1.11.3.21.4.31.6.11.8.11.8.32013/11/07 2013 IBM Corporation31 32. XPages Dojo Dojo API XPages API Dojo = UI Dojo API XPages Dojo UI API XPages Extension Library Dojo UI UI API XPages UI Dojo UI 2013/11/07 2013 IBM Corporation32 33. XPages Dojo Dojo API dojo.query [] XPagesRadio Button Group Javascript http://bit.ly/18iPXrq dojo.animateProperty (dojo.dnd Dojo API Dojo dojox.charting dojox.widget.gauge dojox.drawing Experimental2013/11/07 2013 IBM Corporation33 34. Dojo API dojo.query dojo.query("td.col3").style("backgroundColor", dijit.byId("#{id:palette}").get("value") || "red");dojo.query(tr.row3 td").style("backgroundColor", dijit.byId("#{id:palette}").get("value") || "red");2013/11/07 2013 IBM Corporation34 35. Dojo API dojo.animateProperty Extension Library NSF http://www.xpages.jp/xpagesext.nsf/Core_DojoEffects.xsp Extension Library Dojo Horizontal Slider onChange dojo.animateProperty 2013/11/07var ratio = thisEvent; // Slider dojo.animateProperty({ node: "#{id:logo}", properties: { width: 149 * ratio, height: 33 * ratio }, duration: 1000 }).play(); 2013 IBM Corporation35 36. Dojo API dojo.dnd dojo.dnd.Moveable var textarea = dojo.byId("#{id:inputTextarea1}"); 2013/11/07// div body var memoNode = dojo.create("div", { innerHTML: textarea.value, style: { position: "absolute", top: "80px", left: "10px", width: "100px", height: "100px", backgroundColor: "lightyellow", border: "1px solid #CCCCCC" } }, dojo.body()); // Moveable new dojo.dnd.Moveable(memoNode); 2013 IBM Corporation36 37. API Extension Library Dojo Tab ContainerDojo Tab Pane API dijit.byId(id) id .selectChild() TabPane dijit.byId("#{id:djTabContainer1}") .selectChild(dijit.byId("#{id:djTabPane2}"));2013/11/07 2013 IBM Corporation37 38. API Extension Library Dojo Accordion ContainerDojo Accordion PaneAPI .selectChild(, true) AccordionPane true dijit.byId("#{id:djAccordionContainer1}") .selectChild(dijit.byId("#{id:djAccordionPane2}"), true);2013/11/07 2013 IBM Corporation38 39. dojox.charting dojox.charting.plot2d.Spider Dojo Toolkit dojox.charting tests XPage http://bit.ly/19Umecc easing 2013/11/07 2013 IBM Corporation39 40. // Spider var chart = new dojox.charting.Chart("#{id:spiderChart}") .setTheme(dojox.charting.themes.PlotKit.blue) XPages .addPlot("default", { onClientLoad type: "Spider", labelOffset: -10, divisions: 7, JavaScript axisColor: "lightgray", spiderColor: "silver", seriesFillAlpha: 0.2, spiderOrigin: 0.16, markerSize: 3, precision: 0, spiderType: "polygon" }) .addSeries("China", {data: {"GDP": 2,"area": 6,"population": 2000,"inflation": 15,"growth": 12}}, { fill: "blue" }) .addSeries("France", {data: {"GDP": 6,"area": 15,"population": 500,"inflation": 5,"growth": 6}}, { fill: "red" }) .addSeries("USA", {data: {"GDP": 3,"area": 20,"population": 1500,"inflation": 10,"growth": 3}}, { fill: "green" }) .addSeries("Japan", {data: {"GDP": 4,"area": 2,"population": 1000,"inflation": 20,"growth": 2}}, { fill: "yellow" }) .addSeries("Korean", {data: {"GDP": 10,"area": 10,"population": 800,"inflation": 2,"growth": 18}}, { fill: "orange" }) .addSeries("Canada", {data: {"GDP": 1,"area": 18,"population": 300,"inflation": 3,"growth": 15}}, { fill: "purple" }) .render(); // new dojox.charting.widget.SelectableLegend({ chart: chart, horizontal: false }, "#{id:legend}");2013/11/07 2013 IBM Corporation40 41. dojox.widget.gauge dojox.widget.AnalogGauge Dojo XPages http://bit.ly/17pnBRz Notes/Domino 9.0 Dojo 1.8.1 dojox.dgauge http://bit.ly/HQRRsh 2013/11/07 2013 IBM Corporation41 42. XPages XSP

2013/11/07 2013 IBM Corporation42 43. var gauge = dijit.byId('#{id:speedo}'); var fill = { 'type' : 'linear', 'x1' : 50, 'y1' : 50, 'x2' : 350, 'y2' : 350, XPages 'colors' : [ onClientLoad { offset : 0, color : 'black'}, { offset : 0.5, color : 'black'}, JavaScript { offset : 0.75, color : 'yellow'}, { offset : 1, color : 'red'} ] }; gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({ 'value' : 200, 'width' : 20, 'offset' : 150, 'color' : fill, 'noChange' : true, 'hideValues' : true })); gauge.addIndicator(new dojox.widget.gauge.AnalogArcIndicator({ 'value' : 80, 'width' : 10, 'offset' : 150, 'color' : 'blue', 'title' : 'Arc', 'hover' : 'Arc: 80' })); gauge.addIndicator(new dojox.widget.gauge.AnalogNeedleIndicator({ 'value' : 100, 'width' : 8, 'length' : 150, 'color' : 'red', 'title' : 'Needle', 'hover' : 'Needle: 100' }));2013/11/07 2013 IBM Corporation43 44. dojox.drawing dojox.drawing.Drawing Dojo Toolkit dojox.drawing tests XPage http://bit.ly/1cessT9 JSON drawing 2013/11/07 2013 IBM Corporation44 45. NSF NSF URL mydeveloperWorks http://ibm.co/HPw0lS ZIP XPagesDay2013-B4-DojoSample.nsf Lotus Notes/Domino 8.5.3 + XPages Extension Library or Upgrade Pack IBM Notes/Domino 9.02013/11/07 2013 IBM Corporation45 46. jQuery Dojo Dojo API XPages Dojo API XPages dojo APIUI API XPages JavaScript jQuery Dojo JavaScript Ext, Sencha touch 2013/11/07 2013 IBM Corporation46 47. 2013/11/07 2013 IBM Corporation47