Slides for my session at Engage 2014 (Breda).

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)

6. 6#engageug
Source: http://trends.builtwith.com/docinfo/Twitter-Bootstrap

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/

9. What is Bootstrap?
9#engageug

10. Introducing Bootstrap4XPages

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/

28. Thank you!
28#engageug