Thursday, 19 October 2017

Create a Responsive Bootstrap Carousel Touch Slider with Text Animation in XPages


In my continuous search for modern plugins for my XPages applications I came across the Bootstrap Carousel Touch Slider with Text Animation plugin. The plugin is adding touch behavior to Bootstrap's Carousel and adds beautiful animations in text slides. It is possible to use all text animations from animate.css. The only thing needed is to include the library on an XPages or Custom Control and create the carousel components as described in the official Bootstrap documentation. The JavaScript and CSS file can be downloaded from Bootstrap Themes website.
Below an example how the Bootstrap Carousel Touch Slider with Text Animation plugin can be used in an XPages application.

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 bootstrapcarouseltouchslider has been added in the WebContent Folder.
Next the JavaScript and CSS files, bootstrap-touch-slider.js and bootstrap-touch-slider.css must be included on the XPage or Custom Control. In this example I add the files to an XPage. I also added a link to the animate.css file and the touchSwipe library.

<link rel="stylesheet" href="bootstrapcarouseltouchslider/bootstrap-touch-slider.css" />
<script type="text/javascript" src="bootstrapcarouseltouchslider/bootstrap-touch-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js">
</script>

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows.

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

Animations
For each item I added a slide text layer with the text and button animations in the Bootstrap Carousel. See for more information under Code XPage in this blog post.

<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>

Final result
The final result is a responsive Bootstrap Carousel Slider including touch enabled dragging slides with beautiful text animations.


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="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="bootstrapcarouseltouchslider/bootstrap-touch-slider.css" />
<script type="text/javascript" src="bootstrapcarouseltouchslider/bootstrap-touch-slider.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js">
</script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:carousel}" ).bsTouchSlider();
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="carousel" class="carousel bs-slider fade slide_style_left control-round indicators-line" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="bootstrapcarouseltouchslider/images/birds1.jpg" alt="image1"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_left">
<h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="bootstrapcarouseltouchslider/images/birds2.jpg" alt="image2"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_right">
<h1 data-animation="animated zoomInLeft">Bootstrap Carousel</h1>
<p data-animation="animated fadeInLeft">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="bootstrapcarouseltouchslider/images/birds3.jpg" alt="image3"></img>
<div class="container">
<div class="row">
<!-- Slide Text Layer -->
<div class="slide-text slide_style_center">
<h1 data-animation="animated zoomInLeft">Bootstrap Carousel</h1>
<p data-animation="animated fadeInCenter">Bootstrap carousel touched enabled slide.</p>
<a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a>
<a href="http://bootstrapthemes.co/" target="_blank"  class="btn btn-primary" data-animation="animated fadeInRight">select two</a>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bootstrap Carousel Touch Slider with Text Animation

Wednesday, 18 October 2017

Using infoBox a Tooltip Style jQuery Plugin in XPages


In my continuous search for modern plugins for my XPages applications I came across infoBox. infoBox is a tooltip style jQuery plugin to create information signs/icons on your XPage which will show information boxes on mouseover. The created information boxes will resemble the conversation/message boxes. These boxes will be aligned perfectly without moving out of the page unless a larger width for the box is specified.

Options
width: specify a width for the information Box. The default width will be 200, but the width will be adjusted for 1 or 2 word content
position: specify whether you want to see the information box over the information sign or below. The default position will be below.
bg_color: specify a background color for the information box.
text_color: specify the text color for the text in the information box.

In order to use infoBox, the JavaScript file needs to be included on the XPage / Custom Control. The latest version can be downloaded from from the website AJARUNTHOMAS.COM
Below a basic example using infoBox in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder infobox has been added in the WebContent Folder.
Next the JavaScript infobox.js must be included on the XPage or Custom Control. In this example I added the file to an XPage.

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

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:helptext}" ).infoBox({
"width":300,    //width of information box pop-up
"position":"above", //position whether above or below the information sign
"text_color":"white",   //color of the text
"bg_color":"grey"   //background color
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is perfectly aligned and customizable info box on mouseover a with some additional options in the initial setup.


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="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="infobox/infobox.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:information}" ).infoBox();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:helptext}" ).infoBox({
"width":300,    //width of information box pop-up
"position":"above", //position whether above or below the information sign
"text_color":"white",   //color of the text
"bg_color":"grey"   //background color
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<p>
For more information check the infobox icon.
<a id="information">
The information displayed when checking the info icon.
</a>
</p>
<xp:br></xp:br>
<p>
More information: check the infobox icon.
<a id="helptext">
Useful information for the user(s) with some additional options.
</a>
</p>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: infoBox

Using Bringins in XPages for Animated Info Pages


In my continuous search for modern plugins for my XPages applications I came across Bringins. Bringins is a jQuery plugin to show contents on a webpage as an animated page. These page will be positioned 'fixed' with scrollable data. You can have your custom CSS content to appear in the bringins pages. This plugin allows you to choose from three intoduction animations for the page whether to animate the page on the left, right or center of the webpage. The plugin also provides options to specify the color of the page, width, z-index, margin and color of the close button for the page.

Features
Specify an intoduction animation for the bringins pages
Specify the width of the bringins page
Choose background color for the bringins page
Define margin for the content in the page
Choose a color for the close button of the page
Choose the z-index for the page, so that you can define whether a particular bringins page should always appear above an other bringins page or other elements on that webpage
Define your custom style for the contents which will be included in the plugin element

In order to use Bringins, the JavaScript file needs to be included on the XPage / Custom Control. The latest version can be downloaded from from the website AJARUNTHOMAS.COM
Below a basic example using Bringins in an XPages application.

Adding the JS file
The JavaScript file must be added to the WebContent Folder in the Package Explorer.
In this example a Folder bringins has been added in the WebContent Folder.
Next the JavaScript bringins.js must be included on the XPage or Custom Control. In this example I added the file to an XPage.

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

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){
$('#page1').bringins({
"position":"right",    //animation of the bringins page
"color":"#F05F40",    //background color of the page
"closeButton":"black",  //color of the close button
"width":"50%", //width of the bringins page
"margin":100,   //margin of the content inside the page
"zIndex":999    //z-index of the page
});
});   
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive and customizable webpage as an animated (info)page with some additional options in the initial setup.


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="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bringins/bringins.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){
$('#page1').bringins({
"position":"right",    //animation of the bringins page
"color":"#F05F40",    //background color of the page
"closeButton":"black",  //color of the close button
"width":"50%", //width of the bringins page
"margin":100,   //margin of the content inside the page
"zIndex":999    //z-index of the page
});
});   
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="More information" id="button1"></xp:button>
<div id="page1" class="bringins-content">
<h2>jQuery</h2>
<h4>jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.
<br></br><br></br>
jQuery's syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and Web applications.</h4>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

More information: Bringins 

Saturday, 14 October 2017

IBM Notes 9.0.1 Feature Pack 9 Interim Fix 1 Available for download on IBM Fix Central


On October 10th IBM released IBM Notes Feature Pack 9 Interim Fix 1 on IBM Fix Central. Below an overview of the Fixes in this release.


Download link: IBM Notes Client 9.0.1 FP9 Interim Fix 1


More information: IBM Fix Central
See also my blog post IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central.

Friday, 13 October 2017

Create Animated Progress Circles in XPage using Circliful


For a new XPages application one of the requirements was to present some specific project data in progress circles. In my search I came across Circliful. Circliful is a very easy to use jquery plugin for creating beautiful, responsive and highly customizable animated progress circles. Circliful show data as circle statistics, no images used and is based on SVG and jquery including many options which can be set. For the most simple use you only have to add an element on your XPage with a unique id and an container around it that controls the size of thr circle statistic. It is possibel to set all options as data attributes.
In order to use Circliful, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Circliful.
Below some basic examples using Circliful in an XPages application.

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 circliful has been added in the WebContent Folder.
Next the JavaScript and CSS files, circliful2.js and circlifull.css must be included on the XPage or Custom Control. In this example I added the files to an XPage.

<script type="text/javascript" src="circliful/js/jquery.circliful.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Adding the x$ jQuery selector for XPages
Furthermore I recommend to use the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin. The XSnippet can be added to the Script Libraries. See also the blog post by Csaba Kiss, x$ selector problem with JQuery 3.
The script itself can be made up as follows when not using data attributes. In this example I use a few standard options.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle1}" ).circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
halfCircle: 1,
decimals : 0,
foregroundColor : '#30B455'
});
})
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a beautiful, responsive and highly customizable animated progress circles with some additional options in the initial setup.


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="/jQuerySelector.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="circliful/css/jquery.circliful.css" />
<script type="text/javascript" src="circliful/js/jquery.circliful.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle1}" ).circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
halfCircle: 1,
decimals : 0,
foregroundColor : '#30B455'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:circle2}" ).circliful({
animationStep: 2,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
percent: 75,
decimals: 0,
fillColor: '#cce6ff'
});
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:progress}" ).circliful();
})
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:progress2}" ).circliful();
})
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="row">
<div class="col-lg-2">
<div id="circle2"></div>
</div>
<div class="col-lg-2">
<div id="progress" data-dimension="200" data-fontsize="36" data-percent="65" data-foregroundcolor="#30B455" data-bgcolor="#eee" data-width="15" data-bordersize="15" data-animationstep="2"></div>
</div>   
</div>
<br></br>
<div class="row">
<div class="col-lg-2">
<div id="circle1"></div>
</div>   
<div class="col-lg-2">
<div id="progress2" data-dimension="200" data-fontsize="36" data-halfcircle="1" data-percent="35" data-fillcolor="#cce6ff" data-bgcolor="#eee" data-width="15" data-bordersize="15" data-animationstep="2"></div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

For more information and examples: Circliful

IBM Domino 9.0.1 Feature Pack 9 Interim Fix 2 Available on IBM Fix Central


Yesterday IBM released IBM Domino Feature Pack 9 Interim Fix 2 on IBM Fix Central. Below an overview of the Fixes in this release.


Download link: IBM Domino 9.0.1 FP9 Interim Fix 2

For more information: IBM Fix Central

IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value


There will be an interesting IBM Jump Session on 2 November, The Connections Catalog: Integrating 3rd Party Apps For More Business Value. JUMP stands for Join, Understand, Master and Participate.

Content
Topic: The Connections Catalog: Integrating 3rd Party Apps For More Business Value
Date: Thursday, November 2, 2017
Time: 11:00 AM EDT (15:00 UTC/GMT, UTC-4 hours) for 60 minutes

The new and improved Connections Cloud Catalog is the first step toward building an “app store” in the Pink world of Connections. This new Catalog, accessible from within Connections, helps customers find out about and easily integrate 3rd party apps into Connections Cloud and in the future, the private cloud. During this session, we will show you how it works, how to submit your own Apps, and how the Catalog relates to Connections extensions, including the Connections Customizer.

IBM Enterprise Social Solutions Support wants to help you take full advantage of your products. Join us for our Open Mic Webcast series as technical experts share their knowledge and answer your questions. These webcasts are designed to address specific topics and provide an in-depth and focused technical exchange in a convenient online webcast format. For more information about our Open Mic webcasts, visit the IBM Collaboration Solutions Support Open Mics page.

More information: IBM JUMP Session - The Connections Catalog: Integrating 3rd Party Apps For More Business Value.