1. 1381: 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 IBMs statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBMs 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 discretionPerformance 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 users 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 introductionBootstrap, the world's most popular UI frameworkBootstrap4XPages brings Bootstrap to XPages!Bootstrapping your XPages ApplicationInsights on the libraryConclusion3 4. Speaker introduction 4Philippe 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 framework5 6. Why would you use a design framework? 6Users 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? 7A 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? 8Version 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 10Provides 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 12. Bootstrapping your XPages Application12 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 EssentialsThe Bootstrap4XPages plugin must be deployed: 13On 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 componentDetails 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 essentials14 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.2rThat's it: your application now uses Bootstrap!15 16. Best practices using Bootstrap4XPages 16Avoid 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 17Use 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? 18Global 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 19Several 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 20Select2 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 users behavior and environment based on screen size, platform and orientation. (http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/) 21Bootstrap (3) is responsive by default Supported by Bootstrap4XPages in: Banner Menu Demo 22. Using Bootstrap Custom Themes 22Create 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 23The 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 24Dojo 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 25Feels 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. Conclusion26 27. Bootstrap4XPages is the way to go 27Don'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 28Bootstrap4XPages 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 onsite29 30. 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.30