Developer Days at Microsoft Store

Developer Workshops

Joe Healy (@devfish) and I have been hosting workshops at the Microsoft Store in Orlando at the Florida Mall over the past few Thursdays. The current series has been focusing on Windows Store Apps, including game application development.  Joe presented this past week on MonoGame for Windows 8 and another Florida Developer, Bill Reiss (@billreiss) is doing a blog series on that same topic here, and the turn out was great! Here are the next few topics on deck.



XAML and C# for Windows 8 Store App
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032532761
Presented by: Shayne Boyer (@spboyer)

Using Game Salad for No-Code Game Development on Windows 8
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032532922
Presented by: Shayne Boyer (@spboyer)

Future Events

We are planning a two time a month workshop after the New Year with a range of topics covering Windows Store Apps, Windows Phone and much more surrounding these platforms.  If you have some subject matter that you are interested in hearing more about please contact me spboyer@live.com or Joe jhealy@microsoft.com

Other Resources
Visit Generation App at bit.ly/30tolaunch , or Joe's site at devfish.net and be sure to followus on twitter: @devfish and @spboyer.

Read more →

Paparazzi at the Microsoft Store! I'm Famous!

 What's really "completely embarrassing" as he so states in his post is the lack of observation. Original post here...

First, yes I was and do in fact use a MacBook Pro and run Windows 8 on it. However the the sneaky photo fails to capture the full picture. First, I'm a very cool dude.  So next time at least do it from the XBOX section so you get my good side, and the "I'm a PC" shirt that I was wearing.

Secondly, do note in the photo that that is my desktop there on the screen, um I believe that's Windows 8 and NOT OSX. I also carry multiple phones at this point I had a Lumia 800 Windows Phone in my pocket but also own Android and iOS devices as well.

Furthmermore, if you are in fact the "social media fanatic" that the about page states on your blog; please come introduce yourself! I love to chat technology, and ask what I was presenting that evening.  You'd be suprised, or not maybe, that I was talking about Windows 8 UX Design. You should have stuck around, not only would you have gain some serious knowledge from the 1 1/2 presentation  but also had gotten some dang nice swag and a fancy sandwich from Panera Bread in Microsoft.

I do not work for Microsoft, and even employees of Microsoft are welcome to carry and use iOS and OSX devices.  

Next time introduce yourself, you'd be surprised whose on the front side of that picture.

Read more →

Tampa Code Camp

I will be giving two talks this Saturday at Tampa Code Camp, being held at the University of South Florida in Tampa, Fl.  For directions and more information visit http://www.tampacodecamp.com. Schedule for other sessions here.

 

My Sessions

Introduction to ASP.NET Web API - Why you should be using it.

9:50 AM in Room 1102

This is an introduction to ASP.NET WebAPI and how easy it is to get started and use it in your application development when building RESTful services.

Building Windows 8 Apps w/ MVVM Light

2:20 PM in Room 1301

MVVM Light is a great toolkit for building Window Phone applications and has been updated for building Windows 8 Modern UI apps. In this session, you will learn how to get the package installed, what is different from Windows Phone development in MVVM Light and how to start your first app in Windows 8.

Telerik Controls for Windows 8.

3:25 PM in Room 115

Telerik has just released a set of controls for Windows 8 development. In this session, we'll take a look at the set of controls and see how easy it is to get started using these to make your Windows 8 apps pop.

Hope to see you there, should be an exciting event!

Read more →

TypeScript for Windows 8 Store Apps

What is TypeScript? 

See http://www.typescriptlang.org

TypeScript was recently released and has become the new hot topic.  One of the questions I have asked and heard is can we use this for developing Windows Store Applications with Javascript and have the cool features that have been shown in the videos and examples.

One of the great features was the split window feature where you can code in TypeScript on the left and upon hitting save, it compiles to Javascript on the left. So I fired up a new Javascript Windows Store project in Visual Studio to give it a shot to see if it all works.  Before we get started make sure that you have the following:

• Windows 8 & VS2012
• Download the plugin: http://go.microsoft.com/fwlink/?LinkID=266563
• VS 2012 Web Essentials: http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

Create a New Project

Start by creating a new project. I just went with the "Blank App" template for purposes of this post, but any of the installed templates are certainly applicable.

Click "OK" and you will see that in the Solution Explorer the following structure.  Expand the "js" folder to see the javascript files that are there by default.

Adding the TypeScript Functionality

There are a couple of files that are needed to making TypeScript and Windows 8 play nicely together, as well as jQuery.  The best way to describe these is that they are wrappers for the WinJS, WinRT and JQuery or helpers.  There is also lib.d.ts which is a noted in the file as "ECMA Script APIs" 

Click on any of these to see the source.

winjs.d.ts

winrt.d.ts

jquery.d.ts

lib.d.ts

I downloaded all of these and now put them in a folder called tsWin in the project for referencing in my other ts files.

In the examples that have been shown online, by simply adding a .ts file to your project and hitting save; Visual Studio will automatically create the .js file and associate it to the TypeScript file and show the compiled javascript in the split window.  However, this is not the case in a Windows Store Application...Yet.

But we can still make this all work, here's how.

Add a new javascript file to the js folder BUT name it with the extension .ts. I named the file Data.ts.  Next, repeat and name the file Data.js. Your solution explorer should look like this now. Note that I also added the tsWin folder and the mentioned files as well.

Now you can open the data.ts file and get the split window that has been presented and see that the .js file that is compiled on the right. 

There is another file here that is important as well called win.ts, it adds a wrapper for setImmediate and references the winrt.d.ts and winjs.d.t.s files.  I reference this file in any of the TypeScript that I am using but put it within the js folder.

A Quick Example

So here is a quick example that will walk through the following concepts:

• Creating a simple class
• Extending the class through inheritance
• Using Location Services
• Retrieving a static map from Google Maps API
• Inserting the image control onto the page.

Open the data.ts file.  We will first create the initial Location class and the MyLocation class in TypeScript  and see the output to javascript.

TypeScript:

///<reference path='win.ts'/>

module Data {

    class Location {
        longitude: any;
        latitude: any;
        url: string;
    }

    class MyLocation extends Location {
        retrieved: any;
    }
};

Javascript:

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}

var Data;
(function (Data) {
    var Location = (function () {
        function Location() { }
        return Location;
    })();   

    var MyLocation = (function (_super) {
        __extends(MyLocation, _super);
        function MyLocation() {
            _super.apply(this, arguments);
        }
        return MyLocation;
    })(Location);   
})(Data || (Data = {}));
; ;

Screen shot just to visualize what's show in VS 2012

Not sure about you, but I wouldn't want to write the inheritance code for Javscript, TypeScript kills it there! Ok, let's move on. Next I will add the function to get the location from the device, populate the myLoc object and then create and insert the image into the body of the page.

Note that the TypeScript and Javacript to do this are one and the same, difference here is that we have type safe code.

TypeScript:

  var locator = new Windows.Devices.Geolocation.Geolocator();

  locator.getGeopositionAsync().then(function (pos) {
  
      var myLoc = new MyLocation();
      myLoc.latitude = pos.coordinate.latitude;
      myLoc.longitude = pos.coordinate.longitude;

      myLoc.retrieved = Date.now;
      myLoc.url = "http://maps.googleapis.com/maps/api/staticmap?center="
          + myLoc.latitude + "," + myLoc.longitude
          + "&zoom=12&size=400x400&sensor=false";

      // add a new img tag to the document
      var img = document.createElement("img");
      // set the src and style
      img.setAttribute("src", myLoc.url);
      img.setAttribute("style", "height:400px;width:400px;");
        
      // get the paragraph tag we set for the location of the content
      var p = document.body.getElementsByTagName("p")[0];
      p.appendChild(img);

When you hit save you'll notice that on the status bar at the bottom left of Visual Studio it will read "Compiling TypeScript..." and then the resulting Javascript will refresh/show on the right pane.  It is important to note that if you have the ,js file open you will get the prompt "Such and such file is open would you like to reload".

Before you run the application make sure that you enable the Location capabilities in the package manifest file as shown below or you will get a nasty message box letting you know you didn't.

Ok, hit F5 and see the results.

First you'll get the let me use location services prompt.

And then the page is presented with the downloaded map.

That's a little get started primer on TypeScript and Windows Store Apps!  Pretty awesome stuff.

Tips & Tricks

Content / Package Type

Make sure that all of the TypeScript (.ts) files are marked as None so they are not distributed unnecessarily with your application. 

Debugging

You can put break points in the generated .js files and have access to the immediate window, watch etc.

Dependent Files

I like to see the dependent files like I'm used to seeing in other project types (see below).  Since this is not built in to the Windows Store functionality with TypeScript yet, here is how to do it.

You need to edit the project file.  The best way to do this is to use the Power Commands for Visual Studio extension, or browse to it and open in notepad or some other text editor.

PowerCommands for Visual Studio

For this solution locate the data.ts reference in the file and change it to the following:

    <Content Include="js\data.js">
      <DependentUpon>data.ts</DependentUpon>
    </Content>
    <None Include="js\data.ts" />

Save the file and reload the project and you can now see that the .js file will be shown below the .ts file.

Conclusion

I have had some real fun getting into this and trying it out with the Store apps.  Coming from a C# / XAML life for the last many years, it will be interesting for me to back to some scripting.  I like the option and I see some really cool opportunities with TypeScript.

DOWNLOAD THE CODE FOR THE EXAMPLE

Read more →

Richmond Code Camp

I will be giving two talks this Saturday at Richmond Code Camp, being held at the University of Richmond in Richmond, Va.  For directions and more information visit http://richmondcodecamp.org/ and/or follow @CodeCamp on Twitter. Schedule for other sessions here.

 

My Sessions

Building Windows 8 Apps w/ MVVM Light

8:45 AM - 10:00 AM in Room 2

MVVM Light is a great toolkit for building Window Phone applications and has been updated for building Windows 8 Modern UI apps. In this session, you will learn how to get the package installed, what is different from Windows Phone development in MVVM Light and how to start your first app in Windows 8.

 

Introduction to ASP.NET WebAPI - Why you should be using it.

12:30 PM - 1:45 PM in Room 1

This is an introduction to ASP.NET WebAPI and how easy it is to get started and use it in your application development when building RESTful services.


Hope to see you there, should be an exciting event!

Read more →

RadCustomHubTile from Telerik for Windows 8 UI

Introduction

Telerik recently released their Windows 8 UI Controls to RC on September 18th (see post here), and this is probably on the first in a series of posts I will put out showing them off.

The first control here is the RadCustomHubTile.  I chose this because I am in the process of porting my Find Amber app from Windows Phone to Windows 8 and I wanted to transition the app without drifting too far from the spirit of the original app. 

RadControls from Telerik used here for
Current List and Search & Stats section

You can see from the screen shot that I had already used the RadControls for Windows Phone, so now I can bring some of the design through.

The controls do support both HTML and XAML design, if the current version of the controls do not include either or; I assure you the version you seek is in development and on its way.

Getting Started

The RadCustomHubTile allows any user-defined content rather than predefined parts that you may find in a RadHubTile or RadSlideTile, and as in most if not all of the Telerik controls; MVVM as well as code based binding is supported.

Prior to trying this example, please download the controls from Telerik and note that I am using MVVM Light as the MVVM Framework.  You can see how to install MVVM Light via nuget by opening the Package Manager console and running "Install-Package mvvmlight".  If you have any trouble with that please see http://mvvmlight.codeplex.com or contact me via twitter (@spboyer) OR see my blog post on how to get started with Windows 8 and MVVM Light.

In the following example you will see:

• MVVM Binding
• Content locally bound
• Content bound from an internet URI
• Complex front and back content for the tile

This is a moderately simply example.  I started with a Blank Solution in Visual Studio 2012 and called it RadCustomHubTile (in retrospect probably should have stuck with App1).

Install the MVVM Light Framework via nuget (see above), you will have to make a change to the App.xaml file.  When installing this, it adds the reference to the namespace in the old way

  xmlns:vm="clr-namespace:RadHubTile.ViewModel"

you need to change this to:

 xmlns:vm="using:RadHubTile.ViewModel"

 A little house keeping to make it look nice. Yes I care what it looks like even for this. Go ahead and add the following below the <Grid> tag to add the header to the initial page.  You can change the title if you like and run (F5).

<Grid.RowDefinitions>
 <RowDefinition Height="140"/>
 <RowDefinition Height="*"/>
</Grid.RowDefinitions>


<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>
 <Button x:Name="backButton"  Style="{StaticResource BackButtonStyle}"/>
 <TextBlock x:Name="pageTitle" Text="Rad Custom Hub Tile" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}" Foreground="#FFADD808"/>
</Grid>

Title and Back button

Next, lets add the RadCustomHubTile Control, and the best way to do this is to simply drag it from the toolbox right into the spot within the XAML. This is something you could not do in Windows Phone which is a big step in my opinion.

It will add the namespace and the references to the project.

To clean it up a little and make sure that you are using within the design guidelines, wrap the RadHubControl with a Grid with the following settings.

<Grid Grid.Row="1" Margin="115,0,0,0">



  <Primitives:RadCustomHubTile />



</Grid>

If you are wondering why my RadCustomHubTile is prefixed, it is because I have changed or altered the declaration at the top of the page to be the following (this matches my Phone app stuff).

xmlns:Primitives="using:Telerik.UI.Xaml.Controls.Primitives" 

Setting Front and Back Content

The content for the front and back are defined by setting the content within the <RadCustomHubTile.FrontContent> and <RadCustomHubTile.BackContent> respectively.  Pretty simple, so here is an example:

<Primitives:RadCustomHubTile Height="300" Width="300">
 <Primitives:RadCustomHubTile.FrontContent>
  <Grid>
   <Image x:Name="imgBlogger" 
        Source="{Binding Photo, Mode=TwoWay}" 
        Height="300" Width="300" 
        Stretch="UniformToFill" Margin="0" 
        HorizontalAlignment="Left" 
        VerticalAlignment="Center" />


   <Rectangle Height="65" Fill="#99000000" VerticalAlignment="Bottom" />

   <StackPanel Orientation="Horizontal">
    <TextBlock  Text="Blogger:" 
        Foreground="White" Width="126" Height="43" 
        VerticalAlignment="Bottom" 
        Margin="10,0,0,14" Style="{StaticResource SubheaderTextStyle}" 
        HorizontalAlignment="Left" />

    <TextBlock  Text="{Binding UserName}" 
        Foreground="White" Height="43" 
        VerticalAlignment="Bottom" Margin="0,0,0,14" 
        Style="{StaticResource SubheaderTextStyle}"/>
   </StackPanel>
  </Grid>
 </Primitives:RadCustomHubTile.FrontContent>

 <Primitives:RadCustomHubTile.BackContent>
  <Grid>
   <Image x:Name="img" 
         Source="{Binding Thumbnail, Mode=TwoWay}" 
         Height="300" Width="300" 
         Stretch="UniformToFill" Margin="0" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Center" />

   <Rectangle Height="65" Fill="#99000000" VerticalAlignment="Bottom" />

   <TextBlock  Text="{Binding Title, Mode=TwoWay}" 
        Foreground="White" Width="270" Height="30" 
        VerticalAlignment="Bottom"  
        Margin="0,0,0,30" Style="{StaticResource BasicTextStyle}" />

   <TextBlock  Text="{Binding SubTitle, Mode=TwoWay}" 
        Foreground="White" Width="270" Height="30" 
        VerticalAlignment="Bottom" Margin="0,0,0,5" 
        Style="{StaticResource BasicTextStyle}"/>
  </Grid>
 </Primitives:RadCustomHubTile.BackContent>
</Primitives:RadCustomHubTile>

Note that you will want to wrap your content with the FrontContent / BackContent tags in Grid, StackPanel etc as the designer will give you the "Content cannot be set more than once error".

Here is the MainViewModel that is bound. Note that the Blogger image (me), is pulled from an internet source uri and the back image is pulled from the project itself. The string properties are bound simply.

using GalaSoft.MvvmLight;
using System;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace RadHubTile.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel() { }

        public string Photo
        {
            get { return "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwU-gMFDLVqD7kgEEeGFpbdzX1aU0iuyWU14v5iyaPP7wqCYfkSykw-RzbcyYn-mO3luv8stH2m61RKJ4y5KpjmVVeh2MdTbxRx3AE3SxbsfoshmzKwfzoOir42-2DLZTEAA8SBO3Q-rs/s1600/profilepic.png"; }
        }

        public string UserName
        {
            get { return "Shayne Boyer"; }
        }

        public ImageSource Thumbnail
        {
            get { return new BitmapImage(new System.Uri(new Uri("ms-appx:"), "/Assets/RadCustomHubTile.png"));}
        }

        public string Title
        {
            get { return "Telerik Windows 8 UI Controls"; }
        }

        public string SubTitle
        {
            get { return "RadCustomHubTile"; }
        }
    }
}

So what does it all look like?

Front

Back

One other item to note is that you can alter the duration of the flip/rotation by setting the UpdateInterval which is a TimeSpan. So setting the value to "0:0:5" would be equal to 5 seconds.  There is also FlowDirection and many other properties to customize the Tile to your liking.  I'd like to see what you can do with it.  Download the controls today and let me know what you working on and if you have any questions.

Read more →

User Groups - What do you want from them?

There are many user groups, meetups, developer groups, etc depending on where you live that are available to get involved in.  This is one of many ways to meet other developers, see what they are doing, what projects and so fourth are going on in your neck of the woods that you wouldn't necessarily know about.  But, one thing that I'll say is that the format is about the same from the 3-5 groups that I participate in the Central Florida Area.  I even run a Windows Phone/8 group here too, and the same could be said.

Now, one thing that I wanted to do was sponsor contests. So I started the Dark Sky App contest to try and put a little something different into the mix, but I wanted to throw the general question out to the world.  What do you as a developer, designer, etc. want out of these types of groups?

Typically it's a meeting where on or a few people present on a topic, there is some Q & A and generally some free stuff given away.  Now I'm always good for some free nerdy swag or a book, and I will never discount the general social interaction that I get from these groups. Not to mention I have made some pretty good friends and networked with really cool people along the way.  Is that all we are looking for?  Is there something else you "need" from these presentations or gatherings?


Please comment below and let me know...

Read more →

Amber Alerts for Windows Phone - Find Amber: I built it!

Find Amber Available for Windows Phone

Find Amber has finally been approved and is now available in the Windows Phone Store! This project is close to me, and not in a "I have lost a child" way thank God. But I do have children and if something were to happen to any of them I can't imagine what it would be like.

There are ways to get this information but generally it is slow to deliver. Television, Radio, etc. but these delivery mechanisms are allow but allow for detail. In contrast, there is a text message service and/or the road signs that are available which solves the speed of delivery but the content is lacking. My solution was to give the user both speed of delivery and content.

I decided to combine the latest available technology and tools from Microsoft using Windows Azure, SQL Azure and ASP.NET Web API to build a robust system to get the data and deliver it to first the Windows Phone Platform but also create an API that allowed me to expand this to Windows 8 and the other mobility platforms.

The Windows Azure Services provide the necessary notifications to be sent to the phone when a new Amber Alert has been created. If the user has pinned the application tile to their home screen, they will be notified on the Live Tile if the Amber Alert has occurred in their state or near their location.  These notifications are sent within 1 minute of the notification being created at the National Center for Missing & Exploited Children® (NCMEC).

Other features of the application include

• Most recent or open cases
• Cases near you
• Statistics
• Case Type
• Month of Year
• U.S. Region
• Year
• Top 10 States
• Cases by State
• Case Details
• Showing all pictures on file
• Includes Abductor pictures where applicable
• Map of last know location or missing from
• Links to Actual Lost Child Poster
• Social and Email Sharing integration

Screenshots of Find Amber

Current List

Other Options

Child Details

Poster View

Statistic Graphs

Other credits

Telerik - RadControls for Windows Phone

MVVM Light Toolkit by Laurent Bugnion (@LBugnion) : Great MVVM framework, supports Silverlight, WPF, Windows Phone and now Windows 8.  I blog about it and give talks a code camps and user groups.

PhoneFlipMenu by Scott Lovegrove (@scottisafool) : this is officially being moved to Coding4FunToolkit.

 

Read more →

SimpleIoc and the Messenger Service in MVVM Light

CodeProject
The SimpleIoc addition in the most recent version of MVVMLight is a great add and really simplified the ViewModelLocator across all of the platforms supported in this framework.

If you are not familiar with MVVM Light or what you types of project platforms it supports please go to http://mvvmlight.codeplex.com or www.galasoft.ch/mvvm to learn more.

However if you are using the Messenger Service in MVVM Light to perform a set of actions to do the following:

• User takes an action
• Application changes views
• Application send message to display or load data

then it is important to note that there are some differences in the way that the ViewModels are loaded in comparison to the previous version of MVVM Light.

Lets look at the ViewModelLocator in the new version:

    public class ViewModelLocator

    {

        static ViewModelLocator()

        {

            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);



            if (ViewModelBase.IsInDesignModeStatic)

            {

                SimpleIoc.Default.Register<IDataService, Design.DesignDataService>();

            }

            else

            {

                SimpleIoc.Default.Register<IDataService, DataService>();

            }

            SimpleIoc.Default.Register<MainViewModel>();         

            SimpleIoc.Default.Register<SecondViewModel>();

        }



        /// <summary>

        /// Gets the Main property.

        /// </summary>

        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",

        "CA1822:MarkMembersAsStatic",

        Justification = "This non-static member is needed for data binding purposes.")]

        public MainViewModel Main

        {

            get

            {

                return ServiceLocator.Current.GetInstance<MainViewModel>();

            }

        }

   }

Notice that in comparison to what you may have seen in the past version, there is a single property to the ViewModel and a simple line in the constructor here to register the ViewModel with the Ioc Container and that is it.

The property for the ViewModel is Lazy, meaning that it is loaded on demand and is a singleton.  You can create multiple instances by passing in a key upon creation, but for this example I'll keep it simple.

Given the scenario above you will get the result of the secondary view not getting the message sent event though you have registered the message with the Message Service and have an action ready to handle it.  BUT the second time through it's fine and operates as it should.  What has happened?

Very simply, the examples you have seen in the past very rarely ever cover situations in the real world nor do they ever go far enough to look at the overloads in the constructor etc.

What has happened here is that the ViewModel MUST exist first in order to take action on the message. Moreover, the Messenger Service in MVVM Light does not operate like a Service Bus or Message Queue where the messages stay there until they are read.  It is more similar to Events, a fire and forget model.

In order to alleviate said problem, simple pass in "true" to the Register call in the SimpleIoc to create the instance of the ViewModel immediately and go on with your coding.

  SimpleIoc.Default.Register<SecondViewModel>(true);

The previous version of MVVM Light created all of the ViewModels immediately, although not too much of an issue; there are instances where a user may not go to every view in the application and the idea here is to only load what is needed and keep the View and ViewModels loaded in memory when necessary.

If you have questions please comment and/or contact me on twitter @spboyer

Read more →

What are you looking for as a Mobile Developer in a Blog Post?

The mobile development industry has probably the greatest up swing in comparison to the other development paths over the last 5 years.  What I mean is that many more developers are focusing on either getting into mobile development (as in native apps), making sure their web apps are responsive and scale or adjust for a mobile viewport (html5) etc.

So, for those developers who blog like myself I am curious what you are looking for when reading our stuff...

Check out this survey and let me know what you want to get out of article related to mobile development.

Thanks.

Read more →

Southwest Florida Code Camp

I will be giving two talks this Saturday at Southwest Florida Code Camp. If you are interested in hearing about ASP.NET WebAPI and/or MVVM Light, stop by either of my talks.


 8:30 - 9:40 AM (Room 128) - Introduction to ASP.NET WebAPI - Why you should be using it!

 9:40 - 10:40 AM  (Room 128)  - Building Windows Phone Apps w/ MVVM Light 


Hope to see you there, should be an exciting event!

Read more →

Looking at Windows Azure Mobile Services with Fiddler

CodeProject
As usual throughout the day I have MetroTwit open and toast are constantly popping up here and there and I glance over to see what’s what.  Then I see. from @WindowsAzure this:

And all work stopped for me to check this out.  Other than Windows Phone and Windows 8; I really love the new ASP.NET WebAPI and REST Services capabilities it has made so easy (watch for my next post on that), and seeing this I was thinking – awesome but only for Windows 8???  So…I immediately responded and got a response:

Spending the last day or so checking into the walk through for Windows 8, check them out here. I went through the initial walkthrough for a Windows 8 application, and during this I wanted to see the data that was going back and fourth so I opened my favorite tool Fiddler to see the HTTP calls, which then lead me to see that I could easily use these services for Windows Phone 7 now!
Here is a quick walk through a how to get setup.

Getting Started

In order to start using the preview of the Mobile Services in Azure, you need to have a Windows Azure account or you can sign up for a trial account. After you login, go to your Account Center and select the Preview Features from the top menu.

I have already signed up for the Mobile Services, so you will see a “try it now” button and go ahead click that to get started. Once you get transferred to the, unfortunately still called the “Preview” portal, you’ll notice on the left menu that there is a new Mobile Services section.

Next on the bottom portion of the management portal you will see the +, which you simply click to add the new Mobile Service.

Choose create and the New Mobile Service dialog is presented; enter the name of your new mobile service, select or create a new SQL Server Database, and finally select the Region for your instance.  There are some other options in the “Configure advanced database settings” but we’ll not do that now for simplicity sake.
*** As a note, if you create a new database; remember the credentials.  You will need this information if you choose to add another database to the server later.
Upon completion of the wizard, the management portal will tell you its creating…, the poof its there. I named mine “testmobileservice”.

if you click on the URL, you’ll be presented with the following page…

These are just services, or a service endpoint. The closest thing I can really relate this to is in SQL 2005 we were given the ability to expose certain objects as web service endpoints, it was a neat feature but not widely used and still available to my knowledge. Sorry I digress, let’s get back to the management portal and create a Todo table.
If you click on the Mobile Service name you see the following screen, and although the initial announcement was for Windows 8 support and the walkthroughs etc. show that, let’s just create a table and I can get to Fiddler and show you how the data looks to and from the REST Service.

Click over the the DATA tab, then the + on the bottom the add the table. Name the table ToDoItem and click the check to create the new table.

Pretty simple right?  Just created a new table in a database by simply naming a table…DBA’s are freaking out around the world right now.
Ok, so go back to the DASHBOARD and find the MANAGE KEYS icon at the bottom, and we are going to add/create a new Application Key for the Mobile Service. 

Now there are still some things under the covers here that I am still finding the answers too, but my first guess is this is some iteration/flavor of oAuth. But, go ahead and copy down the Application Key that is generated for you.  At this point, there is only one key and if you regenerate post deployment then your app will break so be careful with that little regenerate button of power.

Click the check mark and you are ready to start.

Interacting with the Endpoint via REST

Using Fiddler to see your HTTP calls going to and from RESTful endpoint is great, BUT there is also a little tab in there that most developers don’t realize is there.  It’s the Composer tab.  You can either originate a call in there OR drag a previous call from the left side to the composer tab and make changes to it and hit the execute button.  Great feature!

What are my EndPoints?

Interesting how this works…
The endpoints are formatted as https://[your new service address]/tables/[table name]. So in my case, the RESTful endpoint for the TodoItem table is: https://testmobileservice.azure-mobile.net/tables/TodoItem. I have inserted a single record already so we can construct a GET call in Fiddler to see what is returned.
Do this by again, going to the composer tab and inserting the url for the endpoint in the location box and in the Request Headers you will need to add the following:

User-Agent: Fiddler
Host: testmobileservice.azure-mobile.net
Accept: application/json
X-ZUMO-APPLICATION: [YOUR APPLICATION KEY HERE]

The X-ZUMO-APPLICATION header key/value pair is the secret sauce, I am sure that when the official SDK for these services is released for Windows Phone; there will be some better way to put this all together or maybe not, cause let’s be honest REST is EASY!
So Click the Execute button and we get a nice JSON result returned

[{"id":1,"ToDoText":"Text1","ToDoId":1}]

But wait, can we get XML too? No, it does not appear so.  Trying to change the Accept header to “Accept:application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8” to get xml does not work. Also it is important note that if the Accept header is not sent, JSON is also returned. 
It is my assumption that, as you can do in ASP.NET Web API, the services are doing something like

HttpConfig.Formatters.Remove(HttpConfig.Formatters.XmlFormatter);

in order to force JSON, this is a smaller payload and is the more preferred format for REST based services.

Inserting / Updating Data

Again remember that these are simply REST based services, so you can just do the same as above and instead of calling with a GET, do it with a PUT (405 Method Not Allowed) or POST and pass a payload of type ToDoItem.  Here is an example of an insert.
Change the dropdown in the composer tab of Fiddler from a GET to a POST (INSERT) and in the Request Body add the following text:

{  "ToDoText":"Text1" , "ToDoId":2}

Click the execute button and on the left window you should get a Result of 201 and the response sends back the newly created item in JSON.

{"ToDoText":"Text1","ToDoId":2,"id":2}

Methods Allowed – GET, POST, DELETE

Dynamic Tables

So what’s really behind this?  Is it SQL Server, a flavor of NoSQL running inside SQL? Is this table storage with some magic?  Let’s call a POST method and add some new fields and see what happens here.
Here is the new JSON payload:

{ 
    "ToDoText":"Text1" ,
    "ToDoId":3,
    "ToDoWhen": "12/01/2012",
    "ToDoByWho" : "Shayne Boyer"
}

The highlighted rows here we already had in our table before, but I am passing in some new data fields. And it works, very cool…

What does a get return now that we have the new fields in one but not in the other?

I like it! Data Model changes, NoSQL style in Runtime.  You see that we now get the fields in the previous records available to us for an update later and they are automatically set to NULL.  Now one thing to note that there is no ability to remove a field. You would most like have to delete the table from Azure and start clean. 
So there it is, if you can hit REST with any of you coding skills you can use this.  Doesn’t necessarily have to be Windows 8.  It can be Windows Phone, iOS, Android or Raspberry Pi for that matter.  It can even be a web page.  Look forward to what more is to come from this and Azure in the future!
Let me know if you have any questions, please comment. 

Read more →

Getting Started w/ Windows 8, MVVM Light and EventToCommand

Now that Windows 8 and Visual Studio are in RTM I wanted to put together a quick entry for those Windows Phone developers making the transition to Windows 8 development with their MVVM Light skills.

Laurent Bugnion, is the creator of the MVVM Light toolkit and I, as well as many others, have been using this for Windows Phone development for a while now.  I am porting on of my applications to Windows 8 and wanted to take the knowledge of this toolkit to the new platform hoping that there were either some new enhancements and/or not many changes so that I could just go.  Well that was the deal.

MVVM Light Toolkit for Windows 8 RTM

The latest installer for the toolkit, "MVVM Light Toolkit V4 RTM", is available from CodePlex. According to Laurent's blog it is a side by side install with previous versions:

MVVM Light for Windows 8 is a side-by-side install with the standard MVVM Light V3 or V4 beta. Simply download and run the MSI from Codeplex. As usual, the last step of the installation performs a “/setup” of Visual Studio to actualize the project template cache, and unfortunately this last step can last very long. Please be patient and don’t cancel before the end! The installation process is very similar to that described on the MVVM Light installation page (except that there is no NuGet installer for VS11 yet).

The following link states the summary of the ported components from the previous versions, but I'll paraphrase here:

• ObservableObject including all ways to raise PropertyChanged. 
• ViewModelBase including all ways to raise PropertyChanged. 
• Messenger including all message types except DialogMessage (see below). 
• RelayCommand with and without parameter. 
• SimpleIoc which might well be the very first IOC container working on Windows 8. 

Man do I love the SimpleIoc! Makes adding the new views soooo much easier than in the Windows Phone version.

There are a few missing components, one of which is EventToCommand, however thanks to a new friend I have made, Joost van Schaik (see his blog here),  there is a solution to that and it's available as a nuget package with some additional behavior features I encourage you to look into but I'll at least cover the EventToCommand features he offers.

Getting Started

MVVM Light Project Template

After installing the toolkit you will see that there is a new project template available in the Visual Studio 2012 New Project Dialog

Noted as "Windows Metro Style"

Name the project "MvvmLight_Walkthrough" and click Ok.

The project template is simple, but add some new features that were not in previous versions of the toolkit. In the Solution Explorer you'll notice a Design folder with a class called DesignDataService. This is a great feature; the default template putting in a design data class repository.

Second, as in the past version of the toolkit there is the normal ViewModelLocator class, but in this version there is new feature - SimpleIoc, a container class which if you are like me had everything else in a container for DI with the exception of the ViewModels unless you rolled your own.

public class ViewModelLocator

    {

        static ViewModelLocator()

        {

            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);



            if (ViewModelBase.IsInDesignModeStatic)

            {

                SimpleIoc.Default.Register<IDataService, Design.DesignDataService>();

            }

            else

            {

                SimpleIoc.Default.Register<IDataService, DataService>();

            }



            SimpleIoc.Default.Register<MainViewModel>();

        }



        /// <summary>

        /// Gets the Main property.

        /// </summary>

        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",

            "CA1822:MarkMembersAsStatic",

            Justification = "This non-static member is needed for data binding purposes.")]

        public MainViewModel Main

        {

            get

            {

                return ServiceLocator.Current.GetInstance<MainViewModel>();

            }

        }



        /// <summary>

        /// Cleans up all the resources.

        /// </summary>

        public static void Cleanup()

        {

        }

And last, in the Model folder, Laurent has been kind enough to also include an IDataService interface and DataService class to show in the example how to use the real time and design time data models. These are all wired up in the ViewModelLocator as show above.

Now if we simply run the application you should get the following to make sure it's all good to go!

Running in the Simulator

As you may or may not notice, this is not to dis-similar from the previous project template test from the previous version.

MainViewModel

The binding of the ViewModel to the View is the same as it was in the previous model and there are no noticeable changes to the ViewModelTemplate.  On thing to note is that all options for RaisePropertyChanged are included in this release where as in the previous version you would have to get the "Pre-release" version from nuget in order to use them. For example, the built in template puts in the following:

/// <summary>

        /// The <see cref="WelcomeTitle" /> property's name.

        /// </summary>

        public const string WelcomeTitlePropertyName = "WelcomeTitle";



        private string _welcomeTitle = string.Empty;



        /// <summary>

        /// Gets the WelcomeTitle property.

        /// Changes to that property's value raise the PropertyChanged event.

        /// </summary>

        public string WelcomeTitle

        {

            get

            {

                return _welcomeTitle;

            }



            set

            {

                if (_welcomeTitle == value)

                {

                    return;

                }



                _welcomeTitle = value;

                RaisePropertyChanged(WelcomeTitlePropertyName);

            }

        }

Noticeably where RaisePropertyChanged is using a string value, one of the options now available in the release is to remove the  WelcomeTitlePropertyName variable and then change

RaisePropertyChanged(WelcomeTitlePropertyName);

to

RaisePropertyChanged(() => WelcomeTitle);

The other nice benefit here is that the template has also put in the wiring for injecting the IDataService into the constructor for the ViewModel.  Some of these little thing we developers either take for granted that someone has gone through the trouble of putting the plumbing in there or call it the boring work that has to be done before we get the real work done.  You can easily put other dependencies in the constructor here and then just add the mappings in the constructor of the ViewModelLocator by simply registering the types with the SimpleIoc container.

public MainViewModel(IDataService dataService)

        {

            _dataService = dataService;

            _dataService.GetData(

                (item, error) =>

                {

                    if (error != null)

                    {

                        // Report error here

                        return;

                    }



                    WelcomeTitle = item.Title;

                });

        }

Now What?.

A simple example here is to add some content to the MainPage and see how we navigate to a second view.  I won't bore you with the details of adding in the controls to the page but here's what the page should look like when you're done. 

Added a little MvvmLight color for fun

EventToCommand

Now lets just add a prompt to the submit button. But wait, what where's my EventToCommand???  Sure with the button there is a Command property and you can set that to an ICommand in the ViewModel and everything is happy.  But, there are plenty of controls, both baked into WinRT and third party controls that do not have that property. So, for simplicity sake I'm using this control and will get the EventToCommand back in your toolbox, or your Joostbox I should say.

Off to Nuget!

I had this issue where I was looking for the behaviors when porting an app I was working on and could find the dang behaviors in Blend so I went to nuget and did some searching and there wasn't anything that was shaking my fancy. Then I came across Joost van Schaik (see his blog here) and his WinRTBehaviors library and just so happens I hit him in the middle of uploading the nuget package for Win8nl.

Now this is a package of Behaviors that was originally a Windows Phone 7 library and It's now growing in its own direction and now contains some Windows 8 specific stuff (according to nuget). So let's get it installed real quick.

Install the package by typing the following into the Nuget Package Manager Console or searching for Win8nl in the package explorer.

PM> Install-Package Win8nl

It will add the library and the necessary dependencies to the project, which include WinRTBehaviors. For more information on the other behaviors there check out Joost's blog.

Adding EventToCommand 

First, lets add the references to the XAML page:

xmlns:WinRtBehaviors="using:WinRtBehaviors"

xmlns:Win8nl_Behavior="using:Win8nl.Behaviors"

Next, locate the button control and add the following inside the button XAML:

            <Button x:Name="btnSubmit" Content="Submit"    

                    FontFamily="{StaticResource MyFont}" FontSize="{StaticResource MyFontSize}"

                    HorizontalAlignment="Center" Margin="0,20,0,0">



                <WinRtBehaviors:Interaction.Behaviors>



                    <Win8nl_Behavior:EventToCommandBehavior Event="Tapped"       

                                                  Command="AreYouSureCommand"        

                                                  CommandParameter="{Binding MyName}"/>



                </WinRtBehaviors:Interaction.Behaviors>



            </Button>

Now, open the MainViewModel.cs code and we can add the command for the new behavior here when the button is tapped.

As usual the Command property is expecting an ICommand, add the following code to the MainViewModel and return a new instance of RelayCommand to execute whatever behavior you wish.  In this example, I'm just doing a little popup to show whatever the user input into the myName TextBox.

public ICommand AreYouSureCommand

        {

            get

            {

                return new RelayCommand<string>((p) =>

                {



                    var msg = new MessageDialog(string.Format("Hi there {0}", p));

                   

                    msg.ShowAsync();



                });

            }

        }

See the result here:

And that is EventToCommand for MVVMlight for Windows 8!

There are many more behaviors in the WinRTBehaviors library that you should take advantage of, for me the most notable ones being FlipViewPanoramaBehavior and NavigationService being ported to Windows 8.

Read more →