The document provides a comprehensive overview of Bootstrap, a responsive design framework ideal for building visually appealing websites and web applications. It discusses the basics of integrating Bootstrap with XPages, including plugins and themes, while addressing common challenges developers may face. Additionally, it highlights the importance of design consistency and offers resources for further exploration and community contributions.

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