This document provides an introduction to using the Dojo JavaScript framework within XPages applications. It discusses various Dojo widgets like AccordionContainer, TabContainer, ToolTips, and Dialogs. It also covers integrating Dojo themes, working with dates and ratings, extending Dojo modules, and using the rich text editor. The session is aimed at those familiar with XPages who want to create enhanced web applications using Dojo.

1. BP207 XPages: Enter The Dojo Paul Withers | Senior Domino Developer | Intec Systems Ltd David Leedy | Developer | Czarnowski

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

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

21. It's an Intro to using Dojo inside of XPages

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

31. Open Source Toolkit designed for cross platform RAD

33. Drag and Drop

34. Event Handling

35. Visual Effects / Animation

38. Many Books available

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

46. Partial Refresh

47. XSP Class

48. Date Picker

49. Type Ahead

50. Extension Library

52. 8.5.2 defaults to CKEditor

54. 8.5.0 = Dojo 1.1.1

55. 8.5.1 = Dojo 1.3.2

58. Event Handling

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>

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>

71. dijit.Calendar

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>

82. Use for Div's OR Panels

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>

93. Images

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>

99. soria

100. nihilo

105. <data>ominotmlkeditor (compressed files)

106. _source subfolder for uncompressed files

107. Managed by <dojoroot>bmspidgetayoutKEditorWrapper.js

110. Names can be found in plugin.js files in subfolders of plugins folder

112. skins: to theme the editor

113. ...and many more. See CKEditorWrapper.js

118. So content is not posted back to server

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

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

132. Compatibility mode required for Microsoft Internet Explorer 8

134. Bar charts / column charts

135. Pie charts

137. Configurable Axes

138. Background grids

139. Predefined themes

140. Legends (contributed by Chris Mitchell, IBM)

143. Magnify

144. MoveSlice / Shake

145. Tooltip

146. Events

148. Map chart

149. Additional themes

151. Restart server

152. Server / client automatically uses highest numbered dojo-x.x.x folder

157. Many Dojo widgets packaged as native controls

158. Mobile Controls

161. Improves ease of use

162. Improves development time

164. xpag.es/?search

165. xpages.tv

166. xpages.info

167. thexcast.net

168. qtzar.com

169. xpagesblog.com

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.