Nick's .NET Travels

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

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>\DataWidgetDemo\ProductWidget. 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 xmlns="
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 xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      xmlns:datacontext="javascript:Sys.Data.AdoNetDataContext"
      sys:activate="*">

    <br /><br />

    <table
        sys:attach="datacontext"
        datacontext:sys-key="dataContext"
        datacontext:serviceuri ="
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 xmlns="
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="[email protected]">
    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 90x90 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 Files\Widgets\User\<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!

Comments (4) -

  • Free Articles

    24/06/2010 11:56:48 PM |

    Thanks for  posting of quality information. This serves as additional references to us here because we are presently building a web blog with my brother. I'll be back soon.

  • data cleansing software

    15/07/2010 11:35:42 PM |

    I appreciate the work that you have put into this page. Genuinely good,and informative. Thank You

  • La Maison Roma

    16/11/2010 7:36:06 PM |

    Good post man, just looking around some blogs, seems a pretty nice platform you are using.

  • wire binding

    17/11/2010 10:08:00 PM |

    Wow! Thank you! I generally needed to jot down in my internet site a thing like that. Am i able to consider aspect of yourpost to my weblog?

  • gucci outlet

    29/11/2010 7:00:18 PM |

    Truly quality informative site. Looking forward to returning to your website to gather further practical knowledge. Thanks for developing it.

  • color copiers for sale

    2/12/2010 3:22:50 AM |

    I am very much pleased with the contents you have mentioned.I wanted to thank you for this great article. I enjoyed every little bit part of it and I will be waiting for the new updates.

  • Christmas flower

    3/12/2010 9:43:15 PM |

    Really like this website, this really helps and very useful.

  • Christmas flower

    3/12/2010 10:21:31 PM |

    I suggest this site to my friends so it could be useful & informative for them also. Great effort.

  • ali

    5/12/2010 11:35:05 PM |

    Bunu yapmak sadece sizin istediğiniz sonuçları elde edemezsiniz özellikle eğer âciz olabilir. kimse diyet sadece bir gün 5 kilo unutmayın. Aslında, kilonuzu bile bir ay belirli dönemlerde değişebilir. www.biberkapsulu.com

  • ali

    5/12/2010 11:43:17 PM |


    Kolay ücretsiz kilo kaybı yaşam tarzınıza bir değişiklik içerir. Ancak, çok kendiniz katı olmayın ve bir gecede değiştirebilir çözünürlük aşağı yazmaya başlayın. http://www.biberkapsulu.com/

  • conaxsat fta

    6/12/2010 3:02:32 AM |

    Interesting article, i will share this to my friends.

  • limesat

    12/12/2010 6:50:41 AM |

    This is awesome, thanks for sharing this to us.

  • custom logo designs

    16/12/2010 2:25:14 AM |

    You made some very good points there. I searched this subject and found out that many people will agree with your web site.

  • Asigurare Casco

    21/12/2010 1:57:54 AM |

    Interesting way to use access the data with Windows Mobile and Ajax. Thank you for the script and explanations.

  • Web Design

    22/12/2010 6:16:38 AM |

    It seems to be simple if you have a good teacher. The post makes very clear this thing. It's more easy to use a code already made and just to customize it.

  • everest poker

    5/01/2011 8:40:48 AM |

    Nice article,
    Best regards.

  • Mozoot

    11/01/2011 9:28:28 PM |

    Thanks for the Information, thanks for your useful Post. I will come back later

  • Vino Biologico

    17/01/2011 9:00:35 PM |

    Good post man, just looking around some blogs, seems a pretty nice platform you are using.

  • Amanda

    26/01/2011 1:23:36 AM |

    Thank! for good post. Useful for me and another one.

  • Apartments India

    27/01/2011 3:09:58 AM |

    This article is really very very nice , thanks for share this informative post.

  • reverse number lookup

    27/02/2011 5:30:54 AM |

    I was trying to figure out my problem   connected to this post and I would say that I am lucky enough that I   come across to your blog and at the moment   I contain atleast a sign, how to   motivate ahead . I am   actually appreciating your  true hard work and your composition on this blog. I  sometimes use  google to look for my subject   and I saw your web site on top. Keep up the   great work go on.

  • china netbooks

    2/03/2011 12:24:52 AM |

    I find your blog interesting.. Good job in sharing.. I'll keep coming back to read more of your posts.

  • BYD F3DM

    22/04/2011 1:54:30 AM |

    best edmx :)
    senks

  • Home Improvement and Interior Design

    21/05/2011 8:10:49 PM |

    This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Youve got a design here thats not too flashy, but makes a statement as big as what youre saying. Great job, indeed.

  • cosmetic acne

    21/05/2011 10:59:07 PM |

    Hi! Do you use Twitter? I'd like to follow you if that would be ok. I'm undoubtedly enjoying your blog and look forward to new updates.

Comments are closed