AMD with RequireJs

Since Wijmo now contains over 40 widgets, our Wijmo JS file has become very large. To improve performance, especially in projects that only use a couple of widgets, we have added support for AMD, or Asynchronous Module Definition.

AMD is a way of loading your project dependencies using Require.js and widget modules. Instead of adding a reference to the Wijmo JS file that contains all of the widgets as we recommended in the past, now you only reference a Wijmo theme, CSS, and RequireJs, and our AMD loader takes care of the rest for you and minimizes the file size that downloads to the client.

The Widget Explorer that installs in the Samples folder with Wijmo is now ported to use AMD, so you can see all of the widgets using it there, and you can also check it out in the new Using AMD sample. The quick start topics in this user guide are gradually being ported over to using AMD.

References	Copy Code
<!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

References

Copy Code

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

AMD assumes that the filename is the same as the module name, so if it is different, you have to change its path. To do so, add a script to configure RequireJs with Wijmo's baseUrl and paths. You also need to add code like this inside the script that contains your document ready function to tell the page which portion of Wijmo is required.

require(["wijmo.wijgrid"], function () {

});

Here is the script and the extra code in the document ready function with a Wijmo Grid that you can add to the <head> section of your HTML file below all of the references.

Caution: Remember the closing }); just inside the closing </script> tag of the document ready function.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.0" //Needed if you use Knockout. } }); </script> <script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ allowSorting: true, allowPaging: true, pageSize: 3, data: [ [27, 'Canada', 'Adams, Craig', 'RW'], [43, 'Canada', 'Boucher, Philippe', 'D', 'R'], [24, 'Canada', 'Cooke, Matt', 'LW', 'L'], [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'], [1, 'United States', 'Curry, John', 'G', 'L'], ], columns: [ {headerText: "Number"}, {headerText: "Nationality"}, {headerText: "Player"}, {headerText: "Position"} ] }); }); }); </script>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
    });
</script>

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            allowSorting: true,
            allowPaging: true,
            pageSize: 3,
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Nationality"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
  });
</script>

Here is a live widget showing a Grid using AMD with RequireJs.