Friday, 29 May 2015

Using Unite Gallery in XPages - a highly customizable Responsive jQuery Gallery Plugin

In this blog post I will show how one of the most powerfull and highly customizable Responsive jQuery Image Gallery and Video Plugin can be used within XPages, the Unite Gallery. The Unite Gallery is multipurpose javascript gallery based on jquery library. It's built with a modular technique with a lot of accent of ease of use and customization. It's very easy to customize the gallery, changing it's skin via css, and even writing your own theme. Yet this gallery is very powerfull, fast and has the most of nowdays must have features like responsiveness, touch enabled and even zoom feature, it's unique effect.

Features:
  • The gallery plays VIDEO from: Youtube, Vimeo, HTML5, Wistia and SoundCloud (not a video but still )
  • Responsive - fits to every screen with automatic ratio preserve
  • Touch Enabled - Every gallery parts can be controlled by the touch on touch enabled devices
  • Responsive - The gallery can fit every screen size, and can respond to a screen size change.
  • Skinnable - Allow to change skin with ease in different css file without touching main gallery css.
  • Themable - The gallery has various of themes, each theme has it's own options and features, but it uses gallery core objects
  • Zoom Effect - The gallery has unique zoom effect that could be applied within buttons, mouse wheel or pinch gesture on touch - enabled devices
  • Gallery Buttons - The gallery has buttons on it, like full screen or play/pause that optimized for touch devidces access
  • Keyboard controls - The gallery could be controlled by keyboard (left, right arrows)
  • Tons of options. The gallery has huge amount of options for every gallery object that make the customization process easy and fun.
  • Powerfull API - using the gallery API you can integrate the gallery into your website behaviour and use it with another items like lightboxes etc.
To use the Bootstrap-modal plugin in XPages first we have to add the Unite Gallery files to the WebContent Folder in the Package Explorer. For this purpose I created a Folder 'unitegallery'.


Next we need to include  the js and css files on the XPage / Custom Control. In this example I include all files on an XPage. In the example below I use the Default Theme including some Gallery options.

<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />

Furthermore we need the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. You can add the XSnippet to the Script Libraries.


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

The script itself can be made up as follows. The name of the id in the script must correspond with the id of the gallery (<div id="gallery" style="display:none;">).

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
slider_enable_arrows:true,
slider_enable_zoom_panel:true,
theme_enable_text_panel: false,
thumb_border_width:2,
thumb_over_border_width:2,
thumb_selected_border_width:4,
gallery_width:500,
gallery_height:500
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The last step is to create the gallery markup and adding the pictures to the gallery.

<div id="gallery" style="display:none;">
<img src="images/Photo1.jpg" data-image="images/Photo1.jpg"></img>
<img src="images/Photo2.jpg" data-image="images/Photo2.jpg"></img>
<img src="images/Photo3.jpg" data-image="images/Photo3.jpg"></img>
<img src="images/Photo4.jpg" data-image="images/Photo4.jpg"></img>
<img src="images/Photo5.jpg" data-image="images/Photo5.jpg"></img>
<img src="images/Photo6.jpg" data-image="images/Photo6.jpg"></img>
<img src="images/Photo7.jpg" data-image="images/Photo7.jpg"></img>
<img src="images/Photo8.jpg" data-image="images/Photo8.jpg"></img>
</div>

For the photos which should eventually be added to the gallery I created a folder 'images' in the WebContent folder in the Package Explorer.


Further I imported the photos which should be used in the galley into the newly created Folder 'ímages'.


The result is great and powerful responsive image Gallery.


It is also possible to add a video gallery in a simple manner.
First the Unite Gallery Video Theme Files needs to be added to the XPage / Custom Control. The next step is to include (one of) the video skins.

<script src='unitegallery/themes/video/ug-theme-video.js' type='text/javascript'></script>
<link  href='unitegallery/themes/video/skin-right-no-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-title-only.css' rel='stylesheet' type='text/css' />

Furthermore we need a second script to initialize the (video) plugin.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery2}").unitegallery({
gallery_theme: "video",
theme_autoplay: false,
theme_skin: "right-no-thumb",
gallery_width:800,
gallery_height:300
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The last step is to create the gallery markup and adding the videos to the gallery.

<div id="gallery2">
<div data-type="youtube"
data-videoid="SrQT443zfl0"
data-title="Smart Application Migration to XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="P24PsLXO5_o"
data-title="XPages Extension Library goes Responsive Part II"
data-description="David Leedy">
</div>
<div data-type="youtube"
data-videoid="Gwekie6M4WU"
data-title="Getting Started with Custom Renderers"
data-description="David Leedy - Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="0_bBmwqzJyk"
data-title="Using jQuery DataTables in IBM XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="stJ3Yc1BOnU"
data-title="Getting Started with Servlets"
data-description="David Leedy">
</div>
</div>

The result is great responsive video Gallery.



Code XPages
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<!-- Include Unite Gallery core files -->
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/default/ug-theme-default.js'></script>
<link rel='stylesheet' href='unitegallery/themes/default/ug-theme-default.css' type='text/css' />
<script src='unitegallery/themes/video/ug-theme-video.js' type='text/javascript'></script>
<link  href='unitegallery/themes/video/skin-right-no-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-thumb.css' rel='stylesheet' type='text/css' />
<link  href='unitegallery/themes/video/skin-right-title-only.css' rel='stylesheet' type='text/css' />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
slider_enable_arrows:true,
slider_enable_zoom_panel:true,
theme_enable_text_panel: false,
thumb_border_width:2,
thumb_over_border_width:2,
thumb_selected_border_width:4,
gallery_width:500,
gallery_height:500
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery2}").unitegallery({
gallery_theme: "video",
theme_autoplay: false,
theme_skin: "right-no-thumb",
gallery_width:800,
gallery_height:300
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div id="gallery" style="display:none;">
<img src="images/Photo1.jpg" data-image="images/Photo1.jpg"></img>
<img src="images/Photo2.jpg" data-image="images/Photo2.jpg"></img>
<img src="images/Photo3.jpg" data-image="images/Photo3.jpg"></img>
<img src="images/Photo4.jpg" data-image="images/Photo4.jpg"></img>
<img src="images/Photo5.jpg" data-image="images/Photo5.jpg"></img>
<img src="images/Photo6.jpg" data-image="images/Photo6.jpg"></img>
<img src="images/Photo7.jpg" data-image="images/Photo7.jpg"></img>
<img src="images/Photo8.jpg" data-image="images/Photo8.jpg"></img>
</div>
<br></br>
<div id="gallery2">
<div data-type="youtube"
data-videoid="SrQT443zfl0"
data-title="Smart Application Migration to XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="P24PsLXO5_o"
data-title="XPages Extension Library goes Responsive Part II"
data-description="David Leedy">
</div>
<div data-type="youtube"
data-videoid="Gwekie6M4WU"
data-title="Getting Started with Custom Renderers"
data-description="David Leedy - Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="0_bBmwqzJyk"
data-title="Using jQuery DataTables in IBM XPages"
data-description="Oliver Busse">
</div>
<div data-type="youtube"
data-videoid="stJ3Yc1BOnU"
data-title="Getting Started with Servlets"
data-description="David Leedy">
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For downwload and more information about themes and options : Unite Gallery documentation

Monday, 25 May 2015

Bootstrap JS Modal plugin in XPages: Stackable Modals using the Bootstrap-Modal jQuery plugin

In the previous blog post, Bootstrap JS Modal plugin in XPages: Trigger via JavaScript-including Modal Options, I showed how the Bootstrap JS Modal can be triggered via JavaScript-including some Modal Options. In this blog post I will show how the Bootstrap JS Modal can be extended with the Bootstrap-Modal plugin. In the example below I use a button to display Stackable Modals.
Bootstrap-Modal is a jQuery plugin that extends Bootstrap’s native Modals to provide additional functionality. Introduces a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events. The Bootstrap-Modal plugin has the following features :

- Backwards compatible.
- Responsive.
- Stackable.
- Full width.
- Load content via AJAX.
- Disable background scrolling

In addition to the standard Bootstrap options, the Bootstrap-Modal plugin provides the following additional Modal options.

width Set the initial width of the modal
height Set the initial height of the modal
maxHeight Set the max-height of the modal-body
loading Toggle the loading state
spinner Provide a custom image or animation for the loading spinner
backdropTemplate Provide a custom modal backdrop
consumeTab Used to enable tabindexing for modals with data-tabindex. This is set to true by default
focusOn The element or selector to set the focus to once the modal is shown
replace If set to true, the modal will replace the topmost modal when opened
attentionAnimation Set the animation used by the attention method. Any animation in animate.css is supported but only the shake animation is included by default
modalOverflow Set this property to true for modals with highly dynamic content. This will force the modal to behave as if it is larger than the viewport
manager Set the modal's manager. By default this is set to the GlobalModalManager and will most likely not need to be overridden

The Bootstrap-Modal plugin provides the following additional ModalMamager options.

loading Toggle the loading state
backdropLimit Limit the amount of backdrops that will appear on the page at the same time
spinner Provide a custom image or animation for the loading spinner
backdropTemplate Provide a custom modalmanager backdrop. This backdrop is used when $element.modalmanager('loading') is called

To use the Bootstrap-modal plugin in XPages first we have to add the css and js files to the WebContent Folder in the Package Explorer. For this purpose I created a Folder 'bootstrapmodal'.


Important: if you are using Bootstrap 3 include the patch file, bootstrap-modal-bs3patch.css, before bootstrap modal.

Next we need to include  the js and css files on the XPage / Custom Control. In this example I include all files on an XPage.

<xp:this.resources>
<xp:styleSheet href="/bootstrap-modal-bs3patch.css"></xp:styleSheet>
<xp:styleSheet href="/bootstrap-modal.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="bootstrapmodal/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="bootstrapmodal/js/bootstrap-modalmamager.js"></script>

Furthermore we need the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. You can add the XSnippet to the Script Libraries.


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

The script itself can be made up as follows. The name of the ids in the script must correspond with the id of the Button and the id of the (first)Modal.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(function(){
x$("#{id:button1}").click(function(){
x$("#{id:Modal1}").modal(
{backdrop: true,
keyboard: false,
show: true
}
);
});
});
]]></xp:this.value>

The last step is to create the button and the Stackable Modals.

<!-- Show the modal via a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
</xp:button>

<!-- Modal 1 -->
<div id="Modal1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal One</h4>
</div>
<div class="modal-body">
<p>Modal 1 - triggered via JavaScript including some Modal Options.</p>
<div class="form-group">
<label for="inputText1">First Name:</label>
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="class" value="form-control"></xp:attr>
<xp:attr name="data-tabindex" value="1"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText2">Last Name:</label>
<xp:inputText id="inputText2">
<xp:this.attrs>
<xp:attr name="class" value="form-control"></xp:attr>
<xp:attr name="data-tabindex" value="2"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText5">Address:</label>
<xp:inputText id="inputText5">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="3"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText6">Country:</label>
<xp:inputText id="inputText6">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="4"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<button class="btn btn-primary" data-toggle="modal"  href="#Modal2">Launch Modal 2</button>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>


<!-- Modal 2 -->
<div id="Modal2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Two</h4>
</div>
<div class="modal-body">
<p>Modal 2</p>
<div class="form-group">
<label for="inputText3">Company:</label>
<xp:inputText id="inputText3">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="1"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText4">Email:</label>
<xp:inputText id="inputText4">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="2"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<button class="btn btn-primary" data-toggle="modal"  href="#Modal3">Launch Modal 3</button>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>


<!-- Modal 3 -->
<div id="Modal3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Three</h4>
</div>
<div class="modal-body">
<p>Modal 3</p>
<div class="form-group">
<label for="inputText7">Bootstrap JS Modal:</label>
<xp:inputText id="inputText7">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="1"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>

The final result: Stackable Bootstrap Modals.


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:styleSheet href="/bootstrap-modal-bs3patch.css"></xp:styleSheet>
<xp:styleSheet href="/bootstrap-modal.css"></xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapmodal/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="bootstrapmodal/js/bootstrap-modalmanager.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
 $(document).ready(function(){
 x$("#{id:button1}").click(function(){
 x$("#{id:Modal1}").modal(
{backdrop: true,
keyboard: false,
show: true
}
);
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal"></xp:attr>
</xp:this.attrs>
<xp:br></xp:br>
<!-- Show the modal via a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg"></xp:button>
<xp:br></xp:br>
<!-- Modal 1 -->
<div id="Modal1" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal One</h4>
</div>
<div class="modal-body">
<p>Modal 1 - triggered via JavaScript including some Modal Options.</p>
<div class="form-group">
<label for="inputText1">First Name:</label>
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="1"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText2">Last Name:</label>
<xp:inputText id="inputText2">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="2"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText5">Address:</label>
<xp:inputText id="inputText5">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="3"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText6">Country:</label>
<xp:inputText id="inputText6">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="4"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<button class="btn btn-primary" data-toggle="modal" href="#Modal2">Launch Modal 2</button>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
<!-- Modal 2 -->
<div id="Modal2" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Two</h4>
</div>
<div class="modal-body">
<p>Modal 2</p>
<div class="form-group">
<label for="inputText3">Company:</label>
<xp:inputText id="inputText3">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="1"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<div class="form-group">
<label for="inputText4">Email:</label>
<xp:inputText id="inputText4">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="2"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
<button class="btn btn-primary" data-toggle="modal" href="#Modal3">Launch Modal 3</button>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button> </div>
</div>
<!-- Modal 3 -->
<div id="Modal3" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Three</h4>
</div>
<div class="modal-body">
<p>Modal 3</p>
<div class="form-group">
<label for="inputText7">Bootstrap JS Modal:</label>
<xp:inputText id="inputText7">
<xp:this.attrs>
<xp:attr name="class" value="form-control">
</xp:attr>
<xp:attr name="data-tabindex" value="1"></xp:attr>
</xp:this.attrs>
</xp:inputText>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The Bootstrap-Modal jQuery plugin can be downloaded from GitHub: Bootstrap-Modal Plugin

Wednesday, 20 May 2015

Bootstrap JS Modal plugin in XPages: Trigger via JavaScript including Modal Options

In the previous blog post, Bootstrap JS Modal plugin in XPages: Introduction, I showed how a standard Bootstrap JS Modal can be used in XPages. In this blog post I will show how the Bootstrap JS Modal can be triggered via JavaScript including some Modal Options. In the example below I use a button to display the Modal. But let's first look at the available Modal Options. In the table below the available Modal Options are displayed by Name, Type, Default value and Description.

Modal Options
Important: Modal Options can be used through data attributes or JavaScript. For data attributes it is important to append 'data-' to the option name, for example data-backdrop="true".

Name
Type
Default
Description
backdrop boolean or the string "static true Specifies whether the modal should have a dark overlay:
true - dark overlay
false - no overlay (transparent)
If you specify the value "static", it is not possible to close the modal when clicking outside of it
keyboard boolean true Specifies whether the modal can be closed with the escape key (Esc):
true - the modal can be closed with Esc
false - the modal cannot be closed with Esc
show boolean true Specifies whether to show the modal when initialized

In what way can we within XPages trigger the Bootstrap JS Modal via JavaScript, add Modal Options and show the Modal through a button. At first we create the button and the Modal.

<!-- Show the modal via a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
</xp:button>

In this situation, we do NOT use attributes in the button properties as in the example in the previous blog post.

<!-- Modal -->
<div id="Modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Bootstrap JS Modal</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. Bootstrap JS Modal plugin in XPages: Trigger Via JavaScript including Modal Options</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Furthermore we need the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. You can add the XSnippet to the Script Libraries. 



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

The script itself can be made up as follows. The name of the ids in the script must correspond with the id of the Button and the id of the Modal.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(function(){
x$("#{id:button1}").click(function(){
x$("#{id:Modal1}").modal(
{backdrop: true,
keyboard: false,
show: true
}
);
});
});
]]></xp:this.value>

The result is a responsive Bootstrap JS Modal which is triggered through JavaScript with a dark overlay (backdrop: true) and that can NOT be closed with the Escape key (keyboard: false)





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>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(function(){
x$("#{id:button1}").click(function(){
x$("#{id:Modal1}").modal(
{backdrop: true,
keyboard: false,
show: true
}
);
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<!-- Show the modal via a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg"></xp:button>
<!-- Modal -->
<div id="Modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">
Bootstrap JS Modal
</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. Bootstrap JS Modal plugin in XPages: Trigger Via JavaScript including Modal Options.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the following blog post the Methods and Events will be explained in more detail.

Monday, 18 May 2015

Bootstrap JS Modal plugin in XPages: Introduction

The upcoming blog posts were actually meant for the new Bootstrap in XPages series but lately I've had several questions about how to use a Bootstrap JS Modal in XPages. In this short series I will show some examples of how the Bootstrap JS Modal plugin can be used in XPages.
The Bootstrap JS Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive. The plugin can be included individually, using Bootstrap's individual modal.js file, or using bootstrap.js or bootstrap.min.js. It can be used to display alert popups, videos, images and input fields. The Bootstrap JS Modal is divided into three primary sections: the header, body, and footer. All the code and styles are predefined by Bootstrap.

In this introduction I will give a basic example of a standard Bootstrap JS Modal whereby I use a button to trigger the Modal. Hereby it is necessary to make some adjustments to the standard Bootstrap 'syntax' as shown below.

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Modal1">Open Modal</button>

This does not work for a button in an XPage / Custom Control. The following components will need to be adjusted accordingly: class = "btn btn btn Info-lg", data-toggle = "modal" and data-target = "# Modal1". For data-toggle = "modal" and data-target = "# Modal1" you can use attributes in the button properties and for class = "btn btn btn info-lg" the property styleClass should be used.


<!-- Trigger the modal with a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal"></xp:attr>
<xp:attr name="data-target" value="#Modal1"></xp:attr>
</xp:this.attrs>
</xp:button>

If we look at the Bootstrap JS Modal itself we can divide it into two parts, the Modal and Content part. A short explanation of the Model part: The parent <div> of the modal must have an ID that is the same as the value of the data-target attribute used to trigger the modal (in this example "Modal1").
The .modal class identifies the content of <div> as a modal and brings focus to it.
The .fade class adds a transition effect which fades the modal in and out. Remove this class if you do not want this effect.
The attribute role="dialog" improves accessibility for people using screen readers.
The .modal-dialog class sets the proper width and margin of the modal.

<!-- Modal -->
<div id="Modal1" class="modal fade" role="dialog">
<div class="modal-dialog">

A short explanation of the Content part: The <div> with class="modal-content" styles the modal (border, background-color, etc.). Inside this <div>, add the modal's header, body, and footer.
The .modal-header class is used to define the style for the header of the modal. The <button> inside the header has a data-dismiss="modal" attribute which closes the modal if you click on it. The .close class styles the close button, and the .modal-title class styles the header with a proper line-height.
The .modal-body class is used to define the style for the body of the modal. Add any HTML markup here; paragraphs, images, videos, etc.
The .modal-footer class is used to define the style for the footer of the modal. Note that this area is right aligned by default.

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Basic Bootstrap Modal</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The result is a standard responsive Bootstrap JS Modal.



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">
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<!-- Trigger the modal with a button in an XPage / Custom Control -->
<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal"></xp:attr>
<xp:attr name="data-target" value="#Modal1"></xp:attr>
</xp:this.attrs>
</xp:button>
<!-- Modal -->
<div id="Modal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Basic Bootstrap Modal</h4>
</div>
<div class="modal-body">
<p>The Bootstrap Modal is a lightweight multi-purpose JavaScript popup that is customizable and responsive.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In part two we will further expand the Bootstrap JS Modal.

Friday, 15 May 2015

Using a Bootstrap Multiselect List Box in XPages

In my current XPages project I was looking for a more Bootstrap 'like' multi-select List Box. In my search I came across the Bootstrap Multiselect jQuery plugin. Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown with a dropdown menu containing the single options as checkboxes.

To use the Multiselect plugin the files bootstrap-multiselect.js and bootstrap-multiselect.css need to be added to the XPage / Custom Control. In this basic example, I downloaded the Multiselect files and added the files to the WebContent folder in the Package Explorer.


<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="bootstrapmultiselect/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="bootstrapmultiselect/css/bootstrap-multiselect.css" type="text/css" />

Next I added a List Box to the Custom Control / XPage and set the multiple attribute to get a real multiselect Bootstrap List Box.

<xp:listBox id="listBox1" multiple="true" value="#{document1.Software}">
<xp:this.attrs><xp:attr name="multiple" value="multiple"></xp:attr></xp:this.attrs>
<xp:selectItem itemLabel="Notes Domino 9" itemValue="Notes Domino 9"></xp:selectItem>
<xp:selectItem itemLabel="XPages" itemValue="XPages"></xp:selectItem>
<xp:selectItem itemLabel="Bootstrap" itemValue="Bootstrap"></xp:selectItem>
<xp:selectItem itemLabel="jQuery" itemValue="jQuery"></xp:selectItem>
</xp:listBox>

Furthermore I needed the the great XSnippet by Mark Roden (again), x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. You can add the XSnippet to the Script Libraries.


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

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

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

The result is  a good looking responsive Bootstrap Multiselect List Box.


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">
<!-- Include the plugin's CSS and JS: -->
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapmultiselect/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="bootstrapmultiselect/css/bootstrap-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">
<xp:br></xp:br>
<div class="col-sm-2">Multiselect List Box</div>
<div class="col-sm-6">
<xp:listBox id="listBox1"
value="#{document1.Software}">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Notes Domino 9"
itemValue="Notes Domino 9">
</xp:selectItem>
<xp:selectItem itemLabel="XPages"
itemValue="XPages">
</xp:selectItem>
<xp:selectItem itemLabel="Bootstrap"
itemValue="Bootstrap">
</xp:selectItem>
<xp:selectItem itemLabel="jQuery"
itemValue="jQuery">
</xp:selectItem>
</xp:listBox>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

There are many configuration options. For a complete overview and download, I refer to the documentation.

Wednesday, 13 May 2015

New blog series: Bootstrap in XPages


Starting next week I will begin with a new blog series, Bootstrap in XPages. In the recent past I already have a number of blog posts dedicated on this blog to Bootstrap in XPages. If you're interested in using Bootstrap in XPages check out these blog post:
You can also download the first version of the demo database XPages and more.
The database is related to the above blog posts.
For more information and download see the  blog post Demo Database XPages And More.
You can also already watch my contribution to NotesIn9 about using Select2 in XPages. For more information see my blog post My appearance on NotesIn9.

Next week I will start with a short introduction. So stay tuned!

Friday, 8 May 2015

Superb XPages topics that have been shared

During the first quarter of 2015 (actually the first four months) some superb XPages (and other) topics have been shared. In this blog post my summary of the highlights.
First of all we have had some superb webinars. In case you missed the webinars below these were, in my opinion, the most innovative. Furthermore, David Leedy (NotesIn9) also shared some great topics with the community. And of course Mark Roden with the IBMSBT in XPages and Bluemix series, Fredrik Norling with the Moving on with Excel Export series, Eric McCormick  with the Servlets series, Steve Zavocki with the Using a DB2 Datasource in XPages series and Paul Withers with the XOTS: Background and Multithreaded Tasks OpenNTF the Domino API Way series.
IBM Champions thanks for sharing this knowledge with the Notes Domino and XPages community.
Furthermore, thanks to everyone who shares his knowledge with the community: respect!

Webinars

1. Webinar Transformations: Smart Application Migration to XPages
By Oliver Busse
Migrating legacy applications with XPages without using any third party tools can be hard. Your code that was built and maintained over the years should be reused and ported to a current XPages environment. Oliver Busse will show you how to benefit from the possibilities of using Java in XPages to reproduce the functionality you already have and extend it to the next level.
For more information: My slides & demo app from today's webinar of TLCC & Teamstudio


2. Webinar Using jQuery DataTables in IBM XPages
By Oliver Busse
This is an addition to the TLCC & Teamstudio webinar from March 17.
For a current project I looked for a way to extend HTML tables to display a fixed header row, a static height and a way to scroll through the data. I also wanted the first column to be fixed, too. After some researches I found the great jQuery plugin called DataTables. The fixed header row is a default feature, the fixed column can be added as an extension very easily.
For more information : Using DataTables with XPages


3. Webinar Presenting Data - An Alternative to the View Control
By Paul Della-Nebbia
In this webinar, Paul Della-Nebbia, an IBM Champion, will show how to implement a different alternative for displaying information from Domino views. Paul will cover how to use the Dojo Data Grid (included with XPages) to display a data grid that provides unique features like infinite scrolling, click to sort column headers, adjustable column widths, filtering, and the ability to drag and drop column headers to reorder. As the user scrolls through, the view data is retrieved as needed which improves performance and usability.


Some of my highlights of NotesIn9

1. OpenNTF - NotesIn9 175 - XPages Extension Library goes Responsive Part II
A video collaboration between the XPages development team and David Leedy's Notes In 9 Series, showing off the latest additions to the Bootstrap plugin in the XPages Extension Library.


2. NotesIn9 174: Getting Started with Custom Renderers
In this show Oliver Busse returns with a great show on how to get started with Custom Renderers.


3. NotesIn9 173: Getting Started with Servlets
This is one of those shows that I think is really important. Today we welcome Eric McCormick, a new contributor and IBM Champion, to the show.  Eric did a geat demo showing us how to get started using Java to make Servlets inside our XPages Applications.  This opens a lot of doors to expose your data to applications outside of the Domino server.


We have a great community !!!!! 

Friday, 1 May 2015

Using a responsive jQuery Gallery for images and videos in XPages

In one of my recent projects XPages one of the questions of the applicant was to implement a responsive image / video gallery. Hereby the possibility should consist to view the images / video 'full screen' as well as the ability to display thumbnails below the gallery. In this article I will give an example in which in a simple manner a responsive gallery can be added to an XPage / Custom Control. I use in this example Fotorama, a simple, stunning, but powerful jQuery gallery. To use Fotorama the files fotorama.css and fotorama.js need to be added to the XPage / Custom Control. Fotorama's CDN is provided by CDNJS which means that we can use the following "links".

<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css" rel="stylesheet">
</link><!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>
<!-- 16 KB -->

Another option is to download the Fotorama files and add the files to the WebContent folder in the Package Explorer.


<!-- fotorama.css & fotorama.js. -->
<xp:this.resources>
<xp:styleSheet href="/fotorama.css"></xp:styleSheet>
</xp:this.resources>
<script type="text/javascript" src="fotorama/fotorama.js"></script>

For the photos which should eventually be added to the gallery I created a folder 'images' in the WebContent folder in the Package Explorer.


Further I imported the photos which should be used in the galley into the newly created Folder 'ímages'.



Setting up fotorama on an XPages / Custom Control is very simple. Fotorama initialized automatically in all the blocks with the fotorama class.

<div class="fotorama" ..... </div>

Fotorama’s dimensions are the dimensions of the first image (or column). Other pictures are scaled proportionally to fit. To reserve the space on the page before the first image is loaded, use data-width and data-height. But solely set a data-width and data-height makes the gallery NOT responsive! To make fotorama responsive, we have to define width in percents and aspect ratio.

<div class="fotorama"
     data-width="100%"
     data-ratio="800/600">
</div>

For customizing the basic settings of Fotorama I used the following data-attributes: data-nav for displaying the thumbnails, data-allowfullscreen for allowing Fotorama to enter fullscreen, data-arrows for controlling the way users interact with the Fotorama, data-width to make the gallery responsive and data-fit for stretching and cropping the image to completely cover the Fotorama. There are many other possibilities for adjusting the default settings.

<div class="col-md-7">
<div class="fotorama" data-nav="thumbs" data-allowfullscreen="true" data-arrows="true" data-click="true" data-swipe="false" data-width="100%" data-ratio="800/600">
<!-- ↑ The same as data-ratio="4/3" or data-ratio="1.3333333333". -->
<img src="images/Photo1.jpg" data-fit="cover"></img>
<img src="images/Photo2.jpg" data-fit="cover"></img>
<img src="images/Photo3.jpg" data-fit="cover"></img>
<img src="images/Photo4.jpg" data-fit="cover"></img>
<img src="images/Photo5.jpg" data-fit="cover"></img>
<img src="images/Photo6.jpg" data-fit="cover"></img>
<img src="images/Photo7.jpg" data-fit="cover"></img>
<img src="images/Photo8.jpg" data-fit="cover"></img>
</div>
</div>

The final result is a responsive image gallery with all the options as indicated by the applicant.


Fotorama can also be used for videos.
To add a video from YouTube or Vimeo just link to the video page. Fotorama will automatically fetch the splash images.

<h1>Video Gallery</h1>
<div class="fotorama">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
</div>

You can use the same data-attributes as for the image gallery.

<h1>Video Gallery</h1>
<div class="fotorama" data-nav="thumbs" data-fit="cover"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
<a href="https://vimeo.com/61524508">Omnia - I don't speak Human</a>
<a href="https://vimeo.com/60063689">Omnia - Saltatio Vita</a>
<a href="https://vimeo.com/49597866">Omnia - Fee Ra Huri</a>
</div>

The final result is a responsive video gallery.

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">
<!-- fotorama.css & fotorama.js. -->
<link
href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css"
rel="stylesheet">
</link><!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js">
</script>
<!-- 16 KB -->
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>A simple, stunning, powerful jQuery gallery</h1>
</div>
<div class="col-md-7">
<h1>Images Gallery</h1>
<div class="fotorama" data-nav="thumbs"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">
<!-- ↑ The same as data-ratio="4/3" or data-ratio="1.3333333333". -->
<img src="images/Photo1.jpg" data-fit="cover"></img>
<img src="images/Photo2.jpg" data-fit="cover"></img>
<img src="images/Photo3.jpg" data-fit="cover"></img>
<img src="images/Photo4.jpg" data-fit="cover"></img>
<img src="images/Photo5.jpg" data-fit="cover"></img>
<img src="images/Photo6.jpg" data-fit="cover"></img>
<img src="images/Photo7.jpg" data-fit="cover"></img>
<img src="images/Photo8.jpg" data-fit="cover"></img>
</div>
</div>
<div class="col-md-7">
<h1>Video Gallery</h1>
<div class="fotorama" data-nav="thumbs" data-fit="cover"
data-allowfullscreen="true" data-arrows="true" data-click="true"
data-swipe="false" data-width="100%" data-ratio="800/600">
<a href="https://vimeo.com/7863677">Omnia - Alive</a>
<a href="https://vimeo.com/50046920">Omnia - Dance Until We Die</a>
<a href="https://vimeo.com/61524508">Omnia - I don't speak Human</a>
<a href="https://vimeo.com/60063689">Omnia - Saltatio Vita</a>
<a href="https://vimeo.com/49597866">Omnia - Fee Ra Huri</a>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For download and other information: Fotorama - A simple, stunning, powerful jQuery gallery