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)!
4. Teamstudio provides products that help
organizations with customized business
applications implement best practices, work
more efficiently, and prepare for the future.
AboutTeamstudio
5. Develop and manage your Notes applications
faster, better, and more easily.
6. Reveal true business usage with Usage Auditor.
http://www.teamstudio.com/solutions/notestools/usage-auditor
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. 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. 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
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.
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
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. Frank is excited!
• Frank sees Bootstrap 4 blog posts
• Lots of new features
• Stay ahead of the curve
• Eager to try it out…
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. 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.”
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
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. 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
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
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
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. 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. 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
69. 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.
71. 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
72. 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
73. • 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
75. Your Feedback Is Important!
Fill out session surveys at:
https://www.connectsurveys.com
or through IBM Event Connect.
76. 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
77. #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