O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

MWLUG 2014: Modern Domino (workshop)

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
ATLUG Day of Champions
ATLUG Day of Champions
Carregando em…3
×

Confira estes a seguir

1 de 189 Anúncio

MWLUG 2014: Modern Domino (workshop)

Baixar para ler offline

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.

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.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (10)

Semelhante a MWLUG 2014: Modern Domino (workshop) (20)

Anúncio

Mais de Peter Presnell (20)

Mais recentes (20)

Anúncio

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!

Notas do Editor

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

×