Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BOOTSTRAP4XPAGES WEBINAR
JUNE 17, 2014
MARK LEUSINK
Agenda
 Bootstrap; the world's most popular UI framework
 Bring Bootstrap to XPages with Bootstrap4XPages
 Installation...
Speaker intro
 Freelance consultant/ developer
 Web, XPages, Java, mobile, Unplugged
 OpenNTF board member and contribu...
Oh… and I’m from Holland
(a.k.a. The Netherlands)
4
What is Bootstrap?
 A set of UI elements available to (mobile) web
applications
 Empowers you, as a front-end developer,...
What is Bootstrap? - popular
 Very popular in the web
developers community
 Number 1 project on GitHub
 68,000+ stars
...
What is Bootstrap? - in the box
 Carefully crafted CSS styles for
 Typography and navigation
 Common controls (buttons,...
What is Bootstrap? - under the hood
8
What is Bootstrap?
 Relies on jQuery
 Support for IE8+
 Many add-ons available
 Custom themes
 New controls
 Code sn...
Why use Bootstrap?
 Users are demanding a sleek and polished UI
 But we're developers, not designers...
 Consistent UI ...
How do we get Bootstrap in XPages?
 Download Bootstrap
 Download jQuery (1.x)
 Add the files to your application (nsf)
...
Introducing Bootstrap4XPages
 (OSGi) Plugin to install once on your server / Designer client
 Bootstrap rendering for al...
Introducing Bootstrap4XPages
 Demo
Introducing Bootstrap4XPages
 Global resources served by a single URL
 Theme files that include these resources and defi...
Introducing Bootstrap4XPages
 Support for multiple versions of Bootstrap
 2.3.1*, 2.3.2, 3.0.0 and 3.1.1
 Focus now on ...
Installation – get the plugin
 Get the Bootstrap4XPages (OSGi) plugin from OpenNTF
 http://bootstrap4xpages.openntf.org
...
Installation – install the plugin
Deploy the plugin:
 On the Domino server (and Notes Client)
 Use an update site databa...
Installation – local web preview
 Additional step needed to use Bootstrap4XPages with Local Web
Preview:
 Copy features/...
Post-installation
 Check if the plugin was installed and loaded:
tell http osgi ss org.openntf
v
v
Demo: installation
20
Two steps to enable Bootstrap
1. Enable the required XPage Libraries
[x] com.ibm.xsp.extlib.library
[x] org.openntf.xsp.bo...
And a third…
 Set the DocType of your app to HTML5
 Not required, but recommended by Bootstrap for best compatibility
 ...
Demo: first use
23
Create your app: layout
 Bootstrap4XPages comes with it’s own
configuration object for the application
layout control
 A...
Create your app: navigation
 Use xe:navigator to generate a
Bootstrap-style menu
 Demo
25
Create your app: view
 Standard (data) view controls add Bootstrap rendering to
your views automatically
 Demo
26
Create your app: dialog
 xe:dialog from the Extension Library
uses a custom renderer in
Bootstrap4XPages
 Changes HTML o...
Create your app: responsive features
Responsive design: the approach that suggests that design and development
should resp...
Best practices
 Avoid hard coding style classes/ styles in your pages
 Might break third party themes
 Use the componen...
Best practices
 Use the build from OpenNTF, not the source code, in
production
 The build has its own resources (CSS, Ja...
Plugins: Select2
 Built-in to Bootstrap4XPages
 Adds 2 new controls to Designer:
 Select2 Picker for Combo-/ListBox
 S...
Custom themes
 Bootstrap can be fully customized
to your own look & feel
 Change colors, fonts, sizes,
margins, etc
32
Custom themes – using LESS/ SASS
 Uses LESS (and SASS)
 ‘CSS preprocessor’
 Think of it as ‘using variables in CSS’
 N...
Custom themes - alternatives
 Get a pre-built theme from the Internet
 http://bootswatch.com
 Create a theme using a Bo...
Coming soon
 New release is currently being tested
 Hopefully released this/ next week
 New features
 Set page width m...
What’s next?
 Bootstrap 3.2 announced
 Scheduled for June 2014
 Support will be added to Bootstrap4XPages
 Ideas
 Sup...
We need your help!
 Feel free to help and contribute
 Fully open source, and accepts external contributors
 There are m...
Wrapping up
 Don't reinvent the wheel but rather consume the project
 It is more efficient than throwing Bootstrap in ev...
References
 Bootstrap4XPages project on OpenNTF
 http://bootstrap4xpages.openntf.org/
 Bootstrap4XPages source code on ...
THANK YOU!
@markleusink
http://linqed.eu
Upcoming SlideShare
Loading in …5
×

Bootstrap4XPages webinar

40,350 views

Published on

Slides for the

Published in: Technology
  • Be the first to comment

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

×