jQWidgets Integration with RequireJS

In this demo section, we will show you how to use 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. Below, in a few steps we will briefly explain how to use jQWidgets with RequireJS

1. Download RequireJS

You can 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>
    
    <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

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).

Copyright © 2011-2014 jQWidgets. All rights reserved. Contact Us | Follow Us | Purchase