AD1548 Building Responsive XPages Applications 09:15 AM - 10:15 AM, 3 February, 2016

AD1548
Building Responsive XPages Applications
09:15 AM - 10:15 AM, 3rd February, 2016
Orange F
Brian Gleeson, IBM Ireland
Padraic Edwards, IBM Ireland
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.
Agenda
• Introductions
• Bootstrap 3
• Bootstrap 4
• Demos
• Tips & Tricks
• Conclusion
Speakers
Brian Gleeson
Software Engineer, IBM XPages
@BGleesonIE
Padraic Edwards
Senior Software Engineer, IBM XPages
@paidi_ed
Responsive Web Design
.x s p
Bootstrap 3
Bootstrap 3 Release History
Bootstrap Release
3.2
3.3.0 3.3.1
Jun 2014
v7
v8
Oct
v9
v10
3.2
3.3.2
Jan 2015
v11
9.0.1 ExtLib Release
3.3.4
Mar
v12
3.3.5
Jun
v13
3.3.6
Aug
v14
Nov
Q1 2016
v15
New 9.0.1
ExtLib!
3.3.6
Bootstrap 3 Release History
3.2
3.3.6
Around 1000 issues & pull requests closed
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
New Extlib + Bootstrap 3.3.6
WARNING!
Bootstrap 3 Upgrade
Bootstrap 3 Upgrade - Themes
Bootstrap 3 Upgrade – Resource references
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/
Bootstrap 4
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
DEMO – Bootstrap 4
Bootstrap 4 αlpha
Bootstrap 3 Release
9.0.1 ExtLib Release
Bootstrap 4α Release
ExtLibX Release
3.2
3.3.0 3.3.1
Jun 2014
v7
v8
Oct
v9
v10
3.2
3.3.2
Jan 2015
v11
3.3.4
Mar
v12
3.3.5 4.α.1
Jun
v13
Aug
v14
3.3.6
4.α.2
Nov
Q1 2016
v15
v15
4.α.2
New 9.0.1
ExtLib!
3.3.6
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.”
Bootstrap 4 αlpha
What’s new?
A LOT!
2000+ commits
25,000+ lines changed
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
DEMO – Navbars
Bootstrap 4 αlpha – Media Queries
• Additional media query breakpoint
Bootstrap 3
•
•
•
•
xs:
sm:
md:
lg:
0
–
768 –
992 –
1200+
767px
991px
1199px
pixels
Bootstrap 4
•
•
•
•
•
xs:
sm:
md:
lg:
xl:
0
–
544 –
768 –
992 –
1200+
543px
767px
991px
1199px
pixels
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
DEMO – eXpo App
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, 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
DEMO – Responsive Fonts
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
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>
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
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/
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
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
ExtLibX
Bootstrap 4 αlpha – ExtlibX
• New Bootstrap4 plugin
com.ibm.xsp.extlibx.theme.bootstrap4_9.0.1.v00_15_20151211-1400.jar
• New Bootstrap4.theme
Bootstrap 4 αlpha – ExtlibX
• How to get it?
 Download from http://tinyurl.com/extlibx
 Install update site
 Or install with new ExtLib release
• How to contribute
 Fork repository - https://github.com/OpenNTF/XPagesExtLibX
 Write code
 Testing
 Submit pull request
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
Tips,Tricks & Best Practices
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.
DEMO – Grid System
Tips, Tricks & Best Practices
• Media Queries
Bootstrap 3
•
•
•
•
xs:
sm:
md:
lg:
0
–
768 –
992 –
1200+
767px
991px
1199px
pixels
@media (min-width : 768px) { }
@media (min-width : 992px) { }
@media (min-width : 1200px){ }
Bootstrap 4
•
•
•
•
•
xs:
sm:
md:
lg:
xl:
0
–
544 –
768 –
992 –
1200+
543px
767px
991px
1199px
pixels
@media (max-width : 767px) { }
@media (max-width : 991px) { }
@media (max-width : 1199px){ }
DEMO – Media Queries
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
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 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
DEMO – Bootlint
Tips, Tricks & Best Practices
• 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
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
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
Your Feedback Is Important!
Fill out session surveys at:
https://www.connectsurveys.com
or through IBM Event Connect.
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
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.
Addendum Slides
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
DEMO – XGallery