Repost: Windows Mobile 6.5 developer training – Jumpstart series

Repost: Windows Mobile 6.5 developer training – Jumpstart series

image

Friday, July 3, at 1pm (Sydney time) is the first of a series of 3 Live Meetings to help Australian developers get started developing for Windows Mobile 6.5 – and to get those apps in Marketplace (Windows Marketplace for Mobile – Open for Developer registration) to distribute/sell to the millions of Windows Mobile users globally.

These Live Meetings will run through July, all on a Friday starting at 1pm. So grab some lunch, your favourite beverage, and get ready to learn. The first starts Friday week, July 3 – click to register now.

July 3rd 1pm – Introduction to Windows Mobile 6.5 and Marketplace: the opportunity and the platform
This webcast introduces the new and upcoming features of Windows Mobile 6.5 and Windows Marketplace. It also outlines the incredible business opportunity for developers to reach millions of users globally via Windows Marketplace – and the processes required to do so.
Register now for Live Meeting session 1

July 17 1pm – Getting started developing for Windows Mobile 6.5: developer tools, technologies, debugging and testing
Learn how to get started developing for Windows Mobile 6.5, what can be done with the new technologies and how to use your existing skills to start coding apps for Windows Mobile 6.5 phones via Windows Marketplace.

July 30 1pm – Widgets: the new internet application
Get insight into the Widgets platform for Windows Mobile 6.5 and discover how to develop powerful Widgets that leverage today’s web experience in a new way.

Reposted on behalf of Don Kerr and the Australian Windows Mobile team [original post: http://blogs.msdn.com/wmoz/archive/2009/06/25/windows-mobile-6-5-developer-training-jumpstart-series.aspx]

Windows Mobile 6.5 in the Australian Media

Windows Mobile 6.5 in the Australian Media

I was scrolling through the SMH site this morning and noticed the article “Windows Mobile takes a bite at Apple”.  Whilst this article talks about a lot of positive aspects of the Windows Mobile 6.5 platform it really annoys me when there are glaring mistakes:

“WM6 and 6.1 users can download the 6.5 beta version now”

Now unless I’m wrong it’s not possible to download a beta version, nor will it be likely that owners of even recent 6.1 devices can even upgrade to 6.5 when it ships. 

<rant>

I don’t know how long the community have been asking both Microsoft and OEMs to provide a better upgrade story.  If you download the Developer Tool Kit you can have a play with the emulators for Windows Mobile 6.5 – you’ll notice that other than some UI improvements, gestures and of course widgets there isn’t much else that’s different from 6.0/6.1.  So this begs the question, why do OEMs insist on not providing updates to their existing customers – do they want them to switch to another fruitier platform that provides FREE upgrades to new versions of the OS?

Microsoft, stop contributing to this problem and start working with the OEMs to encourage them to ship upgrades rather than always insisting customers buy new devices.

</rant>

More Windows Mobile Controls for .NET Compact Framework with Mirabyte

More Windows Mobile Controls for .NET Compact Framework with Mirabyte

I noticed Frank’s post on the new Touch Controls Suite 1.0 from Mirabyte.  It’s hard to do the UI justice, particularly because the YouTube video they have on the page uses such horrible colours.  I do like how it appears in Visual Studio and I think the nice touch responsiveness (in WM5 and WM6 apparently) looks great.

image image

It’s great to see more and more controls being built to help Windows Mobile developers build rich user interfaces.

What works/What doesn’t in Windows Mobile 6.5 Widgets

What works/What doesn’t in Windows Mobile 6.5 Widgets

This is going to be the question that is often raised when developers start building widgets for the Windows Mobile 6.5.  Whilst this MSDN article covers some of the basics, it doesn’t cover which common frameworks are supported.  For example is jquery supported? The answer is kindof.  If you go to the jquery test page in IE Mobile on a Windows Mobile 6.5 device (which is the same engine widgets use) you won’t even see the test items appear.  However a lot of the functionality seems to work when you use it in a widget.

Now one thing you can do is to look at which version of javascript (take a look at the wikipedia article on support for ECMAScript in various layout engines) is supported but I suspect that is going to be fairly meaningless unless you know what you’re looking for.  An alternative is to just to try stuff and work out what will/won’t work.  Again this is not a great approach as it means a lot of wasted cycles. 

Luckily the guys at Microsoft have already spent cycles building showcase widgets. There is one included in the emulators as part of the Windows Mobile 6.5 Developer Tool Kit, which is the Search Widget.

image

If you connect the emulator though either ActiveSync or the Windows Mobile Device Center you can take a look at the contents of this widget by going to “Program FilesWidgetsUser1” using File Explorer. In fact if you want to get your head around how it all works, simply copy this entire folder across to your desktop and open that folder using File –> Open –> Web Site… in Visual Studio 2008.  If you are going to step through the code you may want to run the various javascript files (in the js folder) through a beautifier (http://jsbeautifier.org/) to that it’s easier to follow.

There are a number of javascript files, namely widget.js, utils.js and menu.js, that show you can wrap the built in widget functionality to make it more accessible and easier to use. It’s also worth taking a look at the way this widget is structured as it is setup using language specific folders so that it can handle different languages on the device.

Note: The Search Widget found on the emulator is not sample or redistributable code. I’m recommending that you only use it to understand how widgets work and what will/will not work.

Sync Framework Sample and the Consumer Solution Accelerator for Windows Mobile

Sync Framework Sample and the Consumer Solution Accelerator for Windows Mobile

Two really interesting downloads to help you build real world Windows Mobile applications:

1) SyncComm (http://synccomm.codeplex.com) is designed to provide you with a starting point for building WCF sync framework applications.

2) Microsoft® Windows Mobile® 6 Consumer Solution Accelerator is designed to help developers see how they can harness the power of Windows Mobile to craft compelling consumer solutions. The Consumer Solution Accelerator consists of a documented sample Visual Studio project as well as documents which detail the creation of the project and how it functions.

The second item isn’t that intuitive to get up and running, especially if you get build errors in Visual Studio.  Don’t forget you may need to import the developer certificates that come with the Windows Mobile SDK into your local certificate store on your computer in order for the cab build to work.

Another bee4Mobile.Net Control

Another bee4Mobile.Net Control

In my previous post I talked about the ColourPicker, the ProgressBar and the OpenSaveDialog controls.  Now, in an effort to assist Windows Mobile developers build stylish applications they have released another swag of controls.

First is the iWheel.  Pictured below, the iWheel is similar to the wheel control seen in a number of iPhone applications.  Specifically designed to take advantage of touch input, the iWheel is not limited to just picking dates.  The developer can control the number of items and the number of cylinders on the wheel.

image

The other controls they have produced are a set of transparency enabled controls:

  • TPictureBox
  • TCheckBox
  • TLabel
  • TForm
  • TImageButton

These controls make use of the alpha channel of images in order to give a transparent effect.  The TCheckbox also allows the developer to specify a custom image for the checkbox itself.

The controls that ship with the .NET Compact Framework are in a word “Grey”.  Without heavily customising these controls it’s almost impossible to build an attractive user interface.  I would encourage mobile application developers to consider either building their own controls (often a painstaking process to get right) or using the controls from bee4Mobile.Net

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

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 >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!!).

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

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="[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 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!

Extending the Widget model on Windows Mobile 6.5

Extending the Widget model on Windows Mobile 6.5

Over the past week we have seen a number of posts from Jorge and the team at Microsoft covering what’s new for developers in Windows Mobile 6.5.  This was kicked off with the release of the Windows Mobile 6.5 Developer Tool Kit which includes both emulators and documentation/samples for working with gestures. 

What isn’t included in the DTK is any documentation on building Widgets. Jorge made a great initial post covering getting started building your first widget but went short of providing any real documentation on the extent of the widget object model. One of the first question that comes to mind is extensibility.  This has in part been answered in a forum question and answer.

The upshot is that in order to extend the widget model you need to build and deploy an activex control that can do the hardwork for you.  If you want to try it out, all you really need are WM6.5 emulator images and the Windows Mobile 5 SDK (that’s right the WM5 SDK!).  In the WM5 SDK you will find a sample called AXSample which surprise, surprise is an ActiveX control sample (On my machine this is in the folder C:Program FilesWindows Mobile 5.0 SDK R2SamplesPocketPCCPPATLAXSample). You can load and run this sample and it will display the simple activex control in the IE Mobile browser (step 1…. done).

The next thing to do is to add the registry value to enable the activex control for use within a widget.  Note that the other registry values mentioned by Jorge are added automatically by Visual Studio when you depoy and run the activeX control sample.  The registry value you need to set includes the CLSID for your activeX control.  You can get this a couple of ways but the easiest is using the Remote Registry Editor:

image

Once you have the CLSID you can go and create the appropriate keys and values:

image

You will note here that I have replaced the <ObjectName> value in Jorge’s answer with “SampleControl”.  This is how we then reference this object from within your widget javascript code:

                var myObj = widget.createObject("SampleControl");
                alert("The current fill color is " + myObj.FillColor);

This is in essence all you need to do in order to extend the widget framework.  This example just shows how you can retrieve a value from the activex control but you could execute any native code you want as part of executing that property.

If you look at the other samples that ship with the Windows Mobile 5 SDK you will notice that there are a host of native code examples on everything from retrieving the current phone number through to accessing POOM.  You can use any of these to build out your widget code to do whatever you want on the device.

Now the downside…. you can’t deploy a widget with an activex control embedded in the widget file via marketplace.  So the question is how you can deploy your widget and still leverage activex controls.  I would suggest the easiest approach is to build the widget so that when it first loads it detects if the activex control is present.  If it’s not, it can direct the user to a download site where you have placed a .cab file with the relevant activex control in it.  Of course, as marketplace has not available yet we don’t know if even this strategy will be possible. 

Get Started with Windows Mobile 6.5 Today

Get Started with Windows Mobile 6.5 Today

That’s right, whilst there is no official release data for Windows Mobile 6.5 yet, you can go and download the Windows Mobile 6.5 Developer Tool Kit today.  Probably the largest component of which are the emulators.  If you haven’t had the opportunity to look at/play with a 6.5 device yet the emulators are a great way to become familiar with the new UI and how the gestures work.

Update: Jorge has a great post on building a simple widget on the Windows Mobile blog.