Tuesday, 27 October 2015

Upcoming Webinar: Ask The XPages Experts - Building on Properties - Controller Classes - Time to First Byte And Give it a REST

On November 17 a very interesting webinar will be organized by TLCC and Team Studio, Ask the XPages Experts. The registration for this webinar is now available on the T.L.C.C website. FOUR XPages experts, Mike McGarel, Jesse Gallagher, David Leedy and Nathan Freeman, will each provide a brief presentation during this webinar and then the webinar will be opened for XPages questions from the participants of this webinar!


Building on Properties by Mike McGarel - The custom property can be a simple yet powerful tool for both your UI and data needs. Properties can contain a variety of objects, from strings to Java beans. This presentation will demo practical examples of custom properties in two design elements, the custom control and the XPage.

Controller Classes by Jesse Gallagher - “Controller” classes are a useful way to separate your XPage presentation logic from the back-end code. Learn how to implement these classes in a basic XPages application and hear how they can be a good stepping stone on your path to better applications.

Time to First Byte by David Leedy - Learn how to use the dojo Standby widget to target partial refreshes and even improve the users "Time to First Byte"!

Give it a REST by Nathan Freeman - Nathan will talk about how to extend Domino Access Services to build more usable REST models for your own data, using the OpenNTF Domino API REST service as a guide.

For more information: XPages Webinar Series with TLCC andTeamstudio

Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from October 15th, Move Your XPages Applications to the Fast Lane.

Sunday, 25 October 2015

My IBM Champion Nominations for IBM Collaboration Solutions - Less Than A Week To Go!

The coming week is the last week to nominate an IBM Champion for IBM Collaboration Solutions (ICS).
In this blog post I will not give a complete summary of my IBM Champion nominations but only of those who have made, in my opinion, a significant contribution to the community during the past year.
It's been a pretty amazing year and in my opinion the following people were also the greatest influencers of IBM Social Business - Collaboration Solutions.

My IBM Champion Nominations for IBM Collaboration Solutions (ICS).

Mark Roden Eric McCormick
Steve Zavocki Paul Withers David Leedy

Finally, I would like to mention someone who has been very active on social media, wrote some great blog posts and has made some great NotesIn9 shows about Boootstrap and Appcelerator, John Jardin.
And yes, I have also nominated John for IBM Champion ICS.

Hopefully this blog post gives some inspiration to submit a IBM Champion nomination if you have not already done so. Why, because they deserve it!
So take the opportunity to nominate an influencer of IBM Social Business now. Nominations for the 2016 IBM Champion program will be accepted through Midnight Eastern Time, October 31st 2015.
Say thank you, like I did, and Nominate an IBM Champion!
If you need information about someone you want to nominate then take a look at his or her LinkedIn profile. Concerning the nomination form, just fill in what you know and submit the form!


The IBM Champion program recognizes innovative thought leaders in the technical community -- and rewards these contributors by amplifying their voice and increasing their sphere of influence. An IBM Champion is an IT professional, business leader, developer, or educator who influences and mentors others to help them make best use of IBM software, solutions, and services.

Nominate an IBM Champion : IBM Champion Program

More information about the IBM Champion Program: IBM developerWorks - Champions

Related Blog Posts:
A Great Community, Amazing Content , A Great Year. Thank you!
IBM Champion Nominations for IBM Collaboration Solutions - My Thoughts And Considerations

Thursday, 22 October 2015

IBM XPages on Bluemix: Top Resources To Use IBM XPages on Bluemix The Best Possible Way

It has lately become a little quiet about IBM XPages on Bluemix. Until last week when IBM Champions David Leedy and Oliver Busse published a three part series on NotesIn9 about how to use IBM XPages on Bluemix. If you are getting started with IBM XPages on Bluemix or looking for more information about how to use IBM XPages on Bluemix then these NotesIn9 videos are an absolute must see.
Listed below I have tried to give a summary of the best resources, in my humble opinion, that are available at the moment to get started with IBM XPages on Bluemix. Included are the official documentation, recommended blog post and videos that will help you to use IBM XPages on Bluemix the best possible way. I have also included my own blog post. Perhaps these also contribute a little bit.
If you have additions than please let me know and I'll add it to the overview below.



A. IBM XPages for Bluemix documentation
Building apps with the IBM XPages for Bluemix runtime
Getting started with IBM XPages NoSQL Database for Bluemix
Creating apps with the IBM XPages Web Starter

B. Recommended blog posts
Hybrid XPages Applications on Bluemix via Brian Gleeson
Using Plugins in your XPages Application on Bluemix via Oliver Busse
My first Bluemix XPages application via Oliver Busse
Combine the XPages NoSQL Service and Node.js Runtime via Brian Gleeson
Using IBM Domino Designer for XPages on Bluemix via Brian Gleeson
Getting started with XPages on Bluemix via Brian Gleeson
Creating my first true XPages in Bluemix application via Mark Roden
XPages in Bluemix – where is the design and where is the data? via Mark Roden
XPages in Bluemix – Looking at the application dashboard via  Mark Roden
XPages in Bluemix – Pushing new changes via Bluemix git repository via Mark Roden
Bluemix Monitoring and Analytics – free service via Mark Roden
XPages on Bluemix a first look deploying app via Fredrik Norling
How to add your custom domain to your Bluemix app via Fredrik Norling
Building On Premises XPages The Bluemix Way via Paul Withers
XPages on Bluemix - finally we got here via Oliver Busse
Announcing IBM XPages on Bluemix via Brian Gleeson
XPages Comes to Bluemix via Eric McCormick
Usage of Cloudant NoSQL Databases in XPages Applications via Niklas Heidloff

C. My own contributions
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: Slides from the Webcast An Introduction to Creating Domino Applications in the Bluemix Environment
IBM XPages on Bluemix: Timeout message while deploying changes to the Bluemix environment using Domino Designer
IBM XPages on Bluemix: Deploy changes to the Bluemix environment via Cloud Foundry Command Line Interface
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
IBM XPages goes Bluemix (Experimental) - New XPages Extension Library has been released

D. IBM developerWorks
IBM developerWorks - Questions tagged with "xpages-runtime"
IBM developerWorks - Questions tagged with "xpages-service"

E. Videos
Some very good videos about IBM XPages on Bluemix.

Making Hybrid XPages Applications on Bluemix
This video describes how to create hybrid XPages applications in Bluemix. A hybrid application is defined in this context as a Bluemix cloud application that has its data hosted on an external private server. This video shows you how to configure an XPages Bluemix application to connect with a data NSF on an external Domino server. In the latest XPages runtime update, support was added for such hybrid applications, providing a powerful secure use case for XPages apps in Bluemix.



NotesIn9 184: XPages and Bluemix Part 1



NotesIn9 185: XPages and IBM Bluemix Part 2



NotesIn9 186: XPages and IBM Bluemix Part 3



Combine the XPages NoSQL Service and Node.js Runtime



IBM XPages on Bluemix - Integrated Tooling in IBM Domino Designer



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



Getting started with XPages on Bluemix



XPages on Bluemix - What are you waiting for?



Wednesday, 21 October 2015

Bootstrap in XPages: Using the Bootstrap Popover Extended Plugin in XPages (1) - Introduction and Setup Using Data Attributes

My second blog post on SocialBiz User Group was published today: Bootstrap in XPages: Using the Bootstrap Popover Extended Plugin in XPages (1) - Introduction and Setup Using Data Attributes.


Bootstrap Popover Extended is a Popover with Modal behavior, styling enhancements and more. This plugin is inspired by BootstrapModalPopover. This plugin enhances and simplifies these concepts for Bootstrap 3.x, and incorporates various additional styling options.


In the next blog post more about the advanced usage of this plugin.
In the upcoming period there will be more blog post from me appear on the SocialBiz User Group site. So stay tuned!

Friday, 16 October 2015

Replay Webinar Move Your XPages Applications to the Fast Lane - Learn how to dramatically increase your XPages performance

The replay of the Webinar Move Your XPages Applications to the Fast Lane has been published. For those who missed this webinar below the content, video and slides. This amazing webinar comes from T.L.C.C. and Teamstudio!


Are your XPages applications performing like a Florida senior citizen driving in the left lane at 55 mph? A key to speeding up your XPages applications is knowledge of the JSF lifecycle, partial refresh and part execution. In this webinar Howard Greenberg will cover these concepts and then apply them to optimizing an XPages application.
Learn how to dramatically increase your XPages performance and make your users happy - you might even get a speeding ticket after this webinar!





For more information and the demo database: Recorded Webinar: XPages in the Fast Lane

Wednesday, 14 October 2015

IBM Champion Nominations for IBM Collaboration Solutions - My Thoughts And Considerations

My nominations for IBM Champion ICS 2016 are nearing completion. With these nominations I want to thank those who have made a significant contribution in my perception to the community during the past year. My considerations which have been important for me for these nominations I described in my blog post A Great Community, Amazing Content , A Great Year. Thank you!
If you read the above blog post you know who I have nominated this year for IBM Champion but above all why I nominated them. During the past year I have seen great new topics and learned a lot of several great blog post and 'how to' videos. Absolutely amazing stuff!
Hopefully this gives some inspiration to submit a IBM Champion nomination if you have not already done so. They deserve it!

So take the opportunity to nominate an influencer of IBM Social Business now. Nominations for the 2016 IBM Champion program will be accepted through Midnight Eastern Time, October 31st 2015.
Say thank you, like I did, and Nominate an IBM Champion before end October.

The IBM Champion program recognizes innovative thought leaders in the technical community -- and rewards these contributors by amplifying their voice and increasing their sphere of influence. An IBM Champion is an IT professional, business leader, developer, or educator who influences and mentors others to help them make best use of IBM software, solutions, and services.


The IBM Champion program recognizes participants' contributions over the past year in a variety of ways, including conference discounts, VIP access, and logo merchandise, exclusive communities and feedback opportunities, and recognition and promotion via IBM's social channels.
An IBM Champion is someone who makes exceptional contributions to the technical community. Contributions can come in a variety of forms, and popular contributions include blogging, speaking at conferences or events, moderating forums, leading user groups, and authoring books or magazines. Educators can also become IBM Champions; for example, academic faculty may become IBM Champions by including IBM products and technologies in course curricula and encouraging students to build skills and expertise in these areas.
As nominations are received, IBM will evaluate each nominee's contributions over the past 12 months from the date of the submission. At the close of the nomination period, an IBM panel will consider the community impact, expertise, and overall contributions of the nominee. IBM will evaluate nominees both on the quality of contributions and the level of participation across a wide variety of community activities.

 Nominate an IBM Champion : IBM Champion Program

More information about the IBM Champion Program: IBM developerWorks - Champions

Sunday, 11 October 2015

A Great Community, Amazing Content , A Great Year. Thank you!

I am writing my hundredth blog post this year and realized that this had to be a 'special' blog post. In this blog post I'm going to look back over the past year up to now in which I have asked myself the question whether 2015 was a another great year regarding IBM Domino and XPages. Below my highlights of the past year that answers this question with Yes! It was a great year! With this retrospective, I would also like to thank those who have made a significant contribution in my perception to the community this past year. Thank you!


During the first four months some superb XPages (and other) topics were shared. Some highlights from these months were some amazing webinars. Below, 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.

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



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



During this period, the twelfth IBM Notes Domino 9.0.1 version of the XPages Extension Library was released. It contained a number of new enhancements and bug fixes. More and more Bootstrap functionalities became available in the XPages Extension Library such as the new Carousel, Dashboard, and Navbar controls which further enhance the Responsive tool set available to XPages application developers.
The release was followed by 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, OpenNTF - NotesIn9 175 - XPages Extension Library goes Responsive Part II.



Subsequently two more great NotesIn9 shows were published.

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



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.



Amazing content during these first four months.
In May, IBM provided insight about The Future of Domino Application Development. This was presented in a Webinar by T.L.C.C and Teamstudio.
'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!'



During the summer break it was bit quieter but that soon changed.
In June there were some very good NotesIn9 shows of John Jardin about the XPages Bootstrap Date Picker and Bootstrap Pager Styles for XPages (NotesIn9 177: Bootstrap Pager Styles for XPages, NotesIn9 178 : XPages Bootstrap Date Picker Part 1 and NotesIn9 179 : XPages Bootstrap Date Picker Part 2). A true hat trick!

In July the thirteenth IBM Notes Domino 9.0.1 version of the XPages Extension Library (extlib) was released. IBM XPages for Bluemix was launched! Experimental, but IBM XPages for Bluemix could be used. Simply amazing.
It contained significant new enhancements as well as a number of bug fixes and the exciting new Bluemix enhancements for both Domino Designer and the XPages runtime. Also there were important updates to the XPages responsive capabilities and some fixes pertaining to both DAS (REST services) and the XPages iNotes calendar control wrapper.
During the subsequent period, in particular, by Mark Roden, there was widely published about IBM XPages for Bluemix. For an overview see my page : IBM XPages on Bluemix.



In August the fourteenth IBM Notes Domino 9.0.1 version of the XPages Extension Library (ExtLib) was released. It contained new enhancements as well as a number of bug fixes and new Bluemix capabilities for both Domino Designer and the XPages runtime. There were also updates to the XPages Picker controls and some fixes pertaining to both the general XPages runtime and DAS (REST services). Another great release!

In September we had another great webinar, An Introduction to the Model-View-Controller Pattern.
Ulrich Krause showed how to use the MVC design paradigm in an XPages application and demonstrated 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 as easy as 1-2-3!
As a bonus, Pete Janzen, IBM Product Manager, provided a short update about what's new and upcoming from IBM for XPages and Domino application development.



Also Eric McCormick returned to NotesIn9 with a great new show, Alternative Frontend Development for XPages (NotesIn9 180) : 'In this show Eric McCormick returns with a great show talking about how to surface some of your XPages/Domino data to different frontends like AngularJS'.



Finally, there was a very good show by David Leedy, XPages and Java from Start to Finish (NotesIn9 182). "In this show I do an in depth demonstration of an XPages app that's based on Java code. The app lets you you Create, Read, Update, and Delete Project documents, and then add to each project an unlimited number of tasks. ".



A great month with again amazing content.

In October Paul Withers started a great new blog series: From XPages to Web App.
At the moment I write this blog there already have been published five parts of this series. A great blog series that each XPages (or rather Web) Developer should follow.
At this very moment it is also the time of year to nominate the IBM Champions for the coming year. If you are reading this blog post I have one a small request: Say thank you and go to this website and nominate an IBM Champion. They are experts!, They are Leaders! and they deserve it!


And of course there were also the great the IBM Events and Technical Conferences such as IBM Connected 2015, MWLUG and ICON UK. For more information about these events please take a look at my blog posts.
In closing yet a short note about what lies ahead of us. In the coming period, some very interesting technical conferences and IBM events are organized. For these conferences and events you can still register. For an overview of the conferences and events see my blog post: Upcoming Technical Conferences and IBM Events.
Also there are a number of very interesting XPages Webinars scheduled, Move your XPages Applications to the Fast Lane with Howard Greenberg and Ask the XPages Experts with Mike McGarel, Jesse Gallagher, David Leedy and Nathan Freeman. Do not miss them and register for these webinars brought by Teamstudio and T.L.C.C. More info about these webinars: Upcoming XPages Webinars.
Besides the above, there was much, much more. Too much to mention it all in one blog post, but these were my personal highlights of the past year so far. I would like to thank everyone who shared this year content with the community. A big thank you to you all. I have learned a lot from all of your blog posts! Lastly a very special thank you to Mark Roden and David Leedy!

We have a great community that shares amazing content!

Friday, 9 October 2015

Using prettyPhoto A Powerful jQuery Lightbox Clone in XPages

In this final blog post on Image and Video Galleries in XPages I show how prettyPhoto can be used in XPages. prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It’s a full blown media lightbox.
It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6. It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere!
prettyPhot has been tested and is known to work in the following browsers: Firefox 3.0+, Google Chrome 10.0+, Internet Explorer 6.0+, Safari 3.1.1+ and Opera 9+.

Setup in XPages
A. Adding the JS and CSS files
In order to use prettyPhoto, the JavaScript and CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: prettyPhoto.
In this example a Folder prettyphoto has been added in the WebContent Folder in the Package Explorer.


Next the JavaScript and CSS files, jquery.prettyPhoto.js and prettyPhoto.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="prettyphoto/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" />

B. Setup Image Galley
The setup of the image gallery is quite simple in an XPage. Use the [pp_gal] addition to indicate that it is an image gallery and not a single image.

<div>
<a href="prettyphoto/images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="Photo 1"><img src="prettyphoto/images/thumbnails/t_1.jpg" width="60" height="60" alt="Round shape" /></a>
<a href="prettyphoto/images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_2.jpg" width="60" height="60" alt="Building" /></a>
<a href="prettyphoto/images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>
<a href="prettyphoto/images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>
<a href="prettyphoto/images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly!" /></a>
</div>

C.Initialize prettyPhoto
To initialize the prettyPhoto plugin use the following code. In the example below I've used the parameter 'social_tools: false' to remove the social buttons in the Lightbox (Facebook and Twitter). By setting the parameter to true however, they are shown.

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false
}
);
});
</script>

D. Final result in XPages
The final result is a great Image Gallery in XPages. Very easy to implement an use.


E. 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="prettyphoto/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" />
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div>
<a href="prettyphoto/images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="Photo 1"><img src="prettyphoto/images/thumbnails/t_1.jpg" width="60" height="60" alt="Round shape" /></a>
<a href="prettyphoto/images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_2.jpg" width="60" height="60" alt="Building" /></a>
<a href="prettyphoto/images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a>
<a href="prettyphoto/images/fullscreen/4.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a>
<a href="prettyphoto/images/fullscreen/5.jpg" rel="prettyPhoto[pp_gal]"><img src="prettyphoto/images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly!" /></a>
</div>
<xp:br></xp:br>
<</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
 $("a[rel^='prettyPhoto']").prettyPhoto({
 social_tools: false
 }
 );
});
</script>
</xp:view>

For more information: prettyPhoto documentation  and the blog post by Mark Roden jQuery in XPages #4 – prettyPhoto.

Tuesday, 6 October 2015

Using blueimp Gallery in XPages Part II - Combining the Lightbox with the Carousel setup in XPages

In this blog post I show how the Carousel setup of the blueimp Gallery can be used in XPages. To display images in an inline carousel instead of a Lightbox, follow the Lightbox setup as described in my previous blog post, Using blueimp Gallery A Touch-Enabled, Responsive and Customizable Image and Video Gallery, Carousel and Lightbox in XPages, and add the CSS class blueimp-gallery-carousel to the Gallery widget and remove the child element with the close class or add a new Gallery widget with a different id to the XPage. In the example below I add the Carousel setup along with the Lightbox.

A. Carousel setup in XPages
The Gallery as inline Carousel can be positioned anywhere on the XPage.
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>

B. Initialize the Carousel
To initialize the Carousel add the following JavaScript code after including the Gallery script.

<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>

C. Keyboard shortcuts
The Gallery can be controlled with the following keyboard shortcuts:

Return: Toggle controls visibility.
Esc: Close the Gallery lightbox.
Space: Toggle the slideshow (play/pause).
Left: Move to the previous slide.
Right: Move to the next slide.

Important: Please note that setting the carousel option to true disables the keyboard shortcuts by default. If the carousel option is true the following options are set to different default values:

var carouselOptions = {
hidePageScrollbars: false,
toggleControlsOnReturn: false,
toggleSlideshowOnSpace: false,
enableKeyboardNavigation: false,
closeOnEscape: false,
closeOnSlideClick: false,
closeOnSwipeUpOrDown: false,
disableScroll: false,
startSlideshow: true
};

The options object passed to the Gallery function extends the default options and also those options set via Carousel mode.

D. Final result in XPages
The final result is a responsive, touch enabled inline carousel combined with a Lightbox.


E. 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="blueimp/js/blueimp-gallery.js"></script>
<link rel="stylesheet" href="blueimp/css/blueimp-gallery.css" />
<link rel="stylesheet" href="blueimp/css/blueimp-gallery-indicator.css" />
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-sm-10">
<xp:br></xp:br>
<div id="links">
<a href="images/viewer1.jpg" title="Photo1">
<img src="images/thumbs/viewer1.jpg" alt="Photo1"></img>
</a>
<a href="images/viewer2.jpg" title="Photo2">
<img src="images/thumbs/viewer2.jpg" alt="Photo2"></img>
</a>
<a href="images/viewer3.jpg" title="Photo3">
<img src="images/thumbs/viewer3.jpg" alt="Photo3"></img>
</a>
</div>
<xp:br></xp:br>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<xp:br></xp:br>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<xp:br></xp:br>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true,
hidePageScrollbars: false,
toggleControlsOnReturn: true,
toggleSlideshowOnSpace: true,
enableKeyboardNavigation: true,
closeOnEscape: false,
closeOnSlideClick: false,
closeOnSwipeUpOrDown: false,
disableScroll: true,
startSlideshow: true
}
);
</script>
</xp:view>

Sunday, 4 October 2015

Upcoming Technical Conferences and IBM Events

In the coming period, some very interesting technical conferences and IBM events are organized. For these conferences and events you can still register. Below an overview of these conferences and events with a reference to the official websites.


Those who Lead in the Insight Economy are applying insights to uncover trends, discover patterns, recognize opportunities, create markets and change their industry.
At Insight 2015 explore the newest innovations, industry breakthroughs and hottest trends in analytics, cloud, mobile, the Internet of Things and Watson that you won't find anywhere else.
Explore the sessions. Insight offers a unique educational experience tailored to your needs. From business and industry solutions to deep-dive technical sessions, learn new ways to unlock the potential of data and analytics. Regardless of your interest, skill level or business priorities, the curriculum is designed to help you quickly and easily realize the full value of your investment.

For detailed information: Insight 2015 Agenda
Official Website: IBM Insight 2015

Discover the future of work! Two days of inspiring speakers, exceptional content and awesome networking! On November 5th & 6th, the Social Connections 9, the international and independent IBM Connections user group will be hosted in the IBM Client Center Ehningen in Germany. The event will offer two full days of high level sessions by internationally renowned speakers in six tracks: Administration, Case Studies, Development, Future of Work, Management and Spotlight. Be part of this great event where you will have the opportunity to talk to other users and experts of IBM Connections and to exchange experiences and information with them. 

For detailed information: Social Connections 9 Agenda
Official Website: Social Connections 9

The 7th SUTOL Technical Conference will be held on November 11, 2015 in Prague. For the first time, the agenda is full in English and we expect up to 200 attendees mainly from Central and Eastern Europe.
SUTOL, The Czech "Lotus user group", runs two conferences per year - one business oriented and one technical - with a stable audience of 100 people. This year, we decided to make the autumn event more international to bring together customers, business partners, sponsors and IBMers across country borders. The conference has two tracks (administration and development) focused on IBM Collaboration Solutions portfolio - IBM Notes/Domino, IBM Connections, IBM Sametime, IBM Connections Cloud and others.

For detailed information: SUTOL Agenda
Official Website: SUTOL Technical Conference 2015

Make every moment count—learn how at Connect 2016.
Discover the IBM solutions that increase collaboration and productivity by delivering the next generation work experience. Come to Connect to see first-hand how the new IBM digital assistant will help you focus on work that satisfies customers and grows your business. Learn how to deliver value at the point of impact with personalized and persuasive digital content across all customer and employee touch points.
Within the tracks there will be a variety of key capabilities and topics that will be covered during sessions to show how today’s most effective solutions extend throughout the enterprise. Capabilities include: messaging and collaboration; digital experience; meetings and chat; social collaboration and social content. In addition, to remain competitive, companies need to consider a broad range of related topics and implementations that can involve cloud, mobile, security, analytics, cognitive and commerce.

For detailed information: IBM Connect 2016 Agenda
Official Website: IBM Connect 2016


Plan to attend the IBM PartnerWorld Leadership Conference, hosted by Marc Dupaquier, General Manager, IBM Global Business Partners. Enroll early when registration opens in October and save with the Early Bird rate!
Join us and learn how to grow and transform your business in today's highest value opportunity areas – Cloud, Big Data and Analytics, Commerce, Security, Watson, the Internet of Things and more. Explore new ways to work and new ways to succeed.
Take your collaboration with IBM to new levels while inspiring greater growth.
Hear from IBM's senior leadership team, and discover all of the new ways that IBM can power your success. Connect with peers in the IBM Business Partner community – learn, discuss and team, and meet with IBM executives who can help influence opportunity. Experience IBM technologies in areas where clients need solutions most.

Official Website: IBM PartnerWorld Leadership Conference

Friday, 2 October 2015

jQuery in XPages: Using Image Viewer A Versatile and Flexible jQuery Image Viewer Plugin in XPages

Last week we had to implement an image viewer in a XPages database for presentation purposes. The viewer should be able to rotate, flip and zoom images. The choice was an easy one, Viewer.  In my opinion one of the best and perhaps the best jQuery Image Viewer plugin I've come across so far.
In this blog post I will show how Viewer, a Versatile and Flexible jQuery Image Viewer Plugin, can be used in XPages. Viewer is a powerful, multi-functional, cross-browser and highly configurable image viewer plugin used to present your favorite images in an elegant way. In the description below I use the setup that we used in our XPages database.

Main Features Viewer
  • Responsive and touch friendly.
  • Keyboard support.
  • Modal and Gallery modes.
  • Allows to zoom, rotate, flip images.
  • Tons of configuration options and APIs.

Setup in XPages
A. Adding the JS and CSS files
In order to use Viewer, the JavaScript and CSS files need to be included on the XPage / Custom Control. The latest version can be downloaded from GitHub: Viewer.
In this example a Folder viewer has been added in the WebContent Folder in the Package Explorer.


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

<link rel="stylesheet" href="viewer/css/main.css" />
<link rel="stylesheet" href="viewer/css/viewer.css" />  
<script type="text/javascript" src="viewer/js/main.js"></script>
<script type="text/javascript" src="viewer/js/viewer.js"></script>

B. AMD Loader Fix
The JavaScript file viewer.js need 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. The source code of the library can be adjusted in a very simple way with just a slight modification.

1. Go to the WebContent Folder and select the JavaScript file viewer.js
2. Select Open With - Client/Server JS Editor
3. Remove in the second line define.amd and replace it with false
4. Save the JavaScript file


C. Setup Gallery
The setup of the Gallery is quite simple in an XPage. The data-original attribute is used to specify the original version of the image.

<div class="row">
<div class="col-md-10">
<ul class="docs-pictures">
<img data-original="images/viewer1.jpg" src="images/thumbs/viewer1.jpg" ></img>
<img data-original="images/viewer2.jpg" src="images/thumbs/viewer2.jpg" ></img>
<img data-original="images/viewer3.jpg" src="images/thumbs/viewer3.jpg" ></img>
</ul>
</div>
</div>

D. Final result in XPages
The final result is a great responsive Gallery in XPages. Very easy to implement an use.


E. 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="viewer/css/main.css" type="text/css" />
<link rel="stylesheet" href="viewer/css/viewer.css" />  
<script type="text/javascript" src="viewer/js/main.js"></script>
<script type="text/javascript" src="viewer/js/viewer.js"></script>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<div class="row">
<div class="col-md-10">
<ul class="docs-pictures">
<img data-original="images/viewer1.jpg" src="images/thumbs/viewer1.jpg" ></img>
<img data-original="images/viewer2.jpg" src="images/thumbs/viewer2.jpg" ></img>
<img data-original="images/viewer3.jpg" src="images/thumbs/viewer3.jpg" ></img>
</ul>
</div>
</div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For more information about Viewer: A jQuery image viewing plugin.