Thursday, 31 March 2016

Bootstrap Plugins in XPages Part II - Bootstrap FileStyle

In this blog post I will show how the Bootstrap FileStyle plugin can be used in XPages. Bootstrap FileStyle is a quick and simple plugin to help style your form's file upload inputs.
Bootstrap FileStyle can be downloaded from GitHub.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap

Recommended blog post: Using the new Bootstrap Fileinput Plugin in XPages.
The Bootstrap FileInput Plugin is an enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects.

Below is a description of the setup of the Bootstrap FileStyle plugin.

1. Adding the JS and CSS files
The JavaScript file needs to be added to the WebContent Folder in the Package Explorer. In this example a Folder 'bootstrapfilestyle' has been added in the WebContent Folder.


Next the JavaScript file, bootstrap-filestyle.js need to be included on the XPage or Custom Control. In this example I add the files to an XPage. There is no need for an AMD Fix,

<script type="text/javascript" src="bootstrapfilestyle/bootstrap-filestyle.js"></script>

2. Setup Bootstrap FileStyle using JavaScript

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<script type="text/javascript" src="bootstrapfilestyle/bootstrap-filestyle.js"></script>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h2>Bootstrap FileStyle</h2>
<h4>Bootstrap FileStyle is a quick and simple plugin to help style your form's file upload inputs.</h4>
<xp:br></xp:br>
<xp:fileUpload id="fileUpload1"></xp:fileUpload>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>$(":file").filestyle({buttonName: "btn-primary", placeholder: "No file", iconName: "glyphicon glyphicon-upload"});</script>
</xp:view>

3. Setup Bootstrap FileStyle using jQuery Selector for XPages

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapfilestyle/bootstrap-filestyle.js"></script>
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
 $(document).ready( 
 function() {
 $('input[type=file]').filestyle({
buttonName: 'btn-primary',
placeholder: 'No file',
iconName: 'glyphicon glyphicon-upload'
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h2>Bootstrap FileStyle</h2>
<h4>Bootstrap FileStyle is a quick and simple plugin to help style your form's file upload inputs.</h4>
<xp:br></xp:br>
<xp:fileUpload id="fileUpload1"></xp:fileUpload>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The final result is a nice Bootstrap look and feel file upload button including a placeholder and a button icon.


For more information and examples: Bootstrap FileStyle

Wednesday, 30 March 2016

Bootstrap Plugins in XPages Part I - Bootstrap-select A jQuery plugin that utilizes Bootstrap's dropdown.js

In this new series, 'Bootstrap Plugins in XPages' I will show several plugins that can be used in XPages for ultimate usability. All plugins will be made available in a demo database. Besides the well known Bootstrap plugins attention will also be paid to lesser known Bootstrap plugins which are very worthwhile. I start this new series with a lesser known Bootstrap plugin, Bootstrap-select.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js

Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to style and bring additional functionality to normal select boxes.Bootstrap-select is an alternative for Select2. Bootstrap-select is easy to implement, has many options and events and is definitely worth having a look at. In this blog post I will give an example of how Bootstrap-select can be used in XPages. Bootstrap-select can be downloaded from GitHub.

1. Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer.
In this example a Folder 'bootstrapselect' has been added in the WebContent Folder.


Next the JavaScript and CSS files, bootstrap-select.js and bootstrap-select.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="bootstrapselect/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="bootstrapselect/css/bootstrap-select.css" type="text/css" />

2. Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden (again), x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. The XSnippet can be added to the Script Libraries.

<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the List Box.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectpicker({
style: 'btn-info',
size: 4,
title: 'Choose one of the following...'
});
});
]]></xp:this.value>
</xp:scriptBlock>

3.AMD Loader Fix
Finally, the JavaScript file bootstrap-select.js needs to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. The source code of the library can be adjusted in a very simple way with just a slight modification.

1. Go to the WebContent Folder and select the JavaScript file select2.js
2. Select Open With - Client/Server JS Editor


3. Remove in the second line define.amd and replace it with false


4. Save the JavaScript file bootstrap-select.js

4. Setup List Box
The data-api will automatically theme the List Box with the class 'selectpicker'.

<div class="col-md-7">
<div class="selectpicker">
<xp:listBox id="listBox1" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>

The final result is a bootstrap look and feel List Box in XPages.


5. Setup Combo Box
The data-api will also automatically theme the Combo Box with the class 'selectpicker'.

<div class="col-md-7">
<div class="selectpicker">
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
</div>


6. Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript""src="bootstrapselect/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="bootstrapselect/css/bootstrap-select.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).selectpicker({
style: 'btn-info',
size: 4,
title: 'Choose one of the following...'
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).selectpicker({
style: 'btn-success',
size: 4,
title: 'Select an option...'
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h2>Bootstrap Select</h2>
<h4>Bootstrap-select is a jQuery plugin that utilizes Bootstrap's dropdown.js to
style and bring additional functionality to normal select boxes.</h4><xp:br></xp:br>
<div class="col-md-7">
<div class="selectpicker">
<xp:listBox id="listBox1" multiple="true">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
</div>
<xp:br></xp:br>
<div class="col-md-7">
<div class="selectpicker">
<xp:comboBox id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
@DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For more information and examples : Bootstrap-select

Monday, 28 March 2016

Engage - Slides Expanding XPages with Bootstrap Plugins for Ultimate Usability

Because of serious personal reasons I had to cancel my Engage session at the last moment. My sincere apologies to the organizers of Engage. Nevertheless, I hereby share my slides for those who may have any interest in them. The slides are also available on the Engage UG website.
The session is also part of my Webinar 'Expanding XPages with Bootstrap for Ultimate Usability' ' which is scheduled on 25th May 2016, at 13:00 UK time, 14:00 European time. It will be a maximum one-hour presentation, approximately 45 minutes plus 10 minutes for questions, conducted through Connections Cloud meetings. This webinar is part of the of technical enablement program for IBM Business Partners, #NewWayToLearn.





The corresponding demo database will also soon be shared.

Wednesday, 23 March 2016

Engage - Expanding XPages with Bootstrap Plugins for Ultimate Usability

Tomorrow I will be at Engage and I will give an XPages and Bootstrap session, 'Expanding XPages with Bootstrap Plugins for ultimate usability'.
In this session I will provide an extensive demo on how to implement an external Bootstrap Plugin into an XPages Application.
Further attention will be given to the AMD problem with some new versions of Bootstrap Plugins and how to solve this problem.
Demos of several plugins will also be given as Select2, LightBox and Unite Gallery.
Finally, attention will also be given to reusable bootstrap fields, text and rich text, and the BootstrapCK-Skin to give rich text fields a nice Bootstrap look and feel.
The slides and demodatabase will be made available after Engage.


Abstract:
Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals,Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown within an XPages application.


Join me on Thursday, March 24 - 11:30 - 12:30 - A. Foyer! See you tomorrow in Eindhoven.

Tuesday, 22 March 2016

Received an IBM Badge today!

Today I received a new Badge from IBM. Thanks very much!
The badge is using Mozilla OpenBadges technology to let people display verifiable acheivements.

What is a badge?
A digital badge is an online representation of a skill you’ve earned. Open Badges take that concept one step further, and allows you to verify your skills, interests and achievements through credible organizations. And because the system is based on an open standard, you can combine multiple badges from different issuers to tell the complete story of your achievements — both online and off. 

Friday, 18 March 2016

Work In Progress: XPages And Bootstrap

The coming period for me is a very busy, exciting and eventful period. Prior to the planned activities below I will also share some short videos, including demo databases, regarding Bootstrap in XPages during the next period. At present I am working on the first series of blog posts with the associated demo databases and videos. The first are scheduled to be published after Engage.

Engage - Dev02. Expanding XPages with Bootstrap Plugins for ultimate usability
Thursday, March 24 - 11:30 - 12:30 - A. Foyer
Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals,Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown within an XPages application.
More information: Engage 2016


Webinar Expanding XPages with Bootstrap for Ultimate Usability
My Webinar Expanding XPages with Bootstrap for Ultimate Usability '' is scheduled on 25th May 2016 at 13:00 UK time, 14:00 European time. It will be a maximum one-hour presentation, approximately 45 minutes plus 10 minutes for questions, conducted through Connections Cloud meetings.
The webinar is part of the technical and enablement program for IBM Business Partners, #NewWayToLearn.


On June 16th is also already an activity planned. Preparations for this are already underway. More information will follow shortly.


I hope to see you all in Eindhoven or during my webinars and other activities during the coming period!

Thursday, 17 March 2016

XPages and Bootstrap Magic at Engage

Join me next week during my XPages and Bootstrap session Expanding XPages with Bootstrap Plugins for ultimate usability' at Engage in Eindhoven. I am very excited for this session and it will be my first at Engage.


Abstract of my session:
'Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals,Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown within an XPages application'.

Some examples that are covered next week during my session are the Bootstrap FileInput and the Popupmultiselect plugin. But there will be much more during the session!


Engage 2016 takes place on the 23rd and 24th March 2016 in Eindhoven, Netherlands. The venue is stunning: the Evoluon. Close to major highways, plenty of parking space, near the city center.

Wednesday, 16 March 2016

Exceptional XPages Webinar - Optimus XPages: An Explosion of Techniques and Best Practices

On March 15th a very interesting webinar was organized by TLCC and Team Studio, Optimus XPages: An Explosion of Techniques and Best Practices, by John Jardin (@JohnJardinCodes).
For those who missed this webinar below the content, slides and video.

Content of the Webinar
Are you starting a new XPages project, but not sure it’s going to be done right the first time? Do you have an existing application that doesn’t seem to have that “X” Factor? In this webinar, John Jardin demonstrates how XPages developers can apply proven techniques and best practices to take their applications to a game-changing level.
You'll learn how to:
Rapidly develop responsive applications.
Improve user experience and response times with background and multi-threaded operations.
Keep your XPages lightweight with code injection.
Create scheduled tasks the XPages way.
And much more.





Link: Slides IBM Connet 2016

For more information: XPages Webinar Series with TLCC andTeamstudio
Missed a Webinar? Look here for the recorded webinars.

IBM Notes Traveler 9.0.1.10 Available for Download on IBM Fix Central

IBM released the new Traveler version 9.0.1.10.

IBM Traveler 9.0.1.10 includes all APAR fixes delivered in all previous releases up to and including IBM Traveler 9.0.1.9 in addition to the APARs listed here.

For download and more information:

Tuesday, 1 March 2016

Upcoming XPages Webinar - Optimus XPages: An Explosion of Techniques and Best Practices

On March 15th a very interesting webinar will be organized by TLCC and Team Studio, Optimus XPages: An Explosion of Techniques and Best Practices. The registration for this webinar is available on the T.L.C.C website.


Content
Starting a new XPages project but not sure it’s going to be done right the first time? Do you have an existing application that doesn’t seem to have that “X” Factor? In this webinar John Jardin will demonstrate how XPages developers can apply proven techniques and best practices to take their applications to a game changing level.

You will learn:
  • Rapidly develop responsive applications
  • Improve user experience and response times with background and multi threaded operations
  • Keep your XPages lightweight with code injection
  • Create scheduled tasks the XPages way
and much more...

Slides IBM Connect 2016


Link: Slides IBM Connect 2016

For more information: XPages Webinar Series with TLCC andTeamstudio

Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from February 16th , Building Responsive Applications Using XPages.