Derik Whittaker : WP7

Help my Secondary Tile will not navigate correctly in my Win Phone Application

Derik Whittaker — Sun, 26 Aug 2012 01:15:21 GMT

When you are adding the ability to have a Secondary tile to your Windows phone application you may from time to time find the need to debug or mimic the launching of the application via the Secondary tile w/ the correct query string values. Sadly, debugging this via the debugger is not something that I have found out how to do, if it is possible please let me know. However, I have found another way to get the same result and here is how.

Get the exact tile uri used for the secondary tile.
Example: “/views/events/Landing.xaml?Id=1”
Open up the WMAppManifest.xml page under resources
Find the line that looks like this:
<DefaultTask Name="_default" NavigationPage="MainPage.xaml" />
Replace it w/ the URI of your secondary tile like this:
<DefaultTask Name="_default" NavigationPage="/views/events/Landing.xaml?Id=1" />
Launch the application

If you are wired everything correctly your page should load, but if you are trying to debug this it is likely you did not have everything correct. If you did not do things correctly you should get some sort of runtime error.

Hope this helps

Till next time,

Data Binding to the Panorama control in WP7

Derik Whittaker — Wed, 22 Aug 2012 18:56:59 GMT

When you build a Windows Phone 7 (soon to be 8) application, one of the screen layouts you can use is the Panorama. In most cases the number of pages in the panorama is hard defined in code but there is the occasion when you will add pages dynamically based on binding. In this post we are going to take a look at how we can do this.

Step 1 – Setup the ItemSource binding

As with all other binding to list items you can setup your ItemSource binding as below:

ItemsSource="{Binding SportDrills}"

The SportDrills is simply a property off of my main VM and it contains the needed data for both the header and item template

Step 2 – Setup the Header DataTemplate

When setting up the Panorama it is important to have a header, binding to this header is not too hard and only requires a few lines of xaml

<controls:Panorama.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="auto" />
            </Grid.RowDefinitions>
            <TextBlock Text="{Binding SportName}" />
            <TextBlock Grid.Row="1" Text="{Binding DrillCount}" 
                        Margin="15,3"
                        Style="{StaticResource PanaramaHeaderAccentTextBlockStyle}" />
        </Grid>
    v/DataTemplate>
</controls:Panorama.HeaderTemplate>

In the xaml above the important part to pay attention to is the Panorama.HeaderTemplate, this is where you can define you header for the given panel. In my example I am creating a bit more complex header as i am adding a second level of data. If you only want a single line of text of course you can skip the grid and just have a TextBlock statement.

Step 3 – Setup the ItemTemplate DataTemplate

Now that we have our header setup it is time to setup the body of the panel. To do this you will want to do something like below.

<controls:Panorama.ItemTemplate>:               
    <DataTemplate>:
        <Grid>:
            <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Drills}"                          
						telerik:InteractionEffectManager.IsInteractionEnabled="True" 
						ItemContainerStyle="{StaticResource StretchableListBoxItemStyle}">:

                <ListBox.ItemTemplate>:
                    <DataTemplate>:
                        <Grid>:
                            <Border 
							VerticalAlignment="Center"
							HorizontalAlignment="Center"
							Width="36" Height="36">:

                            </Border>:
                            <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource ListBoxHeaderStyle}"/>:

                        </Grid>:
                    </DataTemplate>:
                </ListBox.ItemTemplate>:
            </ListBox>:
        </Grid>:
    </DataTemplate>:
</controls:Panorama.ItemTemplate>:

In the XAML above the important part to pay attention to is the Panorama.ItemTemplate, this is where you can defined your content for the panel. In my example I am simply listing data, but you can of course do anything you want.

As you can see binding to the ItemSource and creating panels on the fly via binding is very simple, yet very powerful

Till next time,

Using SQL CE On WP7 Mango–Working with Indexes

Derik Whittaker — Sun, 24 Jul 2011 19:58:26 GMT

This is another post in a series of posts on how to use SQL CE on WP7 Mango. If you would like to see the other posts they are listed below

Using SQL CE on WP7 Mango–Getting Started
Using SQL CE On WP7 Mango–Working with Associations
Using SQL CE On WP7 Mango–Working with Indexes

In this posting we will take a deeper look at how we can setup and use indexes on our SQL CE database table. Using Indexes inside of WP7 for SQL CE follows the same basic pattern as setting up Tables or Columns which means that we are going to introduce a new attribute called [Index]. The only difference is that this attribute is not part of the System.Data.Linq.Mapping namespace, but rather part of the Microsoft.Phone.Data.Linq.Mapping.

When setting up an index there is 2 things that this index can do

Help speed up your queries
Provide the ability to enforce unique constraints on your data

Step 1: Adding reference to the correct namespace

You will need to add a reference to Microsoft.Phone.Data.Linq.Mapping

Step 2: Defining your index

When setting up your index you of course will need to use the [Index] attribute, but this attribute does NOT go at the column level, but rather at the table level. And since the Index attribute is setup as AllowMultiple == true you have the ability to setup many indexes for a given table

[Index(Columns = "Name", Name = "i_Name")]
[Index(Columns = "Name, Number", Name = "i_Name_Number")]
[Table]
public class Episode
{
	// blah, blah, blah
}

Taking a deeper look at the code above there is a few items we should point out

Name Property - Gets or sets the name of the index
Columns Property - Gets or sets the columns on which the index is based.
1. Indexing Multiple Columns: This is done by putting a ‘,’ between the names of the columns. This MUST be a comma otherwise you will get a InvalidOperationException and it will tell you it cannot find the key Member [ColumnNameHere]
2. If you fat finger or misspell a column when setting up your index you will also get an exception of type -- InvalidOperationException and it will tell you it cannot find the key Member [ColumnNameHere]

Step 3: Adding the unique constraint to your index

Now adding an index for performance reasons is one thing, but adding it to enforce unique constraints is s a very powerful feature. Fortunattly adding uniqueness to an index is CAKE, you simply add the IsUnique property as below

[Index(Columns = "TagName", Name = "i_TagName", IsUnique = true)]
[Table]
public class EpisodeTag
{
	// blah, blah, blah
}

Now that you have added the uniqueness constraint you must be careful because if/when you try to save data into that column that violates the constraint you will receive an exception as below.

As you can see working with indexes in SQL CE on WP7 mango is pretty easy and pretty powerful.

Till next time,

Using SQL CE On WP7 Mango–Working with Associations

Derik Whittaker — Sat, 23 Jul 2011 18:20:36 GMT

This is another post in a series of posts on how to use SQL CE on WP7 Mango. If you would like to see the other posts they are listed below

In my first post we took a step by step look at how to get up and running using SQL CE inside of your WP7 Mango Application. However, in that previous post I showed you how to get up and running on a database with only 1 column and we all know that most production database have at least 2 tables : )

In this post we will focus on how to add additional tables to the mix and how to setup relationships between these tables.

In my prior post I setup my Episode model as below

using System.Data.Linq;
using System.Data.Linq.Mapping;

[Table]
public class Episode
{
    [Column(IsPrimaryKey = true, IsDbGenerated = false, DbType = "INT NOT NULL", CanBeNull = false)]
    public Int32 Id { get; set; }

    [Column]
    public Int32 Number { get; set; }

    [Column]
    public string Name { get; set; }
   
}

In this post we want to create an additional model called EpisodeTag. This will add a 0 to N relationship between Episodes and EpisodeTag

[Table]
public class EpisodeTag
{
    [Column(IsPrimaryKey = true, IsDbGenerated = false, DbType = "INT NOT NULL", CanBeNull = false)]
    public Int32 Id { get; set; }

    [Column]
    public string TagName { get; set; }
 
}

Now that we know the basic layout of the 2 models how do go about setting up the Association between them?

Step 1: Update our Datacontext to have a pointer to the new [Table] (aka model)

public class DimecastsDataContext : DataContext
{
    public DimecastsDataContext() : base("Data Source=isostore:/DimecastsData.sdf")
    {

    }

    public Table<Episode> Episodes;

    public Table<EpisodeTag> EpisodeTags;

The change in the context is the addition of the new EpisodeTags table pointer. If you do not add this you will get a SqlCEException – Table not found error when you try to access information in this table.

Step 2: Setup the Association between Episode and Episode Tag (parent down to child)

Now that we have added the table pointer in our datacontext the next thing we need to do is actually setup our pointers and mappings from Episode to EpisodeTags. The code below is the final model showing the needed attributes.

[Table]
public class Episode
{
    [Column(IsPrimaryKey = true, IsDbGenerated = false, DbType = "INT NOT NULL", CanBeNull = false)]
    public Int32 Id { get; set; }

    [Column]
    public Int32 Number { get; set; }

    [Column]
    public string Name { get; set; }
        
    private EntitySet<EpisodeTag> _episodeTags = new EntitySet<EpisodeTag>();

    [Association(Storage = "_episodeTags", OtherKey = "_episodeId", ThisKey = "Id")]
    public EntitySet<EpisodeTag> EpisodeTags
    {
        get { return _episodeTags; }
        set { _episodeTags.Assign(value); }
    }
}

Lets take a look at what changes were made to this model.

Addition of the EntitySet<EpisodeTag> property
- This will allow us to navigate from the Episode (Parent) to the EpisodeTag (Child) objects
Addition of the EntitySet<EpisodeTag> private backing field
- This backing field is what will be set by the database engine when building the object graph, set via the ‘Storage’ property
Addition of the [Association] attribute
1. Storage Property - Gets or sets a private storage field to hold the value from a column.
2. OtherKey (aka Foreign Key) Property - Gets or sets one or more members of the target entity class as key values on the other side of the association
3. ThisKey (aka Primary Key) Property - Gets or sets members of this entity class to represent the key values on this side of the association

Step 3: Setup the Association between EpisodeTag and Episode (child backwards to parent)

Now that we can walk from the Episode (parent) to the child (EpisodeTag) we need to setup the ability to from the opposite direction. In the code below we do exactly that.

[Table]
public class EpisodeTag
{
    [Column(IsPrimaryKey = true, IsDbGenerated = false, DbType = "INT NOT NULL", CanBeNull = false)]
    public Int32 Id { get; set; }

    [Column]
    public string TagName { get; set; }

    [Column]
    internal int? _episodeId;

    private EntityRef _episode;

    [Association(Storage = "_episode", ThisKey = "_episodeId", OtherKey = "Id", IsForeignKey = true)]
    public Episode Episode
    {
        get { return _episode.Entity; }
        set { _episode.Entity = value; }
    }       
}

Lets take a look at what we added, but as you may have already noticed this code is VERY similar to the code needed for Episode.

Addition of the Episode property
- This allows us to walk the object tree backwards to get to the parent
Addition of the EpisodeID backing field
- Since the DB Table needs to hold the ID this is how this is accomplished.
Addition of the Episode EntityRef property
- This is an object pointer which is based off the _episdoeId backing field
Addition of the [Association] attribute to the Episode Property
1. Storage Property - Gets or sets a private storage field to hold the value from a column
2. OtherKey (aka Foreign Key) Property - Gets or sets one or more members of the target entity class as key values on the other side of the association
3. ThisKey (aka Primary Key) Property - Gets or sets members of this entity class to represent the key values on this side of the association
4. IsForeignKey Property - Gets or sets the member as the foreign key in an association representing a database relationship

Now that we have our mappings setup to allow for bi-directional mapping lets take a look at how we can use these mappings to insert data as well as query for exisiting data

How to insert data

var newEpisode = new Episode
    {
        Id = 1,
        Number = 1,
        Name = "Something Cool",
        EpisodeTags = new EntitySet
                            {
                                new EpisodeTag {Id = 1, TagName = "Tag"},
                                new EpisodeTag {Id = 2, TagName = "Tag"}
                            }
    };

How to query data

var episodes = from e in DimecastsDataContext.Episodes
                           select e;

There you have it all the information need to understand how to setup an Association between 2 tables (models) inside of Sql CE.

Till next time,

Using SQL CE on WP7 Mango–Getting Started

Derik Whittaker — Thu, 21 Jul 2011 21:52:23 GMT

One of the major new ‘features’ of WP7 Mango is the addition of SQL CE 3.5 support. Prior to Mango CE was loaded on the phone but 3rd party applications (the ones you and I write) were not able to access it. With Mango this has all changed and CE is not a full first class citizen. If you have never used CE before (myself included) than you will find it a bit different to use, but this is mostly due to the way you have to setup and define your tables via code.

In this post I will walk you though the steps on how to setup a very simple database on CE. In future posts we will dive deeper and learn how to use some of CE’s more complex features.

Step 1: Installing SQL CE via Nuget

Before we start writing a line of code we need to install/reference the SQL CE assemblies. The easiest way is to open the Package Manager Console for Nuget and type Install-Package SqlServerCompact. This will download the latest CE assemblies and add them to your project.

Your Nuget window should look like:

Once you have SQL CE installed you should have the following references added to your project:

Ok, now you are done with the setup and you can start coding away.

Step 2: Creating and setting up the Data Context

Per MSDN the DataContext is

The data context is a proxy, an object that represents the database. A data context contains Table objects, each of which represents a table in the database. Each Table object is made up of entities that correspond to rows of data in a database. Each entity is a “plain old CLR object” (POCO) with attributes. The attributes on each entity determine the database table structure and define the mapping between the object model of the data and the schema of the database. For example, an entity having Name and PhoneNumber properties would result in a database table having Name and PhoneNumber columns.

In short this is your 'Database In Code’. You will need to create this and have it in memory for the duration of the run of your application. Below is the code we are going to use to create our data context

using System.Data.Linq;

public class DimecastsDataContext : DataContext
{
    public DimecastsDataContext() : base("Data Source=isostore:/DimecastsData.sdf")
    {

    }

    public Table<Episode> Episodes;

}

You will notice that my context class is very small, this is a good thing. There are a few items in this class which are worth pointing out

The ‘Connection String’ – This is needed in order to tell CE where to find the data stored in isolated storage. In my example I am hard wiring it into the constructor call.
The Table<ENTITY> field – This tells the Data Context that there is going to be a table defined, and accessed, which is of type Episode. This is required. If you fail to create this you will receive a SQLCEException – Table does not exist error
No place in code will you set a pointer to the Episodes ‘table’ this is done via black magic by the DataContext. Its odd I know but trust me it just works.

Step 3: Creating our entity which represents our Table

Before we can actually start creating any ‘real’ code we must define an entity (Episode) which represents our table structure.

using System.Data.Linq;
using System.Data.Linq.Mapping;

[Table]
public class Episode
{
    [Column(IsPrimaryKey = true, IsDbGenerated = false, DbType = "INT NOT NULL", CanBeNull = false)]
    public Int32 Id { get; set; }

    [Column]
    public Int32 Number { get; set; }

    [Column]
    public string Name { get; set; }
   
}

Lets take a look at the above class because there are a few things I would like to point out

[Table] Attribute – Designates a class as an entity class that is associated with a database table.
[Column] Attribute - Associates a class with a column in a database table.
1. IsPrimaryKey Property - Represents a column that is part or all of the primary key of the table.
2. IsDbGenerated Property – Represents whether a column contains values that the database auto-generates – I have this turned off in my example because my data is pushed from a backend server w/ the ID created
3. DbType Property – Represents type of the database column, this is optional as the type can be inferred as well
4. CanBeNull Property – Represents whether a column can contain null values.

As you can see this is pretty straight forward and pretty easy to setup.

Step 4: Creating and Using the DataContext to init your database

var dimecastsDataContext = new DimecastsDataContext();

if (!dimecastsDataContext.DatabaseExists())
{
    dimecastsDataContext.CreateDatabase();    
}

The code above will create an instance of our DataContext. When we have this DataContext we can create the database (after making sure it does not already exist) by calling the .CreateDatabase(). Scan your code looking for classes w/ the [Table] marker and setup/create your db schema.

Step 5: Creating and Querying you database

var episode1 = new Episode
                    {
                        Id = 1,
                        Number = 1,
                        Name = "Episode 1"
                    };

dimecastsDataContext.Episodes.InsertOnSubmit(episode1);

dimecastsDataContext.SubmitChanges();

var foiundEpisodes = (from e in dimecastsDataContext.Episodes
                select e).ToList();

In the code above we are doing a few things.

We are creating the episode entity we want to add to the database
We are adding the newly created entity to the table (.Episodes is our table pointer remember)
We are calling .SubmitChanges() on our DataContext in order to save our changes
We are running a Linq query to get the newly entered data out of our database.

Using Sql Ce is pretty easy, but this is ‘the simple’ case, but it is also a great jumping point to learning how to use the database. In a future posts we will take a look at more in-depth features/usages of Sql CE on WP7.

Till next time,

NotSupportedException w/ Sql CE on WP7 Mango

Derik Whittaker — Wed, 20 Jul 2011 23:40:47 GMT

As I am learning how to use SQL Ce which is available inside of WP7 mango I came across the following exception.

This exception came from the following Linq statement

         
var episodesWithTags = ( from e in dimecastsDataContext.Episodes
	where e.EpisodeTags.Count( x => x.TagName == "Something 3") > 0
        select e ).ToList();

The above statement is straight forward enough and of course the TagName property is part of EpisodeTag so I was thrown for a loop. As I am still learning this I bounced over to the EpsideTag definition you see below:

 
    [Table]
    public class EpisodeTag
    {
     
	... Fluff goes here
        
        public string TagName { get; set; }
    }

As you can see the TagName property is there, but it is missing one little thing, the [Column] attribute. As soon as I added the missing attribute as you see below everything worked just fine.

 
    [Table]
    public class EpisodeTag
    {
     
	... Fluff goes here

     	[Column]   
        public string TagName { get; set; }
    }

So if you ever run into this error, and you will make double, triple sure that you have added the [Column] attribute to the property in question.

Till next time,

Using the Isolated Storage Explorer tool on WP7 Mango to export your .sdf file

Derik Whittaker — Tue, 19 Jul 2011 11:13:54 GMT

One of the biggest complaints (from myself and others) about V1 of WP7 was the total and complete lack of a built in database (although v1 of WP7 did have SQL CE on the device but developers did not have access to use it). When I say there was no built in database don’t misread that to say there is no data storage support cause there is but it is in the form of blob storage inside of the Isolated storage area. This type of storage worked and some great libraries were built on top of this storage to give your app SQL like abilities, but non of them gave you a true SQL experience.

With the upcoming release (this post is based of the Beta build of Mango) of WP7 Mango developers now have full access to SQL CE inside your application. This means that you can do many cool things. One of the really cool things that can be done w/ this SQL access is the ability to import/export your .sdf (SQL CE database file) file in order to view the data inside of SQL Management studio or Visual Studio.

In this post I will walk you though what is needed in order to use the Isolated Storage Explorer tool and how to use this tool to export your .sdf file to your hard drive. I will than walk you through how to connect to that .sdf file via Visual Studio in order to run queries against the data.

Step 1: Running the Isolated Storage tool
This tool is NOT a GUI based tool but rather a command line tool, but it is not hard to use or to learn.

Open up a command prompt and navigate to c:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Tools\IsolatedStorageExplorerTool
In order to extract your data file you will want to run the following command:
ISETool.exe ts xd GUIDGOESHERE PATHTOEXPORTGOESHERE
Let me break down this command in a little more details
- ISETool.exe is the commandline too to work with Isolated Storage
- ts is the command to instruct the take a snapshot of the Isolated Storage data
- xd is the command to instruct the app to look at a running emulator (use de if you want to hit a real device)
- GUIDGOESHERE is the Application GUID for your WP7 application which can be found in your WMAppManifest.xml file
- PATHTOEXPORTGOESHERE is the full path to a folder on your hard drive to store the exported .sdf file

Step 2: Attach the .sdf file to a running instance of Visual Studio
You will want to open up Visual Studio and open the Server Explorer window/pane. Once you have this window open you will need to connect to your .sdf file as such:

Click the Connect to Database button in the Server Explorer
When you click the connect button you will need to add a connection. When the dialog below opens the default should be SQL Client. Make sure you click the change button and select SQL CE 3.5. Selecting SQL CE will change the dialog and you should populate it as you see below.

Step 3: Open the database and take a look at the schema
One you have attached your .sdf file you should now see the database attached to the Server Explorer. You should be able to see all the table schema information as below

Step 4: Query the data
Now that you have attached the database and you can see the schema the next logical thing to do is query the data. You can do this one of two ways. You can either right click on the table and choose ‘Show Table Data’ or you can create a new query and write custom sql. Below is the output of choosing to show table data.

As you can see using when using SQL CE on WP7 Mango it is very easy to export your .sdf file and view the contents of the file inside of Visual Studio. Having this ability is very powerful because it can give the developers the ability to run analysis on their data or inspect their data at any time to ensure they are heading down the right path.

Hope this helps.

Till next time,

Using Ninject (with CommonServiceLocator) with Caliburn.Micro on WP7

Derik Whittaker — Fri, 08 Jul 2011 09:35:54 GMT

As I am in the process of rebuilding my Dimecasts.net WP7 application from the ground up to work with WP7 Mango one of the things I wanted to do was fully use the Caliburn.Micro framework. Caliburn.Micro has its own built in IoC container called the PhoneContainer which provides basic Dependency Injection and this container works great but I have a bit of history using Ninject with my Wp7 applications so I wanted to replace the usage of the PhoneContainer with my Ninject, or more precisely the CommonServiceLocator implementation of Ninject. I knew this had to be doable because there are examples of using MEF with Caliburn.Micro

Turns out I was right using Ninject w/ the CommonServiceLocator inside of Caliburn.Micro is doable and is very easy to boot. Of course before I set out to build my own implementation of this I decided to google for it and this post was about the closest I could find to working code, but this code was NOT complete, at least for the current CM implementation. Even though the post I found was not complete working code it was a great headstart in what needed to be done.

Here is how I got Caliburn.Micro to use Ninject as its IoC container.

Step 1: Register the setup bootstrapper that you want to use

You will need to open up your App.xaml file and put in the code below.

    <!--Application Resources-->
    <Application.Resources>
    	<local:NinjectBootstrapper x:Key="bootstrapper" />
    </Application.Resources>

Step 2: Create the a NinjectBootstrapper which inherits off of PhoneBootstrapper

Caliburn.Micor uses its bootstrapper to do some basic setup and configuration work. It is here that we want to extend this and add support for Ninject and the CommonServiceLocator. Go ahead and create a class as you see below.

public class NinjectBootstrapper : PhoneBootstrapper
{
    private NinjectContainer _ninjectContainer;

    protected override void Configure()
    {
        _ninjectContainer = new NinjectContainer(RootFrame);

        _ninjectContainer.RegisterDefaultBindings( typeof ( DashboardViewModel ), typeof ( IEventAggregator ) );
        _ninjectContainer.RegisterPhoneServices();

        var ninjectServiceLocator = new NinjectServiceLocator(_ninjectContainer.Kernel);

        ServiceLocator.SetLocatorProvider(() => ninjectServiceLocator);     
    }

    protected override object GetInstance(Type service, string key)
    {
        if (service != null)
        {
            return ServiceLocator.Current.GetInstance( service, key );
        }

        throw new ArgumentNullException("service");
    }

    protected override IEnumerable<object> GetAllInstances(Type service)
    {
        return ServiceLocator.Current.GetAllInstances( service );
    }

    protected override void BuildUp(object instance)
    {
        _ninjectContainer.Kernel.Inject(instance);
    }
}

Step 3: Implement the Ninject Setup logic

As you can see from step 2 I have created a class which actually performs all the direct Ninject setup and I called it the NinjectContainer. Below is the code for this container. You should also note 2 more things:

This container implements IPhoneContainer from Caliburn.Micro
In the RegisterPhoneServices method this is a very manual rebinding of Caliburn.Micro and it is likely that I missed something. This code was a direct port from the default implementation of the Caliburn IoC container setup.

public class NinjectContainer : IPhoneContainer
{
    private readonly IKernel _kernel;
    private readonly Frame _rootFrame;

    public NinjectContainer( Frame rootFrame )
    {
        _kernel = new StandardKernel();
        _rootFrame = rootFrame;
    }

    public event Action<object> Activated;

    public IKernel Kernel
    {
        get { return _kernel; }
    }

    public void RegisterWithPhoneService( Type service, string phoneStateKey, Type implementation )
    {}

    public void RegisterWithAppSettings( Type service, string appSettingsKey, Type implementation )
    {}

    public void RegisterPhoneServices(bool treatViewAsLoaded = false)
    {
        var phoneService = new PhoneApplicationServiceAdapter(_rootFrame);
        var navigationService = new FrameAdapter(_rootFrame, treatViewAsLoaded);
            
        Kernel.Rebind<IPhoneContainer>().ToMethod(x => this);
        Kernel.Rebind<INavigationService>().ToMethod(x => navigationService);
        Kernel.Rebind<IPhoneService>().ToMethod(x => phoneService);
        Kernel.Rebind<IEventAggregatorv().To<EventAggregator>().InSingletonScope();
        Kernel.Rebind<IWindowManager>().To<WindowManager>().InSingletonScope();
        Kernel.Rebind<IVibrateController>().To<SystemVibrateController>().InSingletonScope();
        Kernel.Rebind<ISoundEffectPlayer>().To<XnaSoundEffectPlayer>().InSingletonScope();
        Kernel.Rebind<StorageCoordinator>().To<StorageCoordinator>().InSingletonScope();
        Kernel.Rebind<TaskController>().To<TaskController>().InSingletonScope();
            

        var coordinator = Kernel.Get<StorageCoordinator>();
        coordinator.Start();

        var taskController = Kernel.Get<TaskController>();
        taskController.Start();
    }

    public void RegisterDefaultBindings( params Type[] typesToScanAssembliesFor )
    {
        // scan services
        Kernel.Scan(x =>
        {
            foreach ( var type in typesToScanAssembliesFor )
            {
                x.FromAssemblyContaining( type );
            }
                
            x.Where(type => type.Name.EndsWith("Service"));

            x.BindWithDefaultConventions();

            x.InSingletonScope();
        });

        // scan the rest
        Kernel.Scan(x =>
        {
            foreach (var type in typesToScanAssembliesFor)
            {
                x.FromAssemblyContaining(type);
            }

            x.Where(type => !type.Name.EndsWith("Service"));

            x.BindWithDefaultConventions();
        });
    }
}

Step 4: Hit F5 and see the fruits of your effort

Now if we did everything right your application should not be able to be run and Caliburn.Micro and Ninject (and CSL) as its IoC container.

As you can see you can swap out the built in IoC container w/ Ninject inside of Caliburn.Micro with almost no effort. I hope this helps and others enjoy.

Till next time,

XamlParseException from WP7 Mango and Caliburn.Micro

Derik Whittaker — Sun, 03 Jul 2011 22:41:00 GMT

*** UPDATE: Turns out the is expected as Caliburn will create its own instance of the PhoneApplicationService for you. Also when using Caliburn.Micro make sure that your App.xaml.cs is empty as Caliburn.Micro has better facilities for handling all these actions. ***

Today when I was kicking off a new Wp7 Mango project where I was going to use Caliburn.Micro soup to nuts I quickly ran into the following exception.

Now before I explain what is needed to resolve this error (I hope) let me quickly explain what I had done so far in my project which lead up to this. I did the following:

Created a new WP7 Mango Application (not pivot, not panorama)
Downloaded the latest nightly build of Calibrun.Micro
Opened one of the Caliburn.Micro sample applications and copied it’s WP7AppBootstraper
Hit F5

When I ran the application, which had NOTHING in it other than the default setup contents I received the error above. Since I had not setup the ability to walk though the Caliburn.Micro source (something I have since done) I quickly took another quick scan of the sample WP7 Navigation sample that is part of the Caliburn.Micro source tree to see what I had done differently.

After about 2 minutes of looking I noticed that my App.xaml was a bit different. I had the following in my App.xaml

Just for giggles I commented out the line which setup the PhoneApplicationService (as you see below):

After commenting out the line above I again hit F5. This time my error went away and the application loaded as expected. Now I am not sure of 2 things.

Is this a Mango only issue w/ Caliburn.Micro (assuming it is an issue at ALL w/ CM)
Is this something that should ALWAYS be removed when building a Caliburn.Micro application?

No matter the reason or the cause it did appear to solve my issue. So if you are having the same issue try removing the code above from your app.xaml and see if that helps.

Till next time,

Don’t Kid Yourself, Size Does Matter…Least when talking about Web Service Messages

Derik Whittaker — Tue, 17 May 2011 06:57:00 GMT

Ok, now that I have your attention, it is time to get your mind out of the gutter and back on the topic at hand. When you are building out native mobile applications you are undoubtedly going to communicate to some sort of back end server via some sort of Web Service (say WCF for example if building on top of the Windows Phone 7 platform).

When build these web service endpoints most developers will pay attention to the type and the amount of data which is being sent across the wire, but I would venture a guess that for the most part they are doing this for the wrong, yet still very valid, reason. I know in the past when I have build out endpoints and the payloads they were going to be communicating I was solely focused on making sure that only the minimum data points which are needed by the consumer are being sent. As valid as this is, you should also concern yourself with the actual payload size in kilobytes which is being sent. Which in my opinion is the right reason to pay attention to the data being sent across the wire.

Why should you focus on the size of the message more so than the content of the message? Well by focusing on the size you will be indirectly focusing on the content as well but you will be doing so from a different perspective.

Things you can do to reduce the payload size?

Use JSON rather than xml based web services:

In my experience if you can encode (format) your payload as JSON you will see a size reduction of 40% or MORE in your payload. And when we are talking about sending data across the wire (aka the cell network) this can and will have a huge impact on your applications performance.
If you use XML, make sure you use concise property names:

When you build out your object model try to use concise rather than verbose names for properties. For example if you have an object called Customer there is no need to name a property CustomerFirstName but rather I would suggest you call it First. First the ‘Customer’ prefix should be inferred from the object context and the suffix of name should also be inferred. By removing Customer and Name you are actually saving 24 characters, not 12. Remember w/ XML you have the closing tag so the serialized message will be <First>Something</First> rather than <CustomerFirstName>Something</CustomerFirstName>.

If you pay attention to this convention you could see as much as a 20-25% reduction in your message. But word to the wise, I would still prefer readability over a super reduction in size. There are a few blog posts out there that would suggest you name the property something like ‘F’. Personally I think this obfuscates the intent of the message too much and this trumps a smaller message, but each scenario is unique and maybe you need that level of reduction in size.
If you use XML, make sure you control your namespaces of your objects:

When you use WCF and DataContracts you have the ability to specify the namespace for each object. In my experience the default namespace which is provided (the one of your physical object model) often times is very long. In WCF you have the ability to specify a shorter namespace which can be used. And when I specify this namespace I take the time to create it as a valid Uri rather than a object model namespace. I have seen a 3-5% reduction in message size by doing this. I know you are thinking that 3-5% is not much, but remember when talking about pushing data over networks such as Cell networks that can have a bit of an impact.

If you pay attention to your message from the size perspective and monitor this information you will be surprised by what type of performance gains you can receive. This type of performance tuning is about the simplest and easiest you can perform and the ROI on it can be substantial.

Till next time,

Missing Method Exception w/ Caliburn.Micro when using INavigationService

Derik Whittaker — Mon, 09 May 2011 12:40:07 GMT

As I continue to build out a WP7 application using Caliburn Micro I ran into a odd error. When trying to inject the INavigationService I would get a ‘Missing Method’ exception as shown below:

When I first started to look at the error it did not make any sense. Everything appeared to be in order, but of course there had to be something wrong. lets take a look at what was wrong and how to resolve it.

When building out a WP7 app using Caliburn.Micro when you let the Visual Studio template the template will create a ‘framework’ folder for you. This framework folder has some killer code in it, but be careful because much of what is generated here also lives in the Caliburn.Micro namespace (in fact all this code may be duplicated, but I am too new to the framework to know for 100%).

The first thing I did when setting up my application is to add the following method to my PhoneContainer.cs class (this is based on a few example projects I have seen)

public void RegisterPhoneServices( bool treatViewAsLoaded = false )
{
    RegisterInstance( typeof( Caliburn.Micro.INavigationService ), null, new FrameAdapter( _bootstrapper.RootFrame, treatViewAsLoaded ) );
    RegisterInstance( typeof( Caliburn.Micro.IPhoneService ), null, new PhoneApplicationServiceAdapter( _bootstrapper.PhoneService ) );
    RegisterSingleton( typeof( IWindowManager ), null, typeof( WindowManager ) );
    RegisterSingleton( typeof( IEventAggregator ), null, typeof( EventAggregator ) );
}

The intent of the code above is to setup the IoC container with many of the default services I want to use from the framework. You will notice that in the first two I have prefixed the interfaces with Caliburn.Micro (which we my undoing as I will learn). The reason for this is that my project spans multiple dll’s and this was how I could get it to compile.

When I would try to run this code:

var instance1 = container.GetInstance( typeof( DashboardViewModel ), "DashboardViewModel" );

This when I would get the missing method exception from above. After about 10 minutes of looking at this code and trying a few different things I knew for a FACT that the error was due to the usage of the INavigationService interface, now just to understand what the root cause was.

As I went back to the location where I register the interface it downed on me. What is the namespace of the ‘FrameAdapter’ object? Of course it was NOT Caliburn.Micro…hum could this be the cause. Turns out it was. When I prefixed FrameAdapter to look like below

RegisterInstance( typeof( Caliburn.Micro.INavigationService ), null, new Caliburn.Micro.FrameAdapter( _bootstrapper.RootFrame, treatViewAsLoaded ) );

Everything now worked as expected. The moral of the story is this. If you are going to use this awesomeness which is Caliburn.Micro either use the libraries from the Caliburn.Micro.dll or DON’T. Do NOT mix apples and oranges.

Till next time,

P.S. I am sure I am really doing something wrong in general w/ Caliburn.Micro but hey that is how you learn right

Update Error 800705B4 for WP7

Derik Whittaker — Tue, 19 Apr 2011 20:20:15 GMT

So today was the first day I was able to get the NoDo update for my Samsung Focus so of course I wanted to update my phone ASAP, but…..

When I ran the update I received the following error:

When I googled for this error (along w/ bitch about it on twitter) I found the following link http://support.microsoft.com/kb/2484484#800705B4 .

I tried step 1 which is remove all the history but that did not work

I tried step 2 which was to remove some apps, I removed like 20 apps, but that did not work

I then tried step 2 again but this time I removed ALL developer built apps off the phone (this phone is developer unlocked)…this WORKED.

If you find our self having issues and are getting this error AND your phone is developer unlocked try removing ALL developer builds from the phone. This solved my problem.

Now back to work.

Till next time,

Using Binding to create Panels/Pivots in your WP7 Application

Derik Whittaker — Tue, 19 Apr 2011 10:19:00 GMT

If you are building a Windows Phone 7 application it is very likely that you are going to incorporate either the Panoramic or Pivot layouts in your app. In most cases when you are building these your panels/pivots are fairly static. However, what do you do when the number of panels/pivots needs to changed based on environmental setting (ie data or user preferences)?

One solution is to use the code behind and manually create your panels/pivots. However, I personally feel this method is clunky and fugly. I would rather stay as close to the MvvM pattern as possible as well as harness the power of Binding to build my UI on the fly based on values inside my view model. In this post we are going to take a look at how simple it is to bind your View Model to your UI and have your panels/pivots built for you.

Create the View Model’s to Bind to the UI

Main View Model – This is the one bound directly to the UI

    public class DashboardViewModel : ViewModelBase
    {
        // This is an internal class and does not change the implementation...
        private readonly IDashboardService _dashboardService;

        public DashboardViewModel( IDashboardService dashboardService )
        {
            _dashboardService = dashboardService;
        }


        public string Title 
        {
            get { return _dashboardService.DashboardTitle; } 
            set 
            { 
                _dashboardService.DashboardTitle = value;
                RaisePropertyChangedEventImmediately( "Title" );
            }
        }

        public ObservableCollection PanelCollection
        {
            get { return _dashboardService.PanelItems; }
            set
            {
                _dashboardService.PanelItems = value;
                RaisePropertyChangedEventImmediately( "PanelCollection" );
            }
        }
    }

In the class above there are 2 properties we need to know about.

Title – This is the property in the VM which will create the actual title for the entire Panorama control
PanelCollection – This is the property in the VM which contains the list of items which will be used to generate each panel/pivot in the UI

Panel View Model – These are the ones which will build each panel/pivot

    public interface IDashboardPanelItemViewModel
    {
        DashboardPanelType DashboardPanelType { get; set; }

        string DashboardTitle { get; set; }

        ObservableCollection<IDashboardPanelListItemViewModel>: PanelListItems { get; set; }
    }

In the class (actually it is an interface) above there are 3 properties we need to worry about

DashboardPanelType – This really does not change how the panels are bound to the UI but rather is used to determine how the actual panel data is displayed (future post on this)
DashboardTitle – This is the property which will create the text title for the panel/pivot
PanelListItems – This is the property which will contain the individual data points which will be displayed on the created panel/pivot

Create the xaml to hookup the binding

When binding the Main View Model (the first class above) to the UI we need to do 2 things

Need to bind our main View Model to the Panorama (or PIvot)
Need to bind the individual list item from the element in PanelCollection to the panel

When looking at the 2 snippets above you want to pay attention to the ItemsSource Property in both.

The End Result (bit fugly, but this is for demo only)

As you can using Binding to create your panels/pivots based on the data in your view model is super simple and requires NO code behind code to accomplish. Please be aware though that you should NOT generate too many panels/pivots as that is a massive UI design smell.

Till next time,

Null Reference from Simple Container in Caliburn Micro

Derik Whittaker — Sun, 10 Apr 2011 12:59:00 GMT

I am building out a new Windows Phone 7 application and this time I am finally going to use the Caliburn Micro framework (I have been telling Rob I was going to for a long, long time). Of course one of the great features of this framework is that it was built from the beginning to support DI (Dependency Injection) with its own built in, light DI container.

When setting up the container you have the ability to provide keys for the items which you register. However, one thing I was not aware of (it may be documented someplace) is that not all items in the container can/should have keys. I have a ViewModel which I have registered using the standard way (seen below)

container.RegisterPerRequest( typeof( DashboardViewModel ), "DashboardViewModel", typeof( DashboardViewModel ) );

and this View Model needed a dependency injected into it (an IDashboardService). In order to inject this IDashboardService I created the line below:

container.RegisterPerRequest( typeof( IDashboardService ), "MlbDashboardService", typeof( MlbDashboardService ) );

However when I ran the application I received a NullReferenceException inside SimpleContainer.ActivateInstace. At first I thought I did not have the interface/concretes setup correctly inside the container but after a bit of double checking I was able to verify I did. After a bit of debugging and walking though the code (not to mention pulling out more of my hair, which by the way I need to keep) I realized that the cause was that I have my IDashboardService a key. After realizing this I changed my registration line to be

container.RegisterPerRequest( typeof( IDashboardService ), null, typeof( MlbDashboardService ) );

Once I made this change and re-ran my application I was able to have my ViewModel created correctly and have the IDashboardService injected as expected.

Now I do not know if this behavior is by intent or what but since I racked my brains trying to figure out what was causing the issues I figured I would share my thoughts just in case others where having the same issue.

Till next time,

Adding Runtime Intelligence to your Windows Phone 7 Application

Derik Whittaker — Thu, 31 Mar 2011 11:07:51 GMT

When building any type of application which is going to be deployed to the masses it is always important to know and understand how your application is being used in order to make more informed decisions on how to maintain or extend your application. When it comes to adding in runtime intelligence into your application the team over at PreEmptive (the same folks that make Dotfuscator) have a killer product that is dead easy to use and gives you great results.

Lets get started and take a look at how to add Runtime Intelligence into your application

Step 0 - Getting up and running:

In order to add this runtime intelligence into your application you will need to download the WP7 Edition of Dotfuscator and have it installed. Once you have it installed you will want to create a new project. After the new project is created the area in the app we are going to focus on is found on the Instrumentation Tab. The screenshot below shows this tab in action.

Step 1: Adding the ApplicationAttribute

In order to identify your application to the RuntimeIntelligence portal you must provide your application an ApplicationAttribute. This should be placed on your main runtime exe/dll (your UI project for WP7). Here is how we can do this.

Right click the main dll in the Instrumentation Screen as such:
Choose Add Attribute and then select the PreEmptive.Attributes.ApplicationAttribute and click ok
Provide the details of your application:
1. For Application Type you can put anything you want there, I just like putting the platform
2. For Guid click the ellipse and it will grab the GUID off your selected dll to use
3. For Name provide anything you want to identify your application
4. For Version this can be anything, I started with 1.0.0.0

Step 2: Adding the BusinessAttribute

In the step above we provided an attribute which identifies your application in the portal, this time we need to provide an attribute which identifies the app again, but this time from the perspective of your company and your license with PreEmptive. Here is how we do this.

Right click the main dll in the Instrumentation Screen as such:
Choose Add Attribute and then select the PreEmptive.Attributes.BusinessAttribute and click ok
Provide the details of your business:
1. For CompanyKey provide the GUID which is provided to you from the http://wp7.runtimeintelligence.com/ portal (not that in this screenshot I did not provide the real key). If you do not provide a valid key you will get the following runtime/compile error - Attribute validation error: The BusinessAttribute on assembly [Assembly name goes here] must have a valid company key.
2. For CompanyName provide the name of the company

Step 3: Adding the SetupAttribute

Once we have the Application and Business Attributes setup in order to ID your product we now must create a setup attribute. This SetupAttribute is an instrumentation time attribute for methods. This attribute can be used to guide Application Analytics instrumentation. This is REQUIRED and you will get an error if you do not have this setup. Here is how we do this.

Find the entry point in your application. For a WP7 application that will be in the App.xaml.cs file and you want to attach to the Application_Launching method. Once you have found this method right click and and add an attribute as such:
Choose Add Attribute and then select PreEmptive.Attributes.SetupAttribute and click ok:
Provide the details:
1. For CustomEndpoint click the ellipse and choose the WP7 endpoint
2. For ExtendedKeySourceOwner click the ellipse and find the entry point into your WP7 app.
3. For InstanceIdSourceOwner click the ellipse and find the entry point into your WP7 app.
4. Make sure the UseSSL is set to true

Step 4: Adding the TeardownAttribute

In the same manor we needed to create a Setup Attribute we need to setup the TeardownAttribute. The TeardownAttribute is an instrumentation time attribute for methods. This attribute can be used to guide Application Analytics instrumentation. This will be used to tell the portal that your application has been closed. This is REQUIRED and you will get an errorif you do not have this setup. Here is how we do this.

Find the exit point in your application. For a WP7 application this can be in the App.xaml.cs file and you want to attached to the Application_Closing method. Once you have found this method right click and add an attribute as such:
Choose Add Attribute and then select PreEmptive.Attributes.TeardownAttribute and click ok:
Provide the details (well in this on you can leave all the defaults if you want)

Step 5: Adding a Feature Tracking Attribute

Ok, so we have done all the upfront busy work to enable us to get to this point. The main point of adding intelligence is to do things like track feature usage or to enable performance tracking. We will focus here on how to create feature tracking.

Find an point/feature in your application which you want to track. In our case we are going to track each time that a video is played so we are going to find the ‘HandlePlayEpisode’ method and right click this to add a new attribute as such:
Choose Add Attribute and then select PreEmptive.Attributes.FeatureAttribute and click ok:
Provide the details

In this example we do not care about extended key values (these are custom data points which can be sent with your messages to give more context)
1. Set the FeatureEventType to Tick (which is the default)
2. Provide a Name, this is required and should be unique. I have a convention I follow in order to allow the names to be searchable and consistent.

Step 6: Rebuild your .Xap with the analytics

Once you are done building your .xap you can then decompile the application via Reflector or what ever and take a look at the code which is injected via the PreEmptive process.

Step 7: Log into the WP7.Runtimeintelligence.com portal and see your information

There you have, the 7 steps needed to go from 0 to runtime intelligence. Adding this information is not difficult and can yield great information on how your application is being used in the field by REAL users.

Till next time,