Thursday, 14 September 2017

Using Smoke Form Validation And Components for Bootstrap in XPages Part 1 - Alerts


In my continuous search for modern plugins for my XPages applications I came across Smoke, a multiple components plugin for Alerts, Confirmtions, Form Validation, Panels and more. The Smoke plugin requires the jQuery Library and the Bootstrap 3 Framework. Smoke is easy to use and the plugin works great in XPages applications. The main advantage is that multiple components are brought together in one plugin whereby the interconnections between the various components can easily be accomplished. The disadvantage is that the plugin is not actively maintained.
In order to use Smoke, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Smoke.
Below are some basic examples how Smoke Alerts 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 smoke has been added in the WebContent Folder.
Next the JavaScript and CSS files, smoke.js and smoke.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="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />

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. 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(){$.smkAlert({
text: 'Alert type "success"',
type: 'success',
position:'bottom-center'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>

Final Result
The final result is a responsive, customizable and accessible Alert 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="smoke/js/smoke.js"></script>
<link rel="stylesheet" href="smoke/css/smoke.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button1}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "success"',
type: 'success',
position:'bottom-center'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button2}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "danger" time 10 seconds',
type: 'danger',
position:'bottom-center',
time: 10
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock3">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button3}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "warning"',
type: 'warning',
position:'bottom-center'
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock4">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:button4}" ).bind("click",function(){$.smkAlert({
text: 'Alert type "info" permanent',
type: 'info',
position:'bottom-center',
icon: 'glyphicon-time',
permanent: true
});
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayout>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="Success" id="button1" styleClass="btn btn-success"></xp:button>
<xp:button value="Danger" id="button2" styleClass="btn btn-danger"></xp:button>
<xp:button value="Warning" id="button3" styleClass="btn btn-warning"></xp:button>
<xp:button value="Info" id="button4" styleClass="btn btn-info"></xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

No comments:

Post a Comment