bootstrap4 x pages

Bootstrap4XPages

Bring the Bootstrap library to XPages

About This Presentation

What it is aboutIt is introducing a new OpenNTF project called Bootstrap4XPages

It shows how this project can be consumed in existing or new XPages applications

It shows how the library can be tailored for your needs

What it is notA tutorial on Bootstrap

A tutorial on how to build a Java based XPages library

PrerequisitesSome XPages development experience, particularly using the extension library

Some XPages library development skils if you want to customize or extend it

Then some Bootstrap knowledge, to get much of the project

Agenda

Introduction to Bootstrap4XPages

Consuming Bootstrap4XPages

Contributing to Bootstrap4XPages

What is Bootstrap?

It is a set of user interface elements available to web applicationsUser interface elementsCarefully crafted CSS styles for typography, navigation, common controls (buttons, edit boxes...)

Layouts, GridsResponsive design, providing the best viewing experience across devices of various sizes

JavaScript components (set of jQuery plug-ins for user interaction)Tabs, dialog boxes, tooltips, drop down buttons/menus...

Very, very, very popular in the web developers community

Empowering front-end developers to kickstart projects more efficiently and effectivelyReady to use for great looking applications

Features many add-ons, available freely or for a fee, providing highly customized UI

Available for free here: http://getbootstrap.com/

Why Bringing Bootstrap to XPages?

Because we want to take the advantage of it :-)Expertly crafted set of user interface elements

Support for responsive design, Collaboration today is a great example of such a designhttp://collaborationtoday.info/

Consume the many add-ons and custom UIs available

Provide an alternate ready to use rendering template to XPages applications

Because there is a high demand from the communityMany XPages projects are already built on top of bootstrap

Several parallel efforts started to make Bootstrap easier to leverage within XPagesWhy not joining our forces and extend a single code base, rather than duplicating the effort?

How does this compare to OneUI?Share the same objectives of having a professionally built, ready to use, set of UI elements

OneUI is the UI framework used by all ICS productsGreat if you want to get your own applications/components share the same

OneUI is also evolving with new capabilities, across IBMStay tuned with the up-coming version of N/D

Objectives of the Project

Bring Bootstrap to an XPages Application with minimum work, ideally noneSelect the theme and you application is now enabled

Get all the resources (css, js...) served from the core runtimeNo resources has to be added within the NSF

Participate in the XPages resource file aggregation for maximum performance

Provide a bootstrap rendering for all the existing XPages componentsCore and extension library, including the Dojo controls

Support for multiple versions of BootstrapThe library is evolving fast, let's keep current, while not breaking the existing apps!

Make it easy to create new Bootstrap specific components

Drag a community around itConsumers, of course

But also contributors: you can contribute based on your skills and willingComponents, extended themes, samples, applications, documentation, videos, blog post, sharing your own experience, ...

Make XPages applications shinning!

Demo

What Do We Have Today?

Bootstrap4XPages 1.0 is availableOpen source project under the Apache 2.0 license

As a ready to use compiled library on OpenNTF, including the source codehttp://bootstrap4xpages.openntf.org/

The source code is available on GitHubClone it, fork it, ...

https://github.com/OpenNTF/Bootstrap4XPages

Delivered with Bootstrap 2.3.1 and JQuery 1.8.2, and other associated librariesDBootstrap: provides a bootstrap theme to Dojo Dijit

Dojo Bootstrap: provides dojo wrappers to Bootstrap components. Not currently used.

Supported platform: Notes/Domino 9.08.5.3 with the extension library might work, but it has not been tried

If anyone wants to make it work, feel free!

Agenda




Getting Started with Bootstrap4Xpages

Get a ready to use copy of the projectDownload the compiled project from OpenNTF

Installation experience is similar to the XPages Extension Library

Install the Bootstrap4XPages update site in DesignerGo to Designer preferences, activate the eclipse plugin install option, install the update site

Detailed instructions: http://ibm.co/13FSXl3

Installing Bootstrap4XPages on the Domino serverInstall the plug-ins directly within the Domino server file system, or in an NSF update site

Detailed instructions: http://ibm.co/19qx082 or http://ibm.co/pkA7Xw

2 Steps for Running Bootstrap4Xpages

Enable the XPages libraries

[x] com.ibm.xsp.extlib.library[x] org.openntf.xsp.bootstrap.library

Set the XPages theme

Use eitherbootstrapv2.3.1

bootstrapv2.3.1r

(r is for loading the responsive CSS)

This is it!

A Few Advises to the Consumer

Avoid hard coding styles in your pagesUse the components as they come, as much as possible

Use a custom theme when you want to assign specific styles to components

Leverage the extension library components, like dialogs, as they are optimized and well tested with the JSF lifecycle

Use the build from OpenNTF rather than the source code, in productionThe build has its resources (CSS, JS) shrunk, thus providing better performance

Or build the plug-ins yourself a simple update site export from Eclipse won't do the full build

Current Limitations

Doesn't (yet) fully matches all the IBM enterprise standardsAccessibility hasn't been tested

Localization is limited to English

DBootstrap does not consume the Bootstrap style sheetsIt comes with its own CSS definition, thus it works well with basic bootstrap, but it doesn't pick-up the added themes

Moreover, it is not built with LESS, like Boostrap

The Extension Library leverages some Dojo controls for advanced components, rather than the Bootstrap onesMight lead to a few subtle differencesEx: dialog, tooltips,

Agenda




Installing a Development Environment

This is just an advise on what to use, your mileage may vary...

PrerequisitesDomino Designer and Domino Server v9.0+

Eclipse 3.6+, 4.2 recommended

eGit, latest version

http://bit.ly/xTbl3I

Get and install the Domino Debug plugin from OpenNTFhttp://bit.ly/19DJrNN

Configure Eclipse to use Domino Designer as the target platformUse JRE1.6 as the system library, with 1.6 compiler for annotations

Install the Code in Eclipse

Get the code from GitHubFork the repository so you'll work on your own copy

Clone the repository

Add the 3 projects to your eclipse workspaceCannot be simpler: 1 plugin, 1 feature, 1 update site projects!

The Plug-in Project: org.openntf.xsp.bootstrap

/srcContains all the java source code/.../components: Contains the Bootstrap specific components

/.../renderkit: Contains the JSF renderers for the core and extlib components

/.../config: Contains the JSF/XPages configuration files

/.../theme: Contains the XPages theme files and extension point

/resources/web/extlib/bootstrapContains all the resources served to the browser (js, css..)

Leverages the Extension Library servletAccessible with a URL of the form: /.ibmxspres/.extlib/bootstrap/

The Bootstrap Theme

Contributed globally using an extension point (8.5.3+)The theme files are bundled within the plug-in

Theme files can be global themes, or fragments add to existing themes

The theme is organized in a hierarchy of filesbootstrap.theme main theme filebootstrapv231.theme including the 2.3.1 specific resources

bootstrapv231r.theme including the 2.3.1 responsive specific resources

bootstrap_extlib.theme extlib specific propertiesbootstrapv231_extlib.theme extlib specific properties for 2.3.1

New versions, or extra themes, can be provided with the same mechanism

How the Theme is Being Used

The theme files are used to:Define the resources to be loaded with the pageBootstrap CSS files

JavaScript files, like JQuery...

Set the default value of some component properties, like styleClassForcing the document type to HTML 5

View component style classes

...

Defining specific components themesBootstrap buttons (Button.Submit, Button.Cancel...)

...

When The Properties Are Not Sufficient...

...Then we have to provide some custom component renderers

A renderer is a JSP concept, used to delegate the actual component rendering to an external, pluggable classIt allows different rendering for the same components

Bootstrap4XPages provides a series of renderersLocated in /.../renderkit/html_extended

Registered in a faces-config file (see: /.../config/bootstrap-faces-config.xml)Makes the associated between a component family/render type and a Java class

XPages currently uses one single render kitBut, in XPages, the render type is a property of each component so it can be set on a per component basis

And this is done through the theme

Writing a Renderer

XPages comes with many base classes that can be used as a starting pointInput controls, table/views, menus, ...

The renderers from the Extension Library had been designed to be extendedBootstrap4XPages often inherit from them

Don't reinvent the wheel, try to inherit from existing renderers, or at least copy/paste their code from the extlib

Some Utility Classes

BootstrapUtilTo find out if Bootstrap is the current theme and grabbing its version

BootstrapResourcesReturns a reference to some common resources

One instance per version of Bootstrap, thus isolating the renderers from the resources locations

BootstrapFragmentTo easily contribute extensions to the Bootstrap library

Minifierto shorten the URLs of the Bootstrap resources

Extend Bootstrap4XPages Yourself

There are mostly 3 ways to extend the libraryModify the existing source codeOnly do that is your extensions are generic enough, and if you want to contribute them back

Use fragments to extend the existing plug-insSimplest way for adding code on top of the existing plug-in

Be careful of name collision

Create another library consuming Bootstrap4XPagesThis fully isolates the library, at the expense of having a brand new library

New Theme Sample: darkstrap

Darkstrap is an extension to bootstrap, https://github.com/danneu/darkstrap

Enabled by adding a new CSS file to the page

The new theme can easily be
provided using a fragment

DBootstrap is actually a
problem as it does not
consume these new styles

Building the Project

The OpenNTF build is currently produced using Eclipse, maven, the Dojo tools and other software componentsUnfortunately, it cannot be distributed in its current form

But we are looking at a global solution using maven. This should be applicable as a set of best practices when building N/D OSGi extensions.
So stay tuned!

Do Your Home Work

Bootstrap4XPages comes with a specific ApplicationConfiguration object, used by the ApplicationLayout, but it currently adds nothing to the base objectThe Bootstrap4XPages ApplicationLayout renderer currently sets the left and right column styles to 'span2', while the body is 'span8' (see the bootstrap doc for more info)

Exercise:Add to int properties to the application configuration: leftSize & rightSize

Extend the BootstrapApplicationLayoutRenderer and consume these properties to get customizable sizes for the column

And Then Help the Project

Create, and contribute to OpenNTF, plug-in fragments like the darkstrap one, encapsulating some popular bootstrap theme

Integrate the responsive Design from Collaboration Today as a standard feature of the library (collapsing menus under a single button...)

Keep up with the latest Bootstrap releases2.3.2 and 3.0 are on their way

Replace the use of dojo by the corresponding Bootstrap components, when possible (dialogs...)

Create some Bootstrap specific components, even leveraging JQuery/JQueryUIMobile UI?

Many Thanks To

Niklas Heidloff, for promoting the project and helping a lot, as ever

Peter Tanner, for handling all the legal issues

The XPages communityMark Leusink, Kathy Brown, Oliver Busse, Slobodan Lohja, Steve Zavocki, Patrick Kwinten and many others (sorry for the missing names), for all their work bringing Bootstrap to XPages!

Door is opened for Q&A

Click to edit the title text format, one or two lines maximum

Click to edit the outline text formatSecond Outline LevelThird Outline Level

bootstrap4 x pages

Technology