Modern Domino 
Nathan Freeman 
Peter Presnell 
Red Pill Development
Peter Presnell 
CEO 
Nathan Freeman 
Chief Architect
IBM Business 
Partner 
Based In 
Atlanta, GA 
IBM 
Champions 
Average 20 
Years 
Experience 
IBM Notes 
Speakers 
Bloggers...
Modern Domino 
A Quick Start Guide to Modern Web Development 
Java Graph Databases REST Services Data Visualization 
Nativ...
Modern Domino 
Related Sessions 
Wednesday 
• 1:00 - Modern Domino (Nathan Freeman, Peter Presnell) 
• 3:00 - Build A Bean...
Modern Domino: The Magazine
nathantfreeman.wordpress.com
For LotusScript 
Developers
Libraries & Namespaces
Libraries & Namespaces 
Use “com.redpilldevelopment.utilities” package com.redpilldevelopment.utilities.portal; 
import co...
Declaratives
Data Types 
• Boolean (0 or -1) 
• Byte (0 to 255) 
• Integer (-32,768 to 32,767) 
• Long 
• n/a 
• Single 
• Double 
• St...
Primatives versus Objects 
boolean 
byte 
short 
int 
long 
float 
double 
Char 
Boolean 
Byte 
Short 
Integer 
Long 
Floa...
Declarations 
Dim i As Integer 
i = 10 
int i; 
int i = 10;
Classes
Class 
Public Class MyClass 
… 
End Class 
public class MyClass { 
… 
}
Constructor 
Class MyClass 
Sub New() 
… 
End Sub 
End Class 
* Assumes Option Public 
class MyClass { 
public MyClass() {...
Class Declaration 
Dim class1 As New MyClass() MyClass class1 = new MyClass();
Properties
Properties 
Property Get A As String 
Property Set A As String 
Property Get A As Boolean 
public String getA() 
public vo...
Methods
Methods 
Sub A() 
Function A() As Boolean 
A = true 
End Function 
Function B(p1 As String) As String 
public void A() 
pu...
Conditionals
If Statement 
If (condition) Then 
… 
Else 
… 
End If 
if (condition) { 
… 
} 
else { 
}
Select Statement 
Select Case (Month) 
Case 1: MonthString = “January” 
Case 2: MonthString = “February” 
Case Else: Month...
Looping
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.prin...
Document Looping 
Dim Doc As NotesDocument 
Set Doc = View.getFirstDocument() 
While (Not Doc Is Nothing) 
… 
Set Doc = Vi...
Error Handling
Error Handling 
On Error GoTo err 
… 
err: 
… 
try { 
… 
} catch (Exception e) { 
… 
}
Some Important Differences
Gotchas 
Casing Ignored 
Automatic garbage collection 
Statements end with EOL 
Code blocked by End statement 
Variables g...
OF 
THE 
RISE GRAPH 
Keith Strickland 
Red Pill Development
What is 
a graph?
Not This!
Any storage system providing index-free 
adjacency
Part of NoSQL Revolution
Part of the NoSQL Revolution
Node
Nodes
Relationship (Edge) 
*ID: 1 
Model: T- 
850 
*ID: 2 
*ID: 3 Model: T-X 
Label: Encountered 
Date: 07-24-2004
Graph 
Protects 
Protects 
Hunts 
Hunts 
Encounters 
Hunts 
Encounters
Show Me!
Oscar Nominations
Brand Analysis
Entertainment Connections
London Underground
Who’s Using Graphs?
Explain The Advantages?
Big Data 
The volume of business data 
doubles every 1.2 years
Big Data 
Walmart handles 1 MILLION 
customer transactions an hour
Big Data 
30 BILLION pieces of content 
shared on facebook every month
Big Data 
5 EXABYTES of new data is created 
every 10 minutes
Big Data 
Data volumes collected by Skynet 
in 2025 measured in brontobytes
Query Performance
2 Levels Deep (~2,500 results) 
0.16 
0.10 
RDMS Graph
3 Levels Deep (~110,000 results) 
30.27 
0.17 
RDMS Graph
4 Levels Deep (~600,000 results) 
1,544 
1 
RDMS Graph
5 Levels Deep (~800,000 results) 
unfinished 
2 
RDMS Graph
Relational Doesn’t Scale
So what 
about 
Notes?
Domino API
Why Is It Important?
Application Analysis
Understanding Application Design
Who’s creating content?
Actions Taken
Usage Over Time
The era of the GRAPH is rising
Getting some REST 
with Representational State Transfer 
REST 
ReadViewEntries 
Domino Data Service 
XPages REST Service
What is 
REST?
Developed in 
2000 
by Roy Fielding 
A group of stateless developers protest against the oppression of the SOAP regime
REST is not a Standard
REST is an architectural 
Some of the growing population of Notes developers now programming in style with REST 
STYLE
Simple, 
Stateless 
API 
for the Internet 
A group of stateless developers protest against the oppression of the SOAP regi...
Stateless 
A client-server model in which the client must 
provide all context in the request to the server
Get 
Retrieve data from the server
Post 
Update data on the server
Put 
Create data on the server
Delete 
Remove data from the server
DataTypes
REST Status 
2xx == all good 
4xx == client encountered a problem 
5xx == server encountered a problem
Why use 
REST?
Data-Driven UI 
Sencha Touch Native Mobile Apps XPages Mobile
?ReadViewEntries 
Now with primitive REST services 
A division of Lotus Development
http://scanline/Training/CatalogNew.nsf/ 
Applications?ReadViewEntries 
http://scanline/Training/CatalogNew.nsf/Applicatio...
DominoData Service 
Notes 8.5.3 
The growing importance of legal in our company can be observed by the amount of space we ...
Server Enablement Database Enablement
View Enablement 
http://scanline/Training/CatalogNew.nsf/a 
pi/data/collections/name/Applications
XPages Rest Services 
Notes 8.5.3
xe:restService
xe:restService
http://scanline/Training/catalogNew.nsf/Services.xsp/applications
Additional Information 
Because the journey doesn’t end here
BP204 Take a REST and put your data 
to work with APIs 
Craig Schumann | Inner Ring Solutions 
© 2013 IBM Corporation
http://www.openntf.org/Projects/pmt.nsf/36B7CD129ED7357A86257AC6005523E7/%24file/Ext 
ension%20Library%20REST%20Services.p...
Getting some REST 
with Representational State Transfer 
REST 
ReadViewEntries 
Domino Data Service 
XPages REST Service
Visual Power with D3
What is D3.js?
4
JavaScript Library
Helper Functions 
Date/Time Arrays Scales Layouts Min/Max
Parsers 
JSON TSV CSV XML
Code Examples
D3.select 
var table = d3.select(“#someElementId”) 
.append("table") 
.attr("class","table table-bordered"); 
var tableHea...
D3.selectAll 
tableBody.selectAll("tr") 
.data(tableData.viewentry) 
.enter() 
.append("tr")
Examples
Downsides
Steep learning curve 
Javascript 
SVG
Large datasets
If you’re looping through data… 
You’re doing it wrong
Additional Reading 
D3.js d3js.org 
Thinking with Joins bost.ocks.org/mike/join 
Towards Reusable Charts bost.ocks.org/mik...
Bootstrapping 
with Twitter Bootstrap 
Responsive Layouts 
CSS 
Components 
JavaScript 
Font Awesome 
Select2 
Themes 
Boo...
What is Bootstrap?
Developed by Twitter
Responsive 
The most popular front-end framework for developing responsive, mobile first 
projects on the web.
Grid Based
Open Source
Depends on jQuery
Mobile First
Responsive? 
What Is Responsive?
What’s In Bootstrap? 
CSS Components Javascript
CSSCascading Style Sheets 
Global CSS settings, fundamental HTML elements styled and 
enhanced with extensible classes, an...
Fluid Grids 
Large(large monitor) 
Medium (small monitor) 
Small (tablet) 
Extra-Small (phone)
Contextual Backgrounds
Buttons
Components 
Over a dozen reusable components built to provide iconography, 
dropdowns, input groups, navigation, alerts, a...
Glyphicons
Dropdowns
Navbars
Badges
Javascript 
Bring Bootstrap's components to life with over a dozen custom 
jQuery plugins. Easily include them all, or one...
transition.js
modal.js
scrollspy.js
carousel.js
Bootstrap Themes 
Because not every Notes developer is the world’s greatest graphic designer!
free
$12
$17
$25
$75
Font Awesome 
The iconic font designed for Bootstrap
Select2 
jQuery based replacement for select boxes
Select2 Example
Bootstrap4XPages
Bootstrapping 
with Twitter Bootstrap 
Responsive Layouts 
CSS 
Components 
JavaScript 
Font Awesome 
Select2 
Themes 
Boo...
Mobile Controls 
Modern Domino: Gaining Control with XPages Mobile 
Single Page Application 
Application Page 
Page Headin...
Single Page Application 
<xe:singlePageApp> 
Property Description 
id Unique identifier 
selectedPageName The initial mobi...
Application Page 
<xe:appPage> 
Property Description 
id Unique identifier 
pageName The name used to identify the page 
r...
Application Page 
Examples
Application Page 
Code
Page Heading 
<xe:djxmHeading> 
Property Description 
label Text to be displayed in header 
back Text to be displayed in t...
Page Heading 
Examples
Page Heading 
Code
Data View 
<xe:dataView> 
Property Description 
data Datasource used to provide data for the view 
pageName Page used to o...
Data View 
Example
Data View 
Code
Form Table 
<xe:formTable>
Form Layout Row 
<xe:formRow> 
Property Description 
for Id of input control used to edit the data 
label Label to be asso...
Form Table 
Example
Form Table 
Code
Mobile Controls 
Modern Domino: Gaining Control with XPages Mobile 
Single Page Application 
Application Page 
Page Headin...
SSJS 
The Mini-Evil in Xpages Development
A brief history of com.ibm.jscript 
Began life 
as Trilog’s 
FlowBuilder 
Internally, variable types are prefixed 
with ‘F...
14 Year Legacy! 
“All in this file are in conformance 
with ECMAScript Language 
Specification Edition 3 24-Mar- 
00”
What’s new in SSJS? 
1. var foo:NotesDocument
What’s new in javascript? 
• 1.4: instanceof Operator 
• 1.5: const, Number.toFixed(), multiple catches, if clause 
functi...
Not really 
OO
Ah! .prototype? 
• Hazardous 
• Prototype changes are SERVER-WIDE, 
even if they originate from a single custom 
control 
...
Type declaration? 
• :NotesDocument and :java.util.Map are just 
EDITOR instructions 
• Incorrect usage can create acciden...
When do you see errors? 
When you build? 
When you run? 
When your users do?
But Javascript is popular! 
• Modern Javascript is popular 
• node.js, jQuery, Angular.js, Backbone, 
Marionette, Sencha, ...
What is it really? 
Proprietary 
Closed 
Frozen 
Outdated 
Buggy
Just stick with Lotusscript!
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
MWLUG 2014: Modern Domino (workshop)
Upcoming SlideShare
Loading in...5
×

MWLUG 2014: Modern Domino (workshop)

843

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
843
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • When building an application that uses the mobile controls you will typically be using an Xpage that has a Single Application Page control.
    Within this single application page we are going to create one or more Mobile page controls.
    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..
    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.
    Each Mobile Page is assigned a pageName. These must be unique in order to prevent potential navigation problems.
    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.
    If you look at the HTML sent to your browser you will normally see the content of all other pages as an empty div.
    The load strategy can be controlled using the autocreate and resetContent properties of each page.
    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.
    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.
    Each Mobile Page is assigned a pageName. These must be unique in order to prevent potential navigation problems.
    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.
    If you look at the HTML sent to your browser you will normally see the content of all other pages as an empty div.
    The load strategy can be controlled using the autocreate and resetContent properties of each page.
    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.
    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.
    Each Mobile Page is assigned a pageName. These must be unique in order to prevent potential navigation problems.
    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.
    If you look at the HTML sent to your browser you will normally see the content of all other pages as an empty div.
    The load strategy can be controlled using the autocreate and resetContent properties of each page.
    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.
    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.
    The moveTo property is used to define the Mobile page to naviagate to when the back button is pressed.
    The type of transition can be defined for the back button.
    A facet (actionFacet) is used to populate one or more additional actions on the right of the heading.
    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.
    The moveTo property is used to define the Mobile page to naviagate to when the back button is pressed.
    The type of transition can be defined for the back button.
    A facet (actionFacet) is used to populate one or more additional actions on the right of the heading.
    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.
    The moveTo property is used to define the Mobile page to naviagate to when the back button is pressed.
    The type of transition can be defined for the back button.
    A facet (actionFacet) is used to populate one or more additional actions on the right of the heading.
    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
    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
    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
    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.
    It has a Form Table outer control along with rows and columns.

    We will not be covering FormColumns in this session as they are not well suited for use with mobile applications

    We can assign a title to the table using the formTitle property
    FormDescription can be used to add extra information which is displayed below the title.
    We can disable to use of Required Marks
    fieldHelp and labelPosition are not fully supported in a mobile device so only use those in conjunction with the standard XPages themes.

  • With a Form Table we will usually add one or more rows.
    Label is used to assign the label text for the content of the row.
    For is used to designate the id of the input control. This is largely used with Accesibility features within the browser.
    labelPosition is ignored by the mobile theme, so again only use to affect the display in standard Xpages themes.
    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.
  • The Form table is a little like the basic HTML table.
    It has a Form Table outer control along with rows and columns.

    We will not be covering FormColumns in this session as they are not well suited for use with mobile applications

    We can assign a title to the table using the formTitle property
    FormDescription can be used to add extra information which is displayed below the title.
    We can disable to use of Required Marks
    fieldHelp and labelPosition are not fully supported in a mobile device so only use those in conjunction with the standard XPages themes.

  • The Form table is a little like the basic HTML table.
    It has a Form Table outer control along with rows and columns.

    We will not be covering FormColumns in this session as they are not well suited for use with mobile applications

    We can assign a title to the table using the formTitle property
    FormDescription can be used to add extra information which is displayed below the title.
    We can disable to use of Required Marks
    fieldHelp and labelPosition are not fully supported in a mobile device so only use those in conjunction with the standard XPages themes.

  • MWLUG 2014: Modern Domino (workshop)

    1. 1. Modern Domino Nathan Freeman Peter Presnell Red Pill Development
    2. 2. Peter Presnell CEO Nathan Freeman Chief Architect
    3. 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. 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. 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. 6. Modern Domino: The Magazine
    7. 7. nathantfreeman.wordpress.com
    8. 8. For LotusScript Developers
    9. 9. Libraries & Namespaces
    10. 10. Libraries & Namespaces Use “com.redpilldevelopment.utilities” package com.redpilldevelopment.utilities.portal; import com.redpilldevelopment.utilities.*;
    11. 11. Declaratives
    12. 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. 13. Primatives versus Objects boolean byte short int long float double Char Boolean Byte Short Integer Long Float Double Character
    14. 14. Declarations Dim i As Integer i = 10 int i; int i = 10;
    15. 15. Classes
    16. 16. Class Public Class MyClass … End Class public class MyClass { … }
    17. 17. Constructor Class MyClass Sub New() … End Sub End Class * Assumes Option Public class MyClass { public MyClass() { … } }
    18. 18. Class Declaration Dim class1 As New MyClass() MyClass class1 = new MyClass();
    19. 19. Properties
    20. 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. 21. Methods
    22. 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. 23. Conditionals
    24. 24. If Statement If (condition) Then … Else … End If if (condition) { … } else { }
    25. 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. 26. Looping
    27. 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. 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. 29. Error Handling
    30. 30. Error Handling On Error GoTo err … err: … try { … } catch (Exception e) { … }
    31. 31. Some Important Differences
    32. 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. 33. OF THE RISE GRAPH Keith Strickland Red Pill Development
    34. 34. What is a graph?
    35. 35. Not This!
    36. 36. Any storage system providing index-free adjacency
    37. 37. Part of NoSQL Revolution
    38. 38. Part of the NoSQL Revolution
    39. 39. Node
    40. 40. Nodes
    41. 41. Relationship (Edge) *ID: 1 Model: T- 850 *ID: 2 *ID: 3 Model: T-X Label: Encountered Date: 07-24-2004
    42. 42. Graph Protects Protects Hunts Hunts Encounters Hunts Encounters
    43. 43. Show Me!
    44. 44. Oscar Nominations
    45. 45. Brand Analysis
    46. 46. Entertainment Connections
    47. 47. London Underground
    48. 48. Who’s Using Graphs?
    49. 49. Explain The Advantages?
    50. 50. Big Data The volume of business data doubles every 1.2 years
    51. 51. Big Data Walmart handles 1 MILLION customer transactions an hour
    52. 52. Big Data 30 BILLION pieces of content shared on facebook every month
    53. 53. Big Data 5 EXABYTES of new data is created every 10 minutes
    54. 54. Big Data Data volumes collected by Skynet in 2025 measured in brontobytes
    55. 55. Query Performance
    56. 56. 2 Levels Deep (~2,500 results) 0.16 0.10 RDMS Graph
    57. 57. 3 Levels Deep (~110,000 results) 30.27 0.17 RDMS Graph
    58. 58. 4 Levels Deep (~600,000 results) 1,544 1 RDMS Graph
    59. 59. 5 Levels Deep (~800,000 results) unfinished 2 RDMS Graph
    60. 60. Relational Doesn’t Scale
    61. 61. So what about Notes?
    62. 62. Domino API
    63. 63. Why Is It Important?
    64. 64. Application Analysis
    65. 65. Understanding Application Design
    66. 66. Who’s creating content?
    67. 67. Actions Taken
    68. 68. Usage Over Time
    69. 69. The era of the GRAPH is rising
    70. 70. Getting some REST with Representational State Transfer REST ReadViewEntries Domino Data Service XPages REST Service
    71. 71. What is REST?
    72. 72. Developed in 2000 by Roy Fielding A group of stateless developers protest against the oppression of the SOAP regime
    73. 73. REST is not a Standard
    74. 74. REST is an architectural Some of the growing population of Notes developers now programming in style with REST STYLE
    75. 75. Simple, Stateless API for the Internet A group of stateless developers protest against the oppression of the SOAP regime
    76. 76. Stateless A client-server model in which the client must provide all context in the request to the server
    77. 77. Get Retrieve data from the server
    78. 78. Post Update data on the server
    79. 79. Put Create data on the server
    80. 80. Delete Remove data from the server
    81. 81. DataTypes
    82. 82. REST Status 2xx == all good 4xx == client encountered a problem 5xx == server encountered a problem
    83. 83. Why use REST?
    84. 84. Data-Driven UI Sencha Touch Native Mobile Apps XPages Mobile
    85. 85. ?ReadViewEntries Now with primitive REST services A division of Lotus Development
    86. 86. http://scanline/Training/CatalogNew.nsf/ Applications?ReadViewEntries http://scanline/Training/CatalogNew.nsf/Applications ?ReadViewEntries&outputformat=json
    87. 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. 88. Server Enablement Database Enablement
    89. 89. View Enablement http://scanline/Training/CatalogNew.nsf/a pi/data/collections/name/Applications
    90. 90. XPages Rest Services Notes 8.5.3
    91. 91. xe:restService
    92. 92. xe:restService
    93. 93. http://scanline/Training/catalogNew.nsf/Services.xsp/applications
    94. 94. Additional Information Because the journey doesn’t end here
    95. 95. BP204 Take a REST and put your data to work with APIs Craig Schumann | Inner Ring Solutions © 2013 IBM Corporation
    96. 96. http://www.openntf.org/Projects/pmt.nsf/36B7CD129ED7357A86257AC6005523E7/%24file/Ext ension%20Library%20REST%20Services.pdf
    97. 97. Getting some REST with Representational State Transfer REST ReadViewEntries Domino Data Service XPages REST Service
    98. 98. Visual Power with D3
    99. 99. What is D3.js?
    100. 100. 4
    101. 101. JavaScript Library
    102. 102. Helper Functions Date/Time Arrays Scales Layouts Min/Max
    103. 103. Parsers JSON TSV CSV XML
    104. 104. Code Examples
    105. 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. 106. D3.selectAll tableBody.selectAll("tr") .data(tableData.viewentry) .enter() .append("tr")
    107. 107. Examples
    108. 108. Downsides
    109. 109. Steep learning curve Javascript SVG
    110. 110. Large datasets
    111. 111. If you’re looping through data… You’re doing it wrong
    112. 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. 113. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes Bootstrap4XPages
    114. 114. What is Bootstrap?
    115. 115. Developed by Twitter
    116. 116. Responsive The most popular front-end framework for developing responsive, mobile first projects on the web.
    117. 117. Grid Based
    118. 118. Open Source
    119. 119. Depends on jQuery
    120. 120. Mobile First
    121. 121. Responsive? What Is Responsive?
    122. 122. What’s In Bootstrap? CSS Components Javascript
    123. 123. CSSCascading Style Sheets Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
    124. 124. Fluid Grids Large(large monitor) Medium (small monitor) Small (tablet) Extra-Small (phone)
    125. 125. Contextual Backgrounds
    126. 126. Buttons
    127. 127. Components Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
    128. 128. Glyphicons
    129. 129. Dropdowns
    130. 130. Navbars
    131. 131. Badges
    132. 132. Javascript Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
    133. 133. transition.js
    134. 134. modal.js
    135. 135. scrollspy.js
    136. 136. carousel.js
    137. 137. Bootstrap Themes Because not every Notes developer is the world’s greatest graphic designer!
    138. 138. free
    139. 139. $12
    140. 140. $17
    141. 141. $25
    142. 142. $75
    143. 143. Font Awesome The iconic font designed for Bootstrap
    144. 144. Select2 jQuery based replacement for select boxes
    145. 145. Select2 Example
    146. 146. Bootstrap4XPages
    147. 147. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes Bootstrap4XPages
    148. 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. 149. Single Page Application <xe:singlePageApp> Property Description id Unique identifier selectedPageName The initial mobile page to be displayed (Required)
    150. 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. 151. Application Page Examples
    152. 152. Application Page Code
    153. 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. 154. Page Heading Examples
    155. 155. Page Heading Code
    156. 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. 157. Data View Example
    158. 158. Data View Code
    159. 159. Form Table <xe:formTable>
    160. 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. 161. Form Table Example
    162. 162. Form Table Code
    163. 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. 164. SSJS The Mini-Evil in Xpages Development
    165. 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. 166. 14 Year Legacy! “All in this file are in conformance with ECMAScript Language Specification Edition 3 24-Mar- 00”
    167. 167. What’s new in SSJS? 1. var foo:NotesDocument
    168. 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. 169. Not really OO
    170. 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. 171. Type declaration? • :NotesDocument and :java.util.Map are just EDITOR instructions • Incorrect usage can create accidental block-level vars
    172. 172. When do you see errors? When you build? When you run? When your users do?
    173. 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. 174. What is it really? Proprietary Closed Frozen Outdated Buggy
    175. 175. Just stick with Lotusscript!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×