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.

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

34. OF
THE
RISE GRAPH
Keith Strickland
Red Pill Development

35. What is
a graph?

36. Not This!

37. Any storage system providing index-free
adjacency

38. Part of NoSQL Revolution

39. Part of the NoSQL Revolution

40. Node

41. Nodes

42. Relationship (Edge)
*ID: 1
Model: T-
850
*ID: 2
*ID: 3 Model: T-X
Label: Encountered
Date: 07-24-2004

43. Graph
Protects
Protects
Hunts
Hunts
Encounters
Hunts
Encounters

44. Show Me!

45. Oscar Nominations

46. Brand Analysis

47. Entertainment Connections

48. London Underground

49. Who’s Using Graphs?

51. Explain The Advantages?

52. Big Data
The volume of business data
doubles every 1.2 years

53. Big Data
Walmart handles 1 MILLION
customer transactions an hour

54. Big Data
30 BILLION pieces of content
shared on facebook every month

55. Big Data
5 EXABYTES of new data is created
every 10 minutes

56. Big Data
Data volumes collected by Skynet
in 2025 measured in brontobytes

57. Query Performance

58. 2 Levels Deep (~2,500 results)
0.16
0.10
RDMS Graph

59. 3 Levels Deep (~110,000 results)
30.27
0.17
RDMS Graph

60. 4 Levels Deep (~600,000 results)
1,544
1
RDMS Graph

61. 5 Levels Deep (~800,000 results)
unfinished
2
RDMS Graph

62. Relational Doesn’t Scale

63. So what
about
Notes?

64. Domino API

65. Why Is It Important?

66. Application Analysis

67. Understanding Application Design

68. Who’s creating content?

69. Actions Taken

70. Usage Over Time

71. The era of the GRAPH is rising

72. Getting some REST
with Representational State Transfer
REST
ReadViewEntries
Domino Data Service
XPages REST Service

73. What is
REST?

74. Developed in
2000
by Roy Fielding
A group of stateless developers protest against the oppression of the SOAP regime

75. REST is not a Standard

76. REST is an architectural
Some of the growing population of Notes developers now programming in style with REST
STYLE

77. Simple,
Stateless
API
for the Internet
A group of stateless developers protest against the oppression of the SOAP regime

78. Stateless
A client-server model in which the client must
provide all context in the request to the server

79. Get
Retrieve data from the server

80. Post
Update data on the server

81. Put
Create data on the server

82. Delete
Remove data from the server

83. DataTypes

84. REST Status
2xx == all good
4xx == client encountered a problem
5xx == server encountered a problem

85. Why use
REST?

86. Data-Driven UI
Sencha Touch Native Mobile Apps XPages Mobile

87. ?ReadViewEntries
Now with primitive REST services
A division of Lotus Development

88. http://scanline/Training/CatalogNew.nsf/
Applications?ReadViewEntries
http://scanline/Training/CatalogNew.nsf/Applications
?ReadViewEntries&outputformat=json

89. 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….

90. Server Enablement Database Enablement

91. View Enablement
http://scanline/Training/CatalogNew.nsf/a
pi/data/collections/name/Applications

92. XPages Rest Services
Notes 8.5.3

93. xe:restService

94. xe:restService

95. http://scanline/Training/catalogNew.nsf/Services.xsp/applications

96. Additional Information
Because the journey doesn’t end here

97. BP204 Take a REST and put your data
to work with APIs
Craig Schumann | Inner Ring Solutions
© 2013 IBM Corporation

98. http://www.openntf.org/Projects/pmt.nsf/36B7CD129ED7357A86257AC6005523E7/%24file/Ext
ension%20Library%20REST%20Services.pdf

100. Getting some REST
with Representational State Transfer
REST
ReadViewEntries
Domino Data Service
XPages REST Service

101. Visual Power with D3

102. What is D3.js?

104. 4

105. JavaScript Library

106. Helper Functions
Date/Time Arrays Scales Layouts Min/Max

107. Parsers
JSON TSV CSV XML

108. Code Examples

109. D3.select
var table = d3.select(“#someElementId”)
.append("table")
.attr("class","table table-bordered");
var tableHead = table.append("thead");
var tableBody = table.append("tbody");

110. D3.selectAll
tableBody.selectAll("tr")
.data(tableData.viewentry)
.enter()
.append("tr")

111. Examples

117. Downsides

118. Steep learning curve
Javascript
SVG

119. Large datasets

120. If you’re looping through data…
You’re doing it wrong

121. 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

122. Bootstrapping
with Twitter Bootstrap
Responsive Layouts
CSS
Components
JavaScript
Font Awesome
Select2
Themes
Bootstrap4XPages

123. What is Bootstrap?

124. Developed by Twitter

125. Responsive
The most popular front-end framework for developing responsive, mobile first
projects on the web.

126. Grid Based

127. Open Source

128. Depends on jQuery

129. Mobile First

130. Responsive?
What Is Responsive?

132. What’s In Bootstrap?
CSS Components Javascript

133. CSSCascading Style Sheets
Global CSS settings, fundamental HTML elements styled and
enhanced with extensible classes, and an advanced grid system.

134. Fluid Grids
Large(large monitor)
Medium (small monitor)
Small (tablet)
Extra-Small (phone)

135. Contextual Backgrounds

136. Buttons

137. Components
Over a dozen reusable components built to provide iconography,
dropdowns, input groups, navigation, alerts, and much more.

138. Glyphicons

139. Dropdowns

140. Navbars

141. Badges

142. Javascript
Bring Bootstrap's components to life with over a dozen custom
jQuery plugins. Easily include them all, or one by one.

143. transition.js

144. modal.js

145. scrollspy.js

146. carousel.js

147. Bootstrap Themes
Because not every Notes developer is the world’s greatest graphic designer!

148. free

149. $12

150. $17

151. $25

152. $75

153. Font Awesome
The iconic font designed for Bootstrap

155. Select2
jQuery based replacement for select boxes

156. Select2 Example

158. Bootstrap4XPages

160. Bootstrapping
with Twitter Bootstrap
Responsive Layouts
CSS
Components
JavaScript
Font Awesome
Select2
Themes
Bootstrap4XPages

161. Mobile Controls
Modern Domino: Gaining Control with XPages Mobile
Single Page Application
Application Page
Page Heading
Data View
Form Table
Form Layout Row

162. Single Page Application
<xe:singlePageApp>
Property Description
id Unique identifier
selectedPageName The initial mobile page to be displayed (Required)

163. 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

164. Application Page
Examples

165. Application Page
Code

166. 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

167. Page Heading
Examples

168. Page Heading
Code

169. 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

170. Data View
Example

171. Data View
Code

172. Form Table
<xe:formTable>

173. 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

174. Form Table
Example

175. Form Table
Code

176. Mobile Controls
Modern Domino: Gaining Control with XPages Mobile
Single Page Application
Application Page
Page Heading
Data View
Form Table
Form Layout Row

177. SSJS
The Mini-Evil in Xpages Development

178. 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

179. 14 Year Legacy!
“All in this file are in conformance
with ECMAScript Language
Specification Edition 3 24-Mar-
00”

180. What’s new in SSJS?
1. var foo:NotesDocument

181. 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

183. Not really
OO

184. 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

185. Type declaration?
• :NotesDocument and :java.util.Map are just
EDITOR instructions
• Incorrect usage can create accidental
block-level vars

186. When do you see errors?
When you build?
When you run?
When your users do?

187. 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

188. What is it really?
Proprietary
Closed
Frozen
Outdated
Buggy

189. Just stick with Lotusscript!