Get the best out of Bootstrap with Bootstrap4XPages (AD202)
Download as ODP, PDF1 like4,678 views
Slides for our IBM Connect 2014 session on using Bootstrap with XPages using the Bootstrap4XPages plugin.
![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](https://image.slidesharecdn.com/ad2021381-getthebestoutofbootstrapwithbootstrap4xpages-140130121314-phpapp01/85/Get-the-best-out-of-Bootstrap-with-Bootstrap4XPages-AD202-15-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Get the best out of Bootstrap with Bootstrap4XPages (AD202) (20)
Ad
More from Mark Leusink (9)
Ad
Recently uploaded (20)
Get the best out of Bootstrap with Bootstrap4XPages (AD202)
- 1. AD202: 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, tablets, ...) – 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
- 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 components 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 – Not in Bootstrap4XPages today – Multiple file select/ upload – Drag-n-drop – Progress bar
- 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. Q & A redesigned – Answers first Answer A How about today? In fact, let's do that right now. Answer B Put it in the repository as a feature request. Someone might pick it up. Or even better: put it in yourself! Answer C Yes (or no) 30
- 31. 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. 31
Editor's Notes
- #12: Show how the extlib db design changes by changing the theme Show how the XPages sample db change by chaning the theme