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

8,737

Published on

Slides for my session at Engage 2014 (Breda).

Slides for my session at Engage 2014 (Breda).

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,737
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
53
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 www.bootstrap4xpages.com
  • 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: http://trends.builtwith.com/docinfo/Twitter-Bootstrap
  • 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 http://getbootstrap.com/
  • 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  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
  • 15. 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 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. (http://coding.smashingmagazine.com/2011/01/12/guidelines- 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  http://getbootstrap.com/customize/  http://stylebootstrap.info Get a pre-built theme from the Internet  https://wrapbootstrap.com/  http://bootswatch.com 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  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=EUrLfJ cCQhY#t=12m00s  Bootstrap4XPages – the site  Source of information on using Bootstrap with XPages  http://bootstrap4xpages.com/
  • 28. Thank you! 28#engageug

×