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.

No comments:

Post a Comment