Windows Mobile Widget 101 – The Manifest File

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:

image image

Leave a comment