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.
Before proceeding further with this tutorial, download the latest release of RequireJS from the following page: http://requirejs.org/docs/download.html.
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.
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).
You can download the complete example from here or check it online from here: Example of jQWidgets Integration with RequireJS.
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