Tuesday, 28 June 2016

Bootstrap Plugins in XPages Part XVII - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (9) - Recap

In this final blog post about installing Bootstrap Plugins in XPages Applications using Node, Git, SourceTree and bower-installer a recap of the previous blog posts. Main objective is to install only those files that are required for the Bootstrap or jQuery plugin to make it work in an XPages application and NOT the entire repository of these packages. So go beyond the basics for a clean design without entire repositories in your XPages applications!
In the following, a brief recap of the requires steps to use bower-installer for installing Bootstrap and jQuery plugins in XPages applications.

1. The basic structure of the environment 
To install Bootstrap and jQuery Plugins in XPages applications using bower-installer first a basic environment needs to be setup. bower-installer requires Node, Node Package Manager (npm) and Git. For the basic environment Node.js, Git, SourceTree and bower-installer needs to be installed on the local system.


2. Create Local Repository Directories
After the setup of the basic environment the local repository directory needs to be created. First create a local directory SourceControl, or another name of your own choice, on your system. 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 directory Git and a new directory Hg. Open the Git directory and create a new directory BowerForXPages. Open the BowerForXPages directory and create a sub-directory Bower4XPagesODP. The ODP (On-Disk Project) is placed in a subdirectory of the Git project directory so the .git directory will not be synced with the NSF. The names of the work- and ODP directories can be customized to your own preferences.


3. Domino Designer
In the Domino Designer first create a new XPages Application, in this example, BowerForXPages.
Next step is to setup the BowerForXPages application for Source Control in the Domino Designer. In the Domino Designer (DDE) select Team Developement - Set Up Source Control for this Application.


Enter a Project name in the next screen and deselect the option 'Use default location'. Enter as folder location the directory BowerForXPagesODP.


4. SourceTree
The next step is to create a new repository in 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.


The new repository in SourceTree has now been created.


5. Bower-installer
For the installation of bower-installer use Node and npm to install bower-installer globally. Open the Node command prompt and enter: npm install -g bower-installer.
Next create a bower.json file that only installs the files needed for the package, in this example Select2, to work in an XPages application.

{
  "name": "Bower4Xpages",
  "description": "Bower",
  "private": true,
  "dependencies": {
  "select2": "latest"
    },
  "install": {
        "path":  "bowertestodp/webcontent",    
  "sources" : {
      "select2": [
      "bower_components/select2/dist/css/select2.css",
      "bower_components/select2/dist/css/select2.min.css",
      "bower_components/select2/dist/js/select2.js",
      "bower_components/select2/dist/js/select2.min.js"
       ]
      }
   }
}

6. Create a local .gitignore file
To ensure that the bower_components directory, which is created after running bower-installer in Node, and the locally created bower.json and .gitignore files are not included in SourceTree and the On-Disk Project you can use a relatively simple solution, a local .gitignore file.
First create a .gitignore.txt file with the following lines (use Notepad or Notepad ++):
bower_components/
bower.json
.gitignore
Next save the .gitignore.txt file in the local work directory. Do not position the file in the On-Disk Project directory. Next open the Windows Command Prompt (Press “Win + X”, and select Command Prompt, or Command Prompt (Admin) to open the Command Prompt). Finally rename the .gitignore.txt file to .gitignore by typing ren .gitignore.txt .gitignore

Place the bower.json file and the .gitignore file in the BowerForXPages directory.


After running bower-installer in Node only the required files, indicated in the bower.json file, are now installed in the On-Disk Project in the directory WebContent.


The WebContent Folder in the On-Disk Project in the SourceControl directory.


With the positioning of the .gitignore file in the local Source Control directory the bower_components directory and the locally created bower.json and .gitignore files are NOT added to the repository in SourceTree.


The last step is to refesh the On-Disk Project (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). Only the selected files are installed in the XPages application!


Conclusion, there is a very simple solution to get only the files you need for the specific packages without installing the entire repository of these packages. So go beyond the basics for a clean design without entire repositories in your XPages applications!

Sunday, 26 June 2016

IBM Client Application Access 1.0.1 (ICAA) Enhancements

IBM® Client Application Access (ICAA) is a small, stand-alone application that allows you to work with your IBM Notes® and IBM Domino® applications. It is supported on Microsoft Windows and Mac OS systems.


ICAA is integrated with IBM Verse and IBM SmartCloud® Notes web mail clients. For on-premises users, ICAA is integrated with IBM iNotes®. When you use one of these brower-based mail clients and receive an email that contains a link or button to a Notes application, you can click the link or button to open the application in ICAA. You can also open ICAA by clicking its icon on the Desktop. From ICAA, you can open your browser-based mail client to access your mail.
Along with local applications, IBM® Client Application Access supports applications on older IBM Domino® server versions, for example, 8.0.x and 8.5.x. However, using Domino version 9.0 or later version is recommended so that you can take advantage of the latest enhancements.

IBM® Client Application Access (ICAA) and IBM Notes® release 9.0 or later can co-exist on your system. In this case, you can use either Notes or ICAA. When you open an application and Notes is not running, the application is opened in ICAA.
The following table describes dual-client installation scenarios, both supported and unsupported.


ICAA 1.0.1 includes the following enhancements and is available for download:
  • To provide an improved user experience, ICAA runs as a stand-alone application on both Mac OS and Microsoft Windows. Previously, ICAA on Windows ran in a browser.
  • Support is added for all @commands.
  • For improved IBM Verse integration, it offers a look and feel consistent with the Verse user interface.
  • ICAA can now co-exist with IBM® Notes® 9.0 or 9.0.1. When you install ICAA and Notes is already installed, Notes stays on your computer and ICAA uses the Notes data directory.

For more information, see the IBM Client Application Access 1.0.1 documentation. For download search for Part Number WIN CNA9XEN.

Wednesday, 22 June 2016

Bootstrap Plugins in XPages Part XVI - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (8) - Using .gitignore

In the previous blog posts I have given a brief introduction of bower-installer and how to install only the files needed for the specific Bootstrap or jQuery plugin to make it work in an XPages application based on a bower.json file. In this blog post I will describe the solution to the last problem which with the use of bower-installer did came forward, the bower_components directory, that should not be included in SourceTree and the On-Disk Project. bower-installer is a tool for installing bower dependencies that won't include entire repositories.

Bootstrap Plugins in XPages
Part 01 - Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part 02 - Bootstrap FileStyle - Customization of input file for Bootstrap
Part 03 - Dialog Boxes using Bootbox
Part 04 - Awesome Bootstrap Checkbox
Part 05 - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part 06 - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part 07 - MagicSuggest A Multiple Selection Combobox
Part 08 - Bootstrap Maxlength
Part 09 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (1) - Bower
Part 10 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (2) - DDE
Part 13 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (5) - Bower Files
Part 14 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (6) - Introduction bower-installer
Part 15 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (7) - Overriding main files

Create a local .gitignore file
To ensure that the bower_components directory is not included in SourceTree and the On-Disk Project we can use a relatively simple solution, a local .gitignore file.
Basically a gitignore file specifies intentionally untracked files that Git should ignore. .gitignore is a file which lists files and directories that should not include as part of a repository.
.gitignore interprets direct filenames and wildcards (both of which are recursive, front and back). This recursive behavior can be stopped by adding a leading / to the line. Certain files can also be excepted from wildcards by using the ! syntax.
Files already tracked by Git are not affected. Each line in a gitignore file specifies a pattern. When deciding whether to ignore a path, Git normally checks gitignore patterns from multiple sources, with a specific order of precedence, from highest to lowest. For more info about the patterns see the Git documentation.

In this example I use only one line in the .gitignore file to ignore the bower_components directory.
First create a .gitignore.txt file with the following line:
bower_components/
Next save the .gitignore.txt file in the local work directory, the Source Control directory, do not position the file in the On-Disk Project directory, and open the Windows Command Prompt (Press “Win + X”, and select Command Prompt, or Command Prompt (Admin) to open the Command Prompt). Finally rename the .gitignore.txt file to .gitignore by typing ren .gitignore.txt .gitignore
The Source Control directory should now look like this:


SourceTree
After running bower-installer in Node the bower_components directory is created in the local Source Control direcory.


With the positioning of the .gitignore file in the local Source Control directory the bower_components directory will not be added to the repository in SourceTree.


Domino Designer
After refreshing the On-Disk Project (ODP) in the Domino Designer (DDE) and syncing the ODP with the NSF file the bower_components folder is also not added to the XPages application simply because the bower_components directory is not present in the ODP by the existence of the .gitignore file!


The simple .gitignore file solves the last problem using bower-installer for installing Bootstrap and jQuery plugins in XPages applications.
Conclusion, there is a very simple solution to get only the files you need for the specific packages without installing the entire repository of these packages. So go beyond the basics for a clean design without entire repositories in your XPages applications!

Tuesday, 21 June 2016

Replay Webinar Expanding XPages with Bootstrap Plugins for Ultimate Usability including Node and Bower

On June 16th my Webinar 'Expanding XPages with Bootstrap Plugins for Ultimate Usability' was organized by T.L.C.C and Teamstudio. For those who missed this webinar below the content, demo database, slides and video. I would like to thank Paul Della-Nebbia and Howard Greenberg from T.L.C.C. and Courtney Carter from Teamstudio for giving me this opportunity. I hope I get a second opportunity for a second webinar to go more deeply into Bower and bower installer to install Bootstrap and jQuery plugins in XPages.

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. Comprehensive demos of several plugins are shown during this webinar.


Demo database
The corresponding demo database can be downloaded via this link: Demo Database Webinar
In this demo database, you can find numerous at examples or Bootstrap Plugins in an XPages application zoals Select2, Bootstrap DateTimePicker, Multi Select, Font Awesome Check Boxes, Notifications, Models, galleries and Reusable Bootstrap Fields-including validation.
In several at examples in the demo database, you can find a link to the blog post correspondance thing on XPages and More. In the demo database there are some usefull examples included Concerning the AMD Fix.


Video and slides



Recording Webinar Expanding XPages with Bootstrap Plugins for Ultimate Usability

Monday, 20 June 2016

Notes Domino XPages Communities and XPages Top Resources



As you may know, I am Moderator of the Google+ XPages Community (and Curator of Collaboration Today). Together with the owner Rob Bontekoe, my old XPages teacher, the Google+ XPages community was founded some years ago.
The aim of this community is to promote XPages as a development tool and sharing information about XPages, Notes Domino and IBM XPages for Bluemix.

At this time, the community has 506 members and is still expanding!
If you are not yet a member of this community and want to be kept informed of the latest news and if you want to share news about Notes Domino and XPages then join the Google+ XPages Community now.
The more members the more news and the more it is shared within our amazing community.

Link to the Google+ XPages Community : XPages Community


There are a lot of great Notes Domino and XPages resources available. Below my favorite resources, news aggregators and blogs.

1. NotesIn9 - David Leedy
This site mostly focused on Web development by primarily using XPages technology from IBM Domino Servers but you never know when other technology might show up.

2. Collaboration Today
Collaboration Today is a news aggregator for IBM Collaboration Solutions professionals covering news about various IBM products like IBM Connections, IBM Domino, IBM WebSphere Portal etc. and cross product topics like mobile, cloud and analytics.

3. Planet Lotus
Planet Lotus is an aggregation of Lotus related blogs and news. It acquaints those interested in the Lotus Blogosphere with the best blogs out there. 278 Lotus blogs updated hourly.

4. XPages.info
Get started with XPages, Downloads, Demos, Resources and Videos.
XPages is a web and mobile application development platform. It allows IBM Lotus Notes data as well as data from relational and other data sources to be displayed to browser clients on all platforms.
The programming model is based on standards and common web development skills like JavaScript, Ajax, the Dojo Toolkit, Server-side JavaScript, and JavaServer Faces. XPages leverages IBM Lotus Domino functionality, like its NoSQL document-oriented database.

5. Stackoverflow
A great resources for questions and answers about XPages. Just search for XPages or for a specific part of XPages. Stackoverflow is a language-independent collaboratively edited question and answer site for programmers.

6. Notes Domino XPages development forum

7. OpenNTF
OpenNTF was launched in 2002 by committed members of the Lotus Notes/Domino community. The organization provided a hosting site for sharing applications and useful code for the Notes and Domino platform. Projects have included full blown client and web applications, rich client plugins, administrative tools and more. Over the years the scope of OpenNTF has expanded, to include IBM Sametime, IBM Connections, IBM Connections Cloud, IBM Forms, IBM Websphere Portal and beyond. In 2015 we anticipate including content for the IBM Bluemix platform.


My favorite and highly recommended blogs:

Oliver Busse
Xcellerant - Brad Balassaitis
Xomino - Mark Roden
XPageDeveloper - Fredrik Norling
Notes Speak - Steve Zavocki
LinQed - Mark Leusink
Intec Blog - Paul Withers

Sunday, 19 June 2016

Demo Database Webinar Expanding XPages with Bootstrap Plugins including Node and Bower

On June 16th T.L.C.C. and Teamstudio have given me the opportunity to conduct a webinar, Expanding XPages with Bootstrap Plugins for Ultimate Usability. A big thank you to Paul Della-Nebbia and Howard Greenberg from T.L.C.C. and Courtney Carter from Teamstudio.


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. Comprehensive demos of several plugins are shown during this webinar.

Demo Database
In this blog post the corresponding demo database can be downloaded.  In this demo database you can find numerous examples of Bootstrap Plugins in an XPages application such as Select2, Bootstrap DateTimePicker, MultiSelect, FontAwesome Checkboxes, Notifications, Models, Galleries and Reusable Bootstrap Fields including validation.
In several examples in the demo database you can find a link to the corresponding blog post on XPages and More. In the demo database there are also some examples included concerning the AMD Fix.
Download Webinar Demo Database

Some remarks: The current version of the demo database uses the OpenNTF Bootstrap4XPages plugin. Next month I will publish a new version of the demo database based entirely on the OpenNTF Extension Library with more examples of Bootstrap and jQuery plugins in XPages applications. With this new version also a demonstration video will be published. Furthermore the demo database is set up for demonstration purposes only. Check the Custom Controls or XPages for the code examples.
Below some examples from the Demo Database.

Download Webinar Demo Database

Domino 9.0.1 Fix Pack 6 Interim Fix 1 available for download on IBM Fix Central



9.0.1 FP6 IF1 is available for only W64, Linux64, and AIX64 platforms. 9.0.1 FP6 IF1 will be a requirement for the upcoming on-premise release of IBM mail support for Microsoft Outlook.


NRBYAA2G9G
C&S APIs - If CalUpdateEntry adds an attendee for the series, only the first instance is updated

NRBYAAJJJ3
Meetings across DST boundaries from C&S APIs or IBM mail support for Microsoft Outlook (IMSMO) show bogus times if server is not in client timezone.

NRBYAABTGX
Cached profile documents causing high shared memory consumption during IMSMO long run

Downloads:
Domino 9.0.1 Fix Pack 6 Interim Fix 1 W64
Domino 9.0.1 Fix Pack 6 Interim Fix 1 Linux64

Friday, 17 June 2016

Quick Tip: GetDocumentByUnid Method in LotusScript Agents



In the past period we were frequently faced with the 4091 error message, 'Invalid universal id'  using the LotusScript GetDocumentByUNID method in an Agent.
In the specific Notes Database Application some Query definitions were used where the DocumentUnid was stored in an environment variable. The Unid was then used in an Agent to display the results of the Query definition in a Folder. Problem we frequently encountered was the error 4091 Message: Invalid universal id”
The method getDocumentByUNID NotesDatabase class returns the appropriate document for the UniversalUnid passed as argument, but it does not return Nothing if it does not find the document but the error 4091. Also it may return an irrelevant "ghost" Lotus Notes document, also known as a deletion stub.
By a colleague we were pointed to the following LotusScript function, DatabaseGetDocumentByUnid. We added this function in a Script Library and adjusted the corresponding Agent accordingly. The result: no more 4091 errors!

Function DatabaseGetDocumentByUnid (db As NotesDatabase, unid$) As NotesDocument
On Error 4091 Resume Next
Set DatabaseGetDocumentByUnid = Nothing
Set DatabaseGetDocumentByUnid = db.GetDocumentByUnid(unid$)
If Err = 4091 And ( DatabaseGetDocumentByUnid Is Nothing ) Then
Err = 0
Set DatabaseGetDocumentByUnid = Nothing
Exit Function
End If
If DatabaseGetDocumentByUnid Is Nothing Then
Set DatabaseGetDocumentByUnid = Nothing
Exit Function
End If
If DatabaseGetDocumentByUnid.Size = 0 Or DatabaseGetDocumentByUnid.UniversalID = "" Or DatabaseGetDocumentByUnid.IsDeleted Then
Set DatabaseGetDocumentByUnid = Nothing
Exit Function
End If
End Function

More information about How to correctly use the GetDocumentByUnid method in LotusScript: TechTarget - SearchDomino

#NewWayToLearn - XPages And Boostrap Webinar - Expanding XPages with Bootstrap Plugins including Node, Git, Bower and SourceTree


This webinar was 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.

A recording of this webinar is available on the #NewWayToLearn website: Recorded Webinar. You can also download the recorded webinar, Download Recorded Webinar. This was my first webinar so be a little generous in your judgment and I must admit I'm a better writer than speaker but I at least have participated in the program.


Tuesday, 14 June 2016

Bootstrap Plugins in XPages Part XV - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (7) - Overriding main files

In the previous blog post I have given a brief introduction of bower-installer. bower-installer is a tool for installing bower dependencies that won't include entire repos. The problem which has been encountered with bower-installer in the previous blog post was that not all files which were required for the package (Bootstrap plugin) were installed in the On-Disk Project based on the bower.json file of the Package itself. For this problem there is an easy solution.

Bootstrap Plugins in XPages
Part 01 - Bootstrap-select - A jQuery plugin that utilizes Bootstrap's dropdown.js
Part 02 - Bootstrap FileStyle - Customization of input file for Bootstrap
Part 03 - Dialog Boxes using Bootbox
Part 04 - Awesome Bootstrap Checkbox
Part 05 - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes
Part 06 - jQuery and JavaScript AMD (Asynchronous Module Definition) Fixes (2)
Part 07 - MagicSuggest A Multiple Selection Combobox
Part 08 - Bootstrap Maxlength
Part 09 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (1) - Bower
Part 10 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (2) - DDE
Part 13 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (5) - Bower Files
Part 14 - Using Node.js - Bower - Git and SourceTree to install Bootstrap Plugins (6) - Introduction bower-installer

As mentioned before, a lot of registered components for bower do not include bower.json configuration. Therefore, bower does not know about any "main files" and therefore, by default bower-installer doesn't know about them either. Bower-installer can override an existing main file path or provide a non-existant one.
In the following Select2 is used as an example. For Select2 at least the files 'select2.js' and 'select2.css' are required to make the plugin work in an XPages application.
For this the bower.json file has to be changed so that the necessary files are installed in the On-Disk Project and the bower.json file of Select2 itself (in the bower_components directory) will be overwritten.
In many situations it is necessary to install multiple files from a single component, like Select2. This can be accomplished by providing an Array instead of a String inside the hash sources of the bower.json file. To install multiple files the bower.json file should look like this

{
  "name": "Bower4Xpages",
  "description": "Bower",
  "private": true,
  "dependencies": {
  "select2": "latest"
    },
  "install": {
        "path":  "bowertestodp/webcontent",      
  "sources" : {
      "select2": [
      "bower_components/select2/dist/css/select2.css",
      "bower_components/select2/dist/css/select2.min.css",
      "bower_components/select2/dist/js/select2.js",
      "bower_components/select2/dist/js/select2.min.js"
       ]
      }  
   }
}

After running bower-installer in Node only the required files, indicated in the bower.json file, are now installed in the On-Disk Project in the directory WebContent..


Directoy WebContent in the On-Disk Project.


This solves the first problem concerning the files which are really necessary for the packages.
In the next blog post the solution to the second problem, the bower_components directory (including some other files), that should not be included in the Source Tree and the On-Disk Project.

Sunday, 12 June 2016

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

This Thursday my second webinar, Expanding XPages with Bootstrap Plugins for Ultimate Usability is scheduled. 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. Comprehensive demos of several plugins are shown during this webinar.

Main topics during this Webinar are:
Introduction
Top Resources for XPages and Bootstrap
Implementation External Bootstrap Plugins
AMD (Asynchronous Module Definition)
Demo's Bootstrap Modals, LightBox, Unite Gallery, Select2, Multiselect, DateTimePickers, Viewer and More
Bower for XPages -Demo
Reusable Bootstrap Fields 


For more information: XPages Webinar Series with T.L.C.C and Teamstudio
Missed a Webinar? Look here for the recorded webinars.

Thursday, 9 June 2016

Bootstrap Plugins in XPages Part XIV - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (6) - bower-installer

In the previous blog post we examined the imported files in the XPages application when using Bower to install Packages (Bootstrap Plugins). We noticed that Bower installs entire repositories and not just the files that we need. In this blog post a first introduction to bower-installer for installing Packages in an XPages application. bower-installer is a tool for installing bower dependencies that won't include entire repos. Although Bower works great as a light-weight tool to quickly install browser dependencies, it currently does not provide much functionality for installing specific "built" components for the client. As mentioned before Bower installs entire repositories and that is not what we want!
If bower install is run on a configuration file (bower.json), the entire repository will be pulled down and copied into a specific directory (.bowerrc). This repository is often quite large, when probably only a built js and css file are needed.
In this blog post I will describe the first basic usage of bower-installer and the first steps to get only the files we need in the On-Disk Project and, after sync with the NSF, in the 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)
Part X : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (2)
Part XIII - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (5)

Using bower-installer
First, we need to install the bower-installer package. For the installation we use Node and npm to install bower-installer globally. Open the Node command prompt and enter: npm install -g bower-installer. After installing, the simplest way to use bower-installer is to specify the path you would like to use. bower-installer will try to grab the relevant, main, files, but if it can’t because the main files aren’t defined, then there is always a possibility to override with the specific files you want.

Bower.json file
The second step is to create a bower.json file. Bower installer provides an easy way for the main files to be installed or moved to one or more locations. Simply add to the bower.json an install key and path attribute. In the example below I use Select2 as only dependency in the bower.json file (for demonstration purpose only). The bower.json file should look similar to the following example below. Furthermore no .bowerrc file is used in order to prevent that the entire repository will be installed in the On-Disk Project.

{
  "name": "Bower4Xpages",
   "description": "Bower",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
   "test",
    "tests"
  ],
  "install" : {
  "path" : "bowertestodp/webcontent"
  },
  "dependencies": {
  "select2": "latest"
    }
}

Run bower-installer
From the Node command prompt, in the same directory as the bower.json file, enter: bower-installer


After installation, two directories have been created in the SourceControl directory where the On-Disk Project directory is included.
First a new bower_components directory has been created outside the On-Disk Project directory. This directory contains the entire repository of Select2 including a Select2 bower.json file which contains the main files which have been installed in the On-Disk Project directory. 



So based on the bower.json file in the Select2 repository in the bower_components directory ONLY the Select2 main files have been installed in the On-Disk Project in the directory WebContent/Select2 based on the created bower.json file in step 2 (install path).


The Select2 bower.json file includes the following installation information for bower-installer. The files select2.js and core.scss are the main Select2 files in the Select2 bower.json file.

{
  "name": "select2",
  "description": "Select2 is a jQuery based replacement for select boxes. It supports searching, remote   data sets, and     infinite scrolling of results.",
  "main": [
  "dist/js/select2.js",
  "src/scss/core.scss"
  ],
  "repository": {
  "type": "git",
   url": "git@github.com:select2/select2.git"
  },
  "homepage": "https://github.com/ivaynberg/select2",
  "version": "4.0.3",
  "_release": "4.0.3",
   "_resolution": {
   "type": "version",
   "tag": "4.0.3",
   "commit": "566c7846fbf8c3b7674346f26d0ee872c0a77629"
  },
  "_source": "https://github.com/ivaynberg/select2.git",
  "_target": "*",
  "_originalSource": "select2"
}

The final result after sync the On-Disk Project with the NSF in Domino Designer (DDE). Only the main files are installed in the XPages application.


This is a significant step forward and already works a lot better than the standard Bower installation but we still don't have all the files we need to make Select2 work in an XPages application. Problem is also that a lot of registered components (packages) for Bower do not include a bower.json configuration. Therefore, Bower does not know about any "main files" and therefore, by default bower-installer doesn't know about them either. Finally we have a problem with the bower_components directory. This directory is included in the git repository and also in SourceTree and will be synced with the NSF. So for now the bower_components directory should be removed after running bower-installer in Node and before syncing with the NSF. It will be recreated when running bower-installer again in Node.
But there is a solution for these problems. bower-installer can override an existing main file path or provide a non-existant one. In the next blog post a closer look at overriding the main files and installing multiple main files using bower-installer.

Wednesday, 8 June 2016

Bootstrap Plugins in XPages Part XIII - Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (5) - Bower Files

In my previous blog post I described how to install Bootstrap plugins using Node and Bower, the setup of SourceTree , the placing (positioning) of the Bower files and the final installation of the Bootstrap plugins (Packages) into the XPages application. In this blog post we take a closer look at the imported files in the XPages application when using Bower to install Packages (Bootstrap Plugins). This blog post is also an introduction to a deep dive into Bower including a number of solutions in order to download only the files that are necessary for the specific Bootstrap Plugin in an 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)
Part X : Using Node.js, Bower, Git and SourceTree to install Bootstrap Plugins (2)

Before we take a closer look at the imported files first some considerations that have to be taken into account when using Bower to install Packages.
First of all, any changes in the source code of the packages is futile. The next update will override everything. So, for example, no more throwing components out of Bootstrap to reduce size because we don't need them.
Secondly the package we are searching for might not exists. We do not have a lot of options in this case and will still have to revert back to the good old find, download, extract and copy way.
Finally when using a standard Bower install based on a bower.json file and a .bowerrc file, Bower installs entire repositories. This means that all files from the repository are imported and NOT only the files that are needed for a specific Package (Bootstrap Plugin) to make it work in an application.
This is a major disadvantage of the standard installation of Bootstrap Plugins using Bower.

Let's take a closer look at the Select2 files we imported in the previous blog post. Based on the bower.json file we used, Select2 4.0.3 has been installed in the On-Disk Project (ODP) after running 'bower install'.

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


After syncing the ODP (On-Disk Project) with the NSF in the Domino Designer (DDE) the following files have been imported in the Select2 folder in the XPages application.


However, to use Select2 within an XPages application we only need the files in the dist folder.


For me personally this is not the desired outcome. A large number of files have been installed in the NSF that are completely unnecessary for the functioning of the Bootstrap plugin in an XPages application. In the next blog posts we take a deep dive into Bower and provide some solutions how to grab only the files which are really needed for a Bootstrap Plugin when using Bower for installing Packages in XPages applications.

Thursday, 2 June 2016

XPages Extension Library Release 17 Available For Download

This release is the seventeenth IBM Notes Domino 9.0.1 version of the XPages Extension Library (ExtLib) to OpenNTF. It contains updates to the Bluemix tooling to support new environmental variables. It also contains a number of community developer contributions. Be aware of technote SWG21696682 as it affects the installation of the Extension Library if the UpdateSite.nsf process is used.

The following new changes have been added to this release:
  • New Bluemix environmental variables (security and debug related)
  • New Dash Node property – displayNodeAsLink
  • New Blank Bootstrap3 theme
  • SPR Fixes
  • Change Log Update

New Bluemix environmental variables (security and debug related)
In this release of the Extension Library, new Bluemix environment variables are available to control some security and debug aspects your Bluemix XPages application. To control these new environment variables, new options have been added to the Environment Variables page of the Bluemix Manifest editor in Domino Designer.
  • Redirect to SSL (APP_REDIRECT_TO_SSL)
  • Debug staging (APP_DEBUG_STAGING)
  • Debug threads (APP_DEBUG_THREADS)
  • Debug directory assistance (APP_DEBUG_DIRECTORY_ASSISTANCE)
  • Debug name lookup (APP_DEBUG_NAMELOOKUP)

New Dash Node property – displayNodeAsLink
The Dashboard control makes use of the dashNode complex type to populate the dashboard. Dash nodes have a labelHref property that can be applied, which turns the dash node label into a link for the supplied URL.
The new displayNodeAsLink property allows for the entire node to be wrapped in a link, instead of just the label. This includes any icon or image used for that dash node. All this makes the dash node link easier to click on smaller mobile devices. The default value of displayNodeAsLink is false, matching the old behaviour.

New Blank Bootstrap3 theme
A new theme has been added to the Bootstrap plugin in this release of the Extension Library called Bootstrap3_blank.theme.
The new “blank” theme provides all of the necessary definitions for an XPages Bootstrap theme except for the Bootstrap CSS and Javascript files. This means that application developers can easily insert their own custom Bootstrap build by extending the blank theme.
Unlike the two existing themes, Bootstrap3.theme and Bootstrap3_flat.theme, this new theme is not visible in the theme dropdown list in Domino Designer. The reason for this is that this theme is considered to be a theme for advanced use cases and is unlikely to be one that is used commonly by XPages application developers. Also, by itself, this theme will not work out of the box since it is missing the Bootstrap resources and requires some extra steps to use it properly.

Update of the Bluemix Tooling to support TLSv1.2
The Bluemix Tooling has been updated to support TLSv1.2.

For more information see the ReadMe file.
The XPages Extension Library Release 17 can be downloaded from OpenNTF.