Superb XPages topics that have been shared

May 7, 2015, 3:54 pm

≫ Next: New blog series: Bootstrap in XPages

≪ Previous: Using a responsive jQuery Gallery for images and videos in XPages

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 !!!!!

↧

New blog series: Bootstrap in XPages

May 12, 2015, 3:16 pm

≫ Next: Using a Bootstrap Multiselect List Box in XPages

≪ Previous: Superb XPages topics that have been shared

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!

↧

Using a Bootstrap Multiselect List Box in XPages

May 14, 2015, 3:57 pm

≫ Next: Bootstrap JS Modal plugin in XPages: Introduction

≪ Previous: New blog series: Bootstrap 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.

<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.

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="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.

↧

Bootstrap JS Modal plugin in XPages: Introduction

May 18, 2015, 2:54 pm

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

≪ Previous: Using a Bootstrap Multiselect List Box in XPages

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.

<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.


<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.


<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>

<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>

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

<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.

↧

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

May 19, 2015, 3:36 pm

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

≪ Previous: Bootstrap JS Modal plugin in XPages: Introduction

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.


<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.


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

<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.

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>

<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg"></xp:button>

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

<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.

↧

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

May 25, 2015, 2:40 pm

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

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

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.


<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg">
</xp:button>


<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>

<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>

<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>

<xp:button value="Open Modal" id="button1" styleClass="btn btn-info btn-lg"></xp:button>
<xp:br></xp:br>

<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>

<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>

<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

↧

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

May 28, 2015, 10:46 pm

≫ Next: IBM Connect 2015 - Seize the Moment

≪ Previous: Bootstrap JS Modal plugin in XPages: Stackable Modals using the Bootstrap-Modal jQuery 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.

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">

<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

↧

IBM Connect 2015 - Seize the Moment

June 1, 2015, 6:48 am

≫ Next: Reusable Bootstrap Text Fields including Validation and Font Awesome icons in XPages

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

Tuesday June 9 - DeFabrique - Utrecht - The Netherlands

Rapid developments in technology present your organization with huge challenges — in all areas of your business. With all the changes in the world, one thing is for certain: if you don´t change, you won´t be in business tomorrow. There are solutions to help you face these challenges and threats — and seize new opportunities. The time for action is today.

Analytics, Cloud, Commerce, Mobile, Security, Infrastructure and Systems are the changing face of technology. Come to IBM Connect 2015 and be inspired by the future of business. Experience what these developments mean for you and your business, whether IT , Finance, Marketing or HR. Discover how you can change.

Connect with IBM
Join the Twitter conversation
With #ConnectBNL
Follow @ConnectBenelux

For more information (Calendar - Special Events - Location - Partners): IBM Connect 2015

↧

Reusable Bootstrap Text Fields including Validation and Font Awesome icons in XPages

June 2, 2015, 3:05 pm

≫ Next: Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages

≪ Previous: IBM Connect 2015 - Seize the Moment

A few months ago I wrote a blog post about Reusable Bootstrap Text Fields. In the past period I have received some questions about Reusable Bootstrap Text Fields and Reusable Bootstrap Rich Text Fields. This concerned in particular the validation of these fields and the use of Font Awesome icons. For detailed information I refer to the blog post Validation Reusable Text Fields. For those who have asked questions on this subject via Direct Messages on Twitter or for those who missed my blog posts on this subject below is a summary of the code for the Custom Control, the Custom Properties, the XPage and the final end result.

Code Custom Control
Remark: Add the following code to a Custom Control and save the Custom Control (in this example as ccvalidationBSTextField)

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xpt="http://www.openntf.org/xsp/xpt"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:div>
<xp:this.styleClass><![CDATA[#{javascript:"form-group" + ( getComponent("inputText1").isValid() ? "" : " has-error" )}]]></xp:this.styleClass>
<xp:label styleClass="col-sm-2 control-label" for="inputText1"
value="${compositeData.fieldLabel}" />
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon">
<xp:text escape="true" id="computedField2" styleClass="${compositeData.faicon}" tagName="i">
</xp:text>
</span>
<xp:inputText type="text" id="inputText1"
loaded="${!empty compositeData.placeholder}"
value="#{compositeData.dataSource[compositeData.fieldName]}"
required="${compositeData.required}">
<xp:this.attrs>
<xp:attr name="placeholder" value="${compositeData.placeholder}"></xp:attr>
</xp:this.attrs>
<xp:this.validators>
<xp:validateRequired message="#{javascript:compositeData.fieldLabel + ' is required'}">
</xp:validateRequired>
</xp:this.validators>
</xp:inputText>
</div>
<xp:text escape="true" id="computedField1" styleClass="help-block" value="${compositeData.helpText}">
<xp:this.rendered><![CDATA[#{javascript:getComponent("inputText1").isValid() && compositeData.helpText != null && currentDocument.isEditable()}]]></xp:this.rendered>
</xp:text>
<xp:message id="message1" for="inputText1" styleClass="help-block"></xp:message>
</div>
</xp:div>
</xp:view>

Remark: After adding the Custom Control on the XPage there are for the Reusable Bootstrap Text Field some Custom Properties available.

Code XPage
Remark: Add the Custom Control to the XPage and enter the correct information/date in the Custom Properties. Save the XPage and view the XPage in the browser. Try saving the document without entering data and check out the validation.

<?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.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Bootstrap Reusable Fields<xp:span style="color:rgb(255,255,255)"></xp:span>
<small>Including Validation</small></h1>
</div>
<xp:br></xp:br>
<xc:ccvalidationBSTextField required="true"
dataSource="#{document1}" fieldLabel="FirstName"
fieldName="FirstName" helpText="FirstName is a mandatory field"
placeholder="First Name" faicon="fa fa-user">
</xc:ccvalidationBSTextField>
<xp:br></xp:br>
<xc:ccvalidationBSTextField required="true"
dataSource="#{document1}" fieldLabel="LastName"
fieldName="LastName" helpText="LastName is a mandatory field"
placeholder="Last Name" faicon="fa fa-user">
</xc:ccvalidationBSTextField>
<xp:br></xp:br>
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<xp:button value="Save" id="button1" styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:openPage name="/BootstrapTextFieldsWithValidation.xsp"></xp:openPage>
</xp:this.action></xp:eventHandler></xp:button>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

The End Result
A Reusable Bootstrap Text Field including Validation and Font Awesome icons

For detailed information regarding Reusable Bootstrap Rich Text Fields including validation I refer to the blog post: Validation Rich Text Field.

↧

Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages

June 2, 2015, 10:49 pm

≫ Next: Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages

≪ Previous: Reusable Bootstrap Text Fields including Validation and Font Awesome icons in XPages

A few months ago I wrote a post blog post about how to use the Bootstrap 3 DateTime Picker in XPages, Using Bootstrap DateTimePicker. In this revised blog post I will show how the Bootstrap 3 DateTime Picker can be used in XPages using a slightly different appraoch. I am using version 4 of the the Bootstrap 3 DateTime Picker and version 2.10 of Moment, the latest revisions. There are some major changes in the Options and Functions. The plugin is actually completely rewritten.

Minimal Requirements
- jQuery
- Moment.js
- Bootstrap.js (transition and collapse are required)
- Bootstrap Datepicker script
- Bootstrap CSS
- Bootstrap Datepicker CSS
- Locales: Moment's locale files

Adding the JS and CSS files
To use the Bootsrap 3 DateTime Picker in XPages first the Bootstrap 3 DateTime Picker and Moment files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the Bootstrap DateTime Picker files from GitHub : DateTimePicker
You can also download the Moment files from GitHub: Moment

Next the JavaScript files / Stylesheet bootstrap-datetimepicker.css, bootstrap-datetimepicker.js and moment-with-locales.js must be included on the XPage or Custom Control. In this example I add the files directly to the XPage. Further I load Moment first to avoid any possible sequential loading problems. Hereby I use the provided solution by Sven Hasselbach. I use moment-with-locales.js in order to make use of the Locales files.

<xp:this.properties>
<xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="moment210/moment-with-locales.js"/>
</xp:this.attributes>
</xp:headTag>

<script type="text/javascript" src="bootstrapdatetimepicker4/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="/bootstrapdatetimepicker4/css/bootstrap-datetimepicker.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 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 DateTime Picker (input-group).

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

AMD Loader
Finally, the JavaScript file bootstrap-datetimepicker.js needs to be adjusted. Reason: newer jQuery plugins try to use its AMD loader, but that doesn't play well with the Dojo implementation in XPages. You have to change the source code of the library. In the JavaScript file (bootstrap-datetimepicker.js) find the lines that determine if it can use the AMD loader. They can mostly be found at the beginning or end of a JavaScript file. Below the modifications made in the bootstrap-datetimepicker.js file.

(function (factory) {
'use strict';
//if (typeof define === 'function'&& define.amd) {
// AMD is used - Register as an anonymous module.
//define(['jquery', 'moment'], factory);
//} else if (typeof exports === 'object') {
//factory(require('jquery'), require('moment'));
// } else {
// Neither AMD nor CommonJS used. Use global variables.
if (typeof jQuery === 'undefined') {
throw 'bootstrap-datetimepicker requires jQuery to be loaded first';
}
if (typeof moment === 'undefined') {
throw 'bootstrap-datetimepicker requires Moment.js to be loaded first';
}
factory(jQuery, moment);
// }

Basic Setup in XPages
<div class="page-header">
<h1>
Datetimepicker V4 <xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap plugin</small></h1>
</div>
<div class="col-sm-12">
<div class="well well-small">Format date, Locales and placeholder with an Attribute</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<xp:inputText id="inputText2" styleClass="form-control" value="#{document1.DateOfBirth}">
<xp:this.attrs>
<xp:attr name="data-date-format" value="DD-MM-YYYY hh:mm:ss"></xp:attr>
<xp:attr name="placeholder" value="Enter data and time"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

The result is a good looking Bootstrap style DateTime Picker Control.

Example with Options
In the example below, I use the following options (for a complete list I refer to the documentation: Options ):
- locale: 'nl'
- showTodayButton:true - Show the "Today" button in the icon toolbar.
- showClose: true - Show the "Close" button in the icon toolbar.
- daysOfWeekDisabled: [0,6] - Disables the section of days of the week, e.g. weekends.
- format:('DD-MM-YYYY, HH:mm:ss') - Format Day, Month, Year including 24 hour display

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker2}" ).datetimepicker({
locale: 'nl',
showTodayButton:true,
showClose: true,
daysOfWeekDisabled: [0,6],
format:('DD-MM-YYYY HH:mm:ss')
});
});
]]></xp:this.value>
</xp:scriptBlock>

<div class="col-sm-12">
<div class="well well-small">Date Time Picker including options</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<xp:inputText id="inputText3" styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>

The final result.
Remark: If only the date should be displayed it can be specified in the Option Format.
Format dictates what components are show, eg DD-MM-YYYY will not display the time picker.

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.properties>
<xp:parameter name="xsp.resources.aggregate" value="true" />
</xp:this.properties>
<xp:this.resources>
<xp:headTag tagName="script">
<xp:this.attributes>
<xp:parameter name="type" value="text/javascript" />
<xp:parameter name="src" value="moment210/moment-with-locales.js"/>
</xp:this.attributes>
</xp:headTag>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapdatetimepicker4/js/bootstrap-datetimepicker.js" clientSide="true"></script>
<link rel="stylesheet" href="bootstrapdatetimepicker4/css/bootstrap-datetimepicker.css" />
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker1}" ).datetimepicker({
locale: 'nl'
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:datetimepicker2}" ).datetimepicker({
locale: 'nl',
showTodayButton:true,
showClose: true,
daysOfWeekDisabled: [0,6],
format:('DD-MM-YYYY HH:mm:ss')
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="page-header">
<h1>Datetimepicker V4<xp:span style="color:rgb(255,255,255)"></xp:span>
<small>Bootstrap plugin</small></h1>
</div>
<div class="col-sm-12">
<div class="well well-small">Format date, Locales and placeholder with an Attribute</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<xp:inputText id="inputText2" styleClass="form-control" value="#{document1.DateOfBirth}">
<xp:this.attrs>
<xp:attr name="data-date-format" value="DD-MM-YYYY hh:mm:ss"></xp:attr>
<xp:attr name="placeholder" value="Enter data and time"></xp:attr>
</xp:this.attrs>
<xp:this.converter>
<xp:convertDateTime type="date" dateStyle="short">
</xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="well well-small">Date Time Picker including options</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<xp:inputText id="inputText3" styleClass="form-control">
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:inputText>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

There are other ways to integrate the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages but in this particular case I have chosen for a different approach which also works properly.

↧

Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages

June 7, 2015, 10:59 pm

≫ Next: IBM Connect 2016

≪ Previous: Using the Bootstrap 3 DateTime Picker Plugin including Moment.js and Locales in XPages

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. In this blog post I will show how to 'migrate' in a simple manner to the new version including the most simple AMD Loader fix that always works without any problem. In the following example is transitioned from version 3.5.1 to 4.0.0 (for using Select2 version 3.5.1 see the blog post Using Select2 in XPages Part I.
In order to use Select2, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Select2 version 4.0.0.

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 select2V4 has been added in the WebContent Folder.

Next the JavaScript and CSS files, select2.js and select2.css, must be included on the XPage or Custom Control. In this example I add the files to a Custom Control.

<script type="text/javascript" src="select2v4/js/select2.js"></script>
<link rel="stylesheet" href="select2v4/css/select2.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 Custom Control / XPage. The XSnippet can be added to the Script Libraries.

3. Removed in the second line define.amd and replace it with false

4. Save the JavaScript file select2.js

Responsive design - Percent width
Select2's width can be set to a percentage of its parent to support responsive design.
The best way to ensure that Select2 is using a percent based width is to inline the style declaration into the tag.
In the All Properties of the Combo Box set the Property style to the desired percentage.
I always use: style="width: 100% !important;"

Basic Setup Combo Box in XPages
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list;}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
</div>

The result is a good looking Bootstrap style select box.

Example with List Box (multi value)
Select2 also supports multi-value select boxes. The select below is declared with the multiple data-attribute.

<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript: @DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
<div class="panel-footer">List Box - Multiple Values</div>
</div>
</div>

The result is a good looking Bootstrap style multi select box.

Code Custom Control
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="select2v4/js/select2.js"></script>
<link rel="stylesheet" href="select2v4/css/select2.css" />
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).select2({
placeholder: "Select a category",
allowClear: true
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
allowClear: true
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div class="page-header">
<h1>Select2 - Version 4.0.0 <xp:span style="color:rgb(255,255,255)">.</xp:span>
<small>Combo Box / List Box</small>
</h1>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - Combo Box
<xp:comboBox id="comboBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var arr = new Array("");
var res = @DbLookup("", "byKeyWord", "Category", 2);
var list = arr.concat(res);
return list;}]]></xp:this.value>
</xp:selectItems>
</xp:comboBox>
</div>
<div class="panel-footer">Combo Box - Single Value</div>
</div>
</div>
<div class="col-md-7">
<div class="panel panel-default">
<div class="panel-body">
Select2 - List Box
<xp:listBox id="listBox1" value="#{document1.Categories}" style="width: 100% !important;">
<xp:this.attrs>
<xp:attr name="multiple" value="multiple"></xp:attr>
</xp:this.attrs>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript: @DbLookup("", "byKeyWord", "Software", 2);}]]></xp:this.value>
</xp:selectItems>
</xp:listBox>
</div>
<div class="panel-footer">List Box - Multiple Values</div>
</div>
</div>
</xp:panel>
</xp:view>

For more Core Options I refer to the documentation: Options.

Concluding Remark
In the above examples I've used the following basic view.

↧

IBM Connect 2016

June 10, 2015, 6:10 am

≫ Next: The Future of Domino Application Development, XPages, Notes and Verse

≪ Previous: Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages

A New Way to Engage — Save the Date!
Mark your calendars for Connect 2016 in Orlando! Get ready to explore the future of Enterprise Social Software and Digital Experience solutions and innovations, driven by IBM's unparalleled expertise in cloud, analytics, mobile and social.

Mark your calendar now for this exciting event! Check back in early August to find out about registration and details on how you can become a speaker.

For some highlights IBM Connected 2015 see my earlier blog post: IBM ConnectED 2015.

For more information visit the IBM site: IBM Connect 2016

↧

The Future of Domino Application Development, XPages, Notes and Verse

June 12, 2015, 4:35 am

≫ Next: Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I

≪ Previous: IBM Connect 2016

About four weeks ago we have seen what IBM has to offer regarding the future of Domino (XPages) Application Development. In case you missed it below the webinar and the associated slides.

The content of this webinar was:
Learn IBM's product directions for Domino and XPages application development from 3 speakers from the IBM development team: Pete Janzen, Martin Donnelly, and Brian Gleeson.
The Domino application development landscape is about to get a whole lot richer. Not only is IBM giving developers new features that will enhance their on-premises platform, XPages runtime and Domino Designer, but they will show how they are bringing the value of Domino to the cloud with new services for IBM Bluemix. New responsive design features, RDBMS data sources, document encryption on the Web, and Bluemix: there's a lot to pack in!

Coming Tuesday, June 16th, there is another webinar, Domino, Notes and Verse - Where are we and What's the Future?

Contents of this webinar will be:
Come hear from IBM's product team and learn where Notes, Domino and Verse are headed in this webinar for administrators, application developers and managers. The product team from IBM will cover the following topics:
Domino and Notes Directions with Scott Vrusho - Learn the future directions of the Notes and iNotes client, and the Domino server.
Domino Security with Dave Kern and Kevin Lynch - Learn how the recent changes to the Domino server have enabled Domino to be a very secure platform and learn what you should do to make sure your Domino servers are using the latest security enhancements.
IBM Verse with Scott Souder - Scott will review what IBM Verse is and where it is going. Then hold onto your seat as Scott shows you why Verse is the new way to work!
For this webinar you can register on the website of TLCC: Register

This week Chris Miller also wrote an excellent blog post about what we can expect - Update on IBM Verse and the IBM Messaging Roadmap.
There is more to come next week so stay tuned and register for the upcoming webinar next Tuesday.

↧

Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I

June 15, 2015, 1:08 am

≫ Next: Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I

≪ Previous: The Future of Domino Application Development, XPages, Notes and Verse

Many Bootstrap Plugins have moved during the past period to a new version. Examples include among others are Select2 and the Bootstrap Date-Time Picker. Also the Bootstrap FileInput Plugin has moved to a new version, at this point version 4. In this mini-series I will show how the new version can be used in XPages. In this introduction I will explain the basic setup.

The Bootstrap FileInput Plugin is an enhanced HTML 5 file input for Bootstrap 3.x with file preview for various files, offers multiple selection, and more. The plugin allows you a simple way to setup an advanced file picker/upload control built to work specially with Bootstrap CSS3 styles. It enhances the file input functionality further, by offering support to preview a wide variety of files i.e. images, text, html, video, audio, flash, and objects. In addition, it includes AJAX based uploads, dragging and dropping files, viewing upload progress, and selectively previewing, adding, or deleting files.
In order to use the Bootstrap FileInput Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Bootstrap-FileInput.

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 bootstrapfileinput4 has been added in the WebContent Folder.

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

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.

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

The script itself can be made up as follows. In this example I use a few Options. In the next few blog posts these options will be explained in more detail.

<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>

Basic Setup fileUpload in XPages
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>

Remark: In this example I use the data-attribute accept with a value image/*. This means that only images can be added to the FileInput. The data attributes will be described in more detail in the next few blog posts.

The result is a good looking Bootstrap FileInput.

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.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bootstrapfileinput4/js/fileinput.js"></script>
<link rel="stylesheet" href="bootstrapfileinput4/css/fileinput.css" media="all" type="text/css" />
<xp:scriptBlock id="scriptBlockInitFile">
<xp:this.value>
<![CDATA[
$(document).ready(
function() {
$('input[type=file]').fileinput({
previewFileType: "image",
browseClass: "btn btn-primary",
browseLabel: "Browse",
browseIcon: '<i class="glyphicon glyphicon-plus"></i>',
removeClass: "btn btn-danger",
removeLabel: "Delete",
removeIcon: '<i class="glyphicon glyphicon-trash"></i>',
uploadClass: "btn btn-info",
uploadLabel: "Upload",
uploadIcon: '<i class="glyphicon glyphicon-upload"></i>',
});
}
);
]]>
</xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="page-header">
<h1>
FileInput
<xp:span style="color:rgb(255,255,255)"></xp:span><small>Bootstrap FileInput Plugin</small>
</h1>
</div>
<xp:fileUpload id="fileUpload1"
value="#{document1.fileAttachment}">
<xp:this.attrs>
<xp:attr name="accept" value="image/*" />
</xp:this.attrs>
</xp:fileUpload>
<xp:br></xp:br>
<xp:fileDownload rows="30" id="fileDownload1"
displayLastModified="true" value="#{document1.fileAttachment}"
hideWhen="true" allowDelete="true">
</xp:fileDownload>
<xp:button value="Save Document" id="button1" styleClass="btn btn-primary">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument></xp:saveDocument>
<xp:openPage name="/BootstrapFileInput4.xsp"></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog posts we will also look more closely at the new features of this Plugin. So stay tuned, there is more to come. For more information, see also my previous blog post Using FileInput in XPages.

↧

Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I

June 15, 2015, 10:42 pm

≫ Next: IBM Notes Domino Next

≪ Previous: Bootstrap in XPages: Using the new Bootstrap Fileinput Plugin in XPages Part I

In this blog post I show how through the Lightbox Plugin the functionality of the Bootstrap JS Modal can be extended. Lightbox for Bootstrap 3 utilizes Bootstraps modal plugin to implement a lightbox gallery. In other words, a lightbox module for Bootstrap that supports images, YouTube videos, and galleries - built around Bootstrap's Modal plugin. In this first part of this series, the basic setup will be explained.
In order to use the Lightbox Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Lightbox for Bootstrap 3.

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 lightbox has been added in the WebContent Folder.

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

Initializing the plugin
To to initialize the plugin the script below is used in this basic setup.

<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
var a = this.modal_content.find('.modal-footer a');
if(a.length > 0) {
a.click(function(e) {
e.preventDefault();
this.navigateTo(2);
}.bind(this));
}
}
});
});
});
</script>

Basic setup in XPages
<div class="col-sm-4">
<a href="images/bs.png" data-toggle="lightbox"
data-title="Lightbox Plugin" data-footer="Basic Setup">
<img src="images/Photo1.jpg" class="img-responsive"></img>
</a>
</div>

Remark: you can use for example the modal plugin title option via data-title and the custom footer tag using data-footer.

The result is a responsive Lightbox using the 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">
<script type="text/javascript" src="lightbox/ekko-lightbox.js"></script>
<link rel="stylesheet" href="lightbox/ekko-lightbox.css"
type="text/css" />
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
var a = this.modal_content.find('.modal-footer a');
if(a.length > 0) {
a.click(function(e) {
e.preventDefault();
this.navigateTo(2);
}.bind(this));
}
}
});
});
});
</script>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-sm-4">
<a href="images/bs.png" data-toggle="lightbox" data-title="Lightbox Plugin" data-footer="Basic Setup">
<img src="images/bs.png" class="img-responsive"></img>
</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next post we will further expand the Lightbox Plugin.

↧

IBM Notes Domino Next

June 17, 2015, 12:39 pm

≫ Next: This is even nicer than XPages

≪ Previous: Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I

Domino, Notes, and Verse - Where Are We and Whats the Future?
Last Tuesday we have seen what IBM has in store for the future of Notes Domino and IBM Verse. In case you missed the webinar of Teamstudio and T.L.C.C. below the replay and the slides.

The content of this webinar was:
Come hear from IBM's product team and learn where Notes, Domino and Verse are headed in this webinar for administrators, application developers and managers. The product team from IBM will cover the following topics:
Domino and Notes Directions with Scott Vrusho - Learn the future directions of the Notes and iNotes client, and the Domino server.
Domino Security with Dave Kern and Kevin Lynch - Learn how the recent changes to the Domino server have enabled Domino to be a very secure platform and learn what you should do to make sure your Domino servers are using the latest security enhancements.
IBM Verse with Scott Souder - Scott will review what IBM Verse is and where it is going. Then hold onto your seat as Scott shows you why Verse is the new way to work!

For more information about the future of Domino (XPages) Application Development see the earlier blog post: The Future of Domino Application Development.

↧

This is even nicer than XPages

June 20, 2015, 3:02 am

≫ Next: Notes Domino 9.0.1 Fix Pack 4 includes TLS 1.2 and upgrades to Dojo 1.9.7 and CKEditor 4.4.3

≪ Previous: IBM Notes Domino Next

For a change something different than XPages and Bootstrap. Thursday night my daughter's son Noah was born. It was a long and heavy delivery. All is well with mother and child. For the first time I am a grandfather. Everyone is tired but very happy. He weighs 2890 gram and is 50 cm tall.

During the coming period I will be blogging somewhat less and I'm going to enjoy my grandchild :)

↧

Notes Domino 9.0.1 Fix Pack 4 includes TLS 1.2 and upgrades to Dojo 1.9.7 and CKEditor 4.4.3

June 21, 2015, 9:41 am

≫ Next: Notes Domino 9.0.1 Fix Pack 4 - XPages DatabaseName URL Parameter

≪ Previous: This is even nicer than XPages

Back to Notes Domino XPages and Bootstrap. Last week Fix Pack 4 was released. 9.0.1 Fix Pack 4 is a collection of low-risk, high-impact fixes to help customers safely avoid known issues. IBM strongly recommends that customers running Notes/Domino 9.0.1x upgrade to this latest Fix Pack since it addresses a small percentage of defects that impact the broadest set of customers.
9.0.1 Fix Pack 4 addresses defects in the Client, Server, Notes Browser Plug-in and Domino SE OpenSocial component and includes upgrades of Dojo and the CKEditor. Below an overview of the Fix Lists.

9.0.1 Fix Pack 4 Fix List descriptions:

Client

IFAY9QZGKG (LO82854) - Fixes issue where when a user attempts to add a private Google calendar to their Notes calendar, the error "Must be a calendar user to use Google Calendar private feeds" is received. (technote 1690894)
NNBN999LWB (LO76096) - Fixes issue where meetings sent from Outlook as rich text format, arrive in Notes as plain text emails. (technote 1511942)
JSTN9QJV73 (LO82640) - Fixes intermittent Notes Client crash on Startup / Launch
+IFAY9PMFDX (LO82254) - Fixes issue where the Notes Client refuses to launch after doing "Show Duplicate Calendar Entries". This is a regression in 9.0.1.
SHEZ9P3KAP (LO82001) - Fixes install failure when installing 9.0.1 FP2 or 9.0.1 FP3 on Windows due to low memory condition in Java.
RCFE9K5TRJ (LO80436) - Fixes Notes Client scaling issues with high screen resolutions.
+LQPG9SPCL4 (LO83822) - Fixes Notes Client hang when pasting certain Mac clipboard content (screenshot, Keynote, etc) into a Notes Rich Text Field. This is a regression in 9.0.1 FP3.
SHEZ9DCEWP (LO77845) - Fixes issue where the 'All Mail and Archives' search does not work when sever based archived policy is in place.

Server

JRED8DVKSU (LO58322) - Fixes issue where Domino's time will be wrong when DST is set to take place at a time other than 2am. If the DST change occurs at 11:59:59pm, DST will occur 22 hours early on Notes/Domino. If it occurs at midnight, it will be off by 2 hours because Domino does not actually change time until 2AM. This fix is OFF by default and controlled through a new Notes.ini DSTLAWTIME=x DSTLAWTIME not defined in Notes.ini -> Use default behavior of 2am for DST Begin, and 1am for DST End. DSTLAWTIME=Hour:Min;Hour:Min - Hour is 0-23, and Min is 0-59 - DST Time for the boundaries Begin/End. DSTLAWTIME=99 -> Windows only, use the value from stucture for DST Date Hour:Min. (technote 1687371)
TOCL9UJJU4 (LO84263) - Fixes issue where after installing the Domino JVM security patch, running Domino as a service no longer works
KLYH9QKT4B (LO82912) - Notes / Domino Support for TLS 1.2 (Transport Layer Security 1.2) with protocols: HTTP, SMTP, LDAP, POP3 & IMAP.
+RGAU9T8P4Y (LO83641) - Fixes LS2J Error With "Java Constructor Failed To Execute" after installing 901FP3. This is a regression in 9.0.1 FP3. (technote 1696682)
JACE98S37Z (LO76425) - Fixes issue where when replying to a mail that includes a graphic image, "HTMLAPI Problem converting to HTML" error occurs.
TCHL9SST8V (LO83505) - Fixes security issue in NSD (technote 1700029)
TMAI8UAJH9 (LO69373) - Fixes issue where the "Date of Creation of a message in the mail database becomes out of sync with the date column in the inbox.
+TSOE8KCJCP (LO63227) - Fixes issue where Fixup does not repair corrupt database with UNID index problems. This is a regression in 8.5.1.
JMDK9MA6EJ (LO81366) - Fixes memory overwrite caused by Domino Server crash due to improper string length being returned

iNotes

FLII9P8DA5 (LO82067) - Fixes issue where the message: "Wrong password entered for old password" error incorrectly appears when the user tries to change the password from iNotes in particular configurations. This is a regression in 8.5.3. (technote 1692952)
+MBOA9DDC3T (LO77864) - Fixed an issue where editing the subject of a message after Spell checking and choosing "Cancel Send" would result in the edits being ignored and sending the original subject. This is a regression in 9.0.
HMUH9Q58GQ (LO82455) - Fixed an issue where the error message "A problem has occurred which may have caused the current operation to fail" displayed when opening a specific email message with Internet Explorer 10.

More information : IBM Notes/Domino 9.0.1 Fix Pack 4 Release Notice
Download : Download Options for Notes & Domino 9.0.1 Fix Packs

CKEditor 4.4.3 Fixed Issues:

Fixed XSS vulnerability in the Preview plugin reported by Mario Heiderich of Cure53.
#12110: Fixed: Editor crash after deleting a table. Thanks to Alin Purcaru!
#11897: Fixed: Enter key used in an empty list item creates a new line instead of breaking the list. Thanks to noam-si!
#12140: Fixed: Double-clicking linked widgets opens two dialog windows.
#12132: Fixed: Image is inserted with width and height styles even when they are not allowed.
#9317: [IE] Fixed: config.disableObjectResizing does not work on IE. Note: We were not able to fix this issue on IE11+ because necessary events stopped working. See a last resort workaround and make sure to support our complaint to Microsoft.
#9638: Fixed: There should be no information about accessibility help available under the Alt+0 keyboard shortcut if theAccessibility Help plugin is not available.
#8117 and #9186: Fixed: In HTML5 <meta> tags should be allowed everywhere, including inside the <body> element.
#10422: Fixed: config.fillEmptyBlocks not working properly if a function is specified.

New Features:

#12164: Added the "Justify" option to the "Horizontal Alignment" drop-down in the Table Cell Properties dialog window.

More info about the CKEditor : The best web text editor for everyone
More info about Dojo 1.9 : Dojo 1.9 Release Notes

↧

Notes Domino 9.0.1 Fix Pack 4 - XPages DatabaseName URL Parameter

June 22, 2015, 11:23 am

≫ Next: New Notes Domino XPages Position

≪ Previous: Notes Domino 9.0.1 Fix Pack 4 includes TLS 1.2 and upgrades to Dojo 1.9.7 and CKEditor 4.4.3

In IBM Notes/Domino 9.0.1 FixPack 4 and in releases containing the fix for SPR#MKEE9TKDEM, you may see an error page with the following error message:

CLFAD0382E: The databaseName URL parameter value is not one of the allowed database names. The parameter is &databaseName=otherserver!!app.nsf. The allowed names are configured in the option xsp.data.domino.param.databaseName.whitelist.

There has been a change in the XPages default behavior, that now requires that the allowable databaseNames be configured in a whitelist. The white list is an option that lists allowed databaseNames. Where the whitelist has not been configured, the error above will occur for remote applications (i.e., applications that are not on the current server). There is an option to revert to the previous behavior but there are security implications associated with that decision.
The reason for this change is because of security concerns around malicious users causing the server to run slowly in a Denial Of Service attack. A malicious browser user can use a URL to point the XPages application to read and write the data from any application on the internet or network. The read will be successful if the user currently logged in has access to the application, or especially if the application allows anonymous access.

Only applications that use the databaseName URL parameter will be effected by these changes, but the parameter is used by default, unless explicitly set to ignore. In XPages, the Domino Document (xp:dominoDocument) and Domino View (xp:dominoView) data sources read certain parameters from the URL and apply those parameters to the data source. For example, the Domino Document data source will read a URL parameter named "documentId" and then use that as the document that should be displayed. Both of the data sources support reading the parameter "databaseName". When this is absent, the document or view entries are read from the current application or from the application configured in the XPage source. When the "databaseName" URL parameter is present, the documents are instead read from the application specified in the parameter. The data sources can be configured in the XPage source with the property ignoreRequestParams="true", which means that the parameters are not read from the URL, but that is not the default behavior.

For more information see the Technote (troubleshooting): XPages DatabaseName URL Parameter Whitelist

↧

New Notes Domino XPages Position

June 24, 2015, 2:37 am

≫ Next: Using Lightbox for Bootstrap 3 in XPages Part II - Programatically call

≪ Previous: Notes Domino 9.0.1 Fix Pack 4 - XPages DatabaseName URL Parameter

After a few months without a permanent employer I have, since last Monday, a new job as Notes Domino and XPages developer. My new employer per August 10 will be Kranendonk in Tiel. I am very happy that I may work at this company from August as a Notes Domino and XPages Developer (Functional Application Manager).

KRANENDONK is the robot technology centre for non-repetitive production. By implementing intelligent robot technology, KRANENDONK enables manufacturing companies to produce more efficiently and effectively. The production systems that KRANENDONK supplies are custom-build solutions that are cleverly integrated into material and data flows.
The field in which KRANENDONK operates is not bound by a product or industry, but by a production principle. Traditionally, robots are used for repetitive production. KRANENDONK’s competence lies in the opposite: realizing non-repetitive production by smart implementation of robotics. This opens a range of automation opportunities for manufacturing companies.
KRANENDONK is a Dutch company with subsidiaries in Japan and Denmark. A technology centre position is maintained by simultaneously fulfilling the roles of engineer, supplier, supporter and partner. A key part of KRANENDONK’s position is the ability to continuously work on new robot applications. It does this together with universities and other technology partners.

More information about Kranendonk

↧