Monday, 28 September 2015

Upcoming XPages Webinars

Over the coming period there are again some very interesting XPages Webinars scheduled, Move your XPages Applications to the Fast Lane with Howard Greenberg and Ask the XPages Experts with Mike McGarel, Jesse Gallagher, David Leedy and Nathan Freeman. Do not miss them and register for these webinars brought by Teamstudio and T.L.C.C.

Move your XPages Applications to the Fast Lane
Howard Greenberg
October 15th - 10:30 A.M. to 12:00 P.M. Eastern U.S. time
Are your XPages applications performing like a Florida senior citizen driving in the left lane at 55 mph? A key to speeding up your XPages applications is knowledge of the JSF lifecycle, partial refresh and part execution. In this webinar Howard Greenberg will cover these concepts and then apply them to optimizing an XPages application. Learn how to dramatically increase your XPages performance and make your users happy - you might even get a speeding ticket after this webinar!
Link: Webinar Move your XPages to the Fast Lane

Ask the XPages Experts
Mike McGarel, Jesse Gallagher, David Leedy and Nathan Freeman
November 17th - 10:30 A.M. to 12:00 P.M. Eastern U.S. time
Building on Properties by Mike McGarel - The custom property can be a simple yet powerful tool for both your UI and data needs. Properties can contain a variety of objects, from strings to Java beans. This presentation will demo practical examples of custom properties in two design elements, the custom control and the XPage.
Controller Classes by Jesse Gallagher - “Controller” classes are a useful way to separate your XPage presentation logic from the back-end code. Learn how to implement these classes in a basic XPages application and hear how they can be a good stepping stone on your path to better applications.
Time to First Byte by David Leedy - Learn how to use the dojo Standby widget to target partial refreshes and even improve the users "Time to First Byte"!
Give it a REST by Nathan Freeman - Nathan will talk about how to extend Domino Access Services to build more usable REST models for your own data, using the OpenNTF Domino API REST service as a guide.
Link: Webinar Ask the XPages Experts

Sunday, 27 September 2015

XPages and More goes SocialBiz - Using blueimp Gallery A Touch-Enabled, Responsive and Customizable Image and Video Gallery, Carousel and Lightbox in XPages

In recent days I have had some very pleasant email conversations and a Skype meeting with Noreen Chase from the SocialBiz User Group. During these conversations I was asked to start blogging on SocialBiz User Group site alongside my own blog XPages and More. And of course  I have accepted this invitation!


My first blog post on SocialBiz User Group was published today: Using blueimp Gallery A Touch-Enabled, Responsive and Customizable Image and Video Gallery, Carousel and Lightbox in XPages.
blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.


In the upcoming period there will be more blog post from me appear on the SocialBiz User Group site. So stay tuned!

Saturday, 26 September 2015

XPages ACL Manager (MultiApp) released on OpenNTF

Last Thursday, I wrote a blog post about the XPages ACL Manager which stated that this application would soon be published on OpenNTF. Today the XPages ACL Manager has been published on OpenNTF and can be downloaded!
The XPages ACL Manager is designed to provide a single screen support for managing ACL of multiple databases. The charm of this application is it’s completely designed in Web using XPage. Now, you can have a single XPage to manage your ACL settings for multiple databases on a server.

Link : XPages ACL Manager

Thursday, 24 September 2015

XPages ACL Manager Update

On August 25 I wrote a blog post about the XPages ACL Manager.


On the blog post at that time, the following was stated about the XPages ACL Manager: This tool will give you tremendous flexibility to manage your database ACL through web. Not only that, usefull to reduce lots of effort made behind Maintaining each database's ACL separately and to surpass the flexibility, this tool is targeted to providence handling multiple databases from one single Web page.
Today I received an email which stated that the tool is finished. XPages ACL Manager will be posted very soon on OpenNTF! 
Below are some videos that demonstrate the working of the XPages ACL Manager. More info: XPages ACL Manager. A very interesting option for XPages Developers and Administrators.

1. XPages ACL Manager Walkthrough



2. XPages ACL Manager Basic Tab



3. XPages ACL Manager Roles Tab



4. XPages ACL Manager Log Tab



5. XPages ACL Manager Advanced Tab



6. XPages ACL Manager Validation

Wednesday, 23 September 2015

Build new XPages Applications and Modernize Existing Notes Databases without any XPages Skills

Last night I watched the webinar from May 19 'Build XPages app with Aveedo' from We4IT. Amazing stuff. This blog post is an update of the blog post from August 18 this year.
This year also at ICON UK 2015 a session was dedicated to Aveedo, 'Need XPages apps fast? Need apps on mobile devices? Do not have XPages knowledge? We4IT brings you Aveedo !', by Simon Peek.

Discover how the Aveedo framework can help you build new XPages apps and modernize existing Notes databases rapidly and without any XPages skills. Many of us are struggling to find the time to create all the new XPages application that we need to. And then there's all those old Notes dbs that now need to be brought to the browser and to mobile devices. CREATE new applications without using Domino Designer.  Simple apps can be created in minutes, average apps in a few hours to a couple of days and complex apps in a week or two. MODERNIZE existing Notes client applications to state-of-the-art browser-based apps without changing the underlying database. MOBILIZE applications without additional effort – the responsive design means that applications automatically adapt themselves according to the size of the screen on which it’s being viewed.  And WORKFLOW becomes easier to add to applications using Aveedo’s visual modelling tool.

Aveedo is an application framework that provides organisations using IBM Notes and Domino with a way to rapidly develop new XPage applications and upgrade existing applications to XPages through a process of configuration rather than coding.
Aveedo's responsive technology means that, with only one layout, all different screen sizes are supported so that users of a standard browser will see one version of your application whilst mobile users will be presented with another, simplified, version. Or you can create different layouts to display different information regarding an object depending on the application content. Some features:
  • Create new applications without using Domino Designer. Simple apps can be created in minutes, average apps in a few hours to a couple of days and complex apps in a week or two.
  • Modernize existing Notes client applications to state-of-the-art browser-based apps without changing the underlying database. Aveedo is simply used to create a new front-end.
  • Mobilise applications without additional effort. Aveedo’s responsive design technology means that applications will simply format themselves according to the size of the screen on which it’s being viewed.
  • Workflow becomes easier to add to applications when the users in the business are able to use Aveedo’s visual modeller to describe the sequence of activities that they need to be automated. The workflow engine then allows the completed process to be swiftly integrated into your application.

Webinar Build XPages Applications with Aveedo



I think Aveedo is a very interesting option for many companies both when it comes to modernizing existing Notes applications as well as creating new XPages applications (with or without in-house XPages knowledge). More info: Aveedo Your Application Framework

Tuesday, 22 September 2015

ICON UK 2015 - Sessions, Slides and more

Every September, IBM users meet for ICON UK to learn, network, share experiences, and highlight best practices. Sessions include the latest IBM software developments presented by leading speakers in the global IBM community.  It's only rarely that you get so many excellent speakers in one place outside of IBM ConnectED.
In this blog post  I'll give an overview of the sessions form ICON UK 2015 so far as they have become available. This blog post will be updated regularly in the coming period.



Out of the Blue - the Workflow in Bluemix Development
Oliver Busse
This session is a show and tell how to get started with app development on the IBM Bluemix platform. This is a guide beginning with registering to Bluemix/IBM, showing to add and use a runtime and utilize existing services as NoSQL databases and/or IBM Watson in your applications. It will also show you how to define your workflow using the JazzHub and/or Git services provided by IBM to automatically test, build and deploy your application you just developed locally within your IDE. Tools that are used: a browser, Eclipse with the IBM Bluemix and RTC/EGit plugin installed and some editors and frameworks i.e. Bootstrap UI. The session will contain a bunch of live demos:
Creating a new app from the scratch on Bluemix and set it up in your IDE including some customizing
Creating an existing app in your IDE and deploy it on Bluemix
Sources will be available on Github and/or JazzHub



How to Embrace Your XPages Plugin Super Powers
Serdar Basegmez
Using Java in your XPages applications gives you 'super powers'. Developers can use these Java super powers to fight even the most complex beast of an application. But some superheros frequently resort to copying and pasting libraries between applications. It's time for you to embrace new development super powers! This session will equip you with the skills and techniques you will need. We will first start by covering the basics of plugins. And then, we will move on to look into some first-hand experiences and best practices to overcome difficulties. As a bonus, you will see how to develop and reuse the same artifacts across different applications and different runtimes (e.g. DOTS, Servlets, External applications, etc). Start building your very own extension library and concentrate our applications instead of utilities.



Files, files everywhere! 
Do you know where your organisations documents are and can you say you control it when that auditor 'comes knocking'?
Femke Goedhart
The good old 'document' might not be sexy anymore, it is still often the work horse of the organization. Containing most of our business information and knowledge and often being the preferred way of distribution by users, customers and partners alike. Traditionally we used formal document management tools and the 'good old' file share for storing documents but with collaboration tools like teamrooms, discussion databases and Quickr, the rise of Enterprise social Networking tools like IBM Connections and the ease with which users can get external tools like OneDrive, Dropbox and many others, a lot of that has become muddled. I will take you through some of the scenario's of modern document management, talk about the struggles of migration and give you tools and insights that can help you device a strategy to keep both your users as well as auditors happy.



Zen and the art of requirements gathering
Why getting to "In time, On budget and In scope" is easier if you start out right
Femke Goedhart
Often forgotten or trivialized, good requirements gathering can make or brake your project. This session will give you techniques and tips on how to effectively get to the core of the requirements, identify ways of prioritizing them and explains some core concepts of Functional and Technical design elements. Based on years of experience gathering requirements (and working with them!) Femke & Tim will take you through some of the real life examples they've come across and a lot of do's & don'ts they have run into. Tying them into practice and theory that can help you get your projects off to a better start.



Need XPages apps fast?  Need apps on Mobile devices?  Don’t have XPages knowledge? We4IT brings you Aveedo!
Simon Peek
Discover how the Aveedo framework can help you build new XPages apps and modernize existing Notes databases rapidly and without any XPages skills.  Many of us are struggling to find the time to create all the new XPages application that we need to. And then there's all those old Notes dbs that now need to be brought to the browser and to mobile devices.  CREATE new applications without using Domino Designer.  Simple apps can be created in minutes, average apps in a few hours to a couple of days and complex apps in a week or two.  MODERNIZE existing Notes client applications to state-of-the-art browser-based apps without changing the underlying database.  MOBILIZE applications without additional effort – the responsive design means that applications automatically adapt themselves according to the size of the screen on which it’s being viewed.  And WORKFLOW becomes easier to add to applications using Aveedo’s visual modelling tool.
Below a video of the Webinar from 19.05.2015, Building XPages App with Aveedo.



European Collaboration with a Swiss Twist
Sandra Bühler
Last year we started a challenging project consisting of renewing and enhancing the collaboration platform for a European insurance conglomerate. We moved from an antiquate chat server and different IBM Notes databases to a fully integrated platform with IBM Sametime, IBM Connections and IBM Notes/Domino (XPages) applications. To top it all up, we customised the user experience with a design partner to create a unique collaboration platform. We'll talk about the starting point, the pitfalls, the successful results and a lot of PMRs and how the platform is used now and what are the plans for the next phase.



REST services and IBM Domino/XWork
John Dalsgaard
Loose coupling of systems is key to future development! Why? Because it will allow us to change the "components" as we go along instead of creating monster big systems that are tied together using all sorts of different technologies. Webservices have been a way to obtain this over the last decade. More recently a special variant has become very popular, namely the JSON based REST service.
Imagine you could extend your data out to the world outside your Domino environment? - in an easy way....! And imagine those data could easily be incorporated into other systems via standardized interfaces... Could that extend the value of your current systems further? Could this be a way to use new technologies to modernize your users' experience of working with your systems?
Come and take away knowledge about how to open your Domino/XWork based systems up to the world outside using JSON based REST services. They are going to be key to future development in Domino/XWork - whether you want to use data in browser solutions (e.g. based on angular.js or ExtJS) or native mobile apps (built in whatever technology is best).



Planning and Completing An IBM Connections Upgrade
Gabriella Davis
So you have your Connections 5 or 4.5 environment but then an update comes out and that can require a lot of changes. CR2 for instance gave us updates to DB2, to Websphere, to database schemas, to applications and even to Filenet. FixCentral also often offers up updates and fixes. In this session we'll discuss how you can decide when and what to upgrade, how to plan for and perform a safe upgrade,  some things that can trip you up along the way and how to tell if your upgrade completed successfully.  All of this based on my experiences of untold successful (and sometimes not so successful!) upgrades.



A consultant’s story - changing your technology
Gabriella Davis
The Domino community is a vibrant, passionate world, but the market reality is now hard to ignore. You may be looking at the marketplace as it stands and thinking about the future. You may have spent a long time becoming well known in a technology set, only know to find it is going away. In this informal session come share your stories and here why you're a lot more valuable than you may think you are. Expect a love of the Domino platform, a good dollop of positivity and a bit of painful honesty.



To Infinity and Beyond: OpenNTF Domino API and CrossWorlds
Paul Withers
OpenNTF Domino API has revolutionised XPages development and enabled opportunities never before considered. Through the new demo application, we'll show some of the key APIs that can improve your development experience when interacting with Domino data, whether leveraged from within XPages, the Domino OSGi layer or beyond. Then with CrossWorlds we'll show how Domino + Websphere Liberty Profile can allow standard web application development to use Domino in ways never previously imagined.



Sunday, 20 September 2015

Bootstrap in XPages: Introducing Popupmultiselect - A Multiselect List Box with Options using a Modal Window based on Bootstrap

A few months ago I wrote a blog post about the Bootstrap Multiselect jQuery plugin, Using a Bootstrap Multiselect List Box in XPages. For a recent project I was looking for a Multiselect Listbox, but not as a dropdown menu but as a popup in a modal window. In this quest I found Popupmultiselect, a pop-up with options which allows multiselect and is based on Bootstrap. In this blog post I will show how Popupmultiselect can be used in XPages.

Setup in XPages
A. Adding the JS and CSS files
In order to use Popupmultiselect, the JavaScript and CSS file needs to be included on the XPage or Custom Control. The latest version can be downloaded from GitHub: Popupmultiselect. In this example a Folder popupmultiselect has been added in the WebContent Folder in the Package Explorer.


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

<script type="text/javascript" src="popupmultiselect/js/multiselect.js"></script>
<link rel="stylesheet" href="popupmultiselect/css/multiselect.css" type="text/css" />

B. Adding the x$ jQuery selector for XPages
Furthermore I use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries. The script itself can be made up as follows.

xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).multiselect();
});
]]></xp:this.value>
</xp:scriptBlock>

C. Setup List Box in XPages
The basic setup of the List Box is as follows.

<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel="IBM Notes" itemValue="IBM Notes"></xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Designer" itemValue="IBM Domino Designer">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Administrator" itemValue="IBM Domino Administrator">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Notes Minder" itemValue="IBM Notes Minder"></xp:selectItem>
</xp:listBox>

D. Final result in XPages
The final result is a responsive Multiselect List Box with Options using a Modal Window based on Bootstrap.


E. 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="popupmultiselect/js/multiselect.js"></script>
<link rel="stylesheet" href="popupmultiselect/css/multiselect.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
 $(document).ready(
 function() {
 x$( "#{id:listBox1}" ).multiselect();
 });
 ]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-sm-6">
<h2>Popupmultiselect</h2>
<h3>A Multiselect List Box with Options using a Modal Window</h3>
<xp:br></xp:br>
<xp:listBox id="listBox1" multiple="true">
<xp:selectItem itemLabel="IBM Notes" itemValue="IBM Notes"></xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Designer" itemValue="IBM Domino Designer">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Domino Administrator" itemValue="IBM Domino Administrator">
</xp:selectItem>
<xp:selectItem itemLabel="IBM Notes Minder" itemValue="IBM Notes Minder"></xp:selectItem>
</xp:listBox>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog post more about the Options and Events of the Popupmultiselect plugin.

Friday, 18 September 2015

Bootstrap in XPages: Using Bootstrap Popover.js A Custom jQuery Plugin in XPages

In my blog post from yesterday, Bootstrap in XPages: Using Bootstrap Confirmation A Bootstrap Plugin for On-Place Confirm Boxes using Popover, I showed how you can use Bootstrap Confirmation in XPages. This plugin uses Bootstrap Popover, a custom jQuery plugin. In this blog post I will show how Bootstrap Popover.js can be used in XPages. Considering we make use of Bootstrap it is not necessary to add JavaScript and CSS files in order to make use of this custom JQuery plugin.

Setup in XPages
A. Adding the x$ jQuery selector for XPages
In the example below I make use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the XPage. The XSnippet can be added to the Script Libraries. The script itself can be made up as follows.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).popover();
}
);
]]></xp:this.value>
</xp:scriptBlock>

B. Basic setup Bootstrap Popover
The basic setup of Bootstrap Popover is as follows. In the example below, a button is used to trigger the popover (confirmation box).

<button type="button" id="example"
class="btn btn-lg btn-danger" data-toggle="popover"
title="Bootstrap Popover"
data-content="Add small overlays of content, like those on the iPad.">
Bootstrap Popover
</button>

C. Converting to an XPage button
The basic setup can be converted as follows into an XPage button. For the conversion you need to use data attributes.

<xp:button value="Bootstrap Popover" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover"></xp:attr>
<xp:attr name="title" value="Bootstrap Popover"></xp:attr>
<xp:attr name="data-content" value="Add small overlays of content, like those on the iPad, to any element for housing secondary information.">
</xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-question-sign"></span>
</xp:button>

D. Final result in XPages


E. 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="bootstrapconfirmation/bootstrap-confirmation.js">
</script>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).popover();
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<button type="button" id="example"
class="btn btn-lg btn-danger" data-toggle="popover"
title="Bootstrap Popover"
data-content="And here's some amazing content. It's very engaging. Right?">
Bootstrap Popover
</button>
<xp:br></xp:br><xp:br></xp:br>
<h2>Bootstrap Popover</h2>
<xp:br></xp:br><xp:br></xp:br>
<xp:button value="Bootstrap Popover" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="popover"></xp:attr>
<xp:attr name="title" value="Bootstrap Popover"></xp:attr>
<xp:attr name="data-content" value="Add small overlays of content, like those on the iPad, to any element for housing secondary information."></xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-question-sign"></span>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>$('#example').popover()</script>
</xp:view>

More information : Bootstrap Popover

Wednesday, 16 September 2015

Bootstrap in XPages: Using Bootstrap Confirmation A Bootstrap Plugin for On-Place Confirm Boxes using Popover

In this blog post I will show how Bootstrap Confirmation, a Bootstrap plugin for on-place confirming boxes using Popover, can be used in XPages.

Setup in XPages
A. Adding the JS and CSS files
In order to use Bootstrap Confirmation, the JavaScript file needs to be included on the XPage or Custom Control. The plugin uses the default popover styling Bootstrap provides, a CSS file is not required. The latest version can be downloaded from GitHub: Bootstrap Confirmation. In this example a Folder bootstrapconfirmation has been added in the WebContent Folder.


Next the JavaScript file, bootstrap-confirmation.js must be included on the XPage or Custom Control. In this example I add the file to an XPage.

<script type="text/javascript" src="bootstrapconfirmation/bootstrap-confirmation.js">

B. 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 XPage. The XSnippet can be added to the Script Libraries. The script itself can be made up as follows.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).confirmation();
}
);
]]></xp:this.value>
</xp:scriptBlock>

C. Basic setup Bootstrap Confirmation
The basic setup of Bootstrap Confirmation is as follows. In the example below, a button is used to trigger the confirmation, the on-place confirmation box.

<button class="btn btn-default" id="example1"
data-toggle="confirmation" data-btn-ok-label="Continue"
data-btn-ok-icon="glyphicon glyphicon-share-alt"
data-btn-ok-class="btn-success" data-btn-cancel-label="Stop!"
data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
data-btn-cancel-class="btn-danger">Confirmation
</button>

D. Converting to an XPage button
The basic setup can be converted as follows into an XPage button. For the conversion you need to use data attributes.

<xp:button value="Confirmation" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="confirmation"></xp:attr>
<xp:attr value="Continue" name="data-btn-ok-label"></xp:attr>
<xp:attr name="data-btn-ok-icon" value="glyphicon glyphicon-share-alt"></xp:attr>
<xp:attr name="data-btn-ok-class" value="btn-success"></xp:attr>
<xp:attr name="data-btn-cancel-label" value="Stop"></xp:attr>
<xp:attr name="data-btn-cancel-icon" value="glyphicon glyphicon-ban-circle"></xp:attr>
<xp:attr name="data-btn-cancel-class" value="btn-danger">
</xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-cloud"></span>
</xp:button>

E. Final result in XPages


F. 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="bootstrapconfirmation/bootstrap-confirmation.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).confirmation();
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<button class="btn btn-default" id="example1"
data-toggle="confirmation" data-btn-ok-label="Continue"
data-btn-ok-icon="glyphicon glyphicon-share-alt"
data-btn-ok-class="btn-success" data-btn-cancel-label="Stop!"
data-btn-cancel-icon="glyphicon glyphicon-ban-circle"
data-btn-cancel-class="btn-danger">
Confirmation
</button>
<h2>Bootstrap Confirmation</h2>
<xp:button value="Confirmation" id="button1"
styleClass="btn btn-primary btn-lg" style="color:rgb(255,255,255)">
<xp:this.attrs>
<xp:attr name="data-toggle" value="confirmation"></xp:attr>
<xp:attr value="Continue" name="data-btn-ok-label"></xp:attr>
<xp:attr name="data-btn-ok-icon" value="glyphicon glyphicon-share-alt"></xp:attr>
<xp:attr name="data-btn-ok-class" value="btn-success"></xp:attr>
<xp:attr name="data-btn-cancel-label" value="Stop"></xp:attr>
<xp:attr name="data-btn-cancel-icon" value="glyphicon glyphicon-ban-circle"></xp:attr>
<xp:attr name="data-btn-cancel-class" value="btn-danger"></xp:attr>
</xp:this.attrs>
<span class="glyphicon glyphicon-cloud"></span>
</xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
$('#example1').confirmation()
</script>
</xp:view>

In the next blog post more about the options of the Bootstrap Confirmation Plugin. So stay tuned!

Tuesday, 15 September 2015

jQuery in XPages: Using pickadate.js in XPages Part III - Pre-fill values using Custom Formats

In this blog post I will show how a pre-defined value using a custom formatting rule for the format option can be used in pickadate.js. When using a custom formatting rule for the format option the input element should be given a data-value attribute formatted using the formatSubmit – the element’s value can be left blank. This helps to parse the date from custom formats into various languages.

A. Formatting rules
The following rules can be used to format any time.

Rule Description Result
d Date of the month 1 -31
dd Date of the month with a leading zero 01 -31
ddd Day of the week in short form Sat -Sun
dddd Day of the week in full form Saturday - Sunday
m Month of the year 1 - 12
mm Month of the year with a leading zero 01 - 12
mmm Month name in short form Dec - Jan
mmmm Month name in full form December - January
yy Year in short form * 00 - 99
yyyy Year in full form 2000 - 2999

* If you use the yy rule in the format option, you must specify the yyyy rule in the formatSubmit option with the appropriate data-value attribute to ensure the date parses accurately. Never use the yy rule in the formatSubmit option.

B. Setup Input Field in XPages
In the Edit Box (inputText1) a data attribute, date-value, needs to be added to pre-fill the date.

<div class="col-md-5">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="data-value" value="15-09-2015">
</xp:attr>
</xp:this.attrs></xp:inputText>
</div>

C. Final result in XPages


D. 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="pickadate/lib/picker.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="pickadate/lib/themes/default.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.date.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.time.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).pickadate({
format: 'dd-mm-yyyy',
formatSubmit: 'dd-mm-yyyy',
hiddenName: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-5">
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="data-value" value="15-09-2015"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

E. Related Blog Posts
Using pickadate.js in XPages Part II - Setup the Time Input Picker
Using Pickadate.js a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker in XPages

Sunday, 13 September 2015

It's IBM Champion Season! Nominations are open!

The IBM Champion program recognizes innovative thought leaders in the technical community -- and rewards these contributors by amplifying their voice and increasing their sphere of influence. An IBM Champion is an IT professional, business leader, developer, or educator who influences and mentors others to help them make best use of IBM software, solutions, and services.


The IBM Champion program recognizes innovative thought leaders in the technical community. An IBM Champion is an IT professional, business leader, or educator who influences and mentors others to help them make the best use of IBM software, solutions, and services, shares knowledge and expertise, and helps nurture and grow the community. The program recognizes participants' contributions over the past year in a variety of ways, including conference discounts, VIP access, and logo merchandise, exclusive communities and feedback opportunities, and recognition and promotion via IBM's social channels.
Contributions can come in a variety of forms, and popular contributions include blogging, speaking at conferences or events, moderating forums, leading user groups, and authoring books or magazines. Educators can also become IBM Champions; for example, academic faculty may become IBM Champions by including IBM products and technologies in course curricula and encouraging students to build skills and expertise in these areas.
Take the opportunity to nominate an influencer of IBM Social Business, IBM Power, or IBM Middleware, now. Nominations for the 2016 IBM Champion program will be accepted through Midnight Eastern Time, October 31st 2015.

Nominations for IBM Champion are open to candidates worldwide, and candidates can be self-nominated or nominated by another individual. IBM employees are not eligible for nomination. 

Nominate an IBM Champion : IBM Champion Program

More information about the IBM Champion Program: IBM developerWorks - Champions

IBM XPages on Bluemix: Updates, Videos, Highly Recommended Blog Posts and more

The last period there are again some very interesting blog posts written about IBM XPages on Bluemix. Below an overview of the new blog posts and the highly recommended blog post about IBM XPages on Bluemix.
At this time IBM XPages for Bluemix is still in the experimental phase. The latest release of the OpenNTF Extension Library includes a number of additions for IBM XPages on Bluemix, the new Bluemix capabilities for both Domino Designer and the XPages runtime (Enhancements for Domino Designer Tools for IBM Bluemix and Environment Variables Supported by the XPages Runtime Environment). More information about this in the fourteenth release of the IBM Notes Domino 9.0.1 version of the XPages Extension Library (ExtLib) on OpenNTF.
In the upcoming release of the Extension Library, the fifteenth release, we can hopefully expect more improvements and additions for IBM XPages on Bluemix.
During the next weeks I will also continue with IBM XPages on Bluemix. I will update this blog post as more news becomes available.



IBM XPages for Bluemix documentation
Building apps with the IBM XPages for Bluemix runtime
Getting started with IBM XPages NoSQL Database for Bluemix
Creating apps with the IBM XPages Web Starter

New blog posts
My first Bluemix XPages application via Oliver Busse
DAOBean for XSP on Bluemix via Oliver Busse
Using Plugins in your XPages Application on Bluemix via Oliver Busse
First step how to interact with other Bluemix services via Fredrik Norling
XPages Runtime Update via Brian Gleeson

Recommended blog posts
Combine the XPages NoSQL Service and Node.js Runtime via Brian Gleeson
Using IBM Domino Designer for XPages on Bluemix via Brian Gleeson
Getting started with XPages on Bluemix via Brian Gleeson
Creating my first true XPages in Bluemix application via Mark Roden
XPages in Bluemix – where is the design and where is the data? via Mark Roden
XPages in Bluemix – Looking at the application dashboard via  Mark Roden
XPages in Bluemix – Pushing new changes via Bluemix git repository via Mark Roden
Bluemix Monitoring and Analytics – free service via Mark Roden
XPages on Bluemix a first look deploying app via Fredrik Norling
How to add your custom domain to your Bluemix app via Fredrik Norling
Building On Premises XPages The Bluemix Way via Paul Withers
XPages on Bluemix - finally we got here via Oliver Busse
Announcing IBM XPages on Bluemix via Brian Gleeson
XPages Comes to Bluemix via Eric McCormick
Usage of Cloudant NoSQL Databases in XPages Applications via Niklas Heidloff

My own contributions
IBM XPages on Bluemix: XPages NoSQL Database Part II - Connecting to the XPages NoSQL Database service from Domino Designer (1)
IBM XPages on Bluemix: XPages NoSQL Database Part I - Create an XPages NoSQL Database service instance
IBM XPages on Bluemix: Slides from the Webcast An Introduction to Creating Domino Applications in the Bluemix Environment
IBM XPages on Bluemix: Timeout message while deploying changes to the Bluemix environment using Domino Designer
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Cloud Foundry Command Line Interface
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer Part II
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer
Customizing the XPages Web Starter Application on Bluemix - Start Coding
Creating XPages Applications with the IBM XPages Web Starter on Bluemix
IBM XPages goes Bluemix (Experimental) - New XPages Extension Library has been released

IBM developerWorks
IBM developerWorks - Questions tagged with "xpages-runtime"
IBM developerWorks - Questions tagged with "xpages-service"

Videos
Some very good videos about IBM XPages on Bluemix.

Combine the XPages NoSQL Service and Node.js Runtime



IBM XPages on Bluemix - Integrated Tooling in IBM Domino Designer



IBM XPages Database Service on Bluemix - Connecting with IBM Domino Designer



Getting started with XPages on Bluemix



XPages on Bluemix - What are you waiting for?


Friday, 11 September 2015

Free E-book: Development Tips and Best Practices for XPages

Tonight on Linkedin I came across the following message. Just great!


Tap into real-world expertise with this free e-book containing some of the most useful topics we found covering XPages development. You will find full presentations from popular ConnectED 2015 presentations available on SocialBizUG.org,  popular blogs and articles posted on SocialBizUG.org and The VIEW and a chapter excerpt from, "Mastering XPages: A Step-by-Step Guide to XPages Application Development and the XSP Language," by Martin Donnelly, Mark Wallace, Tony McGuckin, published by Pearson/IBM Press. The e-book contains the following:

- IBM Domino Application Development Futures
- Responsive Application Development for XPages
- Take Your XPages Development to the Next Level
- From XPages Hero to OSGi Guru
- Ten Lines Or Less: Interesting Things You Can Do In Java With Minimal Code
- XPages and JavaServer Faces
- Be Open - Use WebServices and REST in XPages Application
- XPages Performance and Scalability
- Taking XPages Applications from Out-of-the-Box to Outstanding
- Improve XPages Application Performance with JSON-RPC

It is a free download for community members; you have to be signed into your SocialBiz account to download the file (if you're not a member, you can sign up here).


Downloaded the E-book already. Pleasant reading for the coming weekend. With great thanks to the SocialBiz User Group!
Link: Free E-book: Development Tips and Best Practices for XPages

Thursday, 10 September 2015

jQuery in XPages: Introducing jGallery A Mobile friendly flexible jQueryPhoto Gallery with Albums and Swipe Events

In this blog post I will show how jGallery can be used in XPages. jGallery is a mobile friendly, flexible jQuery photo gallery with albums, preloader and swipe events. jGallery can also be used as a Slider in an XPage. In this first blog post about jGallery I will show the basic setup in XPages.

Main Features jGallery
  • Mobile friendly (version v1.5.0)
  • Touch gestures support
  • Flexiblity, easy to customize
  • More than 50 configuration parameters.
  • 67 transition effects
  • Unlimited scalability
  • Saving browser history
  • Modern technologies
  • CSS3, scalable vector icons .etc
  • Compatibility with all major browsers
  • Retina friendly

Setup in XPages
A. Adding the JS and CSS files
In order to use jGallery, the JavaScript and CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: jGallery.
In this example a Folder jgallery has been added in the WebContent Folder.


Next the JavaScript and CSS files, jgallery.js and jgallery.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. Optional include also font-awesome.min.css.

<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/jgallery.css" />
<script type="text/javascript" src="jgallery/dist/js/jgallery.js"></script>

B. 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 XPage. The XSnippet can be added to the Script Libraries. The script itself can be made up as follows. In the example below a number of standard options are used. More on this in the next blog post.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:gallery}" ).jGallery( {
transitionCols:"6",
transitionRows:"1",
thumbnailsPosition:"bottom",
thumbType:"image",
backgroundColor:"FFFFFF",
textColor:"000000",
height: '80vh',
width: '100%',
mode:"standard"
} );
} );
]]></xp:this.value>
</xp:scriptBlock>

C. Setup Gallery
The setup of the Gallery is quite simple in an XPage.

<div id="gallery">
<a href="jgallery/dist/images/large/1.jpg">
<img src="jgallery/dist/images/thumbs/1.jpg" alt="Photo 1" />
</a>
<a href="jgallery/dist/images/large/2.jpg">
<img src="jgallery/dist/images/thumbs/2.jpg" alt="Photo 2" />
</a>
<a href="jgallery/dist/images/large/3.jpg">
<img src="jgallery/dist/images/thumbs/3.jpg" alt="Photo 3" />
</a>
</div>

D. Final result in XPages
The final result is a properly functioning responsive Gallery in XPages. Very easy to implement an use.


E. 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>
<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" media="all" href="jgallery/dist/css/jgallery.css" />
<script type="text/javascript" src="jgallery/dist/js/jgallery.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:gallery}" ).jGallery( {
transitionCols:"6",
transitionRows:"1",
thumbnailsPosition:"bottom",
thumbType:"image",
backgroundColor:"FFFFFF",
textColor:"000000",
height: '80vh',
width: '100%',
mode:"standard"
} );
} );
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div>
<div id="gallery">
<a href="jgallery/dist/images/large/1.jpg">
<img src="jgallery/dist/images/thumbs/1.jpg" alt="Photo 1" /></a>
<a href="jgallery/dist/images/large/2.jpg">
<img src="jgallery/dist/images/thumbs/2.jpg" alt="Photo 2" /></a>
<a href="jgallery/dist/images/large/3.jpg">
<img src="jgallery/dist/images/thumbs/3.jpg" alt="Photo 3" /></a>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog post I will explain the various options of jGallery further. I will also show how jGallery can be used as Slider in an XPage. So stay tuned!

Wednesday, 9 September 2015

jQuery in XPages: Using pickadate.js in XPages Part II - Setup the Time Input Picker

In my previous blog post about pickadate.js, Using Pickadate.js a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker in XPages, I showed how the Date Input Picker can be used in XPages. I also described the basic setup of pickadate.js in XPages. In this blog post I show how the Time Input Picker can be used in XPages. The basic setup requires targetting an input element and invoking the Time Picker: $('.timepicker').pickatime()

Formatting rules
The following rules can be used to format any time.

Rule Description Result
h Hour in 12-hour format 1 -12
hh Hour in 12-hour format with a leading zero 01 -12
H Hour in 24-hour format 0 -23
HH Hour in 24-hour format with a leading zero 00 -23
i Minutes 00 - 59
a Day time period a.m. / p.m.
A Day time period in uppercase AM / PM

Basic setup in XPages
The first step is to simple add an Edit Box on the XPages. The Edit Box is used as an input element for the Time Picker.

<div class="col-md-5">
<xp:inputText id="inputText1"></xp:inputText>
</div>

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 XPage. The XSnippet can be added to the Script Libraries.
The script itself can be made up as follows. The name of the id in the script must correspond with the id of the Edit Box (inputText1).

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).pickatime({
format: 'HH:i',
hiddenName: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The result is a  good looking jQuery responsive  Time Input Picker in XPages.


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="pickadate/lib/picker.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="pickadate/lib/themes/default.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.date.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.time.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).pickatime({
format: 'HH:i',
hiddenName: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-5">
<xp:inputText id="inputText1"></xp:inputText>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

Sunday, 6 September 2015

jQuery in XPages: Using Swipebox A touchable jQuery Lightbox in XPages

In this blog post I will show how Swipebox, a touchable jQuery lightbox, can be used in XPages. Swipebox is a jQuery "lightbox" plugin for desktop, mobile and tablet. Swipebox is compatible with Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone.

Main Features
  • Swipe gestures for mobile
  • Keyboard Navigation for desktop
  • CSS transitions with jQuery fallback
  • Retina support for UI icons
  • Easy CSS customization

Setup in XPages
A. Adding the JS and CSS files
In order to use Swipebox, the JavaScript and CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Swipebox
In this example a Folder swipebox has been added in the WebContent Folder.


Next the JavaScript and CSS files, jquery.swipebox.js and swipebox.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="swipebox/js/jquery.swipebox.js"></script>
<link rel="stylesheet" href="swipebox/css/swipebox.css" type="text/css" />

B. Initialize the plugin
To initialize the plugin you can use a simple script. In the example below I use the option 'useSVG : false' to force the use of png for buttons.
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox( {
useSVG : false // false to force the use of png for buttons
} );
} )( jQuery );
</script>

You can use to following standard options:
  • useCSS : true (false will force the use of jQuery for animations)
  • useSVG : true (false to force the use of png for buttons)
  • initialIndexOnArray : 0 (which image index to init when a array is passed)
  • hideCloseButtonOnMobile : false (true will hide the close button on mobile devices)
  • hideBarsDelay : 3000 (delay before hiding bars on desktop)
  • videoMaxWidth : 1140 (videos max width)
  • beforeOpen: function() {} (called before opening)
  • afterOpen: null (called after opening)
  • afterClose: function() {} (called after closing)
  • loopAtEnd: false (true will return to the first image after the last image is reached)

C. Setup image links
The setup of the image link(s) is quite simple in an XPage. Use a specific class for the (image) links and use the title attribute as caption.

<a href="big/image.jpg" class="swipebox" title="My Caption">
<img src="small/image.jpg" alt="image">
</a>

D. Final result in XPages
The final result is a properly functioning responsive lightbox in XPages. Very easy to implement an use.


E. 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">
<script type="text/javascript" src="swipebox/js/jquery.swipebox.js"></script>
<link rel="stylesheet" href="swipebox/css/swipebox.css" type="text/css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-sm-3">
 <a href="images/Photo1.jpg" class="swipebox"  title="Nature 1" >
<img src="images/FI1.jpg" alt="image" class="img-responsive"></img>
</a>
</div>
<div class="col-sm-3">
 <a href="images/Photo2.jpg" class="swipebox" title="Nature 2">
<img src="images/FI2.jpg" alt="image" class="img-responsive"></img>
</a>
</div>
<div class="col-sm-3">
<a href="images/Photo3.jpg" class="swipebox" title="Blue Heron">
<img src="images/FI3.jpg" alt="image" class="img-responsive"></img>
</a>
 </div>  
<xp:br></xp:br>
</xp:panel></xp:this.facets></xc:ccLayoutBootstrap>
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox( {
useSVG : false // false to force the use of png for buttons
} );
} )( jQuery );
</script>
</xp:view>

IBM XPages on Bluemix - Bootstrap - jQuery - Bootstrap and JQuery Plugins and more

Over the past few months I have written several blog post about XPages, Bootstrap,  IBM XPages on Bluemix and jQuery. In case you might have missed something below a shortened summary of the most interesting blog post until this very moment. For the coming period there are a number of interesting issues on the program, so stay tuned!



jQuery in XPages
Using Pickadate.js a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker in XPages
Using jQuery Fullsizable in XPages supporting the native HTML5 fullscreen API in modern browsers
Using flexImages a lightweight jQuery plugin for creating fluid galleries in XPages

Using Lightbox for Bootstrap 3 in XPages
Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I
Using Lightbox for Bootstrap 3 in XPages Part II - Programatically call
Using Lightbox for Bootstrap 3 in XPages Part III - Data-Remote
Using Lightbox for Bootstrap 3 in XPages Part IV - Vimeo videos
Using Lightbox for Bootstrap 3 in XPages Part V - Forcing width using a data attribute


IBM XPages on Bluemix
IBM XPages on Bluemix: XPages NoSQL Database Part II - Connecting to the XPages NoSQL Database service from Domino Designer (1)
IBM XPages on Bluemix: XPages NoSQL Database Part I - Create an XPages NoSQL Database service instance
IBM XPages on Bluemix: Slides from the Webcast An Introduction to Creating Domino Applications in the Bluemix Environment
IBM XPages on Bluemix: Timeout message while deploying changes to the Bluemix environment using Domino Designer
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Cloud Foundry Command Line Interface
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer Part II
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer
Customizing the XPages Web Starter Application on Bluemix - Start Coding
Creating XPages Applications with the IBM XPages Web Starter on Bluemix
IBM XPages goes Bluemix (Experimental) - New XPages Extension Library has been released

PNotify in XPages
Using the PNotify Plugin for Bootstrap and jQuery UI in XPages - Styling Notices Like Growl using CSS
Using the PNotify Plugin for Bootstrap and jQuery UI in XPages - Effects built in to jQuery
Using the PNotify Plugin for Bootstrap and jQuery UI in XPages

Amazing Bootstrap Buttons Effects in XPages
Amazing Bootstrap 3D Buttons Effects in XPages
Amazing Bootstrap Buttons Effects in XPages Part II - Using Rippler

Bootstrap JS Modal plugin in XPages
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

Bootstrap Plugins
Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I
Using a Bootstrap Multiselect List Box in XPages
Using Unite Gallery in XPages - a highly customizable Responsive jQuery Gallery Plugin
Using a responsive jQuery Gallery for images and videos in XPages, Fotorama

Responsive videos in XPages
Responsive html5video() in XPages
Responsive videos in XPages using FitVids.js
Responsive videos in XPages using a Stylesheet

Select2 in XPages
Limiting the number of selections in Select2 fields
Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages
Using Select2 in XPages (Part I)
Using Select2 in XPages (Part II)
Select2 Placeholder Combo Box
Select2 Property minimumInputLength
Select2 Property maximumSelectionSize
Select2 Auto Tokenization

Top 5 Blog Posts
The top five most read blog post till now on my blog XPages and More
IBM XPages on Bluemix: XPages NoSQL Database Part III - Connecting to the XPages NoSQL Database service from Domino Designer (2)
IBM ConnectED 2015
MWLUG 2015 - The Sessions - Slides, Demo Databases and Videos
Creating XPages Applications with the IBM XPages Web Starter on Bluemix
Amazing Bootstrap 3D Buttons Effects in XPages

I would like to hereby thank all followers and visitors of my blog XPages and More for visiting my blog and reading my blog posts. I write these blog post with lots of fun and hope to continue this in the coming period with new and interesting topics. So stay tuned!

Thursday, 3 September 2015

Using Pickadate.js a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker in XPages

In this blog post I will show how you can use pickadate.js, a mobile-friendly responsive and lightweight jQuery Date and Time Input Picker, in XPages. In this first blog post I will show the basic setup of the Date Picker in XPages.

Features pickadate.js
  • Supports jQuery 1.7 and up.
  • Is ARIA-enabled to be WCAG 2.0 compliant. (added in v3.4)
  • Loads a tiny JS and CSS footprint.
  • Comes with translations for over 40 languages.
  • Has touch & keyboard friendliness.
  • Follows BEM style class naming.
  • Utilizes LESS based stylesheets.
  • Includes a Grunt based build system.
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker.

Adding the JS and CSS files
In order to use pickadate.js, the JavaScript and CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: pickadate.js 3.5.6.
In this example a Folder pickadate has been added in the WebContent Folder.


Next the JavaScript and CSS files, picker.js, picker.date.js, picker.time.js, default.css, default.date.css and default.time.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="pickadate/lib/picker.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="pickadate/lib/themes/default.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.date.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.time.css" type="text/css" />

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 XPage. The XSnippet can be added to the Script Libraries.
The script itself can be made up as follows. The name of the id in the script must correspond with the id of the Edit Box (inputText1).

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() { 
x$( "#{id:inputText1}" ).pickadate();
}
);
]]></xp:this.value>
</xp:scriptBlock>

AMD Loader Fix
Finally, the JavaScript filea picker.js, picker.date.js and picker.time.js need 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(s)
2. Select Open With - Client/Server JS Editor
3. Removed in the second line define.amd and replace it with false 


4. Save the JavaScript files

The final step is to simple add an Edit Box on the XPages.

<div class="col-md-5">
<xp:inputText id="inputText1"></xp:inputText>
</div>

The result is a  good looking jQuery responsive DatePicker in XPages.


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="pickadate/lib/picker.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.date.js"></script>
<script type="text/javascript" src="pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="pickadate/lib/themes/default.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.date.css" type="text/css" />
<link rel="stylesheet" href="pickadate/lib/themes/default.time.css" type="text/css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).pickadate({
format: 'dd-mm-yyyy',
hiddenName: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-md-5">
<xp:inputText id="inputText1"></xp:inputText>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog post more about various options of the Date Picker and the basic setup of the Time Picker.