Tuesday, 31 May 2016

Bootstrap Plugins in XPages Part XII - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (4)

In the previous blog posts I described the basic structure of the environment needed to install Bootstrap Plugins in an XPages using Bower, Git and SourceTree and how to setup Source Control for an XPages Application.
In this final blog post about installing Bootstrap plugins using Node and Bower the setup of SourceTree will be described, the placing (positioning) of the Bower files and the final installation of the Bootstrap plugins into the XPages Application.
Bower offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
Bower runs over Git, and is package-agnostic. A packaged component can be made up of any type of asset, and use any type of transport (e.g., AMD, CommonJS, etc.).
Bower depends on Node.js and npm. Also make sure that git is installed as some bower packages require it to be fetched and installed.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox
Part VIII : Bootstrap Maxlength
Part IX : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (1)
Part X : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (2)

1. SourceTree 
Open SourceTree. Select File - Clone / New. Next select the Tab + Create New Repository and select as Repository Type 'Git'.


Select the folder BowerForXPages in the Destionation Path and select Create. Do NOT select the Bower4XPagesODP folder.


Select Create. The new repository in SourceTree has now been created.


The local folder should look now like this.



2. Bower Files
Final step is to place the Bower files, .bowerrc and bower.json. Packages are defined by the manifest file bower.json. This is similar to Node’s package.json or Ruby’s Gemfile. In this example I placed the Bower files in the BowerForXPages directory.


Based on the placement of the Bower files in this example the .bowerrc file looks like this.

{
    "directory":"Bower4XPagesODP/WebContent/libs"
}

In the bower.json file I added some Bootstrap Plugins which should be installed in the XPages Application. In this example I selected Bootstrap, Moment, Select2 and FontAwesome. The bower.json file looks like this. More information about creating packages and the bower.json file can be found on the Bower website.

{
    "name": "bower4xpages",
    "version": "1.7.9",
    "dependencies": {
        "bootstrap": "latest",
        "moment": "latest",
        "select2": "latest",
        "fontawesome": "latest"
    },
    "private": true
}

To install the Packages (Bootstrap Plugins) start the Node.js command prompt. Next go to the directory where the Bower files are placed. Enter 'bower install' to install the Packages.


The Packages in the bower.json file are installed in the ODP in the directory libs.



The installed Packages can also be found in SourceTree.


The last step is to refesh the ODP (right click ODP - Refresh) in the DDE (Package Explorer) and next select the option Synch with NSF (right click on ODP in the Package Explorer - Team Development - Synch with NSF).


The Packages, Bootstap Plugins, are added to the XPages Application.
In the next blog post more about using Git Bash, SourceTree, GitHub and dealing with Bower files.

Sunday, 29 May 2016

Upcoming Webinar - Using Bootstrap Plugins in XPages including Bower - Git - Node - SourceTree and More

My second webinar, Expanding XPages with Bootstrap Plugins for Ultimate Usability, is scheduled for June 16th - 10:30 A.M. to 12:00 P.M. U.S. Eastern Time. Registration is open on the T.L.C.C. website.



Content of the Webinar
Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals, Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem.
Furthermore the installing of Bootstrap plugins in XPages Applications will be discussed. A demonstration will be given of the 'classic' way to implement Bootstrap Plugins within XPages Applications but also by using Bower, Node, Git and Source Tree.
Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown during this webinar.


For more information: XPages Webinar Series with T.L.C.C and Teamstudio
Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from May 10th by John Jardin, Optimus XPages Part 2: The Deep Dive.



Wednesday, 25 May 2016

Bootstrap Plugins in XPages Part XI - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (3)

In the previous blog posts I described the basic structure of the environment needed to install Bootstrap Plugins in an XPages using Bower, Git and SourceTree and how to setup Source Control for an XPages Application. Based on a comment by Eric McCormick I made some adjustments regarding the last blog post and put the ODP in a subdirectory of the Git project directory, so the .git directory will not be synced with the NSF. Below is a description of this change. A big thank you to Eric McCormick for his input and explanation.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox
Part VIII : Bootstrap Maxlength
Part IX : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (1)
Part X : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (2)

1. Create new XPages Application
First create a new XPages Application in the DDE (File - Application - New).


2. Create Local Folders
On your system create a local Folder SourceControl. This will be the local repository. The folder can be created, for example, in the My Documents directory. Next create in the SourceControl folder a new folder Git and a new folder Hg. Open the Git folder and create a new folder BowerForXPages. Open the BowerForXPages folder and create a sub-folder Bower4XPagesODP. The ODP is placed in a subdirectory of the Git project directory so the .git directory will not be synced with the NSF.


3. Domino Designer - ODP
Next step is to setup the BowerForXPages application for Source Control in the Domino Designer. Open the DDE and select Team Developement - Set Up Source Control for this Application.


The screen below appears.


Select Next. Enter a Project name. Deselect the option 'Use default location' and enter the folder location (the Folder created in step 2).


Select Finish. The folder should now look like this.


In the Package Explorer in the DDE the ODP is created and associated with the NSF.


In the next blog post the final steps will be described, setting up SourceTree and the installation of the Bootstrap plugins using Node and Bower.

Bootstrap Plugins in XPages Part X - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (2)

In the previous blog post I described the basic structure of the environment needed to install Bootstrap Plugins in an XPages application using Bower. Bower requires node, NPM (Node Package Manager) and Git. In this blog post I will describe the next step, set up the Source Control in DDE for XPages application

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox
Part VIII : Bootstrap Maxlength
Part IX : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (1)

1. Create new XPages Application
First create a new XPages Application in the DDE (File - Application - New).


2. Create Local Folders
On your system create a local Folder SourceControl. This will be the local repository. The folder can be created, for example, in the My Documents directory. Next create in the SourceControl folder a new folder Git and a new folder Hg. Open the Git Folder and create a new folder BowerForXPages.


3. Domino Designer - ODP
Next step is to setup the BowerForXPages application for Source Control in the Domino Designer. Open the DDE and select Team Developement - Set Up Source Control for this Application.


The screen below appears.


Select Next. Enter a Project name. Deselect the option 'Use default location' and enter the folder location (the Folder created in step 2).


Select Finish.

In the next blog post the final steps will be described, setting up SourceTree and the installation of the Bootstrap plugins using Node and Bower.

Monday, 23 May 2016

#NewWayToLearn - XPages And Boostrap Webinar - Expanding XPages with Bootstrap Plugins

My first Webinar 'Expanding XPages with Bootstrap for Ultimate Usability' is scheduled on 25th May 2016, at 13:00 UK time, 14:00 European time. It will be a maximum one-hour presentation, approximately 45 minutes plus 10 minutes for questions, conducted through Connections Cloud meetings.
The webinar is part of the of technical enablement program for IBM Business Partners, #NewWayToLearn. For more information: X.1.2 Expanding XPages with Bootstrap Plugins for ultimate usability.


Content of the Webinar
Develop highly user friendly responsive web (XPages) applications by making use of Bootstrap and JQuery Plugins as Select2, DateTimePickers, Multiselect, Confirmation, Modals,Popovers and Notifications for ultimate usability based on the latest versions of these plugins, including solutions for the AMD problem. Furthermore the installing of Bootstrap plugins in XPages Applications will be discussed. Expect more of XPages Applications and go beyond the basics and create applications that nobody ever thought possible using XPages. Comprehensive demos of several plugins are shown during this webinar.

My second webinar is scheduled for June 16th - 10:30 A.M. to 12:00 P.M. U.S. Eastern Time. Registration is open on the T.L.C.C. website. This will be a comprehensive webinar in which more is discussed in detail on the installation of the Bootstrap plugins and in which a number of other extras will be addressed including Bower and Node.

Friday, 20 May 2016

The IBM Collaboration Solutions' Developer Competition

At the recent ICON US conference the IBM Collaboration Solutions Developer Competition was launched.  This is great chance as an IBM Business Partner, IBM Champion or OpenNTF contributor to show what you can do with IBM's Collaboration platform and IBM Bluemix.



For more information I refer to the blog post by Alan Hamilton: Here's your chance to show your Cognitive and Cloud development skills.

On May 25th there is a free webinar. Registration is open, IBM Collaboration Solutions Developer Competition Webinar.
Are you enthusiastic about building solutions on IBM Domino or IBM Connections?  Do you want to work with IBM Bluemix and cognitive computing?  If so, then join us for this short, interactive webinar about the IBM Collaboration Solutions Developer Competition.  You'll find out what it is, how you can join, and hear about the prizes we're offering for the best solutions.  


Wednesday, 18 May 2016

Bootstrap Plugins in XPages Part IX - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (1)

In the next blog posts I will show how Bower can be used to install Bootstrap Plugins in XPages applications. This is not new and previously described by others but it should not be missing in this series. My final conclusion about Bower will probably astonish many people. In this blog post I will describe the basic structure of the environment needed to install Bootstrap Plugins in an XPages Application using Bower. Bower requires node, npm (Node Package Manager) and Git, so we start with installing Node.js and Git.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox
Part VIII : Bootstrap Maxlength

Step 1 - Install Node.js
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
Download Node.js and install Node.js on your system.


Step 2 - Install Git
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Git is easy to learn and has a tiny footprint with lightning fast performance. It outclasses SCM tools like Subversion, CVS, Perforce, and ClearCase with features like cheap local branching, convenient staging areas, and multiple workflows.
Download Git and install Git on your system.


Step 3 - Install SourceTree
SourceTree is a free Git & Mercurial Client for Windows or Mac. Use Source Tree to manage all your repositories, hosted or local, through SourceTree simple interface. Source Tree will be used for the association with the ODP (On Disk Project) of the new NSF (XPages Application).
Download SourceTree and install SourceTree on your system.


Step 4 - Install Bower
Keeping track of all the packages and make sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue! Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.
To get started, Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json. How you use packages is up to you. Bower provides hooks to facilitate using packages in your tools and workflows.
Bower is optimized for the front-end. If multiple packages depend on a package - jQuery for example Bower will download jQuery just once. This is known as a flat dependency graph and it helps reduce page load.

1. Open the Node.js Command Prompt
2. Enter: npm install -g bower


Step 5 - Create Bower files
To be able to run Bower there are two files required, bower.json and .bowerrc. When using multiple packages within an XPages Application it’s often a good idea to list these packages in a bower.json file. This will allow to install and update multiple packages with a single command.
These files can easily be created using Notepad or Notepad++. 
Below an example of a bower.json file:

{
    "name": "bootstrap4xpages",
    "version": "1.7.9",
    "dependencies": {
        "bootstrap": "latest",
        "moment": "latest",
        "select2": "latest",
        "fontawesome": "latest"
    },
    "private": true
}

Example of a .bowerrc file

{
    "directory":"nameofyournsf/WebContent/libs"
}


With the installation of Node.js, Git, SourceTree and Bower the basic environment we need is ready. In the next blog post I will explain in detail the manner in which Bootstrap Plugins, as Select2, can be installed in an XPages Application using Bower.

Tuesday, 17 May 2016

Bootstrap Plugins in XPages Part VIII - Bootstrap Maxlength A Visual Feedback Indicator For The Maxlength Attribute

Bootstrap Maxlength is a visual feedback indicator for the maxlength attribute.
The Bootstrap Maxlength plugin integrates by default with Twitter bootstrap using badges to display the maximum lenght of the field where the user is inserting text. Uses the HTML5 attribute "maxlength" to work. The indicator badge shows up on focusing on the element, and disappears when the focus is lost.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox

Below a description of the setup of the Bootstrap Maxlength plugin. Bootstrap Maxlength can be downloaded from GitHub.

A. Configurable options
  • alwaysShow: if true the threshold will be ignored and the remaining length indication will be always showing up while typing or on focus on the input. Default: false.
  • threshold: this is a number indicating how many chars are left to start displaying the indications. Default: 10.
  • warningClass: it's the class of the element with the indicator. By default is the bootstrap "label label-success" but can be changed to anything you'd like.
  • limitReachedClass: it's the class the element gets when the limit is reached. Default is "label label-important label-danger" (to support Bootstrap 2 and 3).
  • separator: represents the separator between the number of typed chars and total number of available chars. Default is "/".
  • preText: is a string of text that can be outputted in front of the indicator. preText is empty by default.
  • postText: is a string outputted after the indicator. postText is empty by default.
  • showMaxLength: if false, will display just the number of typed characters, e.g. will not display the max length. Default: true.
  • showCharsTyped: if false, will display just the remaining length, e.g. will display remaining lenght instead of number of typed characters. Default: true.
  • placement: is a string, define where to output the counter. Possible values are: bottom ( default option ), left, top, right, bottom-right, top-right, top-left, bottom-left and centered-right.
  • appendToParent: appends the maxlength indicator badge to the parent of the input rather than to the body.
  • message: an alternative way to provide the message text, i.e. 'You have typed %charsTyped% chars, %charsRemaining% of %charsTotal% remaining'. %charsTyped%, %charsRemaining% and %charsTotal% will be replaced by the actual values. This overrides the options separator, preText, postText and showMaxLength. Alternatively you may supply a function that the current text and max length and returns the string to be displayed. For example, function(currentText, maxLength) { return '' + Math.ceil(currentText.length / 160) + ' SMS Message(s)'; }
  • utf8: if true the input will count using utf8 bytesize/encoding. For example: the '£' character is counted as two characters.
  • showOnReady: shows the badge as soon as it is added to the page, similar to alwaysShow
  • twoCharLinebreak: count linebreak as 2 characters to match IE/Chrome textarea validation.
  • customMaxAttribute: String -- allows a custom attribute to display indicator without triggering native maxlength behaviour. Ignored if value greater than a native maxlength attribute. 'overmax' class gets added when exceeded to allow user to implement form validation.
  • allowOverMax: Will allow the input to be over the customMaxLength. Useful in soft max situations.
  • placement: is a string, object, or function, to define where to output the counter. Possible string values are: bottom ( default option ), left, top, right, bottom-right, top-right, top-left, bottom-left and centered-right. Custom placements can be passed as an object, with keys top, right, bottom, left, and position. These are passed to $.fn.css. A custom function may also be passed. This method is invoked with the {$element} Current Input, the {$element} MaxLength Indicator, and the Current Input's Position {bottom height left right top width}.

B. Adding the JS file to the WebContent Folder and XPage
First the JavaScript file bootstrap-maxlength.js must be added to the WebContent Folder in the Package Explorer. Also the JavaScript file bootstrap-maxlength.js must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<script type="text/javascript" src="bml/bootstrap-maxlength.js"></script>

C. Adding the x$ jQuery selector for XPages
Furthermore I use in this example the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. The XSnippet can be added to the Script Libraries.

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

The name of the id in the script must correspond with the id of the Edit Box or Multiline Edit Box (textarea field).

D. Setup Edit Box
In order to make the plug-in work properly an attribute maxlength needs to be added to the Edit Box.

<xp:this.attrs>
<xp:attr name="maxlength" value="25"></xp:attr>
</xp:this.attrs>.

The script itself can be made up as follows.

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-info",
limitReachedClass: "label label-warning",
placement: 'top',
preText: 'used ',
separator: ' of ',
postText: ' chars.'
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

E. Setup Multiline Edit Box
In order to make the plug-in work properly an attribute maxlength needs to be added to the Multiline Edit Box.The script for a Multiline Edit Box can be made up as follows.

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputTextarea1}" ).maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.',
validate: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

The final result is a nice Bootstrap look an feel feedback indicator for the maxlength attribute of an Edit Box and MultiLine Edit Box.


F. Code XPage (Gisthub Gist)
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type="text/javascript" src="bml/bootstrap-maxlength.js">
</script>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputText1}" ).maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-info",
limitReachedClass: "label label-warning",
placement: 'top',
preText: 'used ',
separator: ' of ',
postText: ' chars.'
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:inputTextarea1}" ).maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.',
validate: true
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<h3>Bootstrap Maxlength</h3>
<h4>Bootstrap Maxlength is a visual feedback indicator for the maxlength attribute.
The Bootstrap Maxlength plugin integrates by default with Twitter bootstrap using badges
to display the maximum lenght.</h4>
<xp:br></xp:br>
<div class="col-sm-6">
<label class="control-label"><strong>Text Field</strong></label>
<xp:inputText id="inputText1">
<xp:this.attrs>
<xp:attr name="maxlength" value="25"></xp:attr>
</xp:this.attrs></xp:inputText>
<xp:br></xp:br>
<label class="control-label"><strong>Textareas</strong></label>
<xp:inputTextarea id="inputTextarea1">
<xp:this.attrs>
<xp:attr name="maxlength" value="125"></xp:attr>
</xp:this.attrs></xp:inputTextarea></div>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

For more information: Bootstrap Maxlength
See also my Video Bootstrap Maxlength.

Friday, 13 May 2016

Update IBM Notes Domino Fix Pack 6 - IBM Notes Domino 9.0.1 Fix Pack 6 Release Notice

Yesterday IBM released IBM Domino and IBM Notes FP6 on Fixcentral.
Today IBM published the IBM Notes/Domino 9.0.1 Fix pack 6 Release Notice.
9.0.1 Fix pack 6 is a collection of low-risk, high-impact fixes to help customers safely avoid known issues. IBM strongly recommends that customers running Notes/Domino 9.0.1x upgrade to this latest Fix Pack since it addresses a small percentage of defects that impact the broadest set of customers.

Important Notes
9.0.1 Fix Pack 6 updates the embedded Notes/Domino JVM to 1.6 SR16 FP20 to address security vulnerabilities.
9.0.1 Fix Pack 6 adds support for IBM i 7.3.

9.0.1 Fix pack 6 Fix List descriptions:

Client
  • DSCK9TUNDR (LO87200) - Fixes Notes Windows Client issue: No more handles java/lang/OutOfMemoryError when in High Resolution mode. This is a regression in FP4. (technote 1977626)
  • JFCG9J3USJ (LO79962) - Fixes a potential Notes crash on very specific email addresses when a delivery failure notice is resent.
  • MBLTA4SEFK (LO79586) - Installing 9.0.1 FP5 Notes Windows Standard Client on top of another 9.0.1 FP/ or 9.0.1 FP4IF2, fails. This is a regression in 9.0.1 FP5. (technote 1972353)
  • RHOE9LUCJ7 (LO81184) - Fixes issue where the wait cursor can continually displayed after Notes is started.
  • WHAM7ESERK (LO29769) - Fixes issue where temporary attachment files from the system temp directory were not deleted when Notes was closed/restarted.  Additionally, an optional new Notes INI variable to delete files from the Notes temporary attachments directory upon Notes close/restart: AttachmentsDirectoryDelete=1 has been provided. This is off by default. (technote 1100416)
  • YSAI9HDEFK (LO87259) - Fixes issue that prevented the Notes Client printing to a Xerox printer. (technote 1903022)
  • GMAA9BGEGS (LO77014) - Fixes Windows Notes Client installation failure with error: "XPD: 09.09.2013 12:40:26 CActionsCommon/GetProperty: DEBUG - Retrieved property: RCP_INVALID_EXTERNAL_JVM_ERROR, Value: External VM is not valid - it must be a 1.5 or 1.6 Sun or IBM VM.". This only occurs on machines that have had JVM 1.5 & 1.6 removed from the OS.
  • JKEY9ZKJYR (LO86136) - Creating a new calendar entry on Windows 10 Norwegian locale leads to blank start date/end date.
Server
  • WBJT9YVM48 (LO85846) - Fixes MIME messages with character encoding CP936 (Simplified Chinese) displaying as garbage on the Notes Client. (technote 1977628)
  • HYYH9DF5GR (LO77900) - Fixes situation where emails in trash are not removed even if "Permanently delete documents after X hours" is set. This fix introduced a new Notes.ini CHECK_EXPIRED_SOFT_DELETES_ON_DBOPEN=1. This is off be default.
  • PACY9CGLQ3 (LO77454) - If the Client ID files has a newer name and the ID vault has the older name, after a sync, the Client ID file is reverted to use the older name and the user loses access.
  • MKIN9WMUYH (LO85291) - This fix allows a user to add a custom response header in the web server by setting notes.ini: HTTPAdditionalRespHeader=<text>; Example: HTTPAdditionalRespHeader=Cache-control: no-cache. (technote 1962324)
  • MKIN9WHT2N (LO84986) - Fixed an issue where an uncaught throw in URLstream::WriteChar crashes the web server.
  • DADS9Q3JW5 (LO82428) - Fixes Domino Server crash while converting MIME messages on HTTable::GetTableTextSize.
  • KHRL9AKSPM (LO76633) -  Fixes Domino Server crash when the Dir$ function is used against a drive that is not mapped. This is a regression in 9.0.
  • MKINA3SPYN (LO86887) - Fixes an intermittent Domino Server crash in crypto code when VerifyMAC() is passed a bogus length.
  • SHJR9HDJC7 (LO79624) - Fixes and intermittent Domino Server crash when decrypting SMIME due to an access violation in memory below SM_WriteToAsnBuf.
iNotes
  • KMOAA6LDVX (LO88282)- Fixes iNotes mail or calendar create failure when using Firefox 44/45. (technote 1978919)
  • MLEY9LKEFQ (LO81065) - iNotes 'More' menu items are blanked in Internet Explorer with ActiveX attachment. This is a regression introduced in 9.0.1.
  • YGAO9VNL8U (LO84666) - Notes Web:  Fixed an issue where some right-click menus displayed slowly using IE.
For more information: IBM Notes/Domino 9.0.1 Fix pack 6 Release Notice



Excellent XPages Webinar - Optimus XPages Part 2: The Deep Dive

On May 10th an excellent webinar was organized by T.L.C.C and Teamstudio 'Optimus XPages 2: The Deep Dive' by IBM Champion John Jardin.
For those who missed this webinar below the content, slides and video.

Content of the Webinar
In this webinar, John Jardin will continue his series "Optimus XPages - An Explosion of Techniques and Best Practices”, by providing an end-to-end Deep Dive demonstration on how to apply the methods described in the previous webinar from March, 2016. This follow-on webinar is for the more technical person…a fast paced demo showing off the design and coding, where everything will be explained on the fly.

John will start with a brand new XPages design and end off with a Cloud ready, single page application. Not enough you say? Fear not. John will end the webinar with some easter egg give aways that you don’t want to miss!




For more information and the sample database: XPages Webinar Series with T.L.C.C and Teamstudio
Missed a Webinar? Look here for the recorded webinars.
Registration is now open for the Webinar 'Expanding XPages with Bootstrap Plugins for Ultimate Usability' (by myself). You can register for these webinars on the T.L.C.C. website.

Thursday, 12 May 2016

IBM Domino and IBM Notes 9.0.1 FP6 available for download on IBM Fix Central

Today IBM has released IBM Domino and IBM Notes FP6 on Fixcentral.
IBM has identified important Notes/Domino SPRs to be fixed in the latest Fix Pack release, 9.0.1 Fix Pack 6. This notice serves as the Preliminary Fix List. All fixes in this Fix Pack have been selected through our Triage process of high impacting customer requested bug fixes and are currently undergoing testing.
Notes/Domino 9.0.1 Fix Pack 6 addresses defects in the Client, Server, Notes Browser Plug-in and Domino OpenSocial component. All Fix Packs are language independent and may be applied on any language version of Notes/Domino 9.0.1.

9.0.1 Fix Pack 6 Preliminary Fix List descriptions:

Client
  • DSCK9TUNDR (LO87200) - Fixes Notes Windows Client issue: No more handles java/lang/OutOfMemoryError when in High Res mode. This is a regression in FP4.
  • JFCG9J3USJ (LO79962) - Fixes Notes crash when a delivery failure notice is resent.
  • MBLTA4SEFK (LO79586) - Installing 9.0.1 FP5 Notes 9.0.1 Standard Client on top of another 9.0.1 FP/ or 9.0.1 FP4IF2, fails. This is a regression in 9.0.1 FP5.
  • RHOE9LUCJ7 (LO81184) - Fixes issue where the wait cursor is continually displayed when Notes is started.
  • WHAM7ESERK (LO29769) - Fixes issue where temporary attachment files from the system temp directory were not deleted when Notes was closed/restarted.  Additionally, an optional new Notes INI variable to delete files from the Notes temporary attachments directory upon Notes close/restart: AttachmentsDirectoryDelete=1 has been provided.
  • YSAI9HDEFK (LO87259) - Fixes issue that prevented the Notes Client printing to a Xerox printer.
  • GMAA9BGEGS (LO77014) - Fixes Notes Client installation failure with error: "XPD: 09.09.2013 12:40:26 CActionsCommon/GetProperty: DEBUG - Retrieved property: RCP_INVALID_EXTERNAL_JVM_ERROR, Value: External VM is not valid - it must be a 1.5 or 1.6 Sun or IBM VM."
  • JKEY9ZKJYR (LO86136) - Creating a new calendar entry on Windows 10 Norwegian locale leads to blank start date/end date.
Server
  • WBJT9YVM48 (LO85846) - Fixes MIME messages with character encoding CP936 displaying as garbage on the Notes Client.
  • HYYH9DF5GR (LO77900) - Fixes situation where emails in trash are not removed even if "Permanently delete documents after X(within 24) hours" is set.
  • PACY9CGLQ3 (LO77454) - If the Client ID files has a newer name and the ID vault has the older name, after a sync, the Client ID file is reverted to use the older name and the user loses access.
  • MKIN9WMUYH (LO85291) - This fix allows a user to add a custom response header in the web server. by setting notes.ini: "HTTPAdditionallRespHeader"
  • MKIN9WHT2N (LO84986) - Fixed an issue where an uncaught throw in URLstream::WriteChar crashes the web server.
  • DADS9Q3JW5 (LO82428) - Fixes Domino Server crash while converting MIME messages on HTTable::GetTableTextSize.
  • KHRL9AKSPM (LO76633) -  Fixes Domino Server crash when the Dir$ function is used against a drive that is not mapped. This is a regression in 9.0.
  • MKINA3SPYN (LO86887) - Fixes an intermittent Domino Server crash in crypto code when VerifyMAC() is passed a bogus length.
  • SHJR9HDJC7 (LO79624) - Fixes and intermittent Domino Server crash when decrypting SMIME due to an access violation in memory below SM_WriteToAsnBuf.
iNotes
  • THIO9NKEX7 (LO81776) - Fixes issue where duplicated Microsoft Office file attachments are incorrectly created if the file is edited on IE with ActiveX file attachment utility.
  • MLEY9LKEFQ (LO81065) - iNotes 'More' menu items are blanked in Internet Explorer with ActiveX attachment. This is a regression introduced in 9.0.1.
  • YGAO9VNL8U (LO84666) - Notes Web:  Fixed an issue where some right-click menus displayed slowly using IE.
More informtion: IBM Notes/Domino 9.0.1 Fix Pack 6 


Tuesday, 10 May 2016

Upcoming XPages, Bootstrap And Bluemix Webinars

Today a very interesting webinar will be organized by T.L.C.C and Team Studio, Optimus XPages Part 2: The Deep Dive, by IBM Champion John Jardin. The registration for this webinar is available on the T.L.C.C website.



Optimus XPages Part 2: The Deep Dive
May 10th - 10:30 A.M. to 12:00 P.M. Eastern U.S. time
by IBM Champion John Jardin
In this webinar, John Jardin will continue his series "Optimus XPages - An Explosion of Techniques and Best Practices”, by providing an end-to-end Deep Dive demonstration on how to apply the methods described in the previous webinar from March, 2016. This follow-on webinar is for the more technical person…a fast paced demo showing off the design and coding, where everything will be explained on the fly.

John will start with a brand new XPages design and end off with a Cloud ready, single page application. Not enough you say? Fear not. John will end the webinar with some easter egg give aways that you don’t want to miss!

Expanding XPages with Bootstrap for Ultimate Usability
My Webinar 'Expanding XPages with Bootstrap for Ultimate Usability' 'is scheduled on 25th May 2016, at 13:00 UK time, 14:00 European time. It will be a maximum one-hour presentation, approximately 45 minutes plus 10 minutes for questions, conducted through Connections Cloud meetings.
The webinar is part of the of technical enablement program for IBM Business Partners, #NewWayToLearn.



Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from April 12th, Getting Started with the OpenNTF Domino API.


Friday, 6 May 2016

Bootstrap Plugins in XPages Part VII - MagicSuggest A Highly Configurable jQuery Plugin For Auto-suggest Combo- and List Boxes

In this blog post I will show how the MagicSuggest plugin can be used in XPages. MagicSuggest provides a multiple selection Combo Box built for bootstrap themes. MagicSuggest can also be defined as a highly configurable jQuery plugin for Auto-suggest combo- and list boxes with a bootstrap theme. Although the plugin is no longer actively maintained it remains still interesting for combo- and list boxes with large selection options.

Bootstrap Plugins in XPages
Part I : Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part II : Bootstrap FileStyle - Customization of input file for Bootstrap
Part III : Dialog Boxes using Bootbox
Part IV : Awesome Bootstrap Checkbox
Part V : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part VI : jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part VII : MagicSuggest A Multiple Selection Combobox

Below a description of the setup of the MagicSuggest plugin. MagicSuggest can be downloaded from GitHub.

1. Adding the JS and CSS files
The JavaScript and CSS files must be added to the WebContent Folder in the Package Explorer. Next the JavaScript and CSS files, magicsuggest.js and magicsuggest.css, must be included on the XPage or Custom Control. In this example I add the files to an XPage.

<link rel="stylesheet" href="ms/magicsuggest.css" />
<script src="ms/magicsuggest.js"></script>

2. Adding the x$ jQuery selector for XPages
Furthermore I use in this example the the great XSnippet by Mark Roden, x$ jQuery selector for XPages, to initialize the plugin and include it on the Custom Control / XPage. The XSnippet can be added to the Script Libraries.

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

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

<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:comboBox1}" ).magicSuggest({
placeholder: "Select a category"
});
}
);
]]></xp:this.value>
</xp:scriptBlock>

3. Setup Combo Box
A basic setup of a Combo Box with a data-attribute.

<div class="col-md-7">
<xp:comboBox id="comboBox1">
<xp:this.attrs>
<xp:attr name="multiple" value="true"></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Notes Client 9" itemValue="Notes Client 9"></xp:selectItem>
<xp:selectItem itemLabel="Domino 9" itemValue="Domino 9"></xp:selectItem>
<xp:selectItem itemLabel="Administrator 9" itemValue="Administrator 9"></xp:selectItem>
<xp:selectItem itemLabel="Designer 9" itemValue="Designer 9"></xp:selectItem>
</xp:comboBox>
</div>

The final result is a bootstrap look and feel Multiple Selection Combo Box in XPages.


4. Setup List Box
The MagicSuggest plugin also works for a List Box.

<div class="col-md-7">
<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>


More information : MagicSuggest A Multiple Selection Combobox

5. Code XPages (GitHub Gist)
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<link rel="stylesheet" href="ms/magicsuggest.css" />
<script src="ms/magicsuggest.js"></script>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
 $(document).ready(
 function() {
 x$( "#{id:comboBox1}" ).magicSuggest({
 placeholder: "Select a category"          
 });
 }
 );
 ]]></xp:this.value>
</xp:scriptBlock>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$( "#{id:listBox1}" ).magicSuggest({
placeholder: "Select a category"          
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xc:ccLayoutBootstrap>
<xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div class="col-md-7">
<xp:comboBox id="comboBox1">
<xp:this.attrs>
<xp:attr name="multiple" value="true"></xp:attr>
</xp:this.attrs>
<xp:selectItem itemLabel="Notes Client 9" itemValue="Notes Client 9"></xp:selectItem>
<xp:selectItem itemLabel="Domino 9" itemValue="Domino 9"></xp:selectItem>
<xp:selectItem itemLabel="Administrator 9" itemValue="Administrator 9"></xp:selectItem>
<xp:selectItem itemLabel="Designer 9" itemValue="Designer 9"></xp:selectItem>
</xp:comboBox>
</div>
<xp:br></xp:br><xp:br></xp:br>
<div class="col-md-7">
<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>
</xp:panel>
</xp:this.facets>
</xc:ccLayoutBootstrap>
</xp:view>

Thursday, 5 May 2016

A New Milestone for XPages Development - IBM XPages for Bluemix Available For Production Environment

Today is a great day for XPages Developement. IBM XPages for Bluemix is now generally available! What does this mean for XPages Developers ? As Brian Gleeson mentioned in his article on IBM developerWorks this means that developers can now use the XPages runtime to build cloud-based applications for a real-world production environment. This is very very good news!
For more information: IBM XPages for Bluemix Now Generally Available!

The following video gives a good overview of why developers will want to explore XPages for building new applications or for modernizing existing IBM Notes and Domino applications.



For more information about IBM XPages for Bluemix vistit my summary page : IBM XPages on Bluemix.
Sign up for a free, 30-day trial of Bluemix to get started building with the XPages Runtime. You get access to 2 GB of runtime and container memory to run apps, unlimited IBM services and APIs, and complimentary support.