Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014
1. Get the best out of
Bootstrap
with
Bootstrap4XPages
Mark Leusink, LinQed
2. Agenda
Bootstrap; the world's most popular UI framework
Bring Bootstrap to XPages with Bootstrap4XPages
“Bootstrapping” your XPages Application
Insights on the library
And demos!
3. Speaker introduction
Freelance consultant/ developer
Web, XPages, Java, mobile
OpenNTF board member and
contributor
IBM Champion
Creator of www.bootstrap4xpages.com
4. Why a design framework?
Users are demanding a sleek and polished UI
But we're developers, not designers...
Consistent UI makes your applications easier to use
Develop for mobile
Responsive design
Standardized look for all applications
Deal with cross browser issues
Remember: IBM OneUI, as implemented in the
Extension Library, is also a UI framework
5. What is Bootstrap?
A set of UI elements available to web
applications
Very (very) popular in the web developers
community
Empowering front-end developers to kickstart
projects more efficiently and effectively
Version 3 built from the ground up
Mobile first
Released in 2013
Responsive by default (optional in earlier versions)
7. What is Bootstrap?
Carefully crafted CSS styles for
Typography
Navigation
Common controls (buttons, input controls, tables)
Layouts and grids
With responsive features
Icons
Using the Glyphicon font
JavaScript components
Relies on jQuery
Tabs, dialogs, tooltips, drop down buttons/menus
7#engageug
8. What is Bootstrap?
Many add-ons available
Free and paid
Custom themes
New controls
Code snippets
Support for IE8+
Available for free at http://getbootstrap.com/
11. Introducing Bootstrap4XPages
Bootstrap rendering for all existing XPages
components
Core and Extension Library
Including the Dojo controls
Provides the easiest Bootstrap integration
mechanism to XPages
Change the theme and your application is enabled
Get all the resources (CSS, JavaScript, fonts) served
from the core runtime
No resources have to be added within the NSF
Participate in the XPages resource file aggregation
12. Introducing Bootstrap4XPages
Support for multiple versions of Bootstrap
2.3.1, 2.3.2, 3.0.0 and 3.1.1
Focus now on Bootstrap 3.x, but 2.3.2 is kept for
compatibility
Make it easy to create new Bootstrap specific
components
12#engageug
13. Installing Bootstrap4XPages
Get the Bootstrap4XPages (OSGi) plugin from OpenNTF
Compiled version available from the OpenNTF web site
Source code available on GitHub
Part of the OpenNTF Essentials
Deploy the plugin:
On the Domino server (and Notes Client)
Use an update site database (preferred) or copy the OSGi plug-
in to the server
In Domino Designer
File > Application > Install > import the update site
14. Installation using the OpenNTF Essentials
Download OpenNTF essentials
http://essentials.openntf.org/
The install procedure is the same
The OpenNTF Essentials NSF contains
Bootstrap4XPages as one of its components
More on the OpenNTF Essentials in the October
2013 webinar
15. Two steps to enable Bootstrap in you app
1. Enable the necessary XPages libraries
[x] com.ibm.xsp.extlib.library
[x] org.openntf.xsp.bootstrap.library
2. Set the application theme
bootstrapv3.1.1 (bootstrapv3.1.1_3d)
bootstrapv3.0.0 (bootstrapv3.0.0_3d)
bootstrapv2.3.2 (bootstrap2.3.2r)
16. Best practices using Bootstrap4XPages
Avoid hard coding style classes/ styles in your
pages
Might (will) break third party themes
Use the components as they render as much as
possible
Use a custom theme when you want to assign
specific styles to components
Leverage the extension library components
instead of straight Bootstrap/ jQuery
Dialogs, as they are optimized and well tested
with the JSF lifecycle
17. Best practices using Bootstrap4XPages
Use the build from OpenNTF, not the source
code, in production
The build has its own resources
(CSS, JavaScript), thus provides better
performance
You can use the resources from the plugin
without using the theme(s)
But that's not advised
18. What does Bootstrap4XPages give you?
Global resources served by a single URL
Theme files that include these resources and
define the components properties
Directly sets classes/ styles on controls when
sufficient
Custom JSF renderer for more complex cases
Organized in an hierarchy, (relatively) easy to
inherit/ customize
19. Bootstrap4XPages: provided resources
Several versions of Bootstrap
2.3.1, 2.3.2, 3.0.0 and 3.1.1
Older will be deprecated/removed over
time, new ones will be added
jQuery 1.8.2
No longer in use, but still bundled:
DBootstrap
Dojo Bootstrap
20. Demo: build an app with Bootstrap4XPages
20#engageug
Demo
21. Designing a responsive application
Responsive design: the approach that suggests
that design and development should respond to
the user’s behaviour and environment based on
screen size, platform and orientation.
(http://coding.smashingmagazine.com/2011/01/12/guidelines-
for-responsive-web-design/)
Bootstrap 3 is responsive by default
Supported by Bootstrap4XPages in Banner
and Menu
Demo
22. Third party plugins in the library
Select2
Value picker with support for
Search
Multi-value select (easier to use than a
combobox)
Remote data sources
Templates
Demo
23. Using custom themes
Create a theme using the Bootstrap web site
http://getbootstrap.com/customize/
http://stylebootstrap.info
Get a pre-built theme from the Internet
https://wrapbootstrap.com/
http://bootswatch.com
Demo
24. Understanding the library implementation
Feels intimidating at the first glance, but it is not that
hard once the development environment is installed and
the XPages/ JSF concepts known
Remember: you don’t have to start from scratch
More details in the OpenNTF Webinar: Bootstrap for
XPages
Quick walkthrough
Windows, Designer & Domino on a single (virtual) machine
Install Eclipse RCP (just get the latest version)
Install the Eclipse SDK for XPages and Domino Debug Plugin
Get them from OpenNTF
Get the plugin source from GitHub
25. Wrapping up
Don't reinvent the wheel but rather consume the
project
It is more efficient than throwing Bootstrap within an
NSF
It is more manageable than copying the files into
domino/data/html
26. Want to help?
The project is missing some features: feel free to
help and contribute
Fully open source, and accepts external
contributors
There are many ways to help, depending on your
skills
Add new XPages components
Implement new Bootstrap releases
Create, integrate and distribute themes
Write documentation
Help testing
27. References
Bootstrap4XPages project on OpenNTF
http://bootstrap4xpages.openntf.org/
Bootstrap4XPages source code on GitHub
https://github.com/OpenNTF/Bootstrap4XPages
Webinar on Bootstrap4XPages
http://www.youtube.com/watch?v=uAff5uNwhn0
http://www.slideshare.net/philipperiand/bootstrap4-x-pages
OpenNTF Essentials
http://essentials.openntf.org
http://www.youtube.com/watch?feature=player_embedded&v=EUrLfJ
cCQhY#t=12m00s
Bootstrap4XPages – the site
Source of information on using Bootstrap with XPages
http://bootstrap4xpages.com/