Slides for the

1. BOOTSTRAP4XPAGES WEBINAR
JUNE 17, 2014
MARK LEUSINK

2. Agenda
 Bootstrap; the world's most popular UI framework
 Bring Bootstrap to XPages with Bootstrap4XPages
 Installation, configuration & getting started
 Using Bootstrap4XPages
 Custom themes & plugins
 And demos!

3. Speaker intro
 Freelance consultant/ developer
 Web, XPages, Java, mobile, Unplugged
 OpenNTF board member and contributor
 IBM Champion
 Creator of www.bootstrap4xpages.com
 Collaborator on Bootstrap4XPages
 Original author: Phil Riand/ IBM

4. Oh… and I’m from Holland
(a.k.a. The Netherlands)
4

5. What is Bootstrap?
 A set of UI elements available to (mobile) web
applications
 Empowers you, as a front-end developer, to
kickstart projects more efficiently and effective
 Makes your apps look good

6. What is Bootstrap? - popular
 Very popular in the web
developers community
 Number 1 project on GitHub
 68,000+ stars
 25,000+ forks
6
Source: http://trends.builtwith.com/docinfo/Twitter-Bootstrap

7. What is Bootstrap? - in the box
 Carefully crafted CSS styles for
 Typography and navigation
 Common controls (buttons, input controls, tables)
 Layouts and grids
 With responsive features
 Icons
 Using the Glyphicon font
 JavaScript components
 Tabs, dialogs, tooltips, dropdown buttons/ menus
7

8. What is Bootstrap? - under the hood
8

9. What is Bootstrap?
 Relies on jQuery
 Support for IE8+
 Many add-ons available
 Custom themes
 New controls
 Code snippets (tip: http://bootsnipp.com for inspiration)
 Free & paid
 Version 3 built from the ground up
 Released in 2013
 Mobile first
 Responsive by default (optional in earlier versions)
 Available for free at http://getbootstrap.com/

10. Why use Bootstrap?
 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

11. How do we get Bootstrap in XPages?
 Download Bootstrap
 Download jQuery (1.x)
 Add the files to your application (nsf)
 Create an XPage theme referencing all Bootstrap files &
jQuery
 And deal with the issues
 
11

12. Introducing Bootstrap4XPages
 (OSGi) Plugin to install once on your server / Designer client
 Bootstrap rendering for all 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

13. Introducing Bootstrap4XPages
 Demo

14. Introducing Bootstrap4XPages
 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
14

15. 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
 jQuery 1.8.2
 No longer in use, but still bundled:
 DBootstrap
 Dojo Bootstrap
15

16. Installation – get the plugin
 Get the Bootstrap4XPages (OSGi) plugin from OpenNTF
 http://bootstrap4xpages.openntf.org
 Source code available on GitHub
 Or get the OpenNTF Essentials
 A set of ‘essential’ projects to be used for XPage development
 Bootstrap4XPages is part of the OpenNTF Essentials
 http://essentials.openntf.org/
 Delivered as an update site database

17. Installation – install the plugin
Deploy the plugin:
 On the Domino server (and Notes Client)
 Use an update site database (preferred) or copy the plug-in to the server
 Add the update site path to the notes.ini:
OSGI_HTTP_DYNAMIC_BUNDLES=updatesite.nsf
 In Domino Designer
 File > Application > Install > import the update site
 Make sure “Enable Eclipse plug-in install” is enabled in the preferences

18. Installation – local web preview
 Additional step needed to use Bootstrap4XPages with Local Web
Preview:
 Copy features/ plugins folder from:
<notesdata>/workspace/applications/eclipse
to:
<notesdata>/domino/workspace/applications/eclipse
 See “Implementing the XPage Extension Library” by Paul Calhoun
 http://www.slideshare.net/dominion/implementing-xpages-extension-
library
(I don’t like the local web preview: get a local dev server instead)
18

19. Post-installation
 Check if the plugin was installed and loaded:
tell http osgi ss org.openntf
v
v

20. Demo: installation
20

21. Two steps to enable Bootstrap
1. Enable the required XPage Libraries
[x] com.ibm.xsp.extlib.library
[x] org.openntf.xsp.bootstrap.library
2. Set the application theme
 bootstrapv3.1.1 (or bootstrapv3.1.1_3d)
 bootstrapv3.0.0 (or bootstrapv3.0.0_3d)
 bootstrapv2.3.2 (or bootstrap2.3.2r)
Important: these themes do NOT show up in the
dropdown, you’ll have to enter them yourself.

22. And a third…
 Set the DocType of your app to HTML5
 Not required, but recommended by Bootstrap for best compatibility
 Xsp Properties > Page Generation Properties
22

23. Demo: first use
23

24. Create your app: layout
 Bootstrap4XPages comes with it’s own
configuration object for the application
layout control
 Adds new configuration options:
 navbarInverted
 navbarFixed *
 pageWidth (full, fixed, fluid) *
 Demo
* Coming soon
24

25. Create your app: navigation
 Use xe:navigator to generate a
Bootstrap-style menu
 Demo
25

26. Create your app: view
 Standard (data) view controls add Bootstrap rendering to
your views automatically
 Demo
26

27. Create your app: dialog
 xe:dialog from the Extension Library
uses a custom renderer in
Bootstrap4XPages
 Changes HTML output, classes,
JavaScript
 But you can still use the xe:dialog –
just as you are used too
 Demo
27

28. Create your app: responsive features
Responsive design: the approach that suggests that design and development
should respond to the user’s behavior 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 (top navbar) and left column
 Configure using Bootstrap application layout config:
 collapseLeftColumn
 collapseLeftMenuLabel *
 collapseLeftTo *
 Demo

29. Best practices
 Avoid hard coding style classes/ styles in your pages
 Might 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
 Good example are Dialogs, as they are optimized and well tested
with the JSF lifecycle

30. Best practices
 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

31. Plugins: Select2
 Built-in to Bootstrap4XPages
 Adds 2 new controls to Designer:
 Select2 Picker for Combo-/ListBox
 Select2 Picker
 Value picker with support for
 Search
 Multi-value select (easier to use than a combobox)
 Remote data sources
 Templates
 Demo

32. Custom themes
 Bootstrap can be fully customized
to your own look & feel
 Change colors, fonts, sizes,
margins, etc
32

33. Custom themes – using LESS/ SASS
 Uses LESS (and SASS)
 ‘CSS preprocessor’
 Think of it as ‘using variables in CSS’
 Not only: link color = red
 But also: primary color is red, automatically create gradient to a 30% darker color in the
navbar
 Using LESS (or SASS) is the proper way to customize
 Not a find and replace in the CSS
 Bootstrap source comes with the LESS/ SASS source files
 And a task-runner config that can automatically compile yourCSS files
 See https://github.com/twbs/bootstrap#compiling-css-and-javascript
 Demo
33

34. Custom themes - alternatives
 Get a pre-built theme from the Internet
 http://bootswatch.com
 Create a theme using a Bootstrap theme-roller web site
 http://getbootstrap.com/customize/ (no preview)
 http://stylebootstrap.info
 http://bootswatchr.com
 Demo using pre-build theme

35. Coming soon
 New release is currently being tested
 Hopefully released this/ next week
 New features
 Set page width model to use (fixed/ fluid/ full)
 Set label and position of collapsed left menu
 Added option to make the navbar static
 New base themes to be used with custom Bootstrap themes
 bootstrapv3_base, bootstrapv2_base
 jQuery upgraded to 1.11, Select2 upgraded to 3.4.6
 Improved picker layouts
 Fixes
35

36. What’s next?
 Bootstrap 3.2 announced
 Scheduled for June 2014
 Support will be added to Bootstrap4XPages
 Ideas
 Support for more standard controls
 Integration of plugins (FontAwesome, pNotify, jQuery File Upload)
 But…
36

37. We need your help!
 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 or demos
 Help testing
 Videos and slides on how to setup a dev environment:
 http://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-9BF94B

38. Wrapping up
 Don't reinvent the wheel but rather consume the project
 It is more efficient than throwing Bootstrap in every NSF
 It is more manageable than copying the files into domino/data/html
 It takes the pain out of getting Bootstrap to work with XPage
 If you don’t like how the plugin handles it: you can always
override yourself using standard Bootstrap classes
<xp:button styleClass=“btn btn-primary btn-xs” />

39. 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=EUrLfJcCQhY#t=12m00s
 Bootstrap4XPages – the site, not the plugin
 Source of information on using Bootstrap with XPages
 http://bootstrap4xpages.com/

40. THANK YOU!
@markleusink
http://linqed.eu