Slides of my session at DanNotes on the use of Bootstrap with XPages, including using the Bootstrap4XPages plugin. View the demos at http://bootstrap4xpages.com

1. Everything is designed,
few things are designed well
Unknown author
BOOTSTRAP & XPAGES:
THE BASICS AND BEYOND

2. Today’s topics
 What’s Bootstrap
 And more in general: “What is a design framework
and why would you use one?”
 Getting started with Bootstrap in XPages
 Challenges (yes, there are some)
 Bootstrap4XPages plugin
 Themes
 Plugins

3. Who’s that?
 Freelance consultant/ developer
 IBM Notes/ Domino
 XPages, web, Java, client, mobile
 OpenNTF Board member & contributor
 Auto Logins
 XPage Multiple File Uploader
 XPage Debug Toolbar
 IBM Champion
 Bootstrap4XPages.com

4. Why a design framework
 Because you want your apps to look good
 And so do your users!
 Consistent UI = easier to use
 So you don’t need to write documentation
 We’re developers
 We’re creative too, but in a different way
 Deal with cross browser issues

5. What is Bootstrap
So it looks good on all
kinds of devices
Bootstrap is a responsive
design framework to build
websites and/or web applications
So you can make your
work look good – even
as a developer…
FREE

6. What do you get?
 Layout
 Grids
 Styles
 Icons
 using the Glyphicon font
 Cross-browser
 Responsive

7. What do you get?
 Easy to use and extend
 And it looks good too (I think)
 Developed by Twitter
 Open source since 2011
 Active community (very)
 One of most popular projects on GitHub
 Sites with themes, plugins, snippets

8. Bootstrap 3
 Released mid 2013
 Re-built from the ground up
 Mobile first
 Responsive by default (optional in 2.3)
 Changed grid
 Icons are now fonts
 So they scale
 Support for IE 8+
 Older browsers dropped

9. And the downside?
 It’s Bootstrap
 Once you’ve seen one, you’ve seen them all
 So:
 Be creative
 Use a theme
 Or write your own

10. Bootstrap files
 Only a couple of JavaScript,
CSS & font files
 Needs jQuery for some
functions

11. Bootstrap in XPages
 Two methods:
 DIY (Do-it-yourself)
 Use the Bootstrap4XPages plugin

12. DIY
 Download
 Bootstrap
 jQuery
 Add files to
WebContent folder
 Via the package explorer
 Just drag-n-drop them

13. DIY
 Create a theme
 jQuery Javascript
 Bootstrap Javascript
 Bootstrap CSS
 Meta “viewport” tag
 Create a layout custom control with your page
layout
 Add an editable control for your content

14. Demo

15. Bootstrap4XPages plugin
 OpenNTF project
 Part of OpenNTF Essentials
 http://bootstrap4xpages.openntf.org/
 OSGi plugin that automatically loads the
Bootstrap resources (CSS, JavaScript)
 Uses Custom renderers
 e.g. adds the btn class to all buttons

16. Bootstrap4XPages plugin
 Support for Bootstrap 2.3.1, 2.3.2 and 3
 Bootstrap 3 support was just released last week
 Requires ExtLib
 Supported on Domino 9

17. Bootstrap4XPages plugin
 Add to Designer and Server
 Enable plugin in your application
 Set your application’s theme to either
 bootstrapv2.3.1
 bootstrapv2.3.1r
 bootstrapv2.3.1
 bootstrapv2.3.2r
 bootstrapv3.0.0

18. Demo

19. Bootstrap4XPages plugin
 Community effort
 You can contribute too!
 Actually… Phil Riand is asking for your help 
 Set up a plugin development environment
 (watch the webinar:
http://www.youtube.com/watch?v=uAff5uNwhn0)
 Fork from GitHub
 Make your changes and create a pull request

20. Pitfalls with XPages
 Targeting elements using jQuery $();
 Colons need to be escaped
 User Mark Roden’s xSnippet for that
http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jqueryselector-for-xpages
function x$(idTag, param){
idTag = idTag.replace(/:/gi, ":")+(param ? param : "");
return ($("#"+idTag));
}

21. Pitfalls with XPages
Resource aggregation & relative paths
 Conditionally load a stylesheet
<resource rendered=“#{javascript:
context.getProperty('xsp.resources.aggregate').equals('true')}">
<content-type>text/css</content-type>
<href>override.css</href>
</resource>}

22. Pitfalls with XPages
 Use HTML5 DocType
 Set in XSP Properties
 If you want to avoid CSS conflicts, remove the
“extends=“ from your theme
 But you need to style everything

23. Reusable fields & validation
 Bootstrap requires a lot of HTML for a single
form field
 Add that to a custom control
 For every field on your form: add that custom
control
 Add error class for validation errors

24. Demo

25. Themes (not the XPage ones)
 Don’t like the default look? Get a theme
 http://wrapbootstrap.com
 http://bootswatch.com
 Or create one
 http://stylebootstrap.info/
(or go hardcore and use LESS)

26. Plugins
 Lot of plugins available
 Mostly build on top of jQuery
 With a bit of Bootstrap styling
 Some I really like:
 Select2
 Font awesome
 jQuery File Uploader

27. Plugins – Select2
 Turns a boring combobox
 Into an advanced search control
 With support for:
 Typeahead-selection
 Static/ dynamic links (using Ajax)
 Markup
 Events

28. Demo

29. Select2 - basics
 Download release
 Load select2.min.js and select2.css
 Transform a xp:comboBox using:
<xp:scriptBlock id="scriptBlock2"><xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox5}" ).select2();
} );
]]></xp:this.value></xp:scriptBlock>

30. Select2 – remote data
 Pass query to XAgent style XPage
 XPage performs query, returns JSON formatted
results
 Select2 plugin deals with creating a list based on
your query

31. Plugins – Font awesome
 Bootstrap 3 comes with
200 Glyphicons
 But no rocket
 Font awesome has 369
 Including a rocket

32. Plugins – Font awesome
 Only need to load a single CSS file
 But make a small change first:
url('../font/fontawesome-webfont.eot?v=3.2.1');
url('../font/fontawesome-webfont.eot?open&v=3.2.1');
<xp:button styleClass=“btn” value=“Home”>
<i class=“icon-home” />
</xp:button>

33. Demo

34. Plugins – jQuery File Upload
 HTML5 multi-file uploader
 Support for:
 Progress bars
 Drag-n-drop
 Client side images resizing
 Browsers:
 Internet Explorer 10+
 Chrome, Firefox
 Mobile browsers

35. Demo

36. Plugins – jQuery File Upload
 Added library to database
 Create XAgent XPage that can receive files
 upload.xsp
 eu.linqed.UploadHandler()
 jQuery with Dojo 1.8 can be is hard
 Load jQuery & plugins before anything else
 See http://hasselba.ch/blog/?p=1216

37. Not enough? There’s more…
 Fuel UX - http://exacttarget.github.io/fuelux/
 Tablecloth - http://tableclothjs.com/
 Jetstrap – http://jetstrap.com
 Paintstrap – http://www.paintstrap.com
 Need inspiration? http://builtwithbootstrap.com/

38. To summarize
 Stable framework
 Easy to get started with
 Solid backing from a large community
 Lots of resources
 “I’m not a designer” is not an excuse to create a
good looking site

39. What’s next?
 You’re up.
 http://bootstrap4xpages.openntf.org
 http://Bootstrap4XPages.com
 Going to Connect? Come to my and Phil Riand’s Bootstrap
session!
 Got questions?
 Twitter: @markleusink
 Email: m.leusink@linqed.eu
 Blog: http://linqed.eu