Bootstrap4XPages webinar

34,731 views
38,626 views

Published on

Slides for the

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
34,731
On SlideShare
0
From Embeds
0
Number of Embeds
30,020
Actions
Shares
0
Downloads
57
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bootstrap4XPages webinar

  1. 1. BOOTSTRAP4XPAGES WEBINAR JUNE 17, 2014 MARK LEUSINK
  2. 2. Agenda  Bootstrap; the world's most popular UI framework  Bring Bootstrap to XPages with Bootstrap4XPages  Installation, configuration & getting started  Using Bootstrap4XPages  Custom themes & plugins  And demos!
  3. 3. Speaker intro  Freelance consultant/ developer  Web, XPages, Java, mobile, Unplugged  OpenNTF board member and contributor  IBM Champion  Creator of www.bootstrap4xpages.com  Collaborator on Bootstrap4XPages  Original author: Phil Riand/ IBM
  4. 4. Oh… and I’m from Holland (a.k.a. The Netherlands) 4
  5. 5. What is Bootstrap?  A set of UI elements available to (mobile) web applications  Empowers you, as a front-end developer, to kickstart projects more efficiently and effective  Makes your apps look good
  6. 6. What is Bootstrap? - popular  Very popular in the web developers community  Number 1 project on GitHub  68,000+ stars  25,000+ forks 6 Source: http://trends.builtwith.com/docinfo/Twitter-Bootstrap
  7. 7. What is Bootstrap? - in the box  Carefully crafted CSS styles for  Typography and navigation  Common controls (buttons, input controls, tables)  Layouts and grids  With responsive features  Icons  Using the Glyphicon font  JavaScript components  Tabs, dialogs, tooltips, dropdown buttons/ menus 7
  8. 8. What is Bootstrap? - under the hood 8
  9. 9. What is Bootstrap?  Relies on jQuery  Support for IE8+  Many add-ons available  Custom themes  New controls  Code snippets (tip: http://bootsnipp.com for inspiration)  Free & paid  Version 3 built from the ground up  Released in 2013  Mobile first  Responsive by default (optional in earlier versions)  Available for free at http://getbootstrap.com/
  10. 10. Why use Bootstrap?  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
  11. 11. How do we get Bootstrap in XPages?  Download Bootstrap  Download jQuery (1.x)  Add the files to your application (nsf)  Create an XPage theme referencing all Bootstrap files & jQuery  And deal with the issues   11
  12. 12. Introducing Bootstrap4XPages  (OSGi) Plugin to install once on your server / Designer client  Bootstrap rendering for all 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
  13. 13. Introducing Bootstrap4XPages  Demo
  14. 14. Introducing Bootstrap4XPages  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 14
  15. 15. 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  jQuery 1.8.2  No longer in use, but still bundled:  DBootstrap  Dojo Bootstrap 15
  16. 16. Installation – get the plugin  Get the Bootstrap4XPages (OSGi) plugin from OpenNTF  http://bootstrap4xpages.openntf.org  Source code available on GitHub  Or get the OpenNTF Essentials  A set of ‘essential’ projects to be used for XPage development  Bootstrap4XPages is part of the OpenNTF Essentials  http://essentials.openntf.org/  Delivered as an update site database
  17. 17. Installation – install the plugin Deploy the plugin:  On the Domino server (and Notes Client)  Use an update site database (preferred) or copy the plug-in to the server  Add the update site path to the notes.ini: OSGI_HTTP_DYNAMIC_BUNDLES=updatesite.nsf  In Domino Designer  File > Application > Install > import the update site  Make sure “Enable Eclipse plug-in install” is enabled in the preferences
  18. 18. Installation – local web preview  Additional step needed to use Bootstrap4XPages with Local Web Preview:  Copy features/ plugins folder from: <notesdata>/workspace/applications/eclipse to: <notesdata>/domino/workspace/applications/eclipse  See “Implementing the XPage Extension Library” by Paul Calhoun  http://www.slideshare.net/dominion/implementing-xpages-extension- library (I don’t like the local web preview: get a local dev server instead) 18
  19. 19. Post-installation  Check if the plugin was installed and loaded: tell http osgi ss org.openntf v v
  20. 20. Demo: installation 20
  21. 21. Two steps to enable Bootstrap 1. Enable the required XPage Libraries [x] com.ibm.xsp.extlib.library [x] org.openntf.xsp.bootstrap.library 2. Set the application theme  bootstrapv3.1.1 (or bootstrapv3.1.1_3d)  bootstrapv3.0.0 (or bootstrapv3.0.0_3d)  bootstrapv2.3.2 (or bootstrap2.3.2r) Important: these themes do NOT show up in the dropdown, you’ll have to enter them yourself.
  22. 22. And a third…  Set the DocType of your app to HTML5  Not required, but recommended by Bootstrap for best compatibility  Xsp Properties > Page Generation Properties 22
  23. 23. Demo: first use 23
  24. 24. Create your app: layout  Bootstrap4XPages comes with it’s own configuration object for the application layout control  Adds new configuration options:  navbarInverted  navbarFixed *  pageWidth (full, fixed, fluid) *  Demo * Coming soon 24
  25. 25. Create your app: navigation  Use xe:navigator to generate a Bootstrap-style menu  Demo 25
  26. 26. Create your app: view  Standard (data) view controls add Bootstrap rendering to your views automatically  Demo 26
  27. 27. Create your app: dialog  xe:dialog from the Extension Library uses a custom renderer in Bootstrap4XPages  Changes HTML output, classes, JavaScript  But you can still use the xe:dialog – just as you are used too  Demo 27
  28. 28. Create your app: responsive features 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/  Bootstrap 3 is responsive by default  Supported by Bootstrap4XPages in Banner (top navbar) and left column  Configure using Bootstrap application layout config:  collapseLeftColumn  collapseLeftMenuLabel *  collapseLeftTo *  Demo
  29. 29. Best practices  Avoid hard coding style classes/ styles in your pages  Might 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  Good example are Dialogs, as they are optimized and well tested with the JSF lifecycle
  30. 30. Best practices  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
  31. 31. Plugins: Select2  Built-in to Bootstrap4XPages  Adds 2 new controls to Designer:  Select2 Picker for Combo-/ListBox  Select2 Picker  Value picker with support for  Search  Multi-value select (easier to use than a combobox)  Remote data sources  Templates  Demo
  32. 32. Custom themes  Bootstrap can be fully customized to your own look & feel  Change colors, fonts, sizes, margins, etc 32
  33. 33. Custom themes – using LESS/ SASS  Uses LESS (and SASS)  ‘CSS preprocessor’  Think of it as ‘using variables in CSS’  Not only: link color = red  But also: primary color is red, automatically create gradient to a 30% darker color in the navbar  Using LESS (or SASS) is the proper way to customize  Not a find and replace in the CSS  Bootstrap source comes with the LESS/ SASS source files  And a task-runner config that can automatically compile yourCSS files  See https://github.com/twbs/bootstrap#compiling-css-and-javascript  Demo 33
  34. 34. Custom themes - alternatives  Get a pre-built theme from the Internet  http://bootswatch.com  Create a theme using a Bootstrap theme-roller web site  http://getbootstrap.com/customize/ (no preview)  http://stylebootstrap.info  http://bootswatchr.com  Demo using pre-build theme
  35. 35. Coming soon  New release is currently being tested  Hopefully released this/ next week  New features  Set page width model to use (fixed/ fluid/ full)  Set label and position of collapsed left menu  Added option to make the navbar static  New base themes to be used with custom Bootstrap themes  bootstrapv3_base, bootstrapv2_base  jQuery upgraded to 1.11, Select2 upgraded to 3.4.6  Improved picker layouts  Fixes 35
  36. 36. What’s next?  Bootstrap 3.2 announced  Scheduled for June 2014  Support will be added to Bootstrap4XPages  Ideas  Support for more standard controls  Integration of plugins (FontAwesome, pNotify, jQuery File Upload)  But… 36
  37. 37. We need your help!  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 or demos  Help testing  Videos and slides on how to setup a dev environment:  http://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-9BF94B
  38. 38. Wrapping up  Don't reinvent the wheel but rather consume the project  It is more efficient than throwing Bootstrap in every NSF  It is more manageable than copying the files into domino/data/html  It takes the pain out of getting Bootstrap to work with XPage  If you don’t like how the plugin handles it: you can always override yourself using standard Bootstrap classes <xp:button styleClass=“btn btn-primary btn-xs” />
  39. 39. 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=EUrLfJcCQhY#t=12m00s  Bootstrap4XPages – the site, not the plugin  Source of information on using Bootstrap with XPages  http://bootstrap4xpages.com/
  40. 40. THANK YOU! @markleusink http://linqed.eu

×