BOOTSTRAP & XPAGES: THE BASICS AND BEYOND

Everything is designed, few things are designed well

Unknown author

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

Bootstrap is a responsive design framework to build websites and/or web applications

So it looks good on all kinds of devices

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

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 application’s 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 Roden’s xSnippet for that

http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-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)

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

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