Thursday, 14 April 2016

Excellent XPages Webinar - Getting Started with the OpenNTF Domino API

On April 12th a excellent webinar was organized by T.L.C.C and Teamstudio 'Getting Started with the OpenNTF Domino API' by Jesse Gallagher and Paul Withers.
For Those Who missed this webinar below the content, slides and video.

Content of the Webinar
Do you use Java in your XPages applications? Want to have a better way to access Domino data? Over the last year more and more developers have started using OpenNTF Domino Java API. In this webinar, Paul and Jesse, part of the team of developers working on this open source project, will explain why you shouldering be using the Domino API. Get a jumpstart into getting started with the Domino API and Improve Your XPages development experience!




For more information: XPages Webinar Series with T.L.C.C and Teamstudio
Missed a Webinar? Look here for the recorded webinars.

Registration is now open for the Webinars 'Optimus XPages - Part 2: The Deep Dive' by John Jardin and 'Expanding XPages with Bootstrap Plugins for Ultimate Usability' (by myself). You cn register for these webinars on the T.L.C.C. website.

For more information about the Domino OpenNTF API see also this blog post by Oliver Busse 'Webinar: Utilizing the OpenNTF Domino API'.

Friday, 8 April 2016

Bootstrap Plugins in XPages Part VI - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)

In my blog post from yesterday, Bootstrap Plugins in XPages Part V - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes, I showed two solution to the AMD problem.

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
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)

Mark Leussink pointed me in his comment on a third possibility. It involves moving the AMD disable/enable code to JavaScript files. This solution  works also when the option 'Use runtime optimized JavaScript and CSS resources' is enabled in the XSP Properties. More information 'AMD Loader disable, enable in theme' on StackOverflow. In this case it is also not necessary to include the scripts in the Resources of the XPage ('NotesIn9 149: Database Resources and Design Definition').
Just create two JavaScript files, 'disable_amd.js' and 'enable_amd.js', add the JavaScripts in the Script Libraries and finally add the JavaScript files to an XPage or Custom Control.
Load the first one before you load the jQuery AMD enabled widget (JavaScript file),place it above this file and load the second one afterwards. It works great! Thanks Mark.

Basic Example XPage on GitHub Gist:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument></xp:this.data>
<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
<script type="text/javascript" src="select2v4/js/select2.js" clientSide="true"></script>
<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>
<link rel="stylesheet" href="select2v4/css/select2.css" />
<xp:panel>



Another possibility is to use <xp:parameter name="xsp.resources.aggregate" value="false"> on the specific XPages (or Custom Control) were the Hack is needed when 'Use runtime optimized JavaScript and CSS resources' is enabled for the entire XPages Application. Just add it in the head of the XPage (or Custom Control) and it also works just fine.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.properties>
<xp:parameter name="xsp.resources.aggregate" value="false" />
</xp:this.properties>
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<!-- temporary redefine define.amd object  (Dojo AMD loader) -->
<xp:script clientSide="true" type="text/javascript">
<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
</xp:script>
<!-- load jquery AMD enabled widgets -->
<xp:script src="/select2.js" clientSide="true"></xp:script>
<!-- restore define.amd object (Dojo AMD loader) -->
<xp:script clientSide="true">
<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
</xp:script>
</xp:this.resources>
<link rel="stylesheet" href="select2v4/css/select2.css" />
<xp:panel>

Basic Example on GitHub Gist.

Like in many cases there are several solutions provided to solve the AMD problem with the newer jQuery and JavaScript plugins. Choose one of the provided solutions and happy coding!

Thursday, 7 April 2016

Bootstrap Plugins in XPages Part V - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes

Many Bootstrap Plugins have moved during the past period to a new version. Examples include among others are Select2 and the Bootstrap Date-Time Picker. Problem with some of the newer version is the AMD Loader. AMD (Asynchronous Module Definition) in Dojo causes issues with jQuery plugins and other JavaScript libraries, in that it prevents them from loading correctly. In this blog post I will show two solutions to solve the AMD Loader problem in XPages.

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
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes

1. Edit the JavaScript Code
This solution, by Mark Roden, consists of five simple steps. I have used this solution at the Bootstrap-select plugin in part one of this series. In this example I use the bootstrap-select.js file. This solution will always work!

A. Go to the WebContent Folder in the Package Explorer
B. Select the JavaScript file
C. Select Open With - Client/Server JS Editor


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


E. Save the JavaScript file

2. Hack to use jQuery AMD widgets and Dojo together
This great script by Ferry Kranenburg solves the AMD problem definitively.
Note about the script: The first script tag will temporary disable the Dojo AMD loader by removing "define.amd". After this script tag you should add all jQuery widgets that cause issues.
Last step is to add the a script tag to restore de Dojo AMD loader.

OpenNTF XSnippet: Hack to use jQuery AMD widgets and Dojo together
See GitHub Gist for the sample code.

In the example below I added the select2.js file to the Script Libraries in the XPage Application.
In this case you don't have to alter the JavaScript file!


On the XPages (or Custom Control) just ad the Hack.

<xp:this.resources>
<!-- temporary redefine define.amd object  (Dojo AMD loader) -->
<xp:script clientSide="true" type="text/javascript">
<xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}";}]]></xp:this.contents>
</xp:script>

<!-- load jquery AMD enabled widgets -->
<xp:script src="/select2.js" clientSide="true"></xp:script>

<!-- restore define.amd object (Dojo AMD loader) -->
<xp:script clientSide="true">
 <xp:this.contents><![CDATA[${javascript:"if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}"}]]></xp:this.contents>
</xp:script>
</xp:this.resources>

In the Google Chrome Developer Tools we can see the Hack in action.


This work great but only if the option 'Use runtime optimized JavaScript and CSS resources' is disabled in the XSP Properties, the Performance Properties. (Xsp Properties - Tab Persistence)
The final result in XPages.


Great solutions for a frequently occurring problem with the newer Bootstrap Plugins.

Wednesday, 6 April 2016

Upcoming XPages Webinars - OpenNTF Domino API - XPages and Bootstrap Plugins



On April 12th a very interesting webinar will be organized by T.L.C.C and Team Studio, Getting Started with the OpenNTF Domino API, by Jesse Gallagher and Paul Withers. The registration for this webinar is available on the T.L.C.C website.

Content
Do you use Java in your XPages applications? Want to have a better way to access Domino data? Over the last year more and more developers have started using OpenNTF Domino Java API. In this webinar, Paul and Jesse, part of the team of developers working on this open source software project, will explain why you should be using the Domino API. Get a jumpstart into getting started with the Domino API and improve your XPages development experience!

On June 16th my own webinar is scheduled, Expanding XPages with Bootstrap Plugins for Ultimate Usability.

Content
IBM Champion Johnny Oldenburger from Kranendonk Smart Robotics will show you how to develop very user friendly and fully responsive web applications (with XPages of course!) by making use of Bootstrap and JQuery Plugins.
He will show you how to use the Select2, DateTimePickers, Multiselect, Bootstrap-select, Modals, Popovers, and Notifications plugins to deliver the ultimate in usability. Learn how to solve the AMD issue when incorporating JavaScript libraries in XPages. Go beyond the basics and create applications that nobody ever thought possible using XPages.

For more information: XPages Webinar Series with TLCC and Teamstudio

Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from March 15th, Optimus XPages - An Explosion of Techniques and Best Practices, by John Jardin.


Tuesday, 5 April 2016

Bootstrap Plugins in XPages Part IV - Awesome Bootstrap Checkbox

The Font Awesome Bootstrap Checkboxes and Radios plugin is a pure CSS plugin to give checkboxes and radio button a nice Bootstrap look and feel. There is No Javascript and No AMD fix. Just one CSS. In this blog post a give some examples on how to use the Font Awesome Bootstap Checkboxes and Radios plugin in XPages. The plugin can be download 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
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkboxes and Radios

The only thing that needs to be added to the XPages / Custom Control is the CSS file √°wesome-bootstrap-checkbox.css' and a little adjustment to the Check Box to make it all work.

<link rel="stylesheet" href="checkbox/awesome-bootstrap-checkbox.css" type="text/css" />

Setup Check Box
Use checkbox-primary, checkbox-danger, radio-info, etc to style checkboxes and radios with brand bootstrap colors. checkbox-circle is for rounded checkboxes.

<div class="checkbox checkbox-circle">
<xp:checkBox id="checkBox2"></xp:checkBox>
<label for="checkBox2">
Checkbox Circle Default
</label>
</div>

Another possibility is to use 'disabled' and 'checked'. These are empty HTML5 attributes so we can use xp:attr (attributes) as shown in the example below.

<div class="checkbox checkbox-circle checkbox-danger">
<xp:checkBox id="checkBox11">
<xp:this.attrs>
<xp:attr name="checked" value="checked" minimized="true">
</xp:attr>
<xp:attr name="disabled" value="disabled" minimized="true">
</xp:attr>
</xp:this.attrs></xp:checkBox>
<label for="checkBox11">
Checkbox Disabled Checked
</label>
</div>

The final result is an Awesome Bootstrap Check Box in XPages.


Sample Code (GitHub)

The plugin works also for Radio Buttons.
For more information and examples : awesome-bootstrap-checkbox

Monday, 4 April 2016

Bootstrap Plugins in XPages Part III - Dialog Boxes using Bootbox

In this blog post I will show how the Bootbox plugin can be used in XPages. Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:
- bootbox.alert(message, callback)
- bootbox.prompt(message, callback)
- bootbox.confirm(message, callback)

The only required argument for alert calls is message; callback is required for confirm and prompt calls in order to determine what the user’s response was. Even when calling alert a callback is useful to determine when the user dismissed the dialog since our wrapper methods can’t and don’t block like their native counterparts: they are asynchronous rather than synchronous.
Each of these three methods calls a fourth public method which you too can use to create your own custom dialogs: bootbox.dialog(options).
In this blog post de bootbox.dialog is used. Bootbox 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
Part III : Dialog Boxes using Bootbox

Below a description of the setup of the Bootbox plugin.

1. Javascript
First the JavaScript file bootbox.js needs to be added to the WebContent folder in the Package Explorer. In this example a Folder 'bootbox' has been added in the WebContent folder.


Next the JavaScript file, bootbox.js needs to be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="bootbox/bootbox.js"></script>

2. AMD Fix
In this example version 4.4.0 is used and therefore the JavaScript file bootbox.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.

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


C. Remove in the third script line 'define.amd' and replace it with 'false'


D. Save the JavaScript file bootbox.js

3. Sample Code Setup Bootbox Dialogs

More information and examples: Bootbox
Recommended Blog Posts:
Bootstrap JS Modal plugin in XPages: Introduction
Bootstrap JS Modal plugin in XPages: Trigger via JavaScript including Modal Options
Bootstrap JS Modal plugin in XPages: Stackable Modals using the Bootstrap-Modal jQuery plugin