Widget Tree strucuture
1. Source code for MemoryStatus.js
2. Source code for memoryStatus.tmpl
3. Using widget in HTML sample code
4. Sample output
.
|-- dijit
| |-- _base
| ...
|-- dojo
| |-- _base
| ...
|-- dojox
| |-- analytics
| ...
`-- widgets
`-- admin
|-- MemoryStatus.js
`-- memoryStatus.tmpl
1. Source code for MemoryStatus.js
require(
[
"dojo/_base/declare", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin", "dojo/html",
// Require the theme of our choosing
"dojox/charting/themes/Claro",
"dojox/charting/Chart",
// We want to plot a Pie chart
"dojox/charting/plot2d/Pie",
// Retrieve the Legend, Tooltip, and MoveSlice classes
"dojox/charting/action2d/Tooltip",
"dojox/charting/action2d/MoveSlice",
// We want to use Markers
"dojox/charting/plot2d/Markers",
// We'll use default x/y axes
"dojox/charting/axis2d/Default",
"dojox/charting/widget/Legend"
],
function(declare, parser, ready, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, html){
declare("widgets.admin.MemoryStatus", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
templatePath: "js/dojo/widgets/admin/memoryStatus.tmpl",
widgetsInTemplate : true,
memsize: 3851124,
used : 2375716,
shared : 0,
buffers : 268604,
cached: 619712,
postCreate : function (args, farg)
{
this._set();
},
getData : function()
{
var free = this.memsize-this.used;
return [
{ "x": "1", "y": this.used, text : "Memory used" , tooltip : "Memory used : " + this.bytesToSize(this.used)},
{ "x": "2", "y": free, text : "Free memory" , tooltip: "Free Memory: " + this.bytesToSize(free) }
];
},
_set : function()
{
if (this.loaded == true ) {
return;
}
this.loaded = true;
var chart = new dojox.charting.Chart(this.graphicalNode);
chart.setTheme(dojox.charting.themes.Claro);
chart.addPlot("default", {type: 'Pie', markers: true, labelOffset: -20});
chart.addSeries("Memory", this.getData());
// Create the tooltip
var tip = new dojox.charting.action2d.Tooltip(chart, "default");
// Create the slice mover
var mag = new dojox.charting.action2d.MoveSlice(chart,"default");
chart.render();
var legend = new dojox.charting.widget.Legend({ chart: chart }, this.legendsNode);
},
bytesToSize: function (kbytes) {
var bytes = kbytes * 1024;
var sizes = [ 'n/a', 'bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
var i = +Math.floor(Math.log(bytes) / Math.log(1024));
return (bytes / Math.pow(1024, i)).toFixed( i ? 1 : 0 ) + ' ' + sizes[ isNaN( bytes ) ? 0 : i+1 ];
}
});
ready(function(){
// Call the parser manually so it runs after our widget is defined, and page has finished loading
parser.parse();
});
}
);
2. Source code for memoryStatus.tmpl
<div id="${id}">
<div data-dojo-attach-point='graphicalNode'></div>
<div data-dojo-attach-point='legendsNode'></div>
</div>
3. Using widget in HTML sample code
<html>
<head>
<title> Memory status: </title>
<link rel="stylesheet" type="text/css" href="/test1/js/dojo/dojo/resources/dojo.css"/>
<link rel='stylesheet' type="text/css" hfre='text1/js/dojo/dijit/themes/tundra/ProgressBar.css'/>
<link rel="stylesheet" href="/test1/js/dojo/dijit/themes/tundra/tundra.css"></link>
<script src="/test1/js/dojo/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: false" ></script>
<script type='text/javascript'>
require(["dijit/registry", "dojo/parser", "widgets/admin/MemoryStatus",
"dojo/domReady!"], function(registry, parser) {
// Explicitly parse the page
//parser.parse();
});
</script>
</head>
<body class='tundra'>
<br>
<h1> Memory usage: </h1>
<br>
<div data-dojo-type="widgets.admin.MemoryStatus" memsize=3851124 used=2396496 style="width:400px:margin:50px"></div>
<br><br>
<div data-dojo-type="widgets.admin.MemoryStatus" memsize=3851124 used=3680680 style="width:400px"></div>
</body>
</html>
4. Sample output
