Wijmo has over 40 widgets included and you are probably only using a few of them in your applications. Make your Wijmo applications faster by using our new AMD support. We provide all of our widgets and their dependencies as Modules. We also provide samples and an AMD loader using RequireJS to make getting started easier. If you want to use the Wijmo Grid, you simply need one small JavaScript reference and can then call require([“wijmo.wijgrid”]). The AMD loader will then download the grid file and files of any dependencies it has. AMD makes it easy to use individual widgets without needing to manage dependencies yourself. Using AMD will also ensure that you are minimizing the file size being downloaded to your clients. Let's take a look at how to start using Wijmo as AMD modules. We will use the CDN, but our AMD files are provided in our download and you might want to embed them in your app so that you can easily add your own JS files.
Add Reference
Immediately, you can notice that there is only a single JS reference required for wijmo now!
<!--Wijmo Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css">
<!--Wijmo Widget CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.20.min.css" rel="stylesheet" type="text/css">
<!--RequireJS AMD Loader-->
<script src="http://cdn.wijmo.com/external/require.js" type="text/javascript"></script>
Configure RequireJS
We need to configure RequireJS so that is has the baseURL for our files and also map some names to specific versions of files.
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/",
paths: {
"jquery": "jquery-1.9.1.min",
"jquery-ui": "jquery-ui-1.10.1.custom.min",
"jquery.ui": "jquery-ui",
"jquery.mousewheel": "jquery.mousewheel.min",
"globalize": "globalize.min"
}
});
Load Widgets
Lastly, we make a call to require() the widgets (and any other modules) that we want to use. In this case, we will only specify grid. But we would specify any number in this array.
require(["wijmo.wijgrid"], function () {
//Widgets are loaded and ready
});
Notice the callback that allows us to execute code after the specified modules have been loaded. Inside this callback is where we can initialize widgets.
require(["wijmo.wijgrid"], function () {
//Widgets are loaded and ready
$("#demo-grid").wijgrid({
allowSorting: true,
data: [
[1, "Malkin", "Pit", 7, 2, 6, 8, 0, 29, "20:10", 2, 2],
[2, "Talbot", "Pit", 7, 4, 2, 6, 4, 14, "16:35", 0, 0],
[3, "Zetterberg", "Det", 7, 2, 4, 6, 3, 7, "22:15", 1, 2],
[4, "Franzen", "Det", 7, 2, 2, 4, -1, 2, "19:27", 1, 1],
[5, "Rafalski", "Det", 7, 1, 3, 4, 3, 0, "21:44", 1, 0],
[6, "Letang", "Pit", 7, 1, 3, 4, -2, 0, "19:09", 1, 2],
[7, "Kennedy", "Pit", 7, 2, 1, 3, 2, 0, "12:50", 0, 0],
[8, "Ericsson", "Det", 7, 2, 1, 3, 1, 4, "16:04", 0, 0],
[9, "Staal", "Pit", 7, 2, 1, 3, 0, 2, "18:20", 0, 1, 17],
[10, "Fedotenko", "Pit", 7, 1, 2, 3, 3, 0, "15:43", 0, 0],
[11, "Crosby", "Pit", 7, 1, 2, 3, -3, 2, "18:39", 0, 1],
[12, "Lidstrom", "Det", 7, 0, 3, 3, 4, 0, "1:06", 0, 1],
[13, "Hudler", "Det", 7, 0, 3, 3, 2, 0, "11:30", 0, 1],
[14, "Hossa", "Det", 7, 0, 3, 3, 0, 2, "18:37", 0, 0],
[15, "Abdelkader", "Det", 3, 2, 0, 2, 2, 0, "7:15", 0, 0],
[16, "Filppula", "Det", 7, 2, 0, 2, -1, 2, "18:40", 0, 0],
[17, "Stuart", "Det", 7, 2, 0, 2, -3, 2, "22:10", 0, 0],
[18, "Gonchar", "Pit", 7, 1, 1, 2, 0, 2, "22:42", 1, 1],
[19, "Kronwall", "Det", 7, 1, 1, 2, 0, 8, "22:01", 1, 1],
[20, "Helm", "Det", 7, 1, 1, 2, -1, 0, "14:15", 0, 0]
],
columns: [
{ headerText: "ID", dataType: "number", dataFormatString: "n0" },
{ headerText: "Skaters" },
{ headerText: "Tm" },
{ headerText: "GP", dataType: "number", dataFormatString: "n0" },
{ headerText: "G", dataType: "number", dataFormatString: "n0" },
{ headerText: "A", dataType: "number", dataFormatString: "n0" },
{ headerText: "PTS", dataType: "number", dataFormatString: "n0" },
{ headerText: "+/-", dataType: "number", dataFormatString: "n0" },
{ headerText: "PIM", dataType: "number", dataFormatString: "n0" },
{ headerText: "PPG" },
{ headerText: "PPA", dataType: "number", dataFormatString: "n0" },
{ headerText: "SOG", dataType: "number", dataFormatString: "n0" }
]
});
});
See an online demo of this sample here: http://jsbin.com/onohUYoz/1/edit Now, run your application and see the results. Notice how slim the request sizes are and how fast the page loads. Also, another thing you might notice is that all of the dependencies needed for wijgrid were loaded for you. This is one of my favorite features of AMD. You only have to specify the module you want to use and let requireJS load all of the dependencies for you. I highly recommend using this AMD as your method of including wijmo in applications. It will ensure you applications have optimal performance and it will simplify the references you have to manage.
Chris Bannon