BP210 XPages: Enter The Dojo

  • 11,301 views
Uploaded on

BP210 session from Lotusphere 2011

BP210 session from Lotusphere 2011

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • it says bp207 in the presentation?
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
11,301
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
252
Comments
1
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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