MWLUG 2014: Modern Domino (workshop)
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

MWLUG 2014: Modern Domino (workshop)

on

  • 401 views

It is not uncommon for Notes client developers to feel intimidated by the wide range of technologies available when modernizing an existing portfolio of applications with XPages. In this 2-hour ...

It is not uncommon for Notes client developers to feel intimidated by the wide range of technologies available when modernizing an existing portfolio of applications with XPages. In this 2-hour workshop we will provide a series of 20-minute introductions to many of these new and emerging technologies. Learn about Java, Beans, REST Services, Bootstrap, Mobile Controls, data visualization and a whole lot more.

Statistics

Views

Total Views
401
Views on SlideShare
388
Embed Views
13

Actions

Likes
2
Downloads
25
Comments
0

1 Embed 13

https://twitter.com 13

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • When building an application that uses the mobile controls you will typically be using an Xpage that has a Single Application Page control. <br /> Within this single application page we are going to create one or more Mobile page controls. <br /> This is what allows the seamless transition between pages that is a common design aspect of many mobile applications and mirrors the way native mobile applications are built.. <br /> It is necessary to nominate one of these Mobile Pages to be the initial page displayed when the XPage is opened.
  • The first, and most important aspect of building a mobile application is deciding the number of Mobile pages that are going to be used and how the navigation will occur between these pages. <br /> Each Mobile Page is assigned a pageName. These must be unique in order to prevent potential navigation problems. <br /> By default the content of each page is loaded as part of a partial refresh when the page is navigated to for the first time. <br /> If you look at the HTML sent to your browser you will normally see the content of all other pages as an empty div. <br /> The load strategy can be controlled using the autocreate and resetContent properties of each page. <br /> If the content of a page is dynamic based upon actions the user has (or will take) it is a good idea to cause the content to be recreated each time the page is displayed. <br /> Be careful though… This strategy can cause issues when the page is refreshed or is navigated back to from subsequent pages. Document data sources may have been recycled which is why it is often a good strategy to bind pages to Object Data Sources that link to beans.
  • The first, and most important aspect of building a mobile application is deciding the number of Mobile pages that are going to be used and how the navigation will occur between these pages. <br /> Each Mobile Page is assigned a pageName. These must be unique in order to prevent potential navigation problems. <br /> By default the content of each page is loaded as part of a partial refresh when the page is navigated to for the first time. <br /> If you look at the HTML sent to your browser you will normally see the content of all other pages as an empty div. <br /> The load strategy can be controlled using the autocreate and resetContent properties of each page. <br /> If the content of a page is dynamic based upon actions the user has (or will take) it is a good idea to cause the content to be recreated each time the page is displayed. <br /> Be careful though… This strategy can cause issues when the page is refreshed or is navigated back to from subsequent pages. Document data sources may have been recycled which is why it is often a good strategy to bind pages to Object Data Sources that link to beans.
  • The first, and most important aspect of building a mobile application is deciding the number of Mobile pages that are going to be used and how the navigation will occur between these pages. <br /> Each Mobile Page is assigned a pageName. These must be unique in order to prevent potential navigation problems. <br /> By default the content of each page is loaded as part of a partial refresh when the page is navigated to for the first time. <br /> If you look at the HTML sent to your browser you will normally see the content of all other pages as an empty div. <br /> The load strategy can be controlled using the autocreate and resetContent properties of each page. <br /> If the content of a page is dynamic based upon actions the user has (or will take) it is a good idea to cause the content to be recreated each time the page is displayed. <br /> Be careful though… This strategy can cause issues when the page is refreshed or is navigated back to from subsequent pages. Document data sources may have been recycled which is why it is often a good strategy to bind pages to Object Data Sources that link to beans.
  • The label psroperty defines the text to appear in the heading while the back property is used to defined the text for a back button. <br /> The moveTo property is used to define the Mobile page to naviagate to when the back button is pressed. <br /> The type of transition can be defined for the back button. <br /> A facet (actionFacet) is used to populate one or more additional actions on the right of the heading. <br /> Notes: An onShow event was available in beta but was removed in the official (non-OpenNTF) version that was eventually released as part of 8.5.3 UP1.
  • The label psroperty defines the text to appear in the heading while the back property is used to defined the text for a back button. <br /> The moveTo property is used to define the Mobile page to naviagate to when the back button is pressed. <br /> The type of transition can be defined for the back button. <br /> A facet (actionFacet) is used to populate one or more additional actions on the right of the heading. <br /> Notes: An onShow event was available in beta but was removed in the official (non-OpenNTF) version that was eventually released as part of 8.5.3 UP1.
  • The label psroperty defines the text to appear in the heading while the back property is used to defined the text for a back button. <br /> The moveTo property is used to define the Mobile page to naviagate to when the back button is pressed. <br /> The type of transition can be defined for the back button. <br /> A facet (actionFacet) is used to populate one or more additional actions on the right of the heading. <br /> Notes: An onShow event was available in beta but was removed in the official (non-OpenNTF) version that was eventually released as part of 8.5.3 UP1.
  • Here are some of the properties that can be specified for a dataview <br /> Many other properties are available, but most of the ones not shown here do not apply to the mobile theme
  • Here are some of the properties that can be specified for a dataview <br /> Many other properties are available, but most of the ones not shown here do not apply to the mobile theme
  • Here are some of the properties that can be specified for a dataview <br /> Many other properties are available, but most of the ones not shown here do not apply to the mobile theme
  • The Form table is a little like the basic HTML table. <br /> It has a Form Table outer control along with rows and columns. <br /> <br /> We will not be covering FormColumns in this session as they are not well suited for use with mobile applications <br /> <br /> We can assign a title to the table using the formTitle property <br /> FormDescription can be used to add extra information which is displayed below the title. <br /> We can disable to use of Required Marks <br /> fieldHelp and labelPosition are not fully supported in a mobile device so only use those in conjunction with the standard XPages themes. <br /> <br />
  • With a Form Table we will usually add one or more rows. <br /> Label is used to assign the label text for the content of the row. <br /> For is used to designate the id of the input control. This is largely used with Accesibility features within the browser. <br /> labelPosition is ignored by the mobile theme, so again only use to affect the display in standard Xpages themes. <br /> After we have define the table row we will usually add an input control to display the data from our Notes document and (optionally) allow for its content to be edited. <br />
  • The Form table is a little like the basic HTML table. <br /> It has a Form Table outer control along with rows and columns. <br /> <br /> We will not be covering FormColumns in this session as they are not well suited for use with mobile applications <br /> <br /> We can assign a title to the table using the formTitle property <br /> FormDescription can be used to add extra information which is displayed below the title. <br /> We can disable to use of Required Marks <br /> fieldHelp and labelPosition are not fully supported in a mobile device so only use those in conjunction with the standard XPages themes. <br /> <br />
  • The Form table is a little like the basic HTML table. <br /> It has a Form Table outer control along with rows and columns. <br /> <br /> We will not be covering FormColumns in this session as they are not well suited for use with mobile applications <br /> <br /> We can assign a title to the table using the formTitle property <br /> FormDescription can be used to add extra information which is displayed below the title. <br /> We can disable to use of Required Marks <br /> fieldHelp and labelPosition are not fully supported in a mobile device so only use those in conjunction with the standard XPages themes. <br /> <br />

MWLUG 2014: Modern Domino (workshop) Presentation Transcript

  • 1. Modern Domino Nathan Freeman Peter Presnell Red Pill Development
  • 2. Peter Presnell CEO Nathan Freeman Chief Architect
  • 3. IBM Business Partner Based In Atlanta, GA IBM Champions Average 20 Years Experience IBM Notes Speakers Bloggers Presenters Member OpenNTF (Co-Founder) Modernizing Notes Application
  • 4. Modern Domino A Quick Start Guide to Modern Web Development Java Graph Databases REST Services Data Visualization Native Applications Bootstrap Mobile Controls SSJS
  • 5. Modern Domino Related Sessions Wednesday • 1:00 - Modern Domino (Nathan Freeman, Peter Presnell) • 3:00 - Build A Bean Workshop (Devin Olson, Mike McGarel) Thursday • 1:00 - Don't Put the Cart Before the Source: Tips for Building Your First XPages Java Application (Mike McGarel, Graham Acres) • 4:30 - ATLUG Comes To You (Nathan Freeman, Devin Olson, Peter Presnell) Friday • 10:15 - Take a REST (Brian Moore) • 11:30 - The XPages Mobile Controls: What's New In Notes 9.0.1 (Graham Acres) • 1:30 - Building a Structured App With XPages Scaffolding (Jesse Gallagher) • 3:00 - Write once, run anywhere - Angular.js in XPages (Mark Roden)
  • 6. Modern Domino: The Magazine
  • 7. nathantfreeman.wordpress.com
  • 8. For LotusScript Developers
  • 9. Libraries & Namespaces
  • 10. Libraries & Namespaces Use “com.redpilldevelopment.utilities” package com.redpilldevelopment.utilities.portal; import com.redpilldevelopment.utilities.*;
  • 11. Declaratives
  • 12. Data Types • Boolean (0 or -1) • Byte (0 to 255) • Integer (-32,768 to 32,767) • Long • n/a • Single • Double • String • Currency • boolean • byte • short • int • long • float • double • char • n/a
  • 13. Primatives versus Objects boolean byte short int long float double Char Boolean Byte Short Integer Long Float Double Character
  • 14. Declarations Dim i As Integer i = 10 int i; int i = 10;
  • 15. Classes
  • 16. Class Public Class MyClass … End Class public class MyClass { … }
  • 17. Constructor Class MyClass Sub New() … End Sub End Class * Assumes Option Public class MyClass { public MyClass() { … } }
  • 18. Class Declaration Dim class1 As New MyClass() MyClass class1 = new MyClass();
  • 19. Properties
  • 20. Properties Property Get A As String Property Set A As String Property Get A As Boolean public String getA() public void setA(String a) public boolean isA ()
  • 21. Methods
  • 22. Methods Sub A() Function A() As Boolean A = true End Function Function B(p1 As String) As String public void A() public boolean A() { return true; } Public String B(String p1)
  • 23. Conditionals
  • 24. If Statement If (condition) Then … Else … End If if (condition) { … } else { }
  • 25. Select Statement Select Case (Month) Case 1: MonthString = “January” Case 2: MonthString = “February” Case Else: MonthString = “Invalid” End Select switch (month) { case 1: monthString = “January”; break; case 2: monthString=“February; break; default: monthString = “Invalid”; break; }
  • 26. Looping
  • 27. For Statement Dim i As Integer For i = 1 To 10 Print "Count is: ”,i Next i for (int i=1;i<=10;i++) { System.out.println(“Count is: “ + i); }
  • 28. Document Looping Dim Doc As NotesDocument Set Doc = View.getFirstDocument() While (Not Doc Is Nothing) … Set Doc = View.GetNextDocument(Doc) Wend for (Document doc: view.getAllDocuments()) { … }
  • 29. Error Handling
  • 30. Error Handling On Error GoTo err … err: … try { … } catch (Exception e) { … }
  • 31. Some Important Differences
  • 32. Gotchas Casing Ignored Automatic garbage collection Statements end with EOL Code blocked by End statement Variables global to Sub Object variable not set Case Sensitive Recycle required* Statements end with ; Code blocked by { and } Variables scoped to code block Null pointer exception * Handled by OpenNTF Domino API
  • 33. OF THE RISE GRAPH Keith Strickland Red Pill Development
  • 34. What is a graph?
  • 35. Not This!
  • 36. Any storage system providing index-free adjacency
  • 37. Part of NoSQL Revolution
  • 38. Part of the NoSQL Revolution
  • 39. Node
  • 40. Nodes
  • 41. Relationship (Edge) *ID: 1 Model: T- 850 *ID: 2 *ID: 3 Model: T-X Label: Encountered Date: 07-24-2004
  • 42. Graph Protects Protects Hunts Hunts Encounters Hunts Encounters
  • 43. Show Me!
  • 44. Oscar Nominations
  • 45. Brand Analysis
  • 46. Entertainment Connections
  • 47. London Underground
  • 48. Who’s Using Graphs?
  • 49. Explain The Advantages?
  • 50. Big Data The volume of business data doubles every 1.2 years
  • 51. Big Data Walmart handles 1 MILLION customer transactions an hour
  • 52. Big Data 30 BILLION pieces of content shared on facebook every month
  • 53. Big Data 5 EXABYTES of new data is created every 10 minutes
  • 54. Big Data Data volumes collected by Skynet in 2025 measured in brontobytes
  • 55. Query Performance
  • 56. 2 Levels Deep (~2,500 results) 0.16 0.10 RDMS Graph
  • 57. 3 Levels Deep (~110,000 results) 30.27 0.17 RDMS Graph
  • 58. 4 Levels Deep (~600,000 results) 1,544 1 RDMS Graph
  • 59. 5 Levels Deep (~800,000 results) unfinished 2 RDMS Graph
  • 60. Relational Doesn’t Scale
  • 61. So what about Notes?
  • 62. Domino API
  • 63. Why Is It Important?
  • 64. Application Analysis
  • 65. Understanding Application Design
  • 66. Who’s creating content?
  • 67. Actions Taken
  • 68. Usage Over Time
  • 69. The era of the GRAPH is rising
  • 70. Getting some REST with Representational State Transfer REST ReadViewEntries Domino Data Service XPages REST Service
  • 71. What is REST?
  • 72. Developed in 2000 by Roy Fielding A group of stateless developers protest against the oppression of the SOAP regime
  • 73. REST is not a Standard
  • 74. REST is an architectural Some of the growing population of Notes developers now programming in style with REST STYLE
  • 75. Simple, Stateless API for the Internet A group of stateless developers protest against the oppression of the SOAP regime
  • 76. Stateless A client-server model in which the client must provide all context in the request to the server
  • 77. Get Retrieve data from the server
  • 78. Post Update data on the server
  • 79. Put Create data on the server
  • 80. Delete Remove data from the server
  • 81. DataTypes
  • 82. REST Status 2xx == all good 4xx == client encountered a problem 5xx == server encountered a problem
  • 83. Why use REST?
  • 84. Data-Driven UI Sencha Touch Native Mobile Apps XPages Mobile
  • 85. ?ReadViewEntries Now with primitive REST services A division of Lotus Development
  • 86. http://scanline/Training/CatalogNew.nsf/ Applications?ReadViewEntries http://scanline/Training/CatalogNew.nsf/Applications ?ReadViewEntries&outputformat=json
  • 87. DominoData Service Notes 8.5.3 The growing importance of legal in our company can be observed by the amount of space we now devote to the following message….
  • 88. Server Enablement Database Enablement
  • 89. View Enablement http://scanline/Training/CatalogNew.nsf/a pi/data/collections/name/Applications
  • 90. XPages Rest Services Notes 8.5.3
  • 91. xe:restService
  • 92. xe:restService
  • 93. http://scanline/Training/catalogNew.nsf/Services.xsp/applications
  • 94. Additional Information Because the journey doesn’t end here
  • 95. BP204 Take a REST and put your data to work with APIs Craig Schumann | Inner Ring Solutions © 2013 IBM Corporation
  • 96. http://www.openntf.org/Projects/pmt.nsf/36B7CD129ED7357A86257AC6005523E7/%24file/Ext ension%20Library%20REST%20Services.pdf
  • 97. Getting some REST with Representational State Transfer REST ReadViewEntries Domino Data Service XPages REST Service
  • 98. Visual Power with D3
  • 99. What is D3.js?
  • 100. 4
  • 101. JavaScript Library
  • 102. Helper Functions Date/Time Arrays Scales Layouts Min/Max
  • 103. Parsers JSON TSV CSV XML
  • 104. Code Examples
  • 105. D3.select var table = d3.select(“#someElementId”) .append("table") .attr("class","table table-bordered"); var tableHead = table.append("thead"); var tableBody = table.append("tbody");
  • 106. D3.selectAll tableBody.selectAll("tr") .data(tableData.viewentry) .enter() .append("tr")
  • 107. Examples
  • 108. Downsides
  • 109. Steep learning curve Javascript SVG
  • 110. Large datasets
  • 111. If you’re looping through data… You’re doing it wrong
  • 112. Additional Reading D3.js d3js.org Thinking with Joins bost.ocks.org/mike/join Towards Reusable Charts bost.ocks.org/mike/chart How Selections Work bost.ocks.org/mike/selection Dashing D3 www.dashingd3js.com Stack Overflow tackoverflow.com/questions/tagged/d3.js Gapminder World www.gapminder.org/world
  • 113. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes Bootstrap4XPages
  • 114. What is Bootstrap?
  • 115. Developed by Twitter
  • 116. Responsive The most popular front-end framework for developing responsive, mobile first projects on the web.
  • 117. Grid Based
  • 118. Open Source
  • 119. Depends on jQuery
  • 120. Mobile First
  • 121. Responsive? What Is Responsive?
  • 122. What’s In Bootstrap? CSS Components Javascript
  • 123. CSSCascading Style Sheets Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
  • 124. Fluid Grids Large(large monitor) Medium (small monitor) Small (tablet) Extra-Small (phone)
  • 125. Contextual Backgrounds
  • 126. Buttons
  • 127. Components Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
  • 128. Glyphicons
  • 129. Dropdowns
  • 130. Navbars
  • 131. Badges
  • 132. Javascript Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
  • 133. transition.js
  • 134. modal.js
  • 135. scrollspy.js
  • 136. carousel.js
  • 137. Bootstrap Themes Because not every Notes developer is the world’s greatest graphic designer!
  • 138. free
  • 139. $12
  • 140. $17
  • 141. $25
  • 142. $75
  • 143. Font Awesome The iconic font designed for Bootstrap
  • 144. Select2 jQuery based replacement for select boxes
  • 145. Select2 Example
  • 146. Bootstrap4XPages
  • 147. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes Bootstrap4XPages
  • 148. Mobile Controls Modern Domino: Gaining Control with XPages Mobile Single Page Application Application Page Page Heading Data View Form Table Form Layout Row
  • 149. Single Page Application <xe:singlePageApp> Property Description id Unique identifier selectedPageName The initial mobile page to be displayed (Required)
  • 150. Application Page <xe:appPage> Property Description id Unique identifier pageName The name used to identify the page resetContent True: Page content is recreated each time the page is displayed
  • 151. Application Page Examples
  • 152. Application Page Code
  • 153. Page Heading <xe:djxmHeading> Property Description label Text to be displayed in header back Text to be displayed in the back button moveTo Application page to navigate to when back button is pressed
  • 154. Page Heading Examples
  • 155. Page Heading Code
  • 156. Data View <xe:dataView> Property Description data Datasource used to provide data for the view pageName Page used to open the document when the summary label is selected summaryColumn Defines the column used for the summary label
  • 157. Data View Example
  • 158. Data View Code
  • 159. Form Table <xe:formTable>
  • 160. Form Layout Row <xe:formRow> Property Description for Id of input control used to edit the data label Label to be associated with the input control
  • 161. Form Table Example
  • 162. Form Table Code
  • 163. Mobile Controls Modern Domino: Gaining Control with XPages Mobile Single Page Application Application Page Page Heading Data View Form Table Form Layout Row
  • 164. SSJS The Mini-Evil in Xpages Development
  • 165. A brief history of com.ibm.jscript Began life as Trilog’s FlowBuilder Internally, variable types are prefixed with ‘FBS’ which is “FlowBuilderScript” Acquired by IBM to become the foundation of XPages
  • 166. 14 Year Legacy! “All in this file are in conformance with ECMAScript Language Specification Edition 3 24-Mar- 00”
  • 167. What’s new in SSJS? 1. var foo:NotesDocument
  • 168. What’s new in javascript? • 1.4: instanceof Operator • 1.5: const, Number.toFixed(), multiple catches, if clause functions • 1.6: Array functions, Array generics, String generics, E4X • 1.7: yield, iterators, generators, • 1.8: Array.reduce(), expression closures, array destructuring • 1.8.1: Native JSON, .getPrototypeOf() • 1.8.5: Object prototype, Array.isArray(), strict mode • Next: function (x) {return y+z;} becomes x => y+z; for of loops
  • 169. Not really OO
  • 170. Ah! .prototype? • Hazardous • Prototype changes are SERVER-WIDE, even if they originate from a single custom control • Prototype functions can be used carelessly or maliciously to redefine language features
  • 171. Type declaration? • :NotesDocument and :java.util.Map are just EDITOR instructions • Incorrect usage can create accidental block-level vars
  • 172. When do you see errors? When you build? When you run? When your users do?
  • 173. But Javascript is popular! • Modern Javascript is popular • node.js, jQuery, Angular.js, Backbone, Marionette, Sencha, Mongo, Rx • All require JS 1.7+ • SSJS was written for the Netscape era
  • 174. What is it really? Proprietary Closed Frozen Outdated Buggy
  • 175. Just stick with Lotusscript!