Accessing Data with Windows Mobile 6.5 Widgets, Ajax 4, Entity Framework and ADO.NET Data Services.

Step 1: Creating Your Projects

Create a new ASP.NET Web Application (new solution) called DataWidgetDemo.  You can delete the Default.aspx page as this is not required.

Add new web site to your solution.  Select the Empty Website template, change the location to be nested within your solution folder (by default it goes under documents and settings) and call the website ProductWidget.  The location should look like c:<solution root>DataWidgetDemoProductWidget. You can delete the web.config file as this is not required.

Your solution should look similar to the following:

image 

Step 2: Adding Data

There are two components to exposing data (done in the DataWidgetDemo project):

a) Create an Entity Data Model which will interact with the AdventureWorksLT database– To do this, select Add New Item and then select the ADO.NET Entity Data Model from the Add New Item dialog. In our example we have named the new item AdventureWorksModel.edmx.

Work through the Entity Data Model Wizard, specifying the connection string for your database instance.  When prompted, select the Product and ProductCategory tables. You don’t need to change any of the other default values in this wizard. Once complete this should yield the entity designer with the two tables displayed.

image 

b) In order to consume this from our widget we need to expose the AdventureWorks data via an ADO.NET Data Service. To do this select Add New Item and pick the ADO.NET Data Service template.  Give the new item a name: AdventureWorksData.svc and select Add.

Once this item has been added you just need to specify which data set you want to expose. The text marked in red are the components that have been updated in order to expose all the tables (ie *) in the AdventureWorksLTEntities data model

public class AdventureWorksData : DataService<AdventureWorksLTEntities>
   {
       // This method is called only once to initialize service-wide policies.
       public static void InitializeService(IDataServiceConfiguration config)
       {
           // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
           // Examples:
          config.SetEntitySetAccessRule("*", EntitySetRights.All);
           // config.SetServiceOperationAccessRule("MyServiceOperation", ServiceOperationRights.All);
       }
   }

 

Step 4: Add Ajax 4 JS Libraries

This step requires referencing the ASP.NET Ajax 4 javascript libraries.  As these are still pre-release the location of these files is not well defined but you should be able to locate them on your machine in order to copy them into the ProductWidget web site.

image

Step 5: Building the Products page

The products page is just going to be a simple html page.  Windows Mobile 6.5 can’t render ASP.NET pages (ie aspx) pages as part of widgets as this would require having the equivalent of the ASP.NET server engine on the device.  As such widgets are constrained to html, css and javascript.  To generate the products page select Add New Item on the ProductWidget web site. Select the HTML Page template and give the new page a name, Products.htm, and click Add.

Here we are only going to use HTML! There is not a single of javascript in the following code snippet.  There is javascript, but it’s all included in the ASP.NET Ajax 4 library.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >http://www.w3.org/1999/xhtml" >
<head>
    <title>AdventureWorks – Products</title>
    <style type="text/css">
        .sys-template {display: none;}
        .rowSelected  {background-color: yellow;}
    </style>

    <script src="MicrosoftAjax/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="MicrosoftAjax/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
    <script src="MicrosoftAjax/MicrosoftAjaxAdoNet.debug.js" type="text/javascript"></script>

</head>
<body >http://192.168.0.102:18886/AdventureWorksData.svc"
        >
    <thead>
        <tr>
            <th>Select Category</th>
        </tr>
    </thead>
    <tbody
        id="dvCategories"
        class="sys-template"
        sys_attach="dataview"
        dataview:sys-key="categoriesKey"
        dataview_dataprovider="{{ dataContext }}"
        dataview_autofetch="true"
        dataview_selecteditemclass="rowSelected"
        dataview_fetchoperation="ProductCategories"
        dataview_fetchparameters="{{ {$expand: ‘Products’} }}"
        >
        <tr sys_command="select">
            <td>{{ Name }}</td>
        </tr>
    </tbody>
    </table>

    <br /><br />

    <table>
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody
        class="sys-template"
        sys_attach="dataview"
        dataview:sys-key="moviesKey"       
        dataview_data="{binding selectedData.Products, source={{categoriesKey}} }">   
        <tr>
            <td>{binding Name}</td>
        </tr>
    </tbody>
    </table>

    </body>
    </html>

One point to note about this html: The url marked in dark blue needs to be updated to point to the fully qualified url of your ADO.NET Data Service.  As this code will be running on the mobile device or emulator you can’t use localhost as it won’t resolve.  Instead use the IP address of your computer.  This example will work whether you are using Cassini or IIS to host your web application but if you are using Cassini you will need to specify the port number.

Step 6: Add a config.xml file

In order for Windows Mobile 6.5 to install your widget it needs to be able to locate a config.xml file within your widget.  This specifies properties such as the name and author of the widget – sort of a manifest for your widget. Again to add this we select Add New Item on the ProductWidget web site.  Select the XML File template and name the file config.xml.

<?xml version="1.0" encoding="utf-8" ?>
<widget >http://www.w3.org/ns/widgets"
        id="http://www.builttoroam.com/ProductWidget"
        version="1.0">

  <name>AdventureWorks Product Widget</name>

  <description>
    Basic product widget based on ajax 4
  </description>

  <author href="https://blogimages.builttoroam.com/nick"
            email="nick@builttoroam.com">
    Nick Randolph @ Built To Roam
  </author>

  <content src="Products.htm" type="text/html"/>

  <access network="true"/>

  <icon src="BTRLogo.png" />

  <license>
    Copyright (c) 2009 Built To Roam.  All rights reserved.
  </license>
</widget>

You will notice that this config file specifies BTRLogo.png for its icon.  In this case this is a 90×90 png file that I have added to root of the the ProductWidget web site.

Step 7: Zip and Deploy Your Widget

The last step in building your widget is to zip up the contents of the ProductWidget web site.  Don’t zip up the ProductWidget folder itself, just the contents.  Rename the zip file to have the .widget extension:

image

Deployment is as simple as copying the widget file to the emulator and clicking on the widget file on the device.  Note that this deployment mechanism is not going to be supported out of the box by real Windows Mobile 6.5 devices.  Instead there is a registry key that needs to be set to enable this functionality (which is set by default on the emulator images).

image

With this registry key set the widget file will be identified within File Explorer on the device

image

Clicking the Products widget will give you the option to install and run the widget on the device.

image

If you click Yes the widget will be installed onto the device.  After installation your application will immediately be run.  In this case because we are accessing data from across the network you will see the following prompt.

image 

Selecting continue will launch your widget.  Don’t be alarmed if it takes a while to download the data! For a production application you would of course want some animation to indicate that it’s downloading data in the background.

Disclaimer: The UI is not fantastic but this post is around exposing data rather than building the UI around it. As it’s just html and css you can customise the UI as much as you want.

image

Once you have closed your widget you can run it again by selecting its icon from the Start menu.

image

Widgets can be removed in the same way as normal programs.  From the Start menu select Settings –> System –> Remove Programs.

image

Note: You will need to remove your widget if you want to install an updated version.  During development to save you from doing this you can simply copy over updated files.  Your widget will be installed to Program FilesWidgetsUser<id> where id is a numeric value assigned to your widget.

And there you have it – a simple widget that exposes data from your sql database!

Leave a comment