Your SlideShare is downloading. ×
Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014


Published on

Slides for my session at Engage 2014 (Breda).

Slides for my session at Engage 2014 (Breda).

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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
  • 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:
  • 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
  • 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   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] [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. ( 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   Get a pre-built theme from the Internet   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   Bootstrap4XPages source code on GitHub   Webinar on Bootstrap4XPages    OpenNTF Essentials   cCQhY#t=12m00s  Bootstrap4XPages – the site  Source of information on using Bootstrap with XPages 
  • 28. Thank you! 28#engageug