IBM Connect 2014 session on bootstrap4xpages, from Mark Leusink and Philippe Riand

1. 1381: Get the best out of
Bootstrap with
Bootstrap4XPages
Mark Leusink, Freelance consultant/ developer, LinQed
Philippe Riand, Application development Architect, IBM
© 2014 IBM Corporation

2. 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.
2

3. Agenda

Speaker introduction

Bootstrap, the world's most popular UI framework

Bootstrap4XPages brings Bootstrap to XPages!

“Bootstrapping” your XPages Application

Insights on the library

Conclusion
3

4. Speaker introduction


4
Philippe Riand
–
Application development architect @ IBM
–
Architect and lead developer for IBM Domino XPages
–
Author of many OpenNTF projects
●
XPages Extension Library, XPages Toolbox, XPages Bazaar, Domino SQL...
Mark Leusink
–
Freelance consultant/ developer @ LinQed
–
XPages, Java, mobile
–
OpenNTF board member & contributor
–
IBM Champion for ICS
–
Author of www.bootstrap4xpages.com

5. Bootstrap,
the world's most popular
UI framework
5

6. Why would you use a design framework?






6
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
Deal with cross browser issues
Customization using themes
Remember:
–
IBM OneUI, as implemented in the Extension Library, is also a UI framework
–
Just as Bootstrap

7. What is Bootstrap?



7
A set of UI elements available to web applications
–
Carefully crafted CSS styles for
●
Typography
●
Navigation
●
Common controls (buttons, input controls, tables, ...)
–
Layouts, Grids
●
With responsive features, providing the best viewing experience across devices of
various sizes
–
Icons
●
Using the Glyphicons font
–
JavaScript components (jQuery plug-ins for user interaction)
●
Tabs, dialog boxes, tooltips, drop down buttons/menus, ...
Very (very) popular in the web developers community
Empowering front-end developers to kickstart projects more efficiently and effectively

8. What is Bootstrap?




8
Version 3 (released mid 2013) built from the ground up
–
Mobile first
–
Responsive by default (optional in earlier versions)
Features many add-ons
–
Free or paid
–
Providing highly customized UI
–
New controls, themes, snippets
Support for IE8+
Available for free at http://getbootstrap.com/

9. Bootstrap4XPages
brings Bootstrap to XPages!
9

10. Introducing Bootstrap4XPages




10
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 for maximum performance
Bootstrap rendering for all existing XPages components
–
Core and Extension Library
–
Including the Dojo controls
Support for multiple versions of Bootstrap
–
The library is evolving fast, let's keep current, while not breaking the existing apps
–
Focus in now on Bootstrap 3.x, but 2.3.2 is kept for compatibility
Make it easy to create new Bootstrap specific components

11. Demo!
11

12. “Bootstrapping”
your XPages Application
12

13. Installing Bootstrap4XPages

Get the Bootstrap4XPages (OSGi) plugin from OpenNTF
–
Source code available on GitHub
–
Compiled pieces available from the OpenNTF web site
–
Also part of the OpenNTF Essentials
The Bootstrap4XPages plugin must be deployed:


13
On the Domino server (or Notes Client), for runtime behaviors
–
Use an update site database (preferred) or copy the OSGi plug-in to the server
In Domino Designer to support the design time experience
–
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 essential NSF contains Bootstrap4XPages as one of its provided
component

Details in the following video:
http://www.youtube.com/watch?feature=player_embedded&v=EUrLfJcCQhY#t=12m00s

>> Go to session BP207 for more information on OpenNTF essentials
14

15. Two easy steps to enable Bootstrap in your application
1. Enable the necessary XPages libraries
[x] com.ibm.xsp.extlib.library
[x] org.openntf.xsp.bootstrap.library
2. Set the application theme – choose your version
–
bootstrapv3.0.0 (or bootstrapv3.0.0_3d)
–
bootstrapv2.3.2 or bootstrap2.3.2r
That's it: your application now uses Bootstrap!
15

16. Best practices using Bootstrap4XPages


16
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

●
17
Use the build from OpenNTF, not the source code, in production
–
The build has its own resources (CSS, JS), thus provides better performance
–
You can use the resources from the plugin (CSS, JavaScript) without using the
theme(s)
●
But that's not advised
Or build the plug-in yourself
–
A simple update site export from Eclipse won't do the full build

18. What does Bootstrap4XPages give you?


●
18
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
If that is not sufficient: custom JSF renderer for more complex cases
–
Organized in an hierarchy, (relatively) easy to inherit/ customize

19. Bootstrap4XPages Provided Resources



19
Several versions of Bootstrap
–
2.3.1, 2.3.2 and 3.0.0
–
Older will be deprecated/removed over time, new ones will be added
jQuery 1.8.2
No longer in use, but still bundled:
–
DBootstrap
●
Provides a Dojo theme rendering the dijits with a Bootstrap look & feel
●
Has limitations, and not compliant with third party themes
–
Dojo Bootstrap
●
Provides a Dojo implementation of the JavaScript library, instead of jQuery

20. Bootstrap4XPages: Integration of 3rd party plugins



20
Select2
–
Value picker with support for
●
Search
●
Multi-value select (easier to use than
●
Remote data sources
Advanced File Upload
–
Multiple file select/ upload
–
Drag-n-drop
–
Progress bar
–
Local image preview
–
Image resize
Demo!

21. Designing a Responsive Application

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/)



21
Bootstrap (3) is responsive by default
Supported by Bootstrap4XPages in:
–
Banner
–
Menu
Demo

22. Using Bootstrap Custom Themes



22
Create a theme using the Bootstrap web site
–
http://getbootstrap.com/customize/
Get a pre-built theme from the Internet
–
https://wrapbootstrap.com/
–
http://bootswatch.com
Demo

23. Dojo And Bootstrap



23
The Dojo dijits are rendered using a Dojo theme (tundra, claro, ...) that require specific
styles to be defined
Initially Bootstrap4XPages used dbootstrap, but this was a bad idea as it overrides many
Bootstrap styles
–
Breaks when using third party themes, does not support Bootstrap 3.0...
Three strategies are applied
–
The previous controls that were using Dojo controls for their behaviors are now using
the Bootstrap counterpart (ex: menus, accordion...)
–
The most complex ones that are not yet rewritten using Bootstrap provides a Dojo
custom template (ex: dialog)
–
The remaining are still relying on the Dojo themes (ex: Dojo layout)

24. Potential Issues


24
Dojo Theme and Bootstrap
–
DBootstrap should be banished, this is being worked on
JSF generated client ids contain a : (colon) which is not CSS query friendly
–
This cannot be changed without a massive breakage of existing apps
–
The library sometimes generates temporary ids without the colon
●
Accordion renderer

25. Understanding the Library Implementation



25
Feels intimidating at the first glance, but it is not that hard once the development
environment is installed and the XPages/ JSF concepts known
More details in the OpenNTF Webinar: Bootstrap for XPages
●
http://www.youtube.com/watch?v=uAff5uNwhn0
●
http://www.slideshare.net/philipperiand/bootstrap4-x-pages
Quick work through:
–
Prerequisite: Windows, Designer & Domino on a single (virtual) machine
–
Install Eclipse RCP (just get the latest version)
–
Install the Eclipse SDK for Eclipse SDK and Domino Debug Plugin
●
Get them from OpenNTF
–
Get the plugin source from GitHub
–
Demo

26. Conclusion
26

27. Bootstrap4XPages is the way to go


27
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
The project is missing some features: feel free to help and contribute
–
It is fully open source, and accepts external contributors
–
There are many ways to help, depending on your skills
●
Add new XPages components
●
Migrate to the latest version of Bootstrap and contribute it back
●
Create, integrate and distribute themes
●
Write documentation
●
Help testing

28. References





28
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
OpenNTF Essentials
–
http://essentials.openntf.org
Bootstrap4XPages – the site
–
Source of information on using Bootstrap with XPages
–
http://bootstrap4xpages.com/

29.  Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
29

30. Acknowledgements and Disclaimers
Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither
intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information
contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise
related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or
its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and
performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you
will result in any specific sales, revenue growth or other results.
© Copyright IBM Corporation 2014. All rights reserved.
 U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 IBM, the IBM logo, ibm.com, and are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and
other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law
trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM
trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml
Other company, product, or service names may be trademarks or service marks of others.
30