AD1548 Building Responsive XPages Applications

Transcription

1 AD1548 Building Responsive XPages Applications 09:15 AM - 10:15 AM, 3 rd February, 2016 Orange F Brian Gleeson, IBM Ireland Padraic Edwards, IBM Ireland

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

3 Agenda Introductions Bootstrap 3 Bootstrap 4 Demos Tips & Tricks Conclusion

4 Speakers Brian Gleeson Software Engineer, IBM Padraic Edwards Senior Software Engineer, IBM

5 Responsive Web Design

6 Bootstrap 3

7 Bootstrap 3 Release History Bootstrap Release ExtLib Release Jun 2014 Oct Jan 2015 Mar Jun Aug Nov Q v7 v8 v9 v10 v11 v12 v13 v v15 New ExtLib! 3.3.6

8 Bootstrap 3 Release History [370] [60] [150] [140] [160] [100] Around 1000 issues & pull requests closed

9 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

10 New Extlib + Bootstrap WARNING!

11 Bootstrap 3 Upgrade Only one version of Bootstrap 3 New ExtLib = Bootstrap Breaking Change! Bootstrap3.2.theme, Bootstrap3.2_flat.theme Bootstrap3.theme, Bootstrap3_flat.theme Resources restructured

12 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_flat" <theme extends="bootstrap3_flat"

13 Bootstrap 3 Upgrade Resource references

14 Bootstrap 3 More Info Documentation: Supported browsers: Wall of browser bugs: Purchasable themes: Stack Overflow: Slack Channel: Bootstrap github repo: Bootstrap Blog:

15 Bootstrap 4

16 Bootstrap 4 αlpha Pre-release of Bootstrap V αlpha releases so far Added to 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

17 DEMO Bootstrap 4

18 Bootstrap 4 αlpha Bootstrap 3 Release Bootstrap 4α Release ExtLib Release ExtLibX Release α α.2 Jun 2014 Oct Jan 2015 Mar Jun Aug Nov Q v7 v8 v9 v10 v11 v12 v13 v v15 v15 New ExtLib! 4.α

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

20 Bootstrap 4 αlpha What s new? A LOT! commits 25,000+ lines changed

21 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

22 DEMO Navbars

23 Bootstrap 4 αlpha Media Queries Additional media query breakpoint Bootstrap 3 Bootstrap 4 xs: 0 767px sm: px md: px lg: pixels xs: 0 543px sm: px md: px lg: px xl: pixels

24 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

25 DEMO expo App

26 Bootstrap 4 αlpha Fonts & Icons Responsive Fonts Default font-size: html { font-size: 16px; } All other font-size CSS uses REM (Root EM), e.g. font-size: 1.5rem; // = 24px by default Change font sizes per device, (min-width: 544px) {html { font-size: 14px; }} (min-width: 768px) {html { font-size: 12px; }} (min-width: 992px) {html { font-size: 11px; }} (min-width: 1200px) {html { font-size: 10px; }} //xl

27 DEMO Responsive Fonts

28 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

29 Bootstrap 4 αlpha - Pagers New pagination CSS classes Bootstrap 3 <div> <ul class="pagination"> <li class= active"> <a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> Added simple pager <div> <ul class="pager"> <li><a href="#">previous</a></li> <li><a href="#">next</a></li> </ul> </div> Bootstrap 4 <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>

30 Bootstrap 4 αlpha Other changes.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

31 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

32 Bootstrap 4 αlpha - Infrastructure Normalize update Reboot.css adds Bootstrap resets All Javascript re-written in ECMAScript6 SASS replaces LESS 30% smaller footprint

33 Bootstrap 4 αlpha Browser Support Internet Explorer 8 support dropped ios6 support dropped Mobile devices Generally Bootstrap supports the latest versions of each major platform s default browsers. 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 Desktop browsers Similarly, the latest versions of most desktop browsers are supported. 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

34 ExtLibX

35 Bootstrap 4 αlpha ExtlibX New Bootstrap4 plugin com.ibm.xsp.extlibx.theme.bootstrap4_9.0.1.v00_15_ jar New Bootstrap4.theme

36 Bootstrap 4 αlpha ExtlibX How to get it? Download from Install update site Or install with new ExtLib release How to contribute Fork repository - Write code Testing Submit pull request

37 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?

38 Tips,Tricks & Best Practices

39 Tips, Tricks & Best Practices 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.

40 DEMO Grid System

41 Tips, Tricks & Best Practices Media Queries Bootstrap 3 Bootstrap 4 xs: 0 767px sm: px md: px lg: pixels xs: 0 543px sm: px md: px lg: px xl: (min-width : 768px) { (min-width : 992px) { (min-width : 1200px){ (max-width : 767px) { (max-width : 991px) { (max-width : 1199px){ }

42 DEMO Media Queries

43 Tips, Tricks & Best Practices Browser dev tools Firefox Firebug + User Agent Switcher Chrome Built-in Tooling Safari Built-in Web Inspector & Responsive Design Mode Online emulators & emulator tools

44 Tips, Tricks & Best Practices Bootlint Examines rendered HTML Flags common Bootstrap usage mistakes Only supports Bootstrap 3 (for now) How to use? Pass URL to Include bootlint in page/app using CDN Use Node.js to run on command line

45 DEMO Bootlint

46 Tips, Tricks & Best Practices Custom Bootstrap build 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

47 Summary Bootstrap 3 Upgrade Restructuring/refactoring work Bootstrap 4 αlpha Changes & new features ExtLibX incubator for BS4 support in XPages Github repository Implemented support so far How to contribute Tips & Tricks

48 Other Resources XPages Goes Responsive Videos Part 1: Part 2: Check ExtLib readme docs, v10 v15 ExtLibX Github Repository:

49 Your Feedback Is Important! Fill out session surveys at: or through IBM Event Connect.

50 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

51 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:

52

53 Addendum Slides

54 Bootstrap 3 New themes Purchase themes Added components Examples included Source & build tools included Customisable variables Documentation Free updates Multiple use license

55 DEMO XGallery