Bootstrap and XPages (DanNotes 2013)
-
Upload
mark-leusink -
Category
Technology
-
view
117 -
download
3
description
Transcript of Bootstrap and XPages (DanNotes 2013)
![Page 1: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/1.jpg)
BOOTSTRAP & XPAGES: THE BASICS AND BEYOND
Everything is designed, few things are designed well
Unknown author
![Page 2: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/2.jpg)
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
![Page 3: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/3.jpg)
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
![Page 4: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/4.jpg)
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
![Page 5: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/5.jpg)
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
![Page 6: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/6.jpg)
What do you get?
Layout
Grids
Styles
Icons
using the Glyphicon font
Cross-browser
Responsive
![Page 7: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/7.jpg)
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
![Page 8: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/8.jpg)
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
![Page 9: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/9.jpg)
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
![Page 10: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/10.jpg)
Bootstrap files
Only a couple of JavaScript, CSS & font files
Needs jQuery for some functions
![Page 11: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/11.jpg)
Bootstrap in XPages
Two methods:
DIY (Do-it-yourself)
Use the Bootstrap4XPages plugin
![Page 12: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/12.jpg)
DIY
Download
Bootstrap
jQuery
Add files to
WebContent folder
Via the package explorer
Just drag-n-drop them
![Page 13: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/13.jpg)
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
![Page 14: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/14.jpg)
Demo
![Page 15: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/15.jpg)
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
![Page 16: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/16.jpg)
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
![Page 17: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/17.jpg)
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
![Page 18: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/18.jpg)
Demo
![Page 19: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/19.jpg)
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
![Page 20: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/20.jpg)
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)); }
![Page 21: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/21.jpg)
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>}
![Page 22: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/22.jpg)
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
![Page 23: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/23.jpg)
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
![Page 24: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/24.jpg)
Demo
![Page 25: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/25.jpg)
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)
![Page 26: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/26.jpg)
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
![Page 27: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/27.jpg)
Plugins – Select2
Turns a boring combobox
Into an advanced search control
With support for:
Typeahead-selection
Static/ dynamic links (using Ajax)
Markup
Events
![Page 28: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/28.jpg)
Demo
![Page 29: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/29.jpg)
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>
![Page 30: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/30.jpg)
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
![Page 31: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/31.jpg)
Plugins – Font awesome
Bootstrap 3 comes with 200 Glyphicons
But no rocket
Font awesome has 369
Including a rocket
![Page 32: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/32.jpg)
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>
![Page 33: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/33.jpg)
Demo
![Page 34: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/34.jpg)
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
![Page 35: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/35.jpg)
Demo
![Page 36: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/36.jpg)
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
![Page 37: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/37.jpg)
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/
![Page 38: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/38.jpg)
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
![Page 39: Bootstrap and XPages (DanNotes 2013)](https://reader031.fdocuments.us/reader031/viewer/2022020718/54c7c68d4a795907128b458a/html5/thumbnails/39.jpg)
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: [email protected] Blog: http://linqed.eu