Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Responsive Applications Using XPages

3,625 views

Published on

Let Connect come to you! In this webinar, Brian Gleeson and Martin Donnelly from the IBM Development Team present their Connect 2016 session.

Bootstrap was integrated into the XPages Extension Library in 2014 and has continued to rapidly evolve ever since. This responsive design capability empowers you to build the slickest Domino Web applications ever - where the user experience dynamically adapts for the desktop, tablet, or smaller mobile devices. Brian and Martin will show you how to quickly and easily transform your old applications into something that will impress your end users (and your boss)!

Published in: Technology
  • Be the first to comment

Building Responsive Applications Using XPages

  1. 1. BUILDING RESPONSIVE APPLICATIONS USING XPAGES Feb. 16, 2016
  2. 2. Courtney Carter @Teamstudio Howard Greenberg @TLCC Paul Della-Nebbia @PaulDN Martin Donnelly @TweeterDonnelly Brian Gleeson @BGleesonIE
  3. 3. Asking Questions Use the “Questions” pane to ask questions.  
  4. 4. Teamstudio provides products that help organizations with customized business applications implement best practices, work more efficiently, and prepare for the future. AboutTeamstudio
  5. 5. Develop and manage your Notes applications faster, better, and more easily.
  6. 6. Reveal true business usage with Usage Auditor. http://www.teamstudio.com/solutions/notestools/usage-auditor
  7. 7. BUILDING RESPONSIVE APPLICATIONS USING XPAGES
  8. 8. 1 #XPages Your Hosts Today: Howard Greenberg TLCC @TLCCLtd Building Responsive Applications Using XPages Paul Della-Nebbia TLCC @PaulDN
  9. 9. How can TLCC Help YOU! 2 • Private classes at your location or virtual •XPages Development •Support Existing Apps •Administration • Let us help you become an expert XPages developer! • Delivered via Notes • XPages • Development • Admin • User Self- Paced Courses Mentoring Instructor- Led Classes Application Development and Consulting Free Demo Courses!
  10. 10. Upcoming and Recorded Webinars 3 www.tlcc.com/xpages-webinar View Previous Webinars (use url above) • March – Optimus XPages : An Explosion of Techniques and Best Practices with John Jardin • April – Getting Started with the Domino API with Paul Withers and Jesse Gallagher
  11. 11. Asking Questions – Q and A at the end 4 Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions pane! We will answer your questions verbally at the end of the webinar
  12. 12. 5 #XPages Brian Gleeson IBM @BGleesonIE Building Responsive Applications Using XPages Martin Donnelly IBM @TweeterDonnelly
  13. 13. Building Responsive XPages Applications Brian Gleeson, IBM Ireland Martin Donnelly, IBM Ireland
  14. 14. Please Note: • IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion. • Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision. • The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. • The development, release, and timing of any future features or functionality described for our products remains at our sole discretion. • Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.
  15. 15. Agenda • Introductions • Bootstrap 3 • Bootstrap 4 • Demos • Tips & Tricks • Wrap Up
  16. 16. Speakers Brian Gleeson Software Engineer, IBM XPages @BGleesonIE Martin Donnelly Software Architect, IBM XPages @TweeterDonnelly
  17. 17. Introduction Frank Adams XPages Developer Greenwell ------------------------- Blogger Active on StackOverflow ExtLib consumer
  18. 18. Responsive Web Design
  19. 19. Bootstrap 3
  20. 20. Bootstrap 3 Release History Jun 2014 Oct Jan 2015 Mar Jun Aug Nov Feb 2016 3.2 3.3.0 3.3.2 3.3.4 3.3.5 3.3.6 v10 v12 v13 v14v11 v15 Bootstrap Release 9.0.1 ExtLib Release v7 v9v8 3.2 ExtLib 9.0.1 v16 3.3.6 3.3.1
  21. 21. Bootstrap 3 Release History 3.2 3.3.0 [370] 3.3.1 [60] 3.3.2 [150] 3.3.4 [140] 3.3.5 [160] 3.3.6 [100] 3.2 3.3.6 Around 1000 issues & pull requests closed
  22. 22. Bootstrap 3 Upgrade • 100s of CSS/Javascript bugs fixed & enhancements • Carousel performance improved (v3.3.0) • Accessibility enhancements  CSS/JS fixes  Documentation examples • Glyphicons v1.9 update (v3.3.2)  50+ icons added • Normalize.css v3.0.3 update  Provides consistency across browsers
  23. 23. Extlib 9.0.1 v16 + Bootstrap 3.3.6 WARNING!
  24. 24. Bootstrap 3 Upgrade • Only one version of Bootstrap 3  ExtLib v16 = Bootstrap 3.3.6 • Potential breaking changes  Bootstrap3.2.0.theme, Bootstrap3.2.0_flat.theme  Bootstrap3.theme, Bootstrap3_flat.theme  Resources restructured
  25. 25. Bootstrap 3 Upgrade - Themes • Old themes will map to latest Bootstrap3 theme • Update application theme in XSP properties • Update Bootstrap theme extensions <theme extends="Bootstrap3.2.0_flat" … <theme extends="Bootstrap3_flat" …
  26. 26. DEMO – Bootstrap 3 Upgrade
  27. 27. Bootstrap 3 Upgrade – Resource references
  28. 28. Bootstrap 3 – More Info • Documentation: http://getbootstrap.com/getting-started/ • Supported browsers: http://getbootstrap.com/getting-started/#support • Wall of browser bugs: http://getbootstrap.com/browser-bugs/ • Purchasable themes: http://themes.getbootstrap.com/ • Stack Overflow: http://stackoverflow.com/questions/tagged/twitter-bootstrap • Slack Channel: http://bootstrap-slack.herokuapp.com/ • Bootstrap github repo: https://github.com/twbs/bootstrap • Bootstrap Blog: http://blog.getbootstrap.com/
  29. 29. Bootstrap 4
  30. 30. Bootstrap 4 αlpha • Pre-release of Bootstrap V4.0.0  2 αlpha releases so far • Added to ExtlibX - http://tinyurl.com/extlibx  Default Bootstrap 4 αlpha.2 build  New renderers, theme and plugin  CSS fixes for XPages controls • Major version number = major overhaul  Potential breaking changes
  31. 31. Frank is excited! • Frank sees Bootstrap 4 blog posts • Lots of new features • Stay ahead of the curve • Eager to try it out…
  32. 32. DEMO – Bootstrap 4
  33. 33. Bootstrap 4 αlpha 3.2 3.3.0 3.3.2 3.3.4 3.3.5 3.3.6 v10 v12 v13 v14v11 v15 Bootstrap 3 Release 9.0.1 ExtLib Release v7 v9v8 3.2 3.3.1 ExtLib 9.0.1 v16 3.3.6 Jun 2014 Oct Jan 2015 Mar Jun Aug Nov Feb 2016 Bootstrap 4α Release ExtLibX Release v15 4.α.2 4.α.1 4.α.2 v16 4.α.2
  34. 34. Bootstrap 4 Team Quotes “A few alpha releases while things are still in flux.” “2 beta releases after features and functionality are locked down to really test things out.” “2 release candidates (RCs) to really test things out closer to production environments.” “Then, the final release!” “For the foreseeable future, we’ll be maintaining Bootstrap 3 with critical bug fixes and documentation improvements.”
  35. 35. Bootstrap 4 αlpha What’s new? A LOT! 2000+ commits 25,000+ lines changed
  36. 36. Bootstrap 4 αlpha - Navbars • Simplified set of CSS classes • Fluid by default • Easily customize background/text colour .bg-inverse .navbar-dark .bg-faded .navbar-light style=“background:red;” .bg-primary .navbar-dark • Forms & collapse functionality cleaned up
  37. 37. DEMO – Navbars
  38. 38. Bootstrap 4 αlpha – Device Sizes • Additional device size breakpoint Bootstrap 3 Bootstrap 4 • xs: 0 – 543px • sm: 544 – 767px • md: 768 – 991px • lg: 992 – 1199px • xl: 1200+ pixels • xs: 0 – 767px • sm: 768 – 991px • md: 992 – 1199px • lg: 1200+ pixels
  39. 39. Bootstrap 4 αlpha - Cards • New component = Cards  Replaces panels, thumbnails & wells • “A card is a flexible and extensible content container.” • Customisable headers, footers, backgrounds & display options • Use card groups, card decks and card columns to arrange content
  40. 40. DEMO – eXpo App
  41. 41. Bootstrap 4 αlpha – Fonts & Icons • Responsive Fonts  Default font-size:  All other font-size CSS uses REM (Root EM), e.g. font-size: 1.5rem; // = 24px by default  Change font sizes per device, e.g. @media (min-width: 544px) {html { font-size: 14px; }} //sm @media (min-width: 768px) {html { font-size: 12px; }} //md @media (min-width: 992px) {html { font-size: 11px; }} //lg @media (min-width: 1200px) {html { font-size: 10px; }} //xl html { font-size: 16px; }
  42. 42. DEMO – Responsive Fonts
  43. 43. Bootstrap 4 αlpha – Fonts & Icons • Glyphicon Fonts removed! • Problematic for ExtLib  Halflings are not open source  Used extensively in XPages Bootstrap theme • Bootstrap 3 to the rescue
  44. 44. Bootstrap 4 αlpha - Pagers • New pagination CSS classes Bootstrap 3 • Added simple pager <div> <ul class="pagination"> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> </ul> </div> <div> <ul class="pagination"> <li class=“active"> <a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> <div> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </div> Bootstrap 4
  45. 45. • .btn-outline, .btn-secondary added • pull-left, pull-right replaced by pull-*-right & pull-*-left pull-xs-right, pull-sm-left, pull-md-right etc. • hidden utility classes replaced hidden-sm-down, hidden-md-up, hidden-lg-down • margin & padding utility classes added {margin or padding}-{sides}-{size} m-t-0, m-b-1, m-l-2, m-r-3, m-x-4, m-y-auto p-t-auto, p-b-4, p-l-3, p-r-2, p-x-1, p-y-0 Bootstrap 4 αlpha – Other changes
  46. 46. Bootstrap 4 αlpha – Other changes • Table additions  table-inverse  table-head-inverse  table-sm  table-reflow • img-responsive replaced by img-fluid • Custom forms option available  Based on WTF Forms  http://wtfforms.com/ • 30% smaller footprint
  47. 47. ExtLibX
  48. 48. Bootstrap 4 αlpha – ExtlibX • New Bootstrap4 plugin com.ibm.xsp.extlibx.theme.bootstrap4_ 9.0.1.v00_16_20160119-2239.jar • New Bootstrap4.theme
  49. 49. Bootstrap 4 αlpha – Implemented so far • New Bootstrap plugin  Plugin infrastructure + Bootstrap4.theme  Bootstrap 4 αlpha.2 resources  XPages specific CSS & JS resources  Navbar Renderer  2x Application Layout Renderers  Pager Renderer  Dashboard Renderer  Navigator Renderer  Data View Renderer • What’s missing? https://github.com/OpenNTF/XPagesExtLibX/issues
  50. 50. Bootstrap 4 αlpha – ExtlibX • How does Frank get it?  Download release: http://tinyurl.com/extlibx  Or from github: https://github.com/OpenNTF/XPagesExtLibX  Install update site  Or install new ExtLib v16
  51. 51. Bootstrap 4 αlpha – ExtlibX • How can Frank contribute?  Fork repository - https://github.com/OpenNTF/XPagesExtLibX  Clone locally – git clone  Write some code!  Do some testing  Submit pull request
  52. 52. DEMO – Frank’s Contribution
  53. 53. Overview of ExtLibX Integration • Pull requests are merged into main ExtLibX repository Community Repo o ExtLib Repo IBM XPages Product Stream ExtLibX Repo Forks Submissions Bluewash Community Repo Frank’s Repo
  54. 54. Frank’s Tips & Tricks
  55. 55. Frank’s Tips & Tricks • Bootstrap Grid system  Containers > Rows > Columns  Container class: container-fluid or container  12 columns per row col-xs-12, col-sm-6, col-md-4, col-lg-3, col-xl-2  Nested rows supported  Offsets supported: col-md-offset-2, col-lg-offset-4 etc.
  56. 56. DEMO – Grid System
  57. 57. Frank’s Tips & Tricks • Media Queries @media screen and (min-width : 992px) { body{ background-color: blue;}} @media screen and (min-width : 1200px){ body{ background-color: red;}} @media screen and (max-width : 991px) { body{ background-color: green;}} • xs: 0 – 543px • sm: 544 – 767px • md: 768 – 991px • lg: 992 – 1199px • xl: 1200+ pixels • xs: 0 – 767px • sm: 768 – 991px • md: 992 – 1199px • lg: 1200+ pixels Bootstrap 3 Bootstrap 4
  58. 58. DEMO – Media Queries
  59. 59. Frank’s Tips & Tricks • Bootlint  Examines rendered HTML  Flags common Bootstrap usage mistakes  Only supports Bootstrap 3 (for now) • How to use?  Pass URL to http://www.bootlint.com/  Include bootlint in page/app using CDN https://github.com/twbs/bootlint#in-the-browser  Use Node.js to run on command line https://github.com/twbs/bootlint#on-the-command-line
  60. 60. DEMO – Bootlint
  61. 61. Frank’s Tips & Tricks • Browser dev tools  Firefox – Firebug + User Agent Switcher  Chrome – Built-in Tooling  Safari – Built-in Web Inspector & Responsive Design Mode  Online emulators & emulator tools
  62. 62. Frank’s Tips & Tricks • Custom Bootstrap build  http://getbootstrap.com/customize/  Customise content  Customise settings/properties  Click “compile and download” • Git repo custom build  Fork Bootstrap  Change content/settings/variables  Setup build tools  Build using node & grunt
  63. 63. Wrap Up
  64. 64. Summary • Bootstrap 3 Upgrade  3.2 3.3.6  Refactoring work + warning • Bootstrap 4 αlpha  Changes & new features • ExtLibX incubator for Bootstrap 4  Implemented support so far  How to contribute (a.k.a. Be like Frank) • Frank’s Tips
  65. 65. What has Frank learned? • Bootstrap 3.3.6 Upgrade + refactoring work Auto theme loading May need some manual changes • Bootstrap 4 αlpha Lots of new features/changes Use ExtLibX incubator for Bootstrap 4 Make a contribution • Frank’s Tips Grid System & Media Queries Bootlint & Browser Tools Custom Builds
  66. 66. Other Resources • XPages Goes Responsive Videos  Part 1: https://www.youtube.com/watch?v=XdWYmPLmIrk  Part 2: https://www.youtube.com/watch?v=P24PsLXO5_o • Check ExtLib readme docs, v10 – v15  http://extlib.openntf.org • ExtLibX Github Repository:  https://github.com/OpenNTF/XPagesExtLibX • TLCC – XPages Courses & Training  http://www.tlcc.com • IBM Social Business User Community  http://www.ibm.com/socialug
  67. 67. Notices and Disclaimers Copyright © 2015 by International Business Machines Corporation (IBM). No part of this document may be reproduced or transmitted in any form without written permission from IBM. U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM. Information in these presentations (including information relating to products that have not yet been announced by IBM) has been reviewed for accuracy as of the date of initial publication and could include unintentional technical or typographical errors. IBM shall have no responsibility to update this information. THIS DOCUMENT IS DISTRIBUTED "AS IS" WITHOUT ANY WARRANTY, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL IBM BE LIABLE FOR ANY DAMAGE ARISING FROM THE USE OF THIS INFORMATION, INCLUDING BUT NOT LIMITED TO, LOSS OF DATA, BUSINESS INTERRUPTION, LOSS OF PROFIT OR LOSS OF OPPORTUNITY. IBM products and services are warranted according to the terms and conditions of the agreements under which they are provided. Any statements regarding IBM's future direction, intent or product plans are subject to change or withdrawal without notice. Performance data contained herein was generally obtained in a controlled, isolated environments. Customer examples are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual performance, cost, savings or other results in other operating environments may vary. References in this document to IBM products, programs, or services does not imply that IBM intends to make such products, programs or services available in all countries in which IBM operates or does business. Workshops, sessions and associated materials may have been prepared by independent session speakers, and do not necessarily reflect the views of IBM. All materials and discussions are provided for informational purposes only, and are neither intended to, nor shall constitute legal or other guidance or advice to any individual participant or their specific situation. It is the customer’s responsibility to insure its own compliance with legal requirements and to obtain advice of competent legal counsel as to the identification and interpretation of any relevant laws and regulatory requirements that may affect the customer’s business and any actions the customer may need to take to comply with such laws. IBM does not provide legal advice or represent or warrant that its services or products will ensure that the customer is in compliance with any law
  68. 68. Notices and Disclaimers cont. Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products in connection with this publication and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products. IBM does not warrant the quality of any third-party products, or the ability of any such third-party products to interoperate with IBM’s products. IBM EXPRESSLY DISCLAIMS ALL WARRANTIES, EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. The provision of the information contained herein is not intended to, and does not, grant any right or license under any IBM patents, copyrights, trademarks or other intellectual property right. •IBM, the IBM logo, ibm.com, Aspera®, Bluemix, Blueworks Live, CICS, Clearcase, Cognos®, DOORS®, Emptoris®, Enterprise Document Management System™, FASP®, FileNet®, Global Business Services ®, Global Technology Services ®, IBM ExperienceOne™, IBM SmartCloud®, IBM Social Business®, Information on Demand, ILOG, Maximo®, MQIntegrator®, MQSeries®, Netcool®, OMEGAMON, OpenPower, PureAnalytics™, PureApplication®, pureCluster™, PureCoverage®, PureData®, PureExperience®, PureFlex®, pureQuery®, pureScale®, PureSystems®, QRadar®, Rational®, Rhapsody®, Smarter Commerce®, SoDA, SPSS, Sterling Commerce®, StoredIQ, Tealeaf®, Tivoli®, Trusteer®, Unica®, urban{code}®, Watson, WebSphere®, Worklight®, X-Force® and System z® Z/OS, are trademarks of International Business Machines Corporation, registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at: www.ibm.com/legal/copytrade.shtml.
  69. 69. Addendum Slides
  70. 70. Bootstrap 3 – New themes • Purchase themes  http://themes.getbootstrap.com/  Added components  Examples included  Source & build tools included  Customisable variables  Documentation  Free updates  Multiple use license
  71. 71. Bootstrap 4 αlpha - Infrastructure • Normalize 3.0.3 update  Reboot.css adds Bootstrap resets • All Javascript re-written in ECMAScript6 • SASS replaces LESS • 30% smaller footprint
  72. 72. • Internet Explorer 8 support dropped • iOS6 support dropped Chrome Firefox IE MS Edge Opera Safari Mac Supported Supported N/A N/A Supported Supported Windows Supported Supported 9+ Supported Supported Supported Not supported Chrome Firefox Opera Safari Android Browser & WebView Android Supported Supported Not supported N/A Android v5.0+ supported iOS Supported N/A Not supported Supported N/A Mobile devices Generally Bootstrap supports the latest versions of each major platform’s default browsers. Desktop browsers Similarly, the latest versions of most desktop browsers are supported. Bootstrap 4 αlpha – Browser Support
  73. 73. DEMO – XGallery
  74. 74. Your Feedback Is Important! Fill out session surveys at: https://www.connectsurveys.com or through IBM Event Connect.
  75. 75. Questions???? 6 Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions panel! Remember, we will answer your questions verbally
  76. 76. #XPages @BGleesonIE @TweeterDonnelly @TLCCLtd @Teamstudio @PaulDN Upcoming Events:  UCS.UG, Hamburg, Germany – March 10  Inform 2016 in Sydney, Australia – March 10 to 11  Engage, Eindhoven, the Netherlands – Mar. 23 to 24  EntwicklerCamp, Gelsenkirchen, Germany – April 11 to 13  MWLUG, Austin, TX – August 17 to 19 Question and Answer Time! 7 Teamstudio Questions? contactus@teamstudio.com 978-712-0924 TLCC Questions? howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095 Howard Greenberg Courtney CarterMartin Donnelly Paul Della-Nebbia Brian Gleeson

×