Everything is designed,

few things are designed well

Unknown author

BOOTSTRAP & XPAGES:

THE BASICS AND BEYOND

Todays topics
Whats 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

Whos 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 dont need to write documentation

Were developers
Were 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?

Its Bootstrap

Once youve seen one, youve 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

Demo

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

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

Bootstrap4XPages plugin
Add to Designer and Server

Enable plugin in your application

Set your applications theme to either
bootstrapv2.3.1
bootstrapv2.3.1r
bootstrapv2.3.1
bootstrapv2.3.2r
bootstrapv3.0.0

Demo

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

Pitfalls with XPages

Targeting elements using jQuery $();
Colons need to be escaped
User Mark Rodens 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));
}

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

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

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

Demo

Themes (not the XPage ones)

Dont 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

Demo

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>

Demo

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

Demo

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? Theres 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
Im not a designer is not an excuse to create a

good looking site

Whats next?
Youre up.

http://bootstrap4xpages.openntf.org
http://Bootstrap4XPages.com
Going to Connect? Come to my and Phil Riands Bootstrap

session!

Got questions?
Twitter: @markleusink
Email: m.leusink@linqed.eu
Blog: http://linqed.eu