MWLUG 2014: Modern Domino (workshop)

1,353 views
1,266 views

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
1,353
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
36
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!

    ×