TattooCoder

Cross Mobile Development with Icenium, KendoUI & Azure Mobile Services

2013-03-28T10:57:00.001-04:00

I have recently spent some time with Telerik's new product offering for cross mobile development called Icenium and I have to say it is quite nice. Paired with KendoUI Mobile you can't go wrong with a great set of tools for cross mobile platform development if you are an HTML + CSS + JavaScript developer.

In this series, I'll walk through a simple blood pressure tracking application built with Icenium, Kendo UI Mobile and Azure Mobile Services. Here is the outline for the series:

Part 1: Introduction and project setup

Part 2: Creating the UI

Part 3: Adding Azure Mobile Services

Part 4: Authentication using Azure Mobile Services

Icenium

Icenium is a cloud based IDE, there is also a Windows WPF Click-Once app, that allows you as a developer to leverage your existing HTML, CSS and JavaScript skills to develop hybrid cross mobile platform applications. Assistance of publishing your applications to the Google Play and Apple Store, integrated debugging and development environment, source control integration (including Git) and much more. See http://www.icenium.com for more information.

I will mention also that the underlying bits of Icenium is PhoneGap (Apache-Cordova) which provides and API through JavaScript (cordova.js) to the device functions such as the camera other hardware capabilities. For more information on that piece, Jim Cowart (@ifandelse) recently did a blog entry on their blog - "Demystifying Cordova and PhoneGap".

Getting Started

Head over to Icenium.com and click the "Get Started" button. Choose either the browser (cloud) based IDE or download the Windows app.

Once the application is launched select New Project -> Cross Platform Device Application (Kendo UI Mobile). Name the project "MyBloodPressure" and click Ok.

In doing so, Icenium presents the built in "Hello World" type template. Shows how geolocation, transitions, styling using Kendo UI Mobile etc. If you run the application by either hitting F5 or clicking the "Run" icon atop the IDE you'll also see the awesome tools for viewing the various mobile devices currently supported as well.

After you spend a few minutes playing with the emulators and realizing how cool that all is, we'll rip out some stuff add some sauce to this and get cooking.

Reorganizing the Project for Organization

I'm a very big proponent of being able to look at a project and know what the heck is going without having to hunt down someone or run the code and step through it to find out how it's all composed.

In a C#/XAML world in I use the MVVM pattern with MVVM Light for my projects. I like to see the view folder, viewmodel folder etc. when developing the app. For doing so here I will leverage RequireJS for structuring the organization.

Removing unnecessary files

Delete the hello-world.js from the scripts folder as we will not be using this for the project.

Folder structure

First, lets create a few folders. At the root of the project create an app folder that contains view, viewmodel and model.

For any scripts that are 3rd party libraries, I prefer to put those in the scripts folder and any that are related directly to the application specific functionality I organize them within the app folder appropriately. Given that, I'll move the kendo.mobile.min.js, jquery.min.js and also add require.js to the scripts folder

Next, add a new JavaScript file to the app folder by right clicking and selecting add new file. Name is main.js; this will be the entry point to the application.

Also add a JavaScript file to the app folder named app.js, this will serve as the singelton for exposing the viewmodels and could also be referred to as the view model locator.

First item of business is to tell require.js where to find the modules we either have or will be creating in our application. Add the following to main.js to configure require.js.

require.config({
paths: {
jQuery: "../scripts/jquery.min",
kendo: "../scripts/kendo.mobile.min",
view: "../app/view",
viewmodel: "../app/viewmodel",
app: "../app"
},
shim: {
jQuery: {
exports: "jQuery"
},
kendo: {
deps: ["jQuery"],
exports: "kendo"
}
}
});

What this is doing, if you are not familiar, is telling require.js that when a module is defined like

define(['viewmodel/bp'], function(bp) { ... } );

it knows to go look for bp.js inside of the "[root]/app/viewmodel" folder and not a relative path etc. In the shim portion of the code we are stating that kendo has a dependency on jQuery and should wait for that library to load first. For more information on requirejs and the config method see http://requirejs.org/docs/api.html#config .

Finally in the main.js file add the following to create the app module, put it in scope and init the application.

var app;
require(["app/app"], function (application) {
console.log('initializing');
app = application;
app.init();
});

Last order of business is to add the code to app.js to tell kendo to initialize the mobile application. Here is the full app.js code for now.

define(["jQuery", "kendo"], function ($, kendo) {
var _kendoApplication;
return {
init: function () {
console.log('app init');
_kendoApplication = new kendo.mobile.Application(document.body,
{ transition: "slide", layout: "mobile-tabstrip" });
}
}
});

The init function is called when the application first fires up setting the transitons of the app the 'slide' and telling kendo what the layout root of the app is; in this case 'mobile-tabstrip'.

Wiring Up Index.html

Now that the scripts, view, viewmodel, entry points etc. are all setup; open index.html.

In the <head> tag remove everything except the references to the .css and cordova.js files and the we need to add the script reference to main and require.js for our entry point. After that all scripts will be loaded using AMD and require.js .

<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script data-main="app/main" src="scripts/require.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>

Also remove the script tag at the bottom of the file that refers to the kendo.mobile.application as we have now moved that to the app.js init function.

Finally, remove all <div> tag sections with a data-role of view other that the first one. These will be separated into individual html files and stored in the views folder in Part 2 of the series. The final html document should appear as:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script data-main="app/main" src="scripts/require.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div data-role="view" id="tabstrip-home" data-title="Hello World!">
<h1>Welcome!</h1>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>
</div>

<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-home" data-icon="home">Home</a>
<a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
<a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
</div>
</div>
</div>

</body>
</html>

Conclusion

If you run the application you can see that the application still operates as it did in the very beginning, with the exception of the additional views not appearing, but the advantage here is that the overall structure allows for manageability moving forward as complexity is added to the project through data services and additional views.

If there is something that you would like to see in the series or have a question please add a comment. I look forward to the next entry.

Code available on GitHub - https://github.com/tattoocoder/iceniumbp.git

Custom Routing with IRouteConstraint for ASP.NET Web API

2013-03-25T15:37:00.000-04:00

I will admit that Regex and I do not speak anymore. In fact, even when we did it was never a really nice conversation and sometimes ended in me cursing and/or leaving the room.

If you have had this same experience when creating custom routes in ASP.NET MVC then you know what I'm talking about.

IRouteConstraint
IRouteConstraint has been around for some time in MVC, but it is also available in Web API too because of course it is based on the same stack for routing.

Undoubtedly, the most difficult part of routes is debugging or getting the Regex right. I recently re-lived this experience when having to create a custom API route for a project something along the lines of

/api/{controller}/{model}/{road}/{id}

where {model} must exist in a list of valid string values and {road} is a pattern of XX9999 and then obviously the {id} must be an integer for the specific record in the list.

So, initially you start putting the Regex together for the id, "^\d+$", and then the road might be something like "^[a-zA-Z]{2}\d{4}$". But how should I handle the in list for the {model} param?

Sure we could put together the Regex for that, but debugging all of this is a pain even in the short term. Also if the constraint itself is something of an edge case where the value must be a filename that exists, or a guid in memory etc; IRouteConstraint is the answer.

IRouteConstraint requires you to implement one method, Match, which returns a boolean. In the method below we are looking for one of the values being passed in the values[] parameter to a list used in the constructor.

public class FromValuesListConstraint : IRouteConstraint
{
public FromValuesListConstraint(params string[] values)
{
this._values = values;
}
private readonly string[] _values;
public bool Match(HttpContextBase httpContext,
Route route,
string parameterName,
RouteValueDictionary values,
RouteDirection routeDirection)
{
// Get the value called "parameterName" from the
// RouteValueDictionary called "value"
string value = values[parameterName].ToString();
// Return true is the list of allowed values contains
// this value.
return _values.Contains(value, StringComparer.CurrentCultureIgnoreCase);
}
}

In order to use this from the WebApiConfig.cs class, create your route like the following.

config.Routes.MapHttpRoute(
name: "CustomRouteNoDayOrAction",
routeTemplate: "dcl/{controller}/{model}/{road}/{id}",
defaults: null,
constraints: new
{
ship = new FromValuesListConstraint("ford", "chevy", "dodge", "toyota"),
voyage = @"^[a-zA-Z]{2}\d{4}$",
id = @"^\d+$"
}
);

When you run and test your routes, you can now put a break point on the FromValuesListConstraint Match method and debug the routing.

South Florida Code Camp

2013-02-06T14:30:00.002-05:00

I will be giving two talks this Saturday at South Florida Code Camp, being held at Nova University in Ft. Lauderdale, Fl. For directions and more information visithttp://www.fladotnet.com/codecamp/. Schedule for other sessions here.

My Sessions

Develop Windows 8 & Windows Phone Apps and Win Cash!

2013-02-01T10:55:00.001-05:00

From February 1 through June 2013, publish a new Windows 8 or Windows Phone app and enter my sweepstakes page to win up to $1000 in cash prizes. WHAT?!?!

Pretty cool right. Get extra $$ for what you are already doing. Publish you app in the store the go to http://spboyer.me/appsforcash and submit your app.

3 Winners each month!
$1000
$500
$250

Follow me on twitter @spboyer and let me know when you submit it and I'll personally look at the app and give it a review and let all my friends to give it a look as well for extra exposure.

See official rules here

BONUS POINTS AND AWARDS

FREE NOKIA PHONE

If this is your FIRST Windows Phone App you may qualify for a Free Nokia Lumia Phone.

TELERIK WINDOWS 8 Controls

I will pick 1 Winner each month from the Windows 8 Submissions to receive a free licensed copy of Telerik's Windows 8 Controls

Nothing great was ever achieved without enthusiasm...

2013-01-29T10:42:00.002-05:00

Over the past month I have had the opportunity to give some thought to what I wanted to accomplish this year in my life, career, and health. And during those times of thought I have often gone back to a speech I listened or re-listened to by the late Jimmy Valvano.

Jimmy V was a great college basketball coach and was unfortunately diagnosed and later passed away from bone cancer. But shortly before his death he gave a riveting speech at the 1993 ESPN ESPY Awards. There are some great things he said, but one statement lost in many outtakes that stuck with me was

"Nothing great was ever achieved without enthusiasm" ...Ralph Waldo Emerson

I think about that statement and how it relates to life, but also how I approach code, software development and teaching. Enthusiasm is the name of the game. I'm passionate in how I present it, teach it, talk about it and code it.

The question I have always wondered is how can the few of us who think this way make that feeling contagious? Spread that disease?

I know how I feel after taking a good 5 mile run or so and beating a goal or my last time thinking, "hell yes!" and that's the same feeling I get when a project is complete or I inspire a developer to do something different or try a new path and then later they tell me "thanks, just what I needed".

Recently, after a .NET User Group meeting I sat and had a beer with a few friends from the group and we had this very discussion and the conversation was really good. I heard stuff like...

"It's not their project...."

"...making the other guy money, why be passionate"

"...some companies are better at making their devs feel ownership..."

What are your thoughts? What can make you more enthusiastic or pump up that 9-5'er you know at your office?

Start the conversation....

Portable MVVM Light - Move Your View Models : Part 2

2013-01-28T15:25:00.000-05:00

In the first part I covered how to get the initial project setup and share the ViewModels and ViewModelLocator between a Windows Phone 8 project and a Windows Store Application. In this post, I'll add a DataService and a Model class that will be used to get the most recent posts from the Windows Phone Blog and display the results.

Adding DataService and Async to Portable Class Library

The purpose of the DataService in the context of this project is to retrieve the RSS feed from the Windows Phone Blog (http://blogs.windows.com/windows_phone/b/wpdev/rss.aspx) using the async methods available in the 4.5 Framework, return a collection of our Headline class object for the UI to handle and display.

Headline Class Model

The Headline class is the object that will be loaded and a collection of these will be built and returned from the data service method. Create a new folder in the Mvvm.PCL project called "Model" and add a new file called Headline.cs.

public class Headline
{
public string Title { get; set; }
public string Description { get; set; }
public string Url { get; set; }
public DateTime Published { get; set; }
}

IDataService

In good practice, create an interface for the DataService class. This would allow for taking advantage of dependency injection if you chose to do so. Add a new interface file to the model folder called IDataService.cs. Here is the interface:

namespace Mvvm.PCL.Model
{
public interface IDataService
{
void GetHeadlines(Action<List<Headline>, Exception> callback);
}
}

The interface defines a single method that accepts a delegate with a collections or List<T> of Headline and an Exception parameter.

DataService

Next, in the same folder, add the DataService.cs file and implement the interface.

public class DataService : IDataService
{
public void GetHeadlines(Action<List<Headline>, Exception> callback)
{
throw new NotImplementedException();
}
}

HttpWebRequest

Most simple requests for data are done with the WebClient class, however this class is not available in Portable Class libraries and is really only an abstraction of what must be used and that is the HttpWebRequest.

Add a new method to the class called MakeAsyncRequest accepting a url (string) as a parameter and set the method to return a Task<string>. Within the method I'll use the Task.Factory.FromAsync method to call the url asynchronously returning the Task<WebRequest> then use a continuation to read the WebResponse.

private static Task<string> MakeAsyncRequest(string url)
{
HttpWebRequest request = WebRequest.CreateHttp(url);
request.Method = "GET";

Task<WebResponse> task = Task.Factory.FromAsync(
request.BeginGetResponse,
(asyncResult) => request.EndGetResponse(asyncResult),
(object)null);

return task.ContinueWith(t => ReadStreamFromResponse(t.Result));
}

private static string ReadStreamFromResponse(WebResponse response)
{
using (Stream responseStream = response.GetResponseStream())
using (StreamReader sr = new StreamReader(responseStream))
{
string strContent = sr.ReadToEnd();
return strContent;
}
}

The GetHeadlines method can now be completed. First add the static url.

private readonly string uri = "http://blogs.windows.com/windows_phone/b/wpdev/rss.aspx";

Then declare a variable to hold the results of the MakeAsyncRequest method and set the call with the await keyword so the UI thread is not blocked.

var t = await MakeAsyncRequest(uri);

You will also have to mark the method as async or the compiler will give you an error telling you to do so.

public async void GetHeadlines(Action<List<Headline>, Exception> callback)
{
...
}

The results returned are a string type and there are a couple of options to get it into a nice format to work with. Your first option might be to use the Silverlight SyndicationFeed class which is in the System.ServiceModel.Syndication namespace. However, it is not inherently available in the portable classes and you'll need to go searching for it on your dev machine. Hint (C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\System.ServiceModel.Syndication.dll).

I'm choosing to use LINQ and doing Linq to XML here to get what I need out of the results string and inflate my classes and return it.

Here is the completed method.

public async void GetHeadlines(Action<List<Headline>, Exception> callback)
{
// locally scoped exception var
Exception err = null;
List<Headline> results = null;
try
{
var t = await MakeAsyncRequest(uri);
StringReader stringReader = new StringReader(t);
using (var xmlReader = System.Xml.XmlReader.Create(stringReader))
{
var doc = System.Xml.Linq.XDocument.Load(xmlReader);
results = (from e in doc.Element("rss").Element("channel").Elements("item")
select
new Headline()
{
Title = e.Element("title").Value,
Description = e.Element("description").Value,
Published = Convert.ToDateTime(e.Element("pubDate").Value),
Url = e.Element("link").Value
}).ToList();
}
}
catch (Exception ex)
{
// should do some other
// logging here. for now pass off
// exception to callback on UI
err = ex;
}
callback(results, err);
}

That covers all of the code needed in the Portable Class(es) for getting the data, just need to edit the MainViewModel class constructor to create the DataService class, implement the new method and create a Headlines property.

MainViewModel
Add a new property for the headlines to be bound to by the UI.

private List<Model.Headline> _headlines;
public List<Model.Headline> Headlines
{
get { return _headlines; }
set
{
_headlines = value;
RaisePropertyChanged(() => Headlines);
}
}

In the constructor, create an instance of the DataService and execute the method. I did mention earlier that there is an IDataService for DI, but for this example an concrete DataService class is created.

public MainViewModel()
{
/// create a new dataservice class
var service = new DataService();

/// call getHeadlines passing headlines and exception delegate vars
service.GetHeadlines((headlines, err) => {
if (err != null)
{
/// if there is an error should create a property and bind to it for better practices
System.Diagnostics.Debug.WriteLine(err.ToString());
}
else
{
/// set the property
this.Headlines = headlines;
}
});
}

Adding the UI Elements

Windows Phone

Open the MainPage.xaml page and wrap the previous TextBlock from part 1 in a StackPanel then add a ListBox. Set the ItemsSource property of the ListBox to {Binding Headlines, Mode=TwoWay}, then add a simple template with a TextBlock to show the title of the story.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBlock Text="{Binding Hello, Mode=TwoWay}" Foreground="White" FontSize="18" />
<ListBox ItemsSource="{Binding Headlines, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem>
<TextBlock Text="{Binding Title}" />
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>

</ListBox>
</StackPanel>
</Grid>

Windows Store

The store app is just as easy. In MainPage.xaml, add a GridView controls, set the ItemsSource to {Binding Headlines, Mode=TwoWay}, but in this case I'll define an ItemTemplate outside of the control called PCLItemTemplate and display the Title and the Description.

<GridView ItemsSource="{Binding Headlines, Mode=TwoWay}" Grid.Row="1" ItemTemplate="{StaticResource PCLItemTemplate}" />

<Page.Resources>
<DataTemplate x:Key="PCLItemTemplate">
<StackPanel Orientation="Vertical" Width="500" Height="250">
<TextBlock Foreground="White" Text="{Binding Title}" FontSize="18" HorizontalAlignment="Center" Margin="20,10,20,0" TextTrimming="WordEllipsis"/>
<TextBlock Foreground="White" Text="{Binding Description}" Style="{StaticResource ItemTextStyle}" HorizontalAlignment="Center" Margin="20,10" TextTrimming="WordEllipsis"/>
</StackPanel>
</DataTemplate>
</Page.Resources>

Summary

Running either apps presents the data in a different context and there is complete control as to the presentation and design choices based on the platform. If you are looking to create Windows Store apps and/or Windows Phone applications Portable Class Libraries is a great way to leverage code within your multiple platform target solution. MvvmLight is a choice of mine and many others and fits very well too thanks to others in the community.

Full source code available here: http://sdrv.ms/WpBGqS

Portable MVVM Light - Move Your View Models

2013-01-24T17:14:00.000-05:00

Portable Class Libraries

Portable Class Libraries were added as a project type in the interest of creating an assembly that you could use across the .NET Framework, Silverlight, Windows Phone 7, or Xbox 360 platforms without modifications. Well, not really that easy. There is some work to do and as you get into the development of PCLs you'll find out that there is really a sliver of what you'd hope is supported. (http://msdn.microsoft.com/en-us/library/vstudio/gg597391(v=vs.110).aspx)

MVVM Light

Where I have found it for me is in Windows Store and Windows Phone (7.5 and 8) with MVVM Light. I have been using this MVVM framework exclusively for a few years now on Silverlight, WPF, Windows Phone and now Windows Store platforms and each release gets better.

Most recently, another MVVM Light fan, Oren Novotny (@onovotny) ported the MVVM Light project and made it possible to use it in a Portable Class Library. This is great, code reuse is the ultimate time saver. And when developing Windows Store Apps or a Windows Phone App; making a complimentary piece for the other just makes sense when the UI is really the only difference and even that is almost the same.

Example Project

Open Visual Studio 2012 and create a new project. I like to start with the "Other Project Types" and select the Blank Visual Studio Solution; name it MvvmPortable and click save. Next add a Windows Store App (C# Blank Template) and call it Mvvm.Store. Add a new Windows Phone 8 project to the solution named Mvvm.Phone.

Now add a new project to the solution and select the "Portable Class Library" project type.

Click OK and then you'll be presented with a dialog to choose the platforms to be supported. Select all except XBox and for Windows Phone choose 7.5 or higher. (An error will occur when adding the nuget packages later if the 'Windows Phone 7.1 or higher' option is chosen).

Click OK and now the MVVM Light packages can start to be added via nuget.

Nuget

If you are not using nuget, please pause here and go to nuget.org and/or install via Tools->Extensions And Updates.

Mvvm.PCL Project
Right click the project and select the Manage Nuget Packages and in the dialog search for "Portable.MvvmLightLibs" and be sure that the Include Pre-release option is on, or you can use the package manager console and use the command install package portable.mvvmlightlibs -prerelease.

Repeat this process for the Windows Phone and Windows Store projects.

Next we need to add the MVVM Light specific platform assemblies to each of the respective platforms and do some setup and cleanup to make this all work.

Right Click the Windows Store project, select Manage Nuget Packages and search for MVVM Light and click the install button. In doing so, a few folders and files will be added to the project and you may see some errors which we'll clean up and repeat the process for the Phone project.

Moving ViewModelLocator,ViewModels and Wiring it Up

Now on to the fun!

In the Mvvm.PCL project create a folder call ViewModel in the root of the project. Then expand the ViewModel folder in the Mvvm.Store project and select the ViewModelLocator.cs and MainViewModel.cs file and cut and paste those to the ViewModel folder in the Mvvm.PCL project.

Open each of those and change the namespace to Mvvm.PCL.ViewModel from Mvvm.Store.ViewModel.

Since the ViewModelLocator has moved, the store app needs to know where to find it and the ViewModels, so open the App.xaml file in the Mvvm.Store project and change:

xmlns:vm="using:Mvvm.Store.ViewModel"

xmlns:vm="using:Mvvm.PCL.ViewModel"

and we need to modify the Resources section because the nuget installer for MvvmLight puts in some extra entries for the ViewModelLocator

<ResourceDictionary>
<vm:ViewModelLocator p7:Key="Locator" p8:IsDataSource="True"
xmlns:p8="http://schemas.microsoft.com/expression/blend/2008"
xmlns:p7="http://schemas.microsoft.com/winfx/2006/xaml" />
<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="Common/StandardStyles.xaml" />
</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

Finally for the Store app we'll go to the MainPage.xaml and set the DataContext and add a TextBlock to be filled from the MainViewModel.cs in the portable class library that we'll add following that.

In the MainView.xaml page add the DataContext property at the top of the page after the other declarations.

...
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding Main, Source={StaticResource Locator}}"
>

Next in the grid add the TextBlock as follows

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Foreground="White" FontSize="42" Text="{Binding Hello, Mode=TwoWay}" />
</Grid>

If you compile the store project at this point you will get some errors concerning MvvmLight confilcts. These occur because there are class duplicates in the portable and in the specific versions of the assemblies. In order to alleviate the errors, expand the references folder in the project and select the *.Win8 assemblies and delete them.

Adding Hello to MainViewModel
Now that the wiring up of the relocated ViewModelLocator and MainViewModel are completed we can add the simple "Hello" property in the MainViewModel so it can be bound to in the store project.

Open MainViewModel.cs and add the property as follows:

private string _hello = "Hello";
public string Hello
{
get
{
return _hello;
}
set
{
_hello = value;
RaisePropertyChanged(() => Hello);
}
}

Set the store project as the default project to run and either run in the simulator or on your local machine and you should see "Hello" appear in the top left of the application.

Wiring up the Phone Project

The process here is pretty much the same as was done for the store project. Instead of moving the ViewModel folder in the phone project; it can be deleted.

Open the App.xaml and make the adjustments to let the application know where the ViewModelLocator and ViewModels are located. Note that making these references in the phone project are different that in the store project, albeit subtle can trip you up.

Change

...xmlns:vm="clr-namespace:Mvvm.Phone.ViewModel" mc:Ignorable="d">

...xmlns:vm="clr-namespace:Mvvm.PCL.ViewModel;assembly=Mvvm.PCL">

then make the modifications to the Application.Resources portion as follows:

<Application.Resources>
<local:LocalizedStrings xmlns:local="clr-namespace:Mvvm.Phone" x:Key="LocalizedStrings" />
<vm:ViewModelLocator p6:Key="Locator"
p7:IsDataSource="True" xmlns:p7="http://schemas.microsoft.com/expression/blend/2008"
xmlns:p6="http://schemas.microsoft.com/winfx/2006/xaml" />
</Application.Resources>

Next, open the MainPage.xaml and add the DataContext declaration and the TextBlock as we did for the store application.

...
shell:SystemTray.IsVisible="True"
DataContext="{Binding Main, Source={StaticResource Locator}}">

adding the TextBlock

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Text="{Binding Hello, Mode=TwoWay}" Foreground="White" FontSize="18" />
</Grid>

And finally as mentioned in the store project, you will get the assembly conflicts so be sure to remove the .*WP8 references in the phone project prior to building the solution here.

Run the application and you'll see the Hello presented in the same location on the phone app.

Wrapping Up

All of the other capabilities that you may or may not be familiar with in the MVVM Light framework is still available to you within the specific projects or of you'd like extract those as well too. I find that the navigation and switching of the views is still best served within the specific platforms.

I have in my projects moved services negotiation for getting data into the PCL assembly using the Microsfoft.BCL.Async library via nuget too and that is also great but a little different depending on your experience with the platform and WebClient versus HttpClient requests.

Enjoy and feel free to ask questions.

Part 2 - Adding a Data Service

Picking the Right Tools for Your Project

2013-01-15T10:49:00.000-05:00

Over the weekend I was able to release the first of many Windows 8 applications (Download and Rate here) into the store that I have been working on. This first one is just a RSS type application for DZone.com, but it just the first version and the next installment will add more content. If you have ever planned a good, cross platform application before you may or may not understand that picking the right tools for job are important, and yes even what you're using for the front end language matters sometimes as it did in my case here.

Here is a run down of the application architecture components:

Node.js REST API on Azure

Express : MVC type framework for Node.js for routing, rendering, HTTP Listener
Memory-Cache : memory caching on server
Cheerio : JQuery on the server, lightweight simple HTML parsing
Async : parallel library for Node.js

Windows 8

HTML5/WinJS

TypeScript was also used in the Node.js project as well to build out some of the model objects.

I wanted my app to present more. More than just the headline and a link off to another web browser as well as offer the ability to re-use what I had done for Windows Phone or other mobile devices.

API Architecture Choices - Reuse is Key

The RSS feeds don't change that much, so I want to create a way to have an API I could reuse for other platforms, but also leverage some caching for high availability, scale out if necessary and also make the development as fast as possible. I chose to go with Node.js on Azure to solve this challenge.

Node.js (http://en.wikipedia.org/wiki/Node.js) - Node.js is a packaged compilation of Google's V8 JavaScript engine, the libUV platform abstraction layer, and a core library, which is itself primarily written in JavaScript. Node.js was created by Ryan Dahl starting in 2009, and its growth is sponsored by Joyent, his employer.

Node also has Node Package Manager (npm) which I would or most would say is the equivelant to .NET's nuget package library repository for getting community contributed libraries for accomplishing common tasks such as caching, async and so forth.

I hadn't used node before but I have plenty of JavaScript experience and it was on my list of "want to learn" this year. I was recently asked why node instead of Web API, other just to say "I used node.js"? Good question, and a legit one too. So here is the answer;

Web API is great, I love it and give a talk on "Why you should be using it" at code camps quite often. However, I found that using C# to parse HTML to not be as flexible and lacked performance in comparison to using Cheerio (JQuery on node.js) when outside of the standard RSS or ATOM formatted feeds. JavaScript is really great at parsing strings. Secondly, the ability for me to make routes in Express was really easy in comparison to ASP.NET. For example, in ASP.NET if I wanted to setup a route to handle a controller / action / id route; there are changes needed in the routing configuration as well as potential changes in the controller too.

Routing Config

routes.MapHttpRoute(
name: "myNewRouteAction",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);

Controller Code

public class ProductsController : ApiController
{
[HttpGet]
public string Details(int id) { ... }
}

Or

public class ProductsController : ApiController
{
public string GetDetails(int id) { ... }
}

This sets up the API for the action name to be in the url like http://localhost/api/products/details/1. By contrast in node the same is accomplished with Express.js by doing the following

app.get('/api/products/details/:id', function(request, response) { ... });

Next, in node I can take advantage of running multiple processes at once for checking for updates while also hosting a REST API for the application. In another application there are two worker roles in Azure, basically Windows Services, doing this type of work and a single Web role for my Web API. This allows for me to consolidate the processes into one right now and if the need arises I can break the back end architecture into multiple processes. Flexibility and some simplicity I like here. Here is an example where 3 processes are running at once doing tasks at different intervals all non-blocking.

app.js

var job = function() {
console.log("working at 1 second.");
};
var job2 = function() {
console.log("working at 3 seconds.");
};
setInterval(job, 1000);
setInterval(job2, 3000);

Ouput in Console

Finally, I chose JavaScript/HTML for the UI portions which I'll cover more reasons why later and it's nice to code JavaScript everywhere.

C#/XAML or HTML5/JavaScript/CSS3 ?

Now I will mention that C# is my first language of choice when diving into any new project and in fact that is what I initially started with, but I found that when getting the contents of the RSS feeds, which were non-standard formatted and in order to consume RSS nicely in C# or VB.NET you have a dependency on the SyndicationFeed assembly which is good and bad. Good if the feed is formatted in the standard RSS or ATOM formats, but bad if the provider has extended it.

Once more the article content was also available in nice print formatted HTML, however when using C# in Windows 8 you must embed a browser control and the flow is not fluid in landscape mode. At least, not the way it should intuitively should appear. However in JavaScript you can take the HTML from the print view and set the innerHTML equal to the result and sprinkle some CSS in there and you are set. No fuss. So HTML5 is the choice here.

In making the decision there are some features that I really enjoy about the language and the ability to create Windows applications versus XAML.

There is a clear separation of concerns between what is Presentation, Styling, and Logic that I think I had taken for granted in my web development projects. When using C# and XAML I really structure my project with MVVM pattern using MVVM Light, use some naming convention on my files and folder structures to ensure that just by looking at the project I know what does what where.

In a JavaScript Windows 8 project it's clear, just in the tooling and file types. Now make no mistake you can embed all of the CSS and JavaScript right in the HTML and spaghetti it all up just like anything. However, the templates and the maturity of the tool set and language almost keeps you from doing so.

The HTML5 support in Blend is also great, especially when seeing what CSS styles are applied to what HTML elements, and using the tooling to create a new style from an existing style. I encourage you to view the video on blendinsider.com .

Some other items I'll quickly mention that I like about JavaScript projects in Windows 8

multiple background layers and overall styling much easier than XAML
Supporting snapping, full, landscape etc through media queries I found much more intuitive

JQuery Support

Who doesn't like JQuery when it comes to getting to the DOM?

Web Essentials! not that this has anything specific to do with WIndows 8, but if you are doing any HTML, CSS, and/or JavaScript development you MUST get this. I have been using this for a while and it continues to get better and now has its own dedicated site as http://vswebessentials.com/

I will still use C# and XAML as it is my first set of tools, but don't forget the others in the box. There have been some fantastic tools thrown at the developers and some are very quick to poo poo the idea of a new coding language or application of an existing language in a different way. Pick what best works towards the success of the project.

Here are a few resources for HTML5 and JavaScript Development for Windows 8

https://www.meetmyapp.in/meetmyapp/windows_8_build.aspx - Design Templates!!! Ready to go in XAML or HTML/JS
http://31daysofwindows8.com/ - By Clark Sell @csell5 on twitter.
http://dev.windows.com
http://generationapp.com

Developer Days at Microsoft Store

2012-12-03T09:53:00.000-05:00

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.

Paparazzi at the Microsoft Store! I'm Famous!

2012-11-16T19:13:00.000-05:00

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.

Tampa Code Camp

2012-10-11T12:03:00.000-04:00

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

Building Windows 8 Apps w/ MVVM Light

2:20 PM in Room 1301

TypeScript for Windows 8 Store Apps

2012-10-09T14:48:00.001-04:00

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.

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

Richmond Code Camp

2012-10-01T13:13:00.000-04:00

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

RadCustomHubTile from Telerik for Windows 8 UI

2012-09-25T23:18:00.000-04:00

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 "http://3.bp.blogspot.com/-yBHsXXtsWWo/UCkc916wnfI/AAAAAAAAAN0/FcKOE2P-gGQ/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.

User Groups - What do you want from them?

2012-09-24T14:42:00.000-04:00

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

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

2012-09-20T15:54:00.000-04:00

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.

SimpleIoc and the Messenger Service in MVVM Light

2012-09-16T12:16:00.000-04:00

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

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

2012-09-10T11:20:00.000-04:00

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.

Southwest Florida Code Camp

2012-09-06T16:53:00.000-04:00

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!

Looking at Windows Azure Mobile Services with Fiddler

2012-08-31T11:29:00.001-04:00

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.

Getting Started w/ Windows 8, MVVM Light and EventToCommand

2012-08-26T11:58:00.001-04:00

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);

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.

I'm a nerd, but I might scare your kids

2012-08-23T10:07:00.001-04:00

Revenge of the Nerds

Remember these guys? This is what the stereotypical view was/is of what a "nerd" looks like. Developers today are a much different class of people for sure. I have met some pretty cool people over the past year that certainly do not fit the bill. Fishing enthusiast, cigar afficianados, gear heads and others who love to grab a guitar and rock out.

Of course, I do run into what I think nowadays some would say, web developers, fit into the category of "gamers". The plain has certainly changed from what your parents might consider a nerd.

A lot of developers have the same story; grew up messing around with a Commodore 64 or something of the sort, tinkered with this or that technology, studied Computer Science in college and then moved into the professional world. And if you read my About Me page, my story is not that different.

It's interesting to talk to the other developers in the community and see what they do in their "off" time. Me, enjoy anytime with my wife and a glass of wine, hop on the Harley go for a ride, spend time with the kiddies at the pool, build some legos, visit the guys at the tattoo shop and get some ink, and most recently took a bunch of teenagers to the Flo-rida concert at the Microsoft Store grand opening in Orlando. Not what some would expect from a guy who spends a good portion of his life buried in code.

I'm not what you think of when it comes to a developer. At my first meeting for the Orlando Windows Phone User Group I was taking a picture with the guys who authored "Sam's Teach Yourself Windows Phone Application Development in 24 hours" and Joe Healy said "...make sure the tats show!"

When people see me, they probably would never guess what I do for a living. That I love gadgets, read technical blogs, spend hours learning new technology, or stay up at night wondering what's the next Windows Phone or Windows 8 app I'm gonna try.

The best part for me...my kids think what I do is cool! My wife supports me in everything I do and I couldn't ask for more. I have a good thing, I love what I do and they love me.

So yes I'm a Nerd...but I might scare your kids.

What do you do in your off time? I'm curious...

Upgrading from Windows 7 to Windows 8 RTM - Bootcamp

2012-08-16T11:49:00.000-04:00

So I spent last night leaping into the upgrade process on my MacBook Pro from Windows 7 to Windows 8 Pro. Now, some may call it leaping off, ridicule me for being a .NET guy and having a Mac, but that's a whole other conversation. I wanted to just point out a few tidbits about the experience.

Things to have on hand

BootCamp CD

find it, burn it whatever

USB Mouse

if you are using a wireless, Bluetooth mouse your drivers will or may get jacked up when you make the upgrade cause mine did.

Time!

Overall upgrade , depending on what you have installed etc., could take a couple hours.

Upgrading in place

This was a pretty standard process. I downloaded the RTM from MSDN and burned it to DVD, made sure I wrote down the key and slipped in the DVD and hit the go button.

Standard wizard upgrade, nothing to dis-similar from the upgrade process from Vista to Windows 7. Screens are quite nice.

They great thing here was, I only had one or two reboots. BUT! that's when the fun starts.

Boot Camp Stuff

Once you go through the who are you, what wireless / network screens and you get through the logon screen. Please DO NOT reboot!

I did that and lost my keyboard, ugh the pain! If that happens here is the work around.

In the lower left hand part of the screen there is the usability icon, click on this and enable the "On Screen Keyboard". Please be patient as again, depending on your configuration the responsiveness may be latent. Once that appears, either use that or in my case the keyboard was enabled at least for me to login.

Next steps.

Uninstall Boot Camp from Windows.

Do not repair. This can install additional copies of the Apple drivers and further send you into frustration. And in the end you will uninstall anyway.

Insert your Boot Camp CD and run the installer.

Make sure that you select the default boot OS, if that's your thing. Also check the Apple Updates if you are using an original Boot Camp CD. I might suggest creating a new one from the iOS side of the PC since it will download the most recent version.

And that's it. I would mention that these are my suggestions based on my experience and I am fully operational on a MacBook Pro 13" 8GB Ram running Windows 8 Pro and loving it.

Biggest issue for me was getting the trackpad to work, which lead me to uninstall Boot Camp and reinstall. This was a result of having the multiple copies of the drivers as I mentioned above.

Develop Your First Windows Phone App - Get a Free Nokia Phone

2012-08-13T13:06:00.000-04:00

This past Friday I attended a Windows Phone Developer event put on by Rich Dunbar, who is a Nokia Developer Ambassador, here in Orlando.

I have exchanged some tweets and emails with Rich in the past and watched some feedback from some of the previous events he had put on in the past; and I'll tell you the reviews had been good.

Rich is running a great program. Develop your first application for Windows Phone and get a free App Hub token ($99 value) and once your application is available in the marketplace, he'll send you a Windows Phone 7 device. Not too bad right? Well, I'll tell you it's a legit deal.

The event was a starter for sure, but he has some good advice on marketing your application. For instance, the Nokia Developer site has a deep link there for generating a cool little banner ad like this one I did for Baseball Pro 12.

So here is the program.

1. Go to http://richarddunbar.blogspot.com - See the steps and rules.
2. Follow @RichDunbar and @spboyer (that's me)
3. Get the tools - see Rich's blog
4. Develop! Ask Questions!
5. Follow #wpdev on twitter
6. Reap the benefits

Rich is a great guy, he'll respond to you faster on Twitter than in email, so do that. Feel free to ask me questions as well.

DarkSky Developer Contest - Dates & Prize Pool

2012-08-02T17:53:00.000-04:00

So here we are, the good stuff. When do we have to be done and what the heck do we get if we win?

Dates

Start NOW, if you have not signed up please do so here. This is important, I need your valid email address so that I can get you the API developer key for Dark Sky.

Next, apps must be submitted in completion no later than 10/1/2012. This give us time to review them, get them loaded on or devices etc. If you publish them to the Marketplace please send me the links so that we can get them downloaded. If they are paid applications, please send us the .xap or provide a download link so we may side load the applications.

So, prizes. One grand prize for the best Windows 7 Phone and best Windows 8 Metro application. Each winning team or person will receive the following:

NetAdvantage Ultimate from Infragistics

Dark Sky Umbrella
Click for larger image

DarkSky Custom-printed senz˚ umbrellas — capable of withstanding 80 km/h winds
$49.99 XBOX Live Point Card

Also each completed application submitted will also receive a free copy of NetAdvantage for Windows Phone from Infragistics.

Other submissions will be awarded various prizes so get to coding! We are excited to see what's in store.

Any questions please contact @spboyer

TattooCoder

Cross Mobile Development with Icenium, KendoUI & Azure Mobile Services

Icenium

Getting Started

Reorganizing the Project for Organization

Removing unnecessary files

Folder structure

Wiring Up Index.html

Conclusion

Custom Routing with IRouteConstraint for ASP.NET Web API

South Florida Code Camp

My Sessions

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

TypeScript

Develop Windows 8 & Windows Phone Apps and Win Cash!

BONUS POINTS AND AWARDS

FREE NOKIA PHONE

TELERIK WINDOWS 8 Controls

Nothing great was ever achieved without enthusiasm...

Portable MVVM Light - Move Your View Models : Part 2

Adding DataService and Async to Portable Class Library

Headline Class Model

IDataService

DataService

HttpWebRequest

Adding the UI Elements

Windows Phone

Windows Store

Summary

Portable MVVM Light - Move Your View Models

Portable Class Libraries

MVVM Light

Example Project

Nuget

Moving ViewModelLocator,ViewModels and Wiring it Up

Wiring up the Phone Project

Wrapping Up

Picking the Right Tools for Your Project

API Architecture Choices - Reuse is Key

Routing Config

Controller Code

app.js

Ouput in Console

C#/XAML or HTML5/JavaScript/CSS3 ?

Developer Days at Microsoft Store

Developer Workshops

Future Events

Paparazzi at the Microsoft Store! I'm Famous!

Tampa Code Camp

My Sessions

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

Building Windows 8 Apps w/ MVVM Light

Telerik Controls for Windows 8.

TypeScript for Windows 8 Store Apps

What is TypeScript?

Create a New Project

Adding the TypeScript Functionality

A Quick Example

Tips & Tricks

Content / Package Type

Debugging

Dependent Files

Conclusion

Richmond Code Camp

My Sessions

Building Windows 8 Apps w/ MVVM Light

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

RadCustomHubTile from Telerik for Windows 8 UI

Introduction

Getting Started

Setting Front and Back Content

User Groups - What do you want from them?

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

Find Amber Available for Windows Phone

SimpleIoc and the Messenger Service in MVVM Light

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

Southwest Florida Code Camp

Looking at Windows Azure Mobile Services with Fiddler

Getting Started

Interacting with the Endpoint via REST