Bootstrap and XPages (DanNotes 2013)
Upcoming SlideShare
Loading in...5
×
 

Bootstrap and XPages (DanNotes 2013)

on

  • 12,758 views

Slides of my session at DanNotes on the use of Bootstrap with XPages, including using the Bootstrap4XPages plugin.

Slides of my session at DanNotes on the use of Bootstrap with XPages, including using the Bootstrap4XPages plugin.

View the demos at http://bootstrap4xpages.com

Statistics

Views

Total Views
12,758
Views on SlideShare
12,720
Embed Views
38

Actions

Likes
0
Downloads
47
Comments
0

1 Embed 38

https://twitter.com 38

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Bootstrap and XPages (DanNotes 2013) Bootstrap and XPages (DanNotes 2013) Presentation Transcript

  • 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
  • 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-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)  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