Bootstrap4XPages webinar
-
Upload
mark-leusink -
Category
Technology
-
view
19.555 -
download
1
description
Transcript of Bootstrap4XPages webinar
![Page 1: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/1.jpg)
BOOTSTRAP4XPAGES WEBINARJUNE 17, 2014
MARK LEUSINK
![Page 2: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/2.jpg)
Agenda
Bootstrap; the world's most popular UI framework
Bring Bootstrap to XPages with Bootstrap4XPages
Installation, configuration & getting started
Using Bootstrap4XPages
Custom themes & plugins
And demos!
![Page 3: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/3.jpg)
Speaker intro
Freelance consultant/ developer Web, XPages, Java, mobile, Unplugged OpenNTF board member and contributor IBM Champion Creator of www.bootstrap4xpages.com Collaborator on Bootstrap4XPages
Original author: Phil Riand/ IBM
![Page 4: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/4.jpg)
4
Oh… and I’m from Holland(a.k.a. The Netherlands)
![Page 5: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/5.jpg)
What is Bootstrap?
A set of UI elements available to (mobile) web applications
Empowers you, as a front-end developer, to kickstart projects more efficiently and effective
Makes your apps look good
![Page 6: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/6.jpg)
6
What is Bootstrap? - popular
Very popular in the web developers community Number 1 project on
GitHub 68,000+ stars 25,000+ forks
Source: http://trends.builtwith.com/docinfo/Twitter-Bootstrap
![Page 7: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/7.jpg)
7
What is Bootstrap? - in the box
Carefully crafted CSS styles for Typography and navigation Common controls (buttons, input controls, tables)
Layouts and grids With responsive features
Icons Using the Glyphicon font
JavaScript components Tabs, dialogs, tooltips, dropdown buttons/ menus
![Page 8: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/8.jpg)
8
What is Bootstrap? - under the hood
![Page 9: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/9.jpg)
What is Bootstrap?
Relies on jQuery Support for IE8+ Many add-ons available
Custom themes New controls Code snippets (tip: http://bootsnipp.com for inspiration) Free & paid
Version 3 built from the ground up Released in 2013 Mobile first Responsive by default (optional in earlier versions)
Available for free at http://getbootstrap.com/
![Page 10: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/10.jpg)
Why use Bootstrap?
Users are demanding a sleek and polished UI But we're developers, not designers...
Consistent UI makes your applications easier to use Develop for mobile
Responsive design
Standardized look for all applications Deal with cross browser issues
Remember: IBM OneUI, as implemented in the Extension Library, is also a UI framework
![Page 11: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/11.jpg)
11
How do we get Bootstrap in XPages?
Download Bootstrap Download jQuery (1.x) Add the files to your application (nsf) Create an XPage theme referencing all Bootstrap
files & jQuery And deal with the issues
![Page 12: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/12.jpg)
Introducing Bootstrap4XPages
(OSGi) Plugin to install once on your server / Designer client Bootstrap rendering for all XPages components
Core and Extension Library Including the Dojo controls
Provides the easiest Bootstrap integration mechanism to XPages Change the theme and your application is enabled Get all the resources (CSS, JavaScript, fonts) served from the core
runtime No resources have to be added within the NSF Participate in the XPages resource file aggregation
![Page 14: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/14.jpg)
14
Introducing Bootstrap4XPages
Global resources served by a single URL Theme files that include these resources and
define the components properties Directly sets classes/ styles on controls when sufficient
Custom JSF renderer for more complex cases Organized in an hierarchy, (relatively) easy to inherit/
customize
![Page 15: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/15.jpg)
15
Introducing Bootstrap4XPages
Support for multiple versions of Bootstrap 2.3.1*, 2.3.2, 3.0.0 and 3.1.1 Focus now on Bootstrap 3.x, but 2.3.2 is kept for compatibility
Make it easy to create new Bootstrap specific components
jQuery 1.8.2
No longer in use, but still bundled: DBootstrap Dojo Bootstrap
![Page 16: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/16.jpg)
Installation – get the plugin
Get the Bootstrap4XPages (OSGi) plugin from OpenNTF http://bootstrap4xpages.openntf.org Source code available on GitHub
Or get the OpenNTF Essentials A set of ‘essential’ projects to be used for XPage
development Bootstrap4XPages is part of the OpenNTF Essentials http://essentials.openntf.org/ Delivered as an update site database
![Page 17: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/17.jpg)
Installation – install the plugin
Deploy the plugin: On the Domino server (and Notes Client)
Use an update site database (preferred) or copy the plug-in to the server
Add the update site path to the notes.ini:
OSGI_HTTP_DYNAMIC_BUNDLES=updatesite.nsf
In Domino Designer File > Application > Install > import the update site Make sure “Enable Eclipse plug-in install” is enabled in the
preferences
![Page 18: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/18.jpg)
18
Installation – local web preview
Additional step needed to use Bootstrap4XPages with Local Web Preview: Copy features/ plugins folder from:
<notesdata>/workspace/applications/eclipseto:<notesdata>/domino/workspace/applications/eclipse
See “Implementing the XPage Extension Library” by Paul Calhoun http://www.slideshare.net/dominion/implementing-xpages-extension-lib
rary
(I don’t like the local web preview: get a local dev server instead)
![Page 19: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/19.jpg)
Post-installation
Check if the plugin was installed and loaded:
tell http osgi ss org.openntf
v
v
![Page 20: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/20.jpg)
20
Demo: installation
![Page 21: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/21.jpg)
Two steps to enable Bootstrap
1. Enable the required XPage Libraries [x] com.ibm.xsp.extlib.library[x] org.openntf.xsp.bootstrap.library
2. Set the application theme bootstrapv3.1.1 (or bootstrapv3.1.1_3d) bootstrapv3.0.0 (or bootstrapv3.0.0_3d) bootstrapv2.3.2 (or bootstrap2.3.2r)
Important: these themes do NOT show up in the dropdown, you’ll have to enter them yourself.
![Page 22: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/22.jpg)
22
And a third…
Set the DocType of your app to HTML5 Not required, but recommended by Bootstrap for best
compatibility Xsp Properties > Page Generation Properties
![Page 23: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/23.jpg)
23
Demo: first use
![Page 24: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/24.jpg)
24
Create your app: layout
Bootstrap4XPages comes with it’s own configuration object for the application layout control
Adds new configuration options: navbarInverted navbarFixed * pageWidth (full, fixed, fluid) *
Demo
* Coming soon
![Page 25: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/25.jpg)
25
Create your app: navigation
Use xe:navigator to generate a Bootstrap-style menu
Demo
![Page 26: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/26.jpg)
26
Create your app: view
Standard (data) view controls add Bootstrap rendering to your views automatically
Demo
![Page 27: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/27.jpg)
27
Create your app: dialog
xe:dialog from the Extension Library uses a custom renderer in Bootstrap4XPages
Changes HTML output, classes, JavaScript
But you can still use the xe:dialog – just as you are used too
Demo
![Page 28: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/28.jpg)
Create your app: responsive featuresResponsive design: the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Bootstrap 3 is responsive by default Supported by Bootstrap4XPages in Banner (top navbar) and left column Configure using Bootstrap application layout config:
collapseLeftColumn collapseLeftMenuLabel * collapseLeftTo *
Demo
![Page 29: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/29.jpg)
Best practices
Avoid hard coding style classes/ styles in your pages Might break third party themes Use the components as they render as much as possible Use a custom theme when you want to assign specific
styles to components
Leverage the extension library components instead of straight Bootstrap/ jQuery Good example are Dialogs, as they are optimized and well
tested with the JSF lifecycle
![Page 30: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/30.jpg)
Best practices
Use the build from OpenNTF, not the source code, in production The build has its own resources (CSS, JavaScript), thus
provides better performance You can use the resources from the plugin without using
the theme(s) But that's not advised
![Page 31: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/31.jpg)
Plugins: Select2
Built-in to Bootstrap4XPages Adds 2 new controls to Designer:
Select2 Picker for Combo-/ListBox Select2 Picker
Value picker with support for Search Multi-value select (easier to use than a combobox) Remote data sources Templates
Demo
![Page 32: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/32.jpg)
32
Custom themes
Bootstrap can be fully customized to your own look & feel
Change colors, fonts, sizes, margins, etc
![Page 33: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/33.jpg)
33
Custom themes – using LESS/ SASS
Uses LESS (and SASS) ‘CSS preprocessor’ Think of it as ‘using variables in CSS’
Not only: link color = red But also: primary color is red, automatically create gradient to a 30% darker color
in the navbar
Using LESS (or SASS) is the proper way to customize Not a find and replace in the CSS
Bootstrap source comes with the LESS/ SASS source files And a task-runner config that can automatically compile your CSS files See https://github.com/twbs/bootstrap#compiling-css-and-javascript
Demo
![Page 34: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/34.jpg)
Custom themes - alternatives
Get a pre-built theme from the Internet http://bootswatch.com
Create a theme using a Bootstrap theme-roller web site http://getbootstrap.com/customize/ (no preview) http://stylebootstrap.info http://bootswatchr.com
Demo using pre-build theme
![Page 35: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/35.jpg)
35
Coming soon
New release is currently being tested Hopefully released this/ next week
New features Set page width model to use (fixed/ fluid/ full) Set label and position of collapsed left menu Added option to make the navbar static New base themes to be used with custom Bootstrap themes
bootstrapv3_base, bootstrapv2_base jQuery upgraded to 1.11, Select2 upgraded to 3.4.6 Improved picker layouts
Fixes
![Page 36: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/36.jpg)
36
What’s next?
Bootstrap 3.2 announced Scheduled for June 2014 Support will be added to Bootstrap4XPages
Ideas Support for more standard controls Integration of plugins (FontAwesome, pNotify, jQuery
File Upload)
But…
![Page 37: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/37.jpg)
We need your help!
Feel free to help and contribute Fully open source, and accepts external contributors There are many ways to help, depending on your skills
Add new XPages components Implement new Bootstrap releases Create, integrate and distribute themes Write documentation or demos Help testing
Videos and slides on how to setup a dev environment: http://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-9BF94B
![Page 38: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/38.jpg)
Wrapping up
Don't reinvent the wheel but rather consume the project It is more efficient than throwing Bootstrap in every NSF It is more manageable than copying the files into domino/data/html It takes the pain out of getting Bootstrap to work with XPage
If you don’t like how the plugin handles it: you can always override yourself using standard Bootstrap classes
<xp:button styleClass=“btn btn-primary btn-xs” />
![Page 39: Bootstrap4XPages webinar](https://reader035.fdocuments.us/reader035/viewer/2022070318/55780c2dd8b42aa5488b5114/html5/thumbnails/39.jpg)
References
Bootstrap4XPages project on OpenNTF http://bootstrap4xpages.openntf.org/
Bootstrap4XPages source code on GitHub https://github.com/OpenNTF/Bootstrap4XPages
Webinar on Bootstrap4XPages http://www.youtube.com/watch?v=uAff5uNwhn0 http://www.slideshare.net/philipperiand/bootstrap4-x-pages
OpenNTF Essentials http://essentials.openntf.org http://www.youtube.com/watch?feature=player_embedded&v=EUrLfJcCQhY#t=12m0
0s
Bootstrap4XPages – the site, not the plugin Source of information on using Bootstrap with XPages http://bootstrap4xpages.com/