Post on 28-Jan-2015
description
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