Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Make My Windows Mobile 6.5 Widget Into a Windows Vista/Windows 7 Gadget

Having shown how easily you can build a widget that wires up some data using Entity Framework, ADO.NET Data Services and the new Ajax4 javascript classes, DataView and DataContext, I thought that I would take a shot at getting my widget to work as a gadget on Windows Vista/Windows 7.  Essentially a gadget is very similar to a widget in that it’s a zip file containing HTML, css, javascript and supporting files (eg images). The two notable differences are that the file extension is .gadget and that the configuration file is gadget.xml instead of config.xml.

The steps for converting the previously created widget into a gadget are:

Step 1: Create a gadget.xml file

Add a new xml file to the ProductWidget web site and call it gadget.xml.  The contents should look similar to the following:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>AdventureWorks Product Gadget</name>
  <namespace>
http://www.builttoroam.com/ProductGadget</namespace>
  <version>2.0.0.0</version>
  <author name="Built To Roam">
    <info url="
https://blogimages.builttoroam.com/nick" text="Nick's .NET Travels" />
    <logo src="BTRLogo.png" />
  </author>

  <copyright>Copyright (c) 2009 Built To Roam.  All rights reserved.</copyright>
  <description>Basic product gadget based on ajax 4</description>
  <icons>
    <icon width="64" height="64" src="BTRLogo.png" />
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="Products.htm" />
      <permissions>full</permissions>
      <platform minPlatformVersion="0.3" />
    </host>
  </hosts>
</gadget>

Step 2: Make minor layout changes to ensure content is visible

Unlike a widget, where it will be rendered in full screen on the Windows Mobile device, a gadget needs to know what size to render itself.  A simple way to do this is to define the width and height on the body tag in the Product.htm file.

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      xmlns:datacontext="javascript:Sys.Data.AdoNetDataContext"
      sys:activate="*" style=" width:300px; height:500px" >

Step 3: Zip files and name as .gadget

You are essentially done with making changes.  All you need to do now is zip up the files, as you did when creating the widget, and name the file with .gadget extension.  Note that you can include the config.xml and gadget.xml file in the same zip file without them conflicting.  This is useful if you want to build a single widget/gadget that will work across Windows Vista/7 and Windows Mobile 6.5.

Step 4: Double-click your gadget to install

When you double-click the newly created gadget it will install and run your gadget.

image

Again, apologies for the awful design work.  You’ll also not that for some reason when you click on a category it doesn’t highlight the category or load the products associated with it.  Something in the Ajax4 library must be malfunctioning for it not to work properly as a gadget (any suggestions are welcome!!).

  • adesivo u

    4/18/2011 4:08:50 PM |

    Thanks man! u save me (:

  • Home Improvement and Interior Design

    5/21/2011 8:10:55 PM |

    This is the perfect blog for anyone who wants to know about this topic. You know so much its almost hard to argue with you (not that I really would want...HaHa). You definitely put a new spin on a subject thats been written about for years. Great stuff, just great!

Comments are closed