BP210 XPages: Enter The Dojo


Published on

BP210 session from Lotusphere 2011

Published in: Technology
1 Comment
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

BP210 XPages: Enter The Dojo

  1. 1. BP207 XPages: Enter The Dojo Paul Withers | Senior Domino Developer | Intec Systems Ltd David Leedy | Developer | Czarnowski
  2. 2. About Paul Withers <ul><li>Domino Developer since R5
  3. 3. Team leader at Intec Systems Ltd
  4. 4. Developed classic web apps with Dojo
  5. 5. Developing XPages apps since Q2 2009
  6. 6. Guest on The X Cast Feb 2010, TWiL Sept 2010
  7. 7. XPages Tutorials: Including Validation and Dojo charts
  8. 8. Article on using OAT Javascript Framework with XPages
  9. 9. Video on using XPages for live-text widget
  10. 10. Audit Comments Custom Control on OpenNTF </li></ul>
  11. 11. About David Leedy <ul><li>Developer since R4
  12. 12. Customer NOT a business Partner
  13. 13. Client Developer who got XPages Religion in 2009
  14. 14. Lotus Community Enthusiast
  15. 15. NotesIn9 Screencast (Notesin9.com)
  16. 16. XPages.TV
  17. 17. lotusnotebook.com
  18. 18. WikiMadness.com
  19. 19. XPages Cheat Sheet </li></ul>
  20. 20. About This Session <ul><li>This is NOT an intro to XPages
  21. 21. It's an Intro to using Dojo inside of XPages
  22. 22. We assume: </li><ul><li>you do NOT know much about Dojo
  23. 23. you're familiar with XPages itself
  24. 24. you're familiar with the Source pane
  25. 25. you may have some familiarity with JavaScript
  26. 26. you want to make great Web 2.0 XPages applications </li></ul></ul>
  27. 27. Agenda <ul><li>White Belt </li><ul><li>What is Dojo? </li></ul><li>Orange Belt </li><ul><li>Getting started with Dojo in XPages
  28. 28. AccordionContainer, Dates, Rating, TabContainer </li></ul><li>Brown Belt </li><ul><li>ToolTips, Themes, Rich Text </li></ul><li>Black Belt </li><ul><li>Dialogs, Extending Dojo Modules, Charts </li></ul><li>Ninja </li><ul><li>Extension Library </li></ul></ul>
  29. 30. What is Dojo? <ul><li>Very Popular JavaScript FrameWork since 2004
  30. 31. Open Source Toolkit designed for cross platform RAD
  31. 32. Provides common Functions such as: </li><ul><li>AJAX Data Retrieval
  32. 33. Drag and Drop
  33. 34. Event Handling
  34. 35. Visual Effects / Animation
  35. 36. Form UI Tools </li><ul><li>Sliders, Page Layout, Type Ahead, etc.. </li></ul><li>Graphs / Charting </li></ul></ul>
  36. 37. Why Dojo? <ul><li>Very Popular </li><ul><li>Many Sites Use it
  37. 38. Many Books available
  38. 39. Thriving OpenSource community </li></ul><li>Bundled with Lotus Domino Server
  39. 40. Designed to be cross platform across browsers
  40. 41. Contributions from IBM
  41. 42. Commercial support is available
  42. 43. Custom builds can be created
  43. 44. It's also FREE FREE FREE </li></ul>
  44. 45. XPages and Dojo: Fully Integrated <ul><li>XPages get many features from Dojo </li><ul><li>Client Side Validation
  45. 46. Partial Refresh
  46. 47. XSP Class
  47. 48. Date Picker
  48. 49. Type Ahead
  49. 50. Extension Library
  50. 51. Rich Text Editor </li><ul><li>8.5.0 and 8.5.1 is Dojo
  51. 52. 8.5.2 defaults to CKEditor </li></ul></ul></ul>
  52. 53. Dojo and Domino Versions <ul><li>Domino has been keeping VERY up to date on the latest Dojo Versions
  53. 54. 8.5.0 = Dojo 1.1.1
  54. 55. 8.5.1 = Dojo 1.3.2
  55. 56. 8.5.2 = Dojo 1.4.3 </li><ul><li>dojoType and dojoAttributes properties added for the following controls: </li><ul><li>Edit Box, Rich Text, Multiline Edit Box, Button, Check Box, Radio Button, Date Time Picker, Span Content, Panel, Table, Div </li></ul></ul><li>BETA ALERT </li><ul><li>8.5.3 = Dojo 1.5.0 </li></ul></ul>
  56. 57. Speaking the Dojo Language <ul><li>Dojo.js (Base) and Core </li><ul><li>AJAX and Animation
  57. 58. Event Handling
  58. 59. DOM Manipulation </li></ul><li>Dijit </li><ul><li>Library of Widgets </li></ul><li>DojoX </li><ul><li>Dojo Extensions
  59. 60. Experimental Section </li></ul><li>Util </li><ul><li>Additional JavaScript Functions </li></ul></ul>
  60. 62. dijit.layout.AccordionContainer <ul><li>Collapsable Sections
  61. 63. Each section a Div </li><ul><li>Use a Custom Control </li></ul></ul>
  62. 64. Setting up Dojo in DDE <ul><li>Turn Dojo on via All Properties settings and then add Resources </li></ul>
  63. 65. Setting up Dojo via Source <xp:view xmlns:xp=&quot;http://www.ibm.com/xsp/core&quot; dojoParseOnLoad=&quot;true&quot; dojoTheme=&quot;true&quot;> <xp:this.resources> <xp:dojoModule name=&quot;dijit.layout.AccordionContainer&quot;> </xp:dojoModule> <xp:dojoModule name=&quot;dijit.layout.ContentPane&quot;> </xp:dojoModule> </xp:this.resources>
  64. 66. Using AccordionContainer <ul><li>Create a DIV or Panel </li><ul><li>Div performs better
  65. 67. Panel is 8.5.2 or higher </li></ul></ul><div dojoType=&quot;dijit.layout.AccordionContainer&quot; style=&quot;height: 300px;&quot;> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Panel 1&quot;> Panel 1 content or custom Control </div> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Panel 2&quot;> Panel 2 content or Custom Control </div> <div dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;Panel 3&quot;> Panel 2 Content or Custom Control </div> </div>
  66. 69. Date Picker <ul><li>Date Picker is built into XPages
  67. 70. But you don't need to use it! </li><ul><li>dijit.form.DateTextBox
  68. 71. dijit.Calendar </li></ul></ul>
  69. 73. More Dojo Language... <ul><li>dojo.byId </li><ul><li>document.getElementById </li></ul><li>dijit.byId </li><ul><li>Gets a handle on Parsed Dojo Widgets (Dijit) </li></ul><li>Both part of CORE Dojo </li></ul>
  70. 74. dojox.widget.Rating <ul><li>Graphically choose Stars to represent a number
  71. 75. The stars are linked to a DIV – Not a field
  72. 76. We get the value of the dijit and add it to a hidden field
  73. 77. Needs additional CSS Loaded <xp:styleSheet href=”/.ibmxpres/dojoroot/dojox/form/resources/Rating.css”> </xp:styleSheet> </li></ul><div id=&quot;rateControl&quot; dojoType=&quot;dojox.form.Rating&quot; numStars=&quot;5&quot; value=&quot;2&quot; onChange=&quot;dojo.byId('#{id:editControlName}').value = dijit.byId('#{id:rateControl}').value&quot;> </div>
  74. 79. dijit.layout.TabContainer <ul><li>XPages comes with a built in Tabbed Panel container </li><ul><li>But you might want to avoid it in some situations.
  75. 80. None active tabs are NOT rendered to the browser </li><ul><li>So not available for Client Side JS
  76. 81. You hit the server every time a tab is changed </li><ul><li>Slow.... </li></ul></ul></ul><li>Dojo's TabContainer </li><ul><li>Easy to implement
  77. 82. Use for Div's OR Panels
  78. 83. All content sent to Browser </li><ul><li>Everything available to Client Side JS
  79. 84. Dojo takes care of the hiding </li><ul><li>FAST!!!! </li></ul></ul></ul></ul>
  80. 85. Using TabContainer <ul><li>Very similar to AccordionContainer
  81. 86. Resources </li><ul><li>dijit.layout.TabContainer
  82. 87. dijit.layout.ContentPane </li></ul></ul><xp:panel dojoType=&quot;dijit.layout.TabContainer&quot; style=&quot;width: 350px; height: 300px&quot;> <xp:panel dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;dojo Tab 1&quot;> Content for Tab 1 </xp:panel> <xp:panel dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;dojo Tab 2&quot;> Content for Tab 2 </xp:panel> <xp:panel dojoType=&quot;dijit.layout.ContentPane&quot; title=&quot;dojo Tab 3&quot;> Content for Tab 3 </xp:panel> </xp:panel>
  83. 89. Sample App... <ul><li>Tom “Duffbert” Duff
  84. 90. He reads books.... </li><ul><li>A LOT OF THEM </li></ul><li>Now a Days we Writes Books </li><ul><li>SameTime Users Guide </li></ul></ul>
  85. 92. dijit.Tooltip <ul><li>Used to display content on hover </li><ul><li>Text
  86. 93. Images
  87. 94. Formatting </li></ul><li>Resource </li><ul><li>dijit.Tooltip </li></ul><li>Create a div or panel
  88. 95. Label attribute or content within div / panel
  89. 96. Define connectId (component's client-side ID) </li></ul><div dojoType=&quot;dijit.Tooltip&quot; connectId=&quot;label1&quot; position=&quot;below&quot; label=&quot;Enter only numbers&quot;> </div>
  90. 98. Dojo Themes <ul><li>Four themes </li><ul><li>tundra (the default theme implemented by XPages)
  91. 99. soria
  92. 100. nihilo
  93. 101. claro (new with Dojo 1.5) </li></ul><li>Create Theme resource </li></ul><resource dojoTheme=&quot;true&quot;> <content-type>text/css</content-type> <href>/.ibmxspres/dojoroot/dijit/themes/nihilo/nihilo.css</href> </resource> <control> <name>ViewRoot</name> <property mode=&quot;concat&quot;> <name>styleClass</name> <value>nihilo</value> </property> </control>
  94. 102. Rich Text Editor - 8.5.x <ul><li>ibm.xsp.widget.layout.RichText by default in 8.5.0 / 8.5.1 </li><ul><li>dijit.Editor extended by IBM with extra plugins
  95. 103. Add as dojoType on Rich Text control in 8.5.2 to override CKEditor </li><ul><li>e.g. for backwards compatibility </li></ul><li>Toolbar can be extended with extra buttons in 8.5.0 / 8.5.1 </li></ul><li>Resources </li><ul><li>dijit._editor.plugins.LinkDialog </li></ul></ul><xp:inputRichText value=&quot;#{logEntry.prlGeneralNotes}&quot;> <xp:this.dojoAttributes> <xp:dojoAttribute name=&quot;extraPlugins&quot;> <xp:this.value><![CDATA[[&quot;createLink&quot;, &quot;|&quot;]]]></xp:this.value> </xp:dojoAttribute> </xp:this.dojoAttributes> </xp:inputRichText>
  96. 104. Rich Text Editor 8.5.2+ <ul><li>CKEditor by default (extended by IBM)
  97. 105. <data>dominohtmlckeditor (compressed files)
  98. 106. _source subfolder for uncompressed files
  99. 107. Managed by <dojoroot>ibmxspwidgetlayoutCKEditorWrapper.js
  100. 108. Extend by defining dojoAttributes </li><ul><li>toolbarType:to choose from predefined toolbars, 'Slim', 'Medium', 'Large'
  101. 109. toolbar: creates your own toolbar from scratch </li><ul><li>“ [['Font','FontSize'],['Preview','TextColor','BGColor']]”
  102. 110. Names can be found in plugin.js files in subfolders of plugins folder
  103. 111. Or see constructor method in CKEditorWrapper.js </li></ul><li>extraPlugins: to include additional plugins not in 3 default toolbars
  104. 112. skins: to theme the editor
  105. 113. ...and many more. See CKEditorWrapper.js </li></ul></ul>
  106. 116. dijit.Dialog 1 <ul><li>Div or Panel
  107. 117. BUT if you want to use SSJS there are problems </li><ul><li>Dojo moves the div outside the <form> tag
  108. 118. So content is not posted back to server </li></ul></ul>
  109. 119. Creating Your Own Dojo Module <ul><li>Various options on the web: </li><ul><li>http://www.scottgood.com/jsg/blog.nsf/d6plinks/SGOD-889H6V
  110. 120. http://xpagesblog.com/xpages-blog/2010/4/10/xpages-compatible-dojo-dialog-reusable-component.html : Extended Dojo module (by Jeremy Hodge) </li></ul><li>Step 1: Create a Javascript Script Library / File Resource or install on server </li><ul><li><data>dominojsdojo-1.x.x...
  111. 121. &quot;provide&quot; your Dojo module
  112. 122. &quot;require&quot; any other Dojo modules required
  113. 123. &quot;declare&quot; your module referencing the module you're extending
  114. 124. Define any attributes / functions you're adding / modifying </li></ul><li>Compare existing Dojo files </li><ul><li>Look at uncompressed versions </li><ul><li>http://download.dojotoolkit.org/release-1.4.3/dojo-release-1.4.3-src.zip </li></ul></ul></ul>
  115. 125. Anatomy of a Dojo Module 1
  116. 126. Anatomy of a Dojo Module 2
  117. 127. Anatomy of a Dojo Module 3
  118. 128. Anatomy of a Dojo Module 4
  119. 129. dijit.Dialog 2 <ul><li>Step 2: Include javascript library as module on XPage (removing “.js” for web) </li></ul>Include File Resource as module on XPage <ul><li>Step 3: Set dojoType on div or panel </li></ul><xp:resources> <xp:script src=&quot;/com/ZetaOne/widget/Dialog.js&quot; client-side=&quot;true&quot;> </xp:script> </xp:resources> <xp:panel dojoType=&quot;com.ZetaOne.widget.Dialog&quot;> CONTENT </xp:panel>
  120. 131. dojox.charting 1 <ul><li>Dojox, i.e. differing levels of completeness and interoperability
  121. 132. Compatibility mode required for Microsoft Internet Explorer 8
  122. 133. 2D charts </li><ul><li>Line charts / stacked line charts
  123. 134. Bar charts / column charts
  124. 135. Pie charts
  125. 136. Scatter charts </li></ul><li>3D charts
  126. 137. Configurable Axes
  127. 138. Background grids
  128. 139. Predefined themes
  129. 140. Legends (contributed by Chris Mitchell, IBM) </li></ul>
  130. 141. dojox.charting 2 <ul><li>Data Series </li><ul><li>Array of values / JSON objects
  131. 142. dojox.data stores </li></ul><li>Animations </li><ul><li>Highlight
  132. 143. Magnify
  133. 144. MoveSlice / Shake
  134. 145. Tooltip
  135. 146. Events
  136. 147. Zooming / panning / scrolling </li></ul><li>With Dojo 1.5.0 </li><ul><li>Linear / radial gradients
  137. 148. Map chart
  138. 149. Additional themes </li></ul></ul>
  139. 150. Changing the Dojo Version <ul><li>Install relevant version on the server in <data>dominojs folder
  140. 151. Restart server
  141. 152. Server / client automatically uses highest numbered dojo-x.x.x folder
  142. 153. To downgrade a whole server / client: </li><ul><li>Server-Wide / Client-Wide </li><ul><li><data>propertiesxsp.properties file </li></ul><li>Add in e.g. xsp.client.script.dojo.version=1.5.0 </li></ul><li>Possible at nsf level but complicated </li></ul>
  143. 156. Beyond Black Belt – Extension Library <ul><li>Server install currently required
  144. 157. Many Dojo widgets packaged as native controls
  145. 158. Mobile Controls
  146. 159. See AD116 XPages Extension Library: Making Application Development Even Easier </li><ul><li>Replay on 02/02/2011 10.00am
  147. 160. DL N. Hemisphere A-C </li></ul><li>Improves performance
  148. 161. Improves ease of use
  149. 162. Improves development time </li></ul>
  150. 163. Recommended Reading <ul><li>Dojo Toolkit http://dojotoolkit.org </li><ul><li>http://download.dojotoolkit.org/release-1.4.3/dojo-release-1.4.3-src.zip </li></ul><li>IBM Dojo Widget Gallery HomePage </li><ul><li>http://www-01.ibm.com/software/ucd/widgetgallery.html </li></ul><li>Lotus Notes & Domino Application Development Wiki </li><ul><li>http://www-10.lotus.com/ldd/ddwiki.nsf/xpViewRecent.xsp?searchValue=xpages </li></ul><li>OpenNTF http://openntf.org
  151. 164. xpag.es/?search
  152. 165. xpages.tv
  153. 166. xpages.info
  154. 167. thexcast.net
  155. 168. qtzar.com
  156. 169. xpagesblog.com </li></ul>
  157. 170. Related Sessions <ul><li>SHOW106 XPages 101 – How to build a simple XPages application </li><ul><li>SPEAKERS: Matt White & Tim Clark </li></ul><li>AD110 Building XPages Applications By The Book! </li><ul><li>SPEAKER: Martin Donnelly & Tony McGuckin </li></ul><li>AD112 How the Re-vamped TeamRoom and DocLib Templates Are Built Using XPages Extension Library </li><ul><li>SPEAKERS: Maire Kehoe & Tony McGuckin </li></ul><li>AD116 XPages Extension Library: Making Application Development Even Easier </li><ul><li>SPEAKERS: Paul Hannan & Maire Kehoe </li></ul><li>BP207 Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from openNTF </li><ul><li>SPEAKERS: Bruce Elgort & Niklas Heidloff </li></ul><li>BP211 XPages Blast </li><ul><li>SPEAKERS: Matt White & Tim Clark </li></ul></ul>
  158. 171. Thank You, Q&A Paul Withers [email_address] @PaulSWithers http://hermes.intec.co.uk/intec/blog.nsf http://www.youtube.com/intecsystems http//www.intec.co.uk David Leedy [email_address] @DavidLeedy NotesIn9.com XPages.TV LotusNotebook.com Please complete your evaluations
  159. 172. Legal Disclaimer © IBM Corporation 2011. All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.