jQWidgets Integration with RequireJS

In this tutorial you will learn how to integrate jQWidgets with RequireJS. RequireJS is a JavaScript file and module loader. It allows defining dependencies between modules in a way that is appropriate for the browser. RequireJS supports the Asynchronous Module Definition (AMD) API, which specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded. This is particularly well suited for the browser environment where synchronous loading of modules incurs performance, usability, debugging, and cross-domain access issues.

1. Download RequireJS

Before proceeding further with this tutorial, download the latest release of RequireJS from the following page: http://requirejs.org/docs/download.html.

2. Create a Web Page and Add All Necessary JavaScript and CSS Files

The next step is to create a new .html file (named, for example, index.html), which will contain the HTML code of our example and a reference to the RequireJS JavaScript file. Here is index.html's code, which has the required HTML structure for the initialization of a jqxTree: 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of jQWidgets Integration with RequireJS</title>
    <meta name="keywords" content="jQuery, jQuery widgets, jQWidgets, Require, Require JS, Require.JS, RequireJS, RequireJS integration, widgets" />
    <link rel="Stylesheet" href="css/jqx.base.css" type="text/css" />
    <script type="text/javascript" data-main="js/main" src="js/require.js"></script>
</head>
<body class='default'>
    <div id='jqxTree' style="visibility: hidden;">
        <ul>
            <li item-selected='true'>Home</li>
            <li item-expanded='true'>Solutions
                <ul>
                    <li>Education</li>
                    <li>Financial services</li>
                    <li>Government</li>
                    <li>Manufacturing</li>
                    <li>Solutions
                        <ul>
                            <li>Consumer photo and video</li>
                            <li>Mobile</li>
                            <li>Rich Internet applications</li>
                            <li>Technical communication</li>
                            <li>Training and eLearning</li>
                            <li>Web conferencing</li>
                        </ul>
                    </li>
                    <li>All industries and solutions</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Note the data-main attribute of the require.js script reference. It is a special attribute that require.js will check to start script loading. You will typically use a data-main script (in this case - main.js) to set configuration options and then load the first application module. You will find out more about main.js in Step 3 of the tutorial.

Add the needed CSS (jqx.base.css and its required images) and JavaScript (jquery.js, jqxcore.js, jqxbuttons.js, jqxtree.js, jqxpanel.js, jqxscrollbar.js) files in the folders css and js respectively.

3. Add main.js and app.js

It is time to add the functionality scripts to our "project". Create two JavaScript files - main.js and app.js - and put them in the js folder. Here is the final folder structure of the project:

And here is the source code of main.js: 

require.config({
    paths: {
        "jQuery": "jquery",
        "jqxcore": "jqxcore",
        "jqxbuttons": "jqxbuttons",
        "jqxpanel": "jqxpanel",
        "jqxscrollbar": "jqxscrollbar",
        "jqxtree": "jqxtree"
    },
    shim: {
        "jqxcore": {
            export: "$",
            deps: ['jQuery']
        },
        "jqxbuttons": {
            export: "$",
            deps: ['jQuery', "jqxcore"]
        },
        "jqxpanel": {
            export: "$",
            deps: ['jQuery', "jqxcore"]
        },
        "jqxscrollbar": {
            export: "$",
            deps: ['jQuery', "jqxcore"]
        },
        "jqxtree": {
            export: "$",
            deps: ['jQuery', "jqxcore"]
        }
    }
});
require(["app"], function (App) {
    App.initialize();
});

The require.config() function sets the paths to all JavaScript files, relative to main.js (see more about data-main in Step 2) in name-value pairs. It also has a shim for each script which depends on jQuery. Finally, the require() function calls the page-specific code (App.initialize()). This leads us to the file app.js itself: 

define(["jQuery", "jqxcore", "jqxbuttons", "jqxtree", "jqxpanel", "jqxscrollbar"], function () {
    var initialize = function () {
        $(document).ready(function () {
            $('#jqxTree').jqxTree({ height: '300px', width: '300px' });
            $('#jqxTree').css("visibility", "visible");
        });
    };
    return {
        initialize: initialize
    };
});

The jQuery and jQWidgets files are defined in the define() function. Its callback contains the jqxTree initialization code in the initialize() function (which is called in main.js - see above).

4. Download the Example or Try It Out

You can download the complete example from here or check it online from here: Example of jQWidgets Integration with RequireJS.

5. Using jqx-all.js

If you would like to use the composite jQWidgets script - jqx-all.js - with RequireJS, there are some minor changes to the example you would have to make.

main.js: 

require.config({
    paths: {
        "jQuery": "jquery",
        "jqx-all": "jqx-all"
    },
    shim: {
        "jqx-all": {
            export: "$",
            deps: ['jQuery']
        }
    }
});
require(["app"], function (App) {
    App.initialize();
});

app.js: 

define(["jQuery", "jqx-all"], function () {
    var initialize = function () {
        $(document).ready(function () {
            $('#jqxTree').jqxTree({ height: '300px', width: '300px' });
            $('#jqxTree').css("visibility", "visible");
        });
    };
    return {
        initialize: initialize
    };
});

You will also have to put the file jqx-all.js in the js folder. You can remove the other jQWidgets scripts as they are not needed in this example.

Download the modified example here or try it online here: Example of jQWidgets Integration with RequireJS, Using jqx-all.js