Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014


Published on

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

No notes for slide

Get the best out of Bootstrap with Bootstrap4XPages - Engage 2014

  1. 1. Get the best out of Bootstrap with Bootstrap4XPages Mark Leusink, LinQed
  2. 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. 3. Speaker introduction  Freelance consultant/ developer  Web, XPages, Java, mobile  OpenNTF board member and contributor  IBM Champion  Creator of
  4. 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. 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. 6#engageug Source:
  7. 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. 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. 9. What is Bootstrap? 9#engageug
  10. 10. Introducing Bootstrap4XPages
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Demo: build an app with Bootstrap4XPages 20#engageug Demo
  21. 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. 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. 23. Using custom themes Create a theme using the Bootstrap web site   Get a pre-built theme from the Internet   Demo
  24. 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. 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. 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. 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. 28. Thank you! 28#engageug