Bootstrap and XPages (DanNotes 2013)

Everything is designed,
few things are designed well
Unknown author

BOOTSTRAP & XPAGES:
THE BASICS AND BEYOND

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

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

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

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

What do you get?
 Layout

 Grids
 Styles
 Icons
 using the Glyphicon font

 Cross-browser

 Responsive

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

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

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

Bootstrap files
 Only a couple of JavaScript,

CSS & font files
 Needs jQuery for some

functions

Bootstrap in XPages
 Two methods:
 DIY (Do-it-yourself)

 Use the Bootstrap4XPages plugin

DIY
 Download
 Bootstrap
 jQuery

 Add files to

WebContent folder
 Via the package explorer
 Just drag-n-drop them

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

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

 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

 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

 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

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));
}


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>}

 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

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

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)

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

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

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>

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

Plugins – Font awesome
 Bootstrap 3 comes with

200 Glyphicons
 But no rocket

 Font awesome has 369
 Including a rocket

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>

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

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

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/

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

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

Bootstrap and XPages (DanNotes 2013)

More Related Content

What's hot (20)

Similar to Bootstrap and XPages (DanNotes 2013) (20)

More from Mark Leusink (11)

Recently uploaded (20)

Bootstrap and XPages (DanNotes 2013)