Prior posts in this series:
In this post we’re going to drill a little further into the config.xml file (ie the Manifest file) that is shipped with your widget and how you can access its content from your widget javascript code. In the post Widget Anatomy – The Manifest, Jorge covers a number of points about working with the manifest file. Here I’m going to add code to our on going example which you can use to wrap the widget object, allowing you to use the same code regardless of whether your widget is running in a normal browser, as a gadget or as a widget.
Let’s start with the html page. We’re just going to add some div tags into which the values from the manifest file will be inserted.
—————–
Main.htm
—————–<html >http://www.w3.org/1999/xhtml">
<head>
<title>Hello Widget</title>
<!– Javascript –>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/widget.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body onload="onLoad();">
Hello Widget World!
<hr />
<div id="manifestVersion" class="manifest"></div>
<div id="manifestId" class="manifest"></div>
<div id="manifestName" class="manifest"></div>
<div id="manifestDescription" class="manifest"></div>
<div id="manifestAuthorEmail" class="manifest"></div>
<div id="manifestAuthorName" class="manifest"></div>
<div id="manifestAuthorURL" class="manifest"></div>
<div id="manifestHeight" class="manifest"></div>
<div id="manifestWidth" class="manifest"></div>
<div id="manifestLocale" class="manifest"></div>
<div id="manifestIconSource" class="manifest"></div>
</body>
</html>
Next, let us add code to widget.js to wrap the calls to the widget API:
—————–
widget.js
—————–var WidgetAPI = function () {
return {
// gets the widget id
getId: function () {
if (isGadget && isGadget == true) return System.Gadget.path;
return window.widget ? window.widget.identifier : "http://builttoroam.com/invalidid";
},
getVersion: function () {
if (isGadget && isGadget == true) return System.Gadget.version;
return window.widget ? window.widget.version : "0";
},
// gets the widget name
getName: function () {
if (isGadget && isGadget == true) return System.Gadget.name;
return window.widget ? window.widget.name : "Not a Widget nor a Gadget";
},
// gets the widget description
getDescription: function () {
return window.widget ? window.widget.description : "Default description….";
},
// gets the widget author Information
getAuthor: function () {
if (window.widget) {
return { name: window.widget.authorName,
email: window.widget.authorEmail,
url: window.widget.authorURL
};
}
else {
return { name: "Nick Randolph",
email: "nick@builttoroam.com",
url: "https://blogimages.builttoroam.com/nick"
};
}
},
// gets the widget height
getHeight: function () {
return window.widget ? window.widget.height : "n/a";
},
// gets the widget width
getWidth: function () {
return window.widget ? window.widget.width : "n/a";
},
// gets the widget locale
getLocale: function () {
return window.widget ? window.widget.locale : "unknown";
},
// gets the current icon information for the widget
getIconInformation: function () {
return window.widget ? window.widget.currentIcon : { height: 0, width: 0, src: "n/a" };
},// The rest has been omitted as it is the same as in the previous post
Now to update the main.js to iterate through the div tags and set their values:
—————–
main.js
—————–function onLoad() {
// Code in this method omitted as it is the same as in the previous post
setupAboutInformation();
}function setupAboutInformation() {
updateManifestDiv("manifestVersion", WidgetAPI.getVersion());
updateManifestDiv("manifestId", WidgetAPI.getId());
updateManifestDiv("manifestName", WidgetAPI.getName());
updateManifestDiv("manifestDescription", WidgetAPI.getDescription());
var author = WidgetAPI.getAuthor();
updateManifestDiv("manifestAuthorEmail", author.email);
updateManifestDiv("manifestAuthorName", author.name);
updateManifestDiv("manifestAuthorURL", author.url);
updateManifestDiv("manifestHeight", WidgetAPI.getHeight());
updateManifestDiv("manifestWidth", WidgetAPI.getWidth());
updateManifestDiv("manifestLocale", WidgetAPI.getLocale());
var icon = WidgetAPI.getIconInformation();
updateManifestDiv("manifestIconSource", icon.src);
}function updateManifestDiv(divName, information) {
var div = $get(divName);
if (div != null) {
div.innerHTML = information;
}
}
In the updateManifestDiv method you’ll notice we are using $get. This method is not defined by default so we need to define it in utils.js (the name of this file is not important so long as you include it into your Main.htm file).
—————–
utils.js
—————–// gets the element from the dom
function $get(id) {
return document.getElementById(id);
}
Lastly, don’t forget to define the .manifest class in the css files (both high and low res):
—————–
highres.css & lowres.css
—————–.manifest
{
width: 100%;
}
And that’s it, now when you run it you will see information about your widget/gadget:
