Select which .js file will be included in pages?

Bootstrap Studio Help
1

Hi,

How can I choose which .js file will be included in html?

For example: I have two .js files: file1.js and file2.js. And I also have two .html files: file1.html and file2.html

I want that file1.html include only file1.js and file2.html include only file2.js.

I saw that the .js are included automatically and I cannot find a way to disable this.

There is a way to do this?

Regards,

2

All JS files and CSS files are attached to all HTML files at this time. We're hoping the devs will give us this ability to separate them in the future, but right now just add them in and be sure to reorder them if needed so that they are in the correct order. Right click on the title Javascript or Styles in the right column to get the menu. The last choice for changing the file order will give you a new window to drag them where you need them. The Default Bootstrap files are not movable.

3

This may not work for everyone, but I am working around this problem using dynamic loading.

In my development environment I use both Boostrap Studio (BSS), Eclipse and some deployment of the LAMP stack (e.g. WAMP) to provide the HTTP and database server back-end. Whilst BSS is really great for putting the UI together very quickly, it does not provide the most satisfying environment for editing more complex JavaScript files yet.

So, to keep the amount of JavaScript to be edited in BSS as small as possible and keep my application footprint small, I do the following.

  1. Download the Require.js API and import it into Bootstrap Studio (yes, you can also link it from CDN or your own HTTP server).
  2. Create a small JavaScript file in BSS to load the Require.js configurations (see xloader.js example).
  3. Create a simple dependency manager script to load the JavaScript file required for a specific page (see depman.js example).
  4. Put a page name in the ID attribute of the page BODY tag.
  5. Create the JavaScript file to be loaded for the page.

Some basic environment information:

  1. My development environment uses the BSS configurations and I have set it up to use jQuery 2.2.4 on the Design Settings -> Main tab.
  2. I do not use code round tripping, so all the assets created by BSS will be overwritten every time I do an export.
  3. To prevent cross-site (XSS) complexities I not use the BSS preview function. Instead I export all the code to the filesystem from where my HTTP server server them up and I can edit all the non-BSS files using Eclipse.
  4. <HOME> is a placeholder for the directory BSS is configured to export to.
  5. BSS exports the JavaScript files into a folder name <HOME>/assets/js folder. For simplicity I put all the custom JS files into the same structure. For this example, my custom application code is therefore in the <HOME>/assets/js/app folder.

The following file is an example of the xloader.js file previously referred to. This file will load the Require.js configurations and bring my custom dependency manager into scope.

require.config({
    //By default load any module IDs from js/lib 
    baseUrl: 'assets/js',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.

    paths: {
    }
});

require(["app/depman"], function(depman) {
    //alert("Loaded app/depman.js");
});

The following is an example of the <HOME>/assets/js/app/depman.js file. This piece of code looks at the content of ID attribute of the HTML file's BODY element, and loads a Required.js module JS file with the same name into scope.

define([], function() {
    var pageName = document.body.id;
    if(pageName == null || pageName == "") {
            // Does nothing right now, but could be used to log errors.
    } else {
        require(["app/" + pageName], function(pageLogic) {
        })
    }
})

By way of an example, my index.html file has a BODY element with the ID attribute set to "index".

<HTML>
    <BODY ID="index">
        <!-- Lots of HTML stuff -->
    </BODY>
</HTML>

The <HOME>/assets/js/app/depman.js file would therefore automatically load the Require.js module code contained in the <HOME>/assets/js/app/index.js file. Here is an example of the index.js file.

define([], function() {
    alert("app/index.js file loaded");

    // A lot more functions and variables and stuff here

})

Require.js is capable of a lot more, but hopefully this helps someone out.

4

Thanks for this writeup and .js-code ... works like a charm ... would be nice if js files could be page-specific in BSS, but this works just as well (albeit not as comfortable to use). But I guess there are better IDEs for JS-programming than BSS, so all's good ...