Sunday, 30 August 2015

Bootstrap in XPages: Using jQuery Fullsizable in XPages supporting the native HTML5 fullscreen API in modern browsers

In this blog post I will show how the JQuery plugin Fullsizable can be used in XPages.
jQuery fullsizable is a jQuery plugin to make use of the full available browser space for enjoyable image viewing. Also supports the native HTML5 fullscreen API in modern browsers. Make use of the full available browser space for enjoyable image viewing!

Fullsizable Options
  • detach_id (optional, defaults to null) - id of an element that will temporarily be set to display: none after the curtain loaded. This can be used to hide scrollbars on long pages by e.g. detaching a wrapper element.
  • navigation (optional, defaults to true) - show next and previous links when working with a set of images. Style links with #fullsized_go_prev and #fullsized_go_next
  • closeButton (optional, defaults to true) - show a close link. Style with #fullsized_close
  • fullscreenButton (optional, defaults to true) - show full screen button for native HTML5 fullscreen support in supported browsers. Style with #fullsized_fullscreen
  • openOnClick (optional, defaults to true) - set to false to disable default behaviour which fullsizes an image when clicking on a thumb.
  • clickBehaviour (optional, 'next' or 'close', defaults to 'close') - whether a click on an opened image should close the viewer or open the next image.
  • preload (optional, defaults to true) - lookup selector on initialisation, set only to false in combination with reloadOnOpen: true or fullsizable:reload event.
  • reloadOnOpen (optional, defaults to false) - lookup selector every time the viewer opens.

Setup Fullsizable in XPages
To use the fullsizable jQuery plugin in XPages first the fullsizable files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the fullsizable files from GitHub : fullsizable
Next the JavaScript file / Stylesheets  jquery-fullsizable.js, jquery-fullsizable.css and jquery-fullsizable-theme.css must be included on the XPage or Custom Control. In this example I add the files directly to the XPage. The fullsizable.css stylesheet provides only the bare bones to make fullsizable work. The 'fullsizable-theme.css' stylesheet is also available in the download and provides more default options.

<link rel="stylesheet" href="jqueryfullsizable/css/jquery-fullsizable.css" />
<link rel="stylesheet" href="jqueryfullsizable/css/jquery-fullsizable-theme.css" />
<script src="jqueryfullsizable/js/jquery-fullsizable.js"></script>

To initialize the plugin you can use a script. In the example below I use some options.
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
$('a').fullsizable({
detach_id: 'container',
clickBehaviour: 'next'        
}); 
});
]]></xp:this.value>

The final result in XPages


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<link rel="stylesheet" href="jqueryfullsizable/css/jquery-fullsizable.css" />
<link rel="stylesheet" href="jqueryfullsizable/css/jquery-fullsizable-theme.css" />
<script src="jqueryfullsizable/js/jquery-fullsizable.js"></script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
$('a').fullsizable({
detach_id: 'container',
clickBehaviour: 'next'      
});
});
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="col-8" >
<a href="images/Lightbox1.jpg" class="fullsizable"><img alt="Image 1" src="images/FI1.jpg"></img></a>
<a href="images/Lightbox2.jpg" class="fullsizable"><img alt="Image 2" src="images/FI2.jpg"></img></a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

Remark: For the above exampleI adjusted the jquery-fullsizable-theme.css a little. The CSS file can be customized to your own insights (and wishes).

#fullsized_go_prev, #fullsized_go_next {
position: absolute;
top: 40%;
display: block;
width: 32px;
height: 126px;
}
#fullsized_go_prev {
left: 0;
background: url('jquery-fullsizable.png');
}
#fullsized_go_prev:hover {
background-position: 0 -126px;
}
#fullsized_go_next {
right: 0;
background: url('jquery-fullsizable.png') -32px 0;
}
#fullsized_go_next:hover {
background-position: -32px -126px;
}
#fullsized_close, #fullsized_fullscreen {
position: absolute;
top: 10%;
display: block;
width: 32px;
height: 32px;
}
#fullsized_close {
top:5;
right: 0px;
background: url('jquery-fullsizable.png') -64px 0;
}
#fullsized_close:hover {
  background-position: -64px -32px;
}
#fullsized_fullscreen {
top:5;
right: 40px;
background: url('jquery-fullsizable.png') -96px 0;
}
#fullsized_fullscreen:hover {
background-position: -96px -32px;
}
:fullscreen #fullsized_fullscreen { background-position: -96px -64px; &:hover {background-position: -96px -96px;} }
:-webkit-full-screen #fullsized_fullscreen { background-position: -96px -64px; &:hover {background-position: -96px -96px;} }
:-moz-full-screen #fullsized_fullscreen { background-position: -96px -64px; &:hover {background-position: -96px -96px;} }

To be continued!

Friday, 28 August 2015

Bootstrap in XPages: Using flexImages a lightweight jQuery plugin for creating fluid galleries in XPages

In this blog post I will show how you can use flexImages in XPages. flexImages is a lightweight jQuery plugin for creating fluid galleries as seen on Flickr and Google Images. It is less than 1 kB in size (minified and gzipped) it’s extremely lightweight. A bunch of options makes this plugin highly flexible and it even works with more than just images. In fact, any content may be used – be it images, videos, plain text or all mixed together.

Features flexImages:
  • Works with more than just images, e.g. videos, iframes and plain text
  • Responsive
  • Equal margins between images controlled via CSS
  • No cropping
  • No reordering
  • Source images/objects can have any size
  • AJAX ready, e.g. for infinite scrolling
  • Wide browser support, including IE >= 7
  • Support for lazy loading of images and iframe contents
  • Layout options to control e.g. the maximum number of rows – or whether or not to display an incomplete (last) row.

The basic setup in XPages
To use the flexImages jQuery plugin in XPages first the flexImages files must be downloaded and added to the WebContent Folder in the Package Explorer.
You can download the flexImages files from GitHub : flexImages
Next the JavaScript file / Stylesheet  fleximages/jquery.flex-images.js and fleximages/jquery.flex-images.css must be included on the XPage or Custom Control. In this example I add the files directly to the XPage.

<script type="text/javascript" src="fleximages/jquery.flex-images.js"></script>
<link rel="stylesheet" href="fleximages/jquery.flex-images.css" />

Each image that we will use must be wrapped inside a container element. The container must have a width (data-w) and height (data-h) attribute set that corresponds to the image's/object's original dimension. The plugin dynamically changes the width and height of all containers. The images themselves have their height and width set to 100%. Thus, each image takes up the full space inside its container.

<div class="flex-images">
<div class="item" data-w="300" data-h="200"><img src="images/FI1.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI2.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI3.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI4.jpg"></img></div>
</div>

To initialize the plugin you can use this simple script:
$('.flex-images').fleximages({rowHeight: 140});

The final result in XPages is a fluid responsive image 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">
<script type="text/javascript" src="fleximages/jquery.flex-images.js"></script>
<link rel="stylesheet" href="fleximages/jquery.flex-images.css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="flex-images">
<div class="item" data-w="300" data-h="200"><img src="images/FI1.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI2.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI3.jpg"></img></div>
<div class="item" data-w="300" data-h="200"><img src="images/FI4.jpg"></img></div>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
$('.flex-images').fleximages({rowHeight: 140});
</script>
</xp:view>

Tuesday, 25 August 2015

XPages ACL Manager

Last weekend I came across a blog post by Shahidoon Software Technologies regarding an XPages ACL Manager.
On the blog post, the following is stated about the XPages ACL Manager:
This tool will give you tremendous flexibility to manage your database ACL through web. Not only that, usefull to reduce lots of effort made behind Maintaining each database's ACL separately and to surpass the flexibility, this tool is targeted to providence handling multiple databases from one single Web page.
The XPages ACL Manager will be released shortly. Perhaps an interesting option for XPages Developers and Administrators.


The XPages ACL Manager will be released shortly. Perhaps an interesting option for XPages Developers and Administrators.


LinkedIn: XPages ACL Manager

Sunday, 23 August 2015

MWLUG 2015 - The Sessions - Slides, Demo Databases and Videos

In this blog post  I'll give an overview of the sessions form MWLUG 2015 so far as they have become available. This blog post will be updated regularly in the coming period.



AD 102 - Break out of the box - Integrate existing Domino data with modern websites
Karl-Henry Martinsson
Your company have decided to hire a web designer to redesign some of your web based applications, or to move them from the Notes client to the browser. This designer have no experience with Domino or Designer but knows traditional web development technologies like HTML, CSS and Javascript as well as frameworks and toolkits like jQuery and Bootstrap. Or perhaps you have been asked to rewrite an existing Notes client application for the web, but you don't have the luxury of spending time learning XPages, this need to be done right away. How do you integrate a website, possibly hosted on a non-Domino server, with all your Domino-based data? Especially when the web designer have no experience (or time to learn) IBM technologies like XPages? In this session you will find out how you can keep your data in a Domino environment and create a web frontend using industry standards to read, write and update the Domino data using Ajax, JSON and other technologies. You will also walk away with code samples that you can use back home.
Link: AD102

AD 104 - Empower the Pig - Don't Disturb the Lipstick
Ben Langhinrichs
Through years of evolution and change, the core engines which drive IBM Notes and IBM Domino have remained accessible through hooks and entry points. In this session, we will show ways to enhance and empower the core engines from the inside, and to expose that empowerment in your mobile, XPage and client applications without smearing the carefully applied UI lipstick. Extension managers, server addins, DSAPI and more will be discussed.
Link: AD104

AD105 - IBM Bluemix: Expand Your Horizons
Ryan Baxter / Marky Roden
As a developer, you always need to add new tools to your developer tool belt.  Bluemix gives you many options to take what you already know and build upon it, allowing you to continuously reinvent yourself and your apps. Whether you are an XPages developer looking to leverage new technologies like Watson or Docker, or you want to start exploring new languages and frameworks like the MEAN stack, Bluemix has something to offer you.  Using the powerful deployment models and integration services in Bluemix, it is also easy to build solutions that combine the new with the old making it easy to build upon the work you have already done.  Expand your horizons, improve yourself and join us for a whirlwind tour of what Bluemix has to offer you!


Link: AD105

AD106 - Just a View: An Introduction To Model-View-Controller Pattern
Ulrich Krause
The only constant in software development is CHANGE. Every piece of software that has been developed and shipped to a customer will be changed numerous times during it's life cycle. Depending on how well the code is designed, it is more or less easy to implement changes. MVC, which is an acronym for Model - View - Controller is no new concept. In fact this design paradigm was created by Xerox in the 80's, and it is becoming THE recommended model for designing frameworks - especially on the web. The session will give an overview of design pattern in general and MVC in particular. We will show, how to use the MVC design paradigm in an XPages application and demonstrate, how easy it is to implement changes. Need to read/write your data from/to an XML file instead of using a Notes View. MVC makes software maintenance easy as 1-2-3.
Link: AD106

AD109 - Navigating the Jungle of Modern Web Development
Shean P McManus
In the beginning, the web was built largely on static HTML pages. While HTML is still the foundation for the modern web page, the explosion of JavaScript libraries, CSS frameworks, development tools, platforms and cloud offerings have made the understanding the universe of modern web development much more challenging. What is Angular? The MEAN stack? What is the difference between HTML and HTML5 or CSS and CSS3? To break it all down I will attempt to provide a clear overview of today's web including a taxonomy of common languages, tools, platforms and libraries. Learn how IBM xPages and IBM Blue Mix fit into this world and how all the terms you hear every day fit into the larger picture of modern web development.
Link: AD109

AD112 – Real World Experience: Integrating DB2 with XPages
Steve Zavocki / Dwain Wuerfel
DB2 is a powerful relational database management system. Its power can be demonstrated in conjunction with XPages to create fast, web-based applications. In this session, two seasoned XPages developers will share their real world experiences integrating an XPages front-end with a DB2 back-end. We will share advantages -- such as fast page loads for reports, grids and searches -- as well as frustrations, like dealing with DBA's. We will offer practical tips that we learned along the way, and share some basic code examples. Come to this session to gain a greater understanding of the rewards and challenges of using DB2, or any relational back-end with XPages.
Link: AD112
See also: Using DB2 in XPages Part 10: The MWLUG 2015 Presentation Slides, Thoughts and a Promise via Steve Zavocki

AD113 - Speed Up Your Applications With Nginx and PageSpeed
Eric McCormick
One of the more popular web server technologies in recent history is Nginx, an open source reverse proxy and web server. Built to be lightning fast, Nginx when combined with Google's PageSpeed module can allow for even faster configuration and every user knows that faster applications are better. Covering the key topics of: -basic build, install, and configuration of Nginx and PageSpeed module -demonstration of use with caching of static assets -configuration of the PageSpeed components -show how to hand off SSL/TLS credentials.
Link: AD113

AD114 - Take Your XPages Development To the Next Level
Are you ready to take your XPages development to the next level? If you know the basics, then you're ready to dig deeper and find great features that are built into XPages, but aren't as well known. Join Paul and Brad to learn about at a wide range of techniques that can help you improve application performance, take control of the HTML output, enhance your use of event handlers, and much more.
Brad Balassaitis / Paul Calhoun
Link: AD114

AD117 - WebSockets - "Pushing" the web forward
Mark Roden
Since it's inception XHR has been an asynchronous process of browsers requesting data from servers and waiting for a response. The constant polling to ask "Has something changed?", "No". "Has something changed?", "No" is such a waste! WebSockets changes the paradigm and allows the server to "push" information to the browser, as an when it needs to. This reduces network traffic, allows multiple users to get notified at the same time, speeds up applications, makes developers happy and makes users happy. In this presentation Mark will introduce the concepts of WebSockets as a modern web technology, demonstrate how it works and provide numerous examples. Come and see how WebSockets will change your perception on how applications will work in the future.
Link: AD117

SA103 - Domino Security - not knowing is not an option
Darren Duke
There have been a host of changes to Domino security over the past few months. This session will explain what they are, why you need them and how to implement them, including but not limited to: SSL/TLS Notes port encryption reverse proxies SHA2 certificates SAML/NFL Perfect Forward Secrecy Learn. Implement. Sleep well.
Link: SA103

IV103 - Grails4Notes - Remember DB2NSF?  Finally use a true SQL RDBMS with your Notes databases!
Justin Hill
Grails4Notes: Realize the true power of your Notes databases!  Learn how to: Keep your Notes data in the NSF while also having it available using true SQL served by a true RDBMS. (currently unidirectional). Use true SQL language queries to report on your data — even when it is stored across many NSF databases or servers. Stop writing custom Java or Lotuscript agents to query Notes data in a more complex fashion than can be done with view selection formula syntax. Develop a true Business Object Model for the data in your Notes databases. Easily create formal documentation in the industry-standard JavaDoc-like format for all of your fields on forms and subforms in Notes. Eliminate unnecessary views from your Notes databases because they clutter your design and slow down performance for large databases. Performance optimize the necessary sections of your Domino classic or newer XPages web applications. Gain insight into the slowest URLs of your Domino classic or newer XPages web applications so you can improve your customer’s web experience. Mix the mature security model, reliable replication technology for clustered / off-line use, and rapid application NoSQL-style development of Notes with cutting-edge dynamic language technology from coders so good at Java they invented something even better: Groovy/Grails. Plus, a special sneak peak: Quickly turn Notes databases into Flex applications compiled into NATIVE Windows and Mac applications!




IV105 - The Cloud and You - the 'as a service' disruption you can't ignore
John Head
In any discussion about cloud, there are lots of buzzwords being thrown out by analysts and vendors. "Digital Transformation", "Democratization of IT", "Citizen Developer", and many more. Add in the 'as a Service" explosion and it is hard to make heads and tails over what will add value to your business. This session will cut through the hype and help bring a reality check to how the Cloud can help you. This session is for everyone: Administrator, Developer, IT Executive, or Business User. Plan on leaving with a deeper understanding and ideas of where you can take advantage.
Link: IV105

IBM's Social Business Journey
Ed Brill
In this session, Ed Brill will describe how IBM has adopted a culture of participation, and the practical business outcomes that result from becoming a social business. Specific case studies and examples from IBM’s usage will be highlighted and demonstrated, along with an outline of IBM’s progress in adoption of IBM Verse and Connections Cloud.
Link: IBM's Social Business Journey


Watch MWLUG 2015 Sessions
Dave Navarre
Watch some of the session from MWLUG 2015 recorded by David Navarre.
Link: YouTube Channel Dave Navarre

MWLug Wrap up and NotesIn9
David Leedy
I just got back from a GREAT MWLug conference in Atlanta. I’ve been to several MWLug’s and they just keep getting better. It was an amazing conference full of friends, fun, food, drink and information.  I learned a lot from the many sessions and came home with ideas of things I definitely want to try.
Link: MWLUG

Saturday, 22 August 2015

Quick Notes Domino Tip: Change a row color in a view based on a column's value

For a current 'classic Notes Domino' project, it is necessary that certain rows in a view obtain a specific color regarding the text. In order to solve this question I added a new column (the first column in the view) to the specific view. On the column properties dialog, the first tab, I selected the "Use value as color" option.


On the last tab I selected the option "Hide column".


As a column formula I used the following @Formula:

NormalView := -1:-1:-1;
Red := 255:0:0;
Black := 0:0:0;
White := 255:255:255;
Blue := 0:0:255;
Green :=0:119:0;
DarkBlue := 0:0:119;
Gray := 119:119:119;
LightGray := 154:154:154;
@If(
Status = "High"; NormalView : Red;
Status = "Medium"; NormalView : Blue;
Status = "Low"; NormalView : DkGreen;
NormalView : Black )

A color column can be put at any location within the view. Anything to the right of the color column will get the results of the color column. You can use multiple color columns.

Thursday, 20 August 2015

IBM XPages on Bluemix: New Free Online Course from IBM developerWorks: Getting Started with IBM Bluemix

IBM® Bluemix™ is an open-standards, cloud platform for building, running, and managing applications. With Bluemix, developers can focus on building excellent user experiences with flexible compute options, choice of DevOps tooling, and a powerful set of IBM and third-party APIs and services.

This free online course will help you understand the fundamentals of cloud computing, Bluemix, services, DevOps, containers, Cloud Foundry, and best practices for agile and test-driven development. The course includes video lectures, exercises, and quizzes to help you learn the material.
When you finish this course, you should understand:
  • Cloud computing, cloud architecture, and how to maximize the value of cloud development
  • The components and features of Bluemix, such as organizations, spaces, boilerplates, and services
  • How to quickly deploy and modify a boilerplate application in Node.js by using the Bluemix web interface
  • How to use the cf command line (Cloud Foundry) to deploy applications, understand the foundations of the Cloud Foundry architecture, and use buildpacks
  • The advantages of applying test-driven development and agile best practices
  • How to modify your application by using DevOps services and tooling
  • The advantages of using environment variables and separating configuration from the code
  • The basics of containers, Docker files, and virtual machines
  • How to estimate the cost of your applications
More information about this free online course: Getting Started with IBM Bluemix

Wednesday, 19 August 2015

Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages - Effects built in to jQuery

In my previous blog post, Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages, I showed how PNotify can be used in XPages.
In this blog post I will show how some jQuery effects can be used in PNotify. This involves the Fade, Slide and Show effect. In the example below, I use a button to trigger the PNotify notice.

Effects built in to jQuery

Setup Fade Effect in XPages
$(function(){
new PNotify({
title: 'Fade Effect',
text: 'Effects built in to jQuery - Fade Effect.',
animation: 'fade'
});
});

Setup Show Effect in XPages
$(function(){
new PNotify({
title: 'Show Effect',
text: 'Effects built in to jQuery - Show Effect.',
animation: 'show'
})
});

Setup Slide Effect in XPages
$(function(){
new PNotify({
title: 'Slide Effect',
text: 'Effects built in to jQuery - Slide Effect.',
animation: 'slide'
})
});

Setup two different effects together in XPages
$(function(){
new PNotify({
title: 'Show and Slide Effect',
text: 'I use a different effect.',
animation: {
effect_in: 'show',
effect_out: 'slide'
}
})
});

Remark: You need to use CSJS (Client-Side JavaScript) in this case to make it work.

The final result in XPages


Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<script type="text/javascript" src="pnotify/pnotify.custom.min.js"></script>
<link rel="stylesheet" href="pnotify/pnotify.custom.min.css" media="all" type="text/css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div>
<xp:button id="button1" value="Fade Effect">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Fade Effect',
text: 'Effects built in to jQuery - Fade Effect.',
animation: 'fade'
});
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button id="button2" value="Show Effect">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Show Effect',
text: 'Effects built in to jQuery - Show Effect.',
animation: 'show'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button id="button3" value="Slide Effect">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Slide Effect',
text: 'Effects built in to jQuery - Slide Effect.',
animation: 'slide'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<xp:button id="button4" value="Show and Slide Effect'">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Show and Slide Effect',
text: 'I use a different effect.',
animation: {
effect_in: 'show',
effect_out: 'slide'
}
})
});]]></xp:this.script>
</xp:eventHandler></xp:button>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

Tuesday, 18 August 2015

Modernize and upgrade existing Notes databases to XPages through a process of configuration with Aveedo

Yesterday I watched the replay of the webinar Modernize existing Notes databases with Aveedo by We4IT GmbH. Amazing stuff.
Aveedo is an application framework that provides organisations using IBM Notes and Domino with a way to rapidly develop new XPage applications and upgrade existing applications to XPages through a process of configuration rather than coding.


Content webinar
Many of us are struggling to find the time to create all the new XPages application that we need to. And then there's all those old Notes dbs that now need to be brought to the browser and to mobile devices.
  • Create new applications without using Domino Designer. Simple apps can be created in minutes, average apps in a few hours to a couple of days and complex apps in a week or two.
  • Modernize existing Notes client applications to state-of-the-art browser-based apps without changing the underlying database. Aveedo is simply used to create a new front-end.
  • Mobilise applications without additional effort. Aveedo’s responsive design technology means that applications will simply format themselves according to the size of the screen on which it’s being viewed.
  • Workflow becomes easier to add to applications when the users in the business are able to use Aveedo’s visual modeller to describe the sequence of activities that they need to be automated. The workflow engine then allows the completed process to be swiftly integrated into your application.


More info : Aveedo Your application framework

Sunday, 16 August 2015

Bootstrap in XPages: Using the PNotify Plugin for Bootstrap and jQuery UI in XPages

PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. PNotify works in all major browsers and provides a consistent interface. It is tested thoroughly for consistency. It also can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it. PNotify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable. In this blog post I will show the basic setup.
In order to use the PNotify Plugin, the JavaScript and CSS file(s) need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: PNotify.

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 I added a Folder pnotify in the WebContent Folder.
Next the JavaScript and CSS files, pnotify.custom.min.js and pnotify.custom.min.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="pnotify/pnotify.custom.min.js"></script>
<link rel="stylesheet" href="pnotify/pnotify.custom.min.css" media="all" type="text/css" />

Basic Setup PNotify in XPages
In the example below, I use a button to trigger the PNotify notice.

<xp:button value="Regular Notice" id="button1" >
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Regular Notice',
text: 'PNotify! I am a regular notice.'
});
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>

The result is a PNotify regular notice in XPages.


Remark: You need to use CSJS (Client-Side JavaScript) in this case to make it work.


It is aslo possible to use Bootstrap Glyphicon icons and Font Awesome icons in the PNotify notices.

<xp:button value="Notice Bootstrap Icon" id="button2" >
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Bootstrap Icon',
text: 'I have an icon that uses the Bootstrap icon styles.',
icon: 'glyphicon glyphicon-envelope'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>

<xp:button value="Notice Font Awesome Icon" id="button3" >
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Font Awesome Icon',
text: 'I have an icon that uses the Font Awesome icon styles.',
icon: 'fa fa-envelope-o'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>


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="pnotify/pnotify.custom.min.js"></script>
<link rel="stylesheet" href="pnotify/pnotify.custom.min.css" media="all" type="text/css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div>
<xp:button value="Regular Notice" id="button1" >
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Regular Notice',
text: 'PNotify! I am a regular notice.'
});
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button value="Notice Bootstrap Icon" id="button2" >
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Bootstrap Icon',
text: 'I have an icon that uses the Bootstrap icon styles.',
icon: 'glyphicon glyphicon-envelope'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
<div>
<xp:button value="Notice Font Awesome Icon" id="button3" >
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[$(function(){
new PNotify({
title: 'Font Awesome Icon',
text: 'I have an icon that uses the Font Awesome icon styles.',
icon: 'fa fa-envelope-o'
})
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
</div>
<br />
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

In the next blog post more possibilities for using the PNotify pluging in XPages. So stay tuned!

Friday, 14 August 2015

IBM XPages on Bluemix: New Video Combine the XPages NoSQL Service and Node.js Runtime

The information about IBM XPages on Bluemix has in recent weeks become a bit less. But today there is a new video releases by Gary Marjorman, Combine the XPages NoSQL Service and Node.js Runtime.



This tutorial video show developers how to hook up a Node.js application to the XPages NoSQL Database service using REST and the Domino Access Services.

Check out the blog post on developerWorks: Combine the XPages NoSQL Service and Node.js Runtime and and the previous published videos, Using IBM Domino Designer for XPages on Bluemix.

IBM Connect 2016


IBM Connect 2016 Call for Speakers!
IBM Connect 2016 is currently accepting speaker proposals. Making every moment count starts with you, so join us in January to share your insights and best practices. Tell us about your social solutions and digital experiences that improve customer relationships and increase productivity. If your proposal is accepted, you may be eligible for a free conference pass. Act now - call for speakers ends September 4th.

Tell us your story
Are you ahead of your peers in reimagining how you work? Are you responding rapidly to customer needs in creative, meaningful ways? Are you spending less time behind the scenes and more time out front, leading your future? We want to hear about it.
Now is your chance to be a speaker at Connect 2016, the premier global conference for social business and the digital experience. Attendees will gain practical advice and strategic insights based on proven best practices.
We invite you to submit your proposal in one or more of the following topics:
  • Digital Experience
  • Email
  • Meetings and Chat
  • Social Collaboration
  • Social Content

Timeline for submissions
  • Call for Speakers Closes: September 4, 2015
  • Speakers Notified: Mid-October 2015
  • Presentations Due: December 21, 2015
Links:
IBM Connect 2016 Call for Speakers!
Connect 2016

Wednesday, 12 August 2015

Bootstrap in XPages: Limiting the number of selections in Select2 fields

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options. This blog post is a continuation of a previous blog post about Select2, Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages.
For a recent project it was required that for certain Select2 fields users only should be able to make a limited selection. In this specific case only two values should be able to be selected from a selection list. Select2 multi-value select boxes (List Box) can set restrictions regarding the maximum number of options selected. The example below is declared with the maxSelectionLength in the Select2 Options. For more information about Select2 please read my related blog posts.

Related Blog Posts
Migrating to Select2 version 4.0.0. including a simple AMD Loader Fix in XPages
Using Select2 in XPages (Part I)
Using Select2 in XPages (Part II)
Select2 Placeholder Combo Box

Using the Select2 Option maxSelectionLength
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).select2({
placeholder: "Select a software category",
allowClear: true,      
maximumSelectionLength: 2
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The final result is a limited selection,


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,      
maximumSelectionLength: 2
});
}
);
]]></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"></div>
</div>
</div>
</xp:panel>
</xp:view>

Tuesday, 11 August 2015

Building of web interface for IBM Notes Domino applications using ClevaDesk

Great new developments and products keep coming in the Notes Domino and XPages world. Some are free to use for others has to be paid. ClevaDesk is one of these new products. Some time ago I came into contact with Constantine Voloskov from ClevaDesk. He showed me some amazing demonstrations regarding building web-interfaces for Notes Domino applications. Below are some examples. It all looks very good and professional. If you find it interesting please feel free to contact Constantine Voloskov (ClevaDesk). Perhaps this can provide a good solution for some Notes Domino users.

What is ClevaDesk
Now your IBM Notes applications can look good and work quickly on any device – laptop, tablet, smartphone.
Business applications that are built on IBM Lotus Notes/Domino allow the company to operate efficiently and help the business to grow. Increasingly, users of Lotus Notes/Domino face technical limitations and cannot find the solution.
ClevaDesk is the first platform in the World that can solve this problem and give IBM Lotus Notes Domino applications a new life.
  • Fast creation of interfaces to existing Lotus Notes applications
  • Rapid design of new web and mobile interfaces
  • Individual styling of any interface element
  • Flexible multi-level fields validation
  • Ability to run any document in any workflow
  • Integration with Google Docs and Microsoft Office Web Apps
  • Charting
Building of web interface for IBM Notes/Domino applications
In this video a web interface is being built for "names.nsf" with fake users. In this example the database "fakenames.nsf" with more than 40,000 documents is being used. The web interface is created via the web browser in just a few minutes.



Build web applications quickly and easily using ClevaDesk
In this video we will show you how you can build web applications quickly and easily using ClevaDesk.

Sunday, 9 August 2015

A new era with Notes Domino XPages and Bluemix is about to begin

Tomorrow I start in my new position as Notes Domino XPages developer at my new employer Kranendonk in Tiel. A new challenge, a new beginning. I'm excited! The new function is in line with what I've done at Wavin Netherlands. So I hope for the best in this new position. And I will continue blogging :)

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



Bootstrap in XPages: Using Lightbox for Bootstrap 3 in XPages Part V - Forcing width using a data attribute

It's been a while since I wrote a new blog post on using Lightbox for Bootstrap 3 in XPages. With this blog post I'm going to spend more time on this subject again. Let's start with a relatively simple example which, however, can be used in several situations in a convenient way. In this blog post I will show how to set the width of a video. A quick reminder: Lightbox is a gallery plugin for Bootstrap 3 based on the modal plugin. It Utilizes Bootstraps modal plugin to implement the lightbox gallery.

Related blog posts
Bootstrap JS Modal plugin in XPages: Using Lightbox for Bootstrap 3 Part I
Using Lightbox for Bootstrap 3 in XPages Part II - Programatically call
Using Lightbox for Bootstrap 3 in XPages Part III - Data-Remote
Using Lightbox for Bootstrap 3 in XPages Part IV - Vimeo videos

Forcing width using the data attribute data-width
To force the width of a video you simply use the data attribute date-width.
<div>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox"
data-width="640" data-title="Lightbox Plugin" data-footer="Forcing Width">640 x 360</a>
</div>

The final result using data-width


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>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox" data-title="Lightbox Plugin" data-footer="Forcing Width">Standard</a>
</div>
<div>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox" data-width="640" data-title="Lightbox Plugin" data-footer="Forcing Width">640 x 360</a>
</div>
<div>
<a href="http://www.youtube.com/watch?v=d7oiNXQfLeU" data-toggle="lightbox" data-width="1280" data-title="Lightbox Plugin" data-footer="Forcing Width">1280 x 780</a>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

Thursday, 6 August 2015

IBM XPages on Bluemix: Two great new videos Using IBM Domino Designer for XPages on Bluemix

Today there are two great new videos published on IBM developerWorks about Using IBM Domino Designer for XPages on Bluemix by Gary Majoram.


IBM XPages on Bluemix - Integrated Tooling in IBM Domino Designer
This presentation covers the features of the Bluemix tooling in IBM Domino Designer, for developing XPages applications for Bluemix.
IBM Contact: Gary Marjoram



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

This presentation covers using IBM Domino Designer to connect to the IBM XPages NoSQL Database Service on Bluemix.
IBM Contact: Gary Marjoram



Everything you need to know is explained in these videos.
A great thanks to Gary Majoram and Brian Gleeson. Thanks!
Check out the blog post on developerWorks: Using IBM Domino Designer for XPages on Bluemix

Wednesday, 5 August 2015

XPages, Bootstrap Plugins, Modals, Responsive Images and Video Galleries , Reusable Bootstrap Fields, Buttons and more

Throughout the past period I have had many questions about a next release of the XPages and More demo database based on the blog post of the past months. At this moment I am very busy with the second release of this demo database. This second release will be published over the next few days.
The second release will contain, among others, examples of:

Bootstrap Plugins 
Select2, Bootstrap DateTime Picker, Multiselect, FileInput and more.


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


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


Responsive Images Galleries
One of the examples in the demo database is the Unite Gallery, a 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.


Responsive videos
One of the examples in the demo database is FitVids.js, a lightweight, easy-to-use jQuery plugin for fluid width video embeds.


Amazing Bootstrap Buttons
One of the examples in the demo database is the 3D Button Effect.


Reusabel Bootstrap Fields, Bootstrap Rich Text Fields and more.

So stay tuned for the upcoming release of the XPages and More demo database!

Tuesday, 4 August 2015

IBM XPages on Bluemix: XPages NoSQL Database Part IV - Pushing existing XPages Applications to Bluemix (1)

In my previous blog post, IBM XPages on Bluemix: XPages NoSQL Database Part III - Connecting to the XPages NoSQL Database service from Domino Designer (2), I showed how to create a connection document in the local IBM Notes client for the service-provided Domino server. In this blog I will show the first part of pushing existing XPages applications to Bluemix, splitting the XPages Application in design and data.
Existing XPages applications typically contain both the application design and data in the form of documents. This does not suit the Bluemix model of separating the back-end data from the application design. To host these applications safely on Bluemix, the application must be split into two distinct parts: a runtime for the visual aspects of the application and a service to persist the data. Any data that is stored in the runtime is lost if it is restarted manually or for load-balancing purposes. Having a distinct runtime also allows the application to be scaled by increasing the number of instances.

Related Blog Posts:
IBM XPages on Bluemix: XPages NoSQL Database Part III - Connecting to the XPages NoSQL Database service from Domino Designer (2)
IBM XPages on Bluemix: XPages NoSQL Database Part II - Connecting to the XPages NoSQL Database service from Domino Designer (1)
IBM XPages on Bluemix: XPages NoSQL Database Part I - Create an XPages NoSQL Database service instance
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer Part II
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer
Customizing the XPages Web Starter Application on Bluemix - Start Coding
Creating XPages Applications with the IBM XPages Web Starter on Bluemix

To split an XPages Application into design and data the following steps can be followed.

1. Open Domino Designer and log in using your regular Notes ID.
2. Open the XPages application that you want to split.
In this example, I use a simple XPages application which I named Bluemix Application.


3. Split the XPages application in design and data.
Right-click on the application in the Applications Navigator and select Application - New Copy to create a duplicate of the application. Name one copy bluemix_design.nsf and the other copy bluemix_data.nsf


The XPages applications appear in the Applications Navigator.


4. Access Control List
Right-click on the design application in the Applications Navigator and select Application - Access Control. The Access Control dialog box opens.
Click Add to create a new user. Enter the name as the user name generated by the XPages NoSQL Database Service Dashboard, in this example j_oldenburger_gmail_com.


Select Designer from the Access drop-down menu and click OK.


Repeat these stepson the data application.

5. Bluemix User ID
Switch to the service-provided Notes ID by clicking File- Security - Switch ID.
Select the downloaded ID file and click Open. When prompted, enter the password that was generated by the XPages NoSQL Database Service Dashboard.
Double-click both applications in the Applications Navigator to reopen them.


6. Delete design elements
In the data application, delete all XPages, Custom Controls, .css files and images.
In the design application, delete all Forms and Views.

7. Sign the XPages applications
Right-click on the data application in the Applications Navigator and select Application - Sign Design. Click OK.


The XPages Application is now split into design and data. In the next post we will continue to work on the design application.

Sunday, 2 August 2015

IBM XPages on Bluemix: XPages NoSQL Database Part III - Connecting to the XPages NoSQL Database service from Domino Designer (2)

In my previous blog post, IBM XPages on Bluemix: XPages NoSQL Database Part II - Connecting to the XPages NoSQL Database service from Domino Designer (1), I showed how to connect to the XPages NoSQL Database service from Domino Designer (the Bluemix Part). In this blog post I will show how to create a connection document in the local IBM Notes client for the service-provided Domino server.

Related Blog Posts:
IBM XPages on Bluemix: XPages NoSQL Database Part II - Connecting to the XPages NoSQL Database service from Domino Designer (1)
IBM XPages on Bluemix: XPages NoSQL Database Part I - Create an XPages NoSQL Database service instance
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer Part II
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Domino Designer
Customizing the XPages Web Starter Application on Bluemix - Start Coding
Creating XPages Applications with the IBM XPages Web Starter on Bluemix

The following steps can be followed to create a connection document in the local IBM Notes client for the service-provided Domino server.
1. Open the IBM Notes client.
2. In the toolbar, select Open - Contacts. The Contacts application opens.


3. In the navigation pane, click Advanced.


4. In the application toolbar, select New - Server Connection. 


A new server connection document opens.
In the Basics tab, ensure the Connection type field is set to Local Area Network.


In the Use LAN port field, click the TCP/IP check box to enable it.
In the (Destination) Server name field, enter the name of the server from the XPages NoSQL Database Service Dashboard (use the data from blog post IBM XPages on Bluemix: XPages NoSQL Database Part II - Connecting to the XPages NoSQL Database service from Domino Designer (1).


5. Select the Advanced tab.
6. In the Destination server address field, enter the Domino IP Address.
Use the IP Address from the XPages NoSQL Database Service Dashboard.


7. Select Save & Close.
The connection document in the local IBM Notes client for the service-provided Domino server has been created.

In the next few blog posts I will show how to connect to the database from Domino Designer and how to split an existing database into two distinct parts: a runtime for the visual aspects of the application and a service to persist the data (data and design) .