get the best out of bootstrap with bootstrap4xpages - engage 2014
DESCRIPTION
Slides for my session at Engage 2014 (Breda).TRANSCRIPT
Get the best out ofBootstrap
with Bootstrap4XPages
Mark Leusink, LinQed
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!
Speaker introduction Freelance consultant/ developer Web, XPages, Java, mobile OpenNTF board member and
contributor IBM Champion Creator of www.bootstrap4xpages.com
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
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#engageugSource: http://trends.builtwith.com/docinfo/Twitter-Bootstrap
7#engageug
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
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?
#engageug
Introducing Bootstrap4XPages
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#engageug
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
compatibilityMake it easy to create new Bootstrap specific
components
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
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
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 themebootstrapv3.1.1 (bootstrapv3.1.1_3d)bootstrapv3.0.0 (bootstrapv3.0.0_3d)bootstrapv2.3.2 (bootstrap2.3.2r)
Best practices using Bootstrap4XPagesAvoid 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
Best practices using Bootstrap4XPagesUse 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
What does Bootstrap4XPages give you?Global resources served by a single URLTheme files that include these resources and
define the components properties Directly sets classes/ styles on controls when
sufficientCustom JSF renderer for more complex cases
Organized in an hierarchy, (relatively) easy to inherit/ customize
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.2No longer in use, but still bundled:
DBootstrap Dojo Bootstrap
20
Demo: build an app with Bootstrap4XPages
#engageug
Demo
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 MenuDemo
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
Using custom themesCreate 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
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
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
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
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=EUrLfJc
CQhY#t=12m00s
Bootstrap4XPages – the site Source of information on using Bootstrap with XPages http://bootstrap4xpages.com/
28
Thank you!
#engageug