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
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/
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
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
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