On a train trip during the New Year’s weekend, I spent time testing and collecting notes about how to interact with Dropbox. I will share my findings with you in this blog post.

Dropbox

“Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. Never email yourself a file again!" – dropbox.com”

Follow these steps to create a Dropbox account and register the app you will use to interact with your Dropbox file area:

1. Create a new Dropbox account at www.dropbox.com/login#register
2. Accept the Dropbox App Developer terms at www.dropbox.com/developers/apply
3. Continue with the next step, where you create an app with a suitable test name and a short nonsense description
   

   
   

The Dropbox admin interface should now show you the App Key and App Secret you need later for creating a security token file.

SharpBox

My train trip was quite long, so I decided to put another card in the deck. SharpBox is a popular framework for accessing storage and one of the storage service providers it supports is Dropbox. (You can, of course, skip SharpBox and use the Dropbox API directly but I decided out of curiosity to test SharpBox.)

“SharpBox is the right free open source solution for your project. Our goal is to disburden software projects from the demand to implement storage access twice to support a wide range of storage clouds." – sharpbox.codeplex.com

Follow these steps to set up a test application in Visual Studio 2010 and include Sharpbox in it:

1. Create a new C# Console Application in Visual Studio
2. Open the properties of the application and set Target Framework to .NET Framework 4
3. Add the SharpBox NuGet package named  AppLimit.CloudComputing.SharpBox
4. Open the File Explorer and start the SharpBox tool DropBoxTokenIssuer.exe located in the folder approot\packages\AppLimit.CloudComputing.SharpBox.1.2.0.542\lib\net40-full. This tool is used to create a Security Token file you will use in your application.
5. Enter the Application Key and Application Secret you previously got in the Dropbox admin interface. Name the file DropBoxToken and finally click the Authorize button. 

   

6. This will hopefully lead you to the Dropbox login page, where you will use the login credentials for the account you previously created. (Please make sure you set the Target Framework correctly to .Net Framework 4 if no login page appears.)
7. If everything worked out correctly, you will now see an error page. Confusing? This is because the Sharpbox tool redirects to a page that does not exist on Codeplex. You will find the Security Token file created in the same folder where the tool application exists.
8. Finally, move this Security Token file to C:\Test together with an empty text file you create and name texttest.txt.

The code

Everything is now set up for some coding. Fill the Program.cs with this:

using System;
using System.IO;
using AppLimit.CloudComputing.SharpBox; 

namespace DropBoxTestApp
{
  class Program
  {
    static void Main()
    {
      var dropBoxStorage = new CloudStorage();
      var dropBoxConfig = CloudStorage.GetCloudConfigurationEasy(nSupportedCloudConfigurations.DropBox);

      // declare an access token
      ICloudStorageAccessToken accessToken;
      // load a valid security token from file
      using (var fs = File.Open(@"C:\Test\DropBoxToken", FileMode.Open, FileAccess.Read, FileShare.None))
      {
        accessToken = dropBoxStorage.DeserializeSecurityToken(fs);
      }

      // open the connection
      var storageToken = dropBoxStorage.Open(dropBoxConfig, accessToken);

      var srcFile = Environment.ExpandEnvironmentVariables(@"C:\Test\texttest.txt");
      dropBoxStorage.UploadFile(srcFile, "/");             

      // close the connection
      dropBoxStorage.Close();
    }
  }
}

After executing the application, you should be able to see in your Dropbox client of choice or Dropbox admin interface that the file texttest.txt has been uploaded to your Dropbox file area.

Useful Hints and Links

I have now successfully stored files this way for more than a month in a minor hobby application and it works great. After uploading files, you probably also want to download them and SharpBox can help you with this and much more. The only problem I encountered in my own application was when trying to download a file from Dropbox and sending it to the user via a Web browser as a stream. The file had the correct size, but seemed to be empty. The solution was to use Stream.Seek(0,0) before returning the filestream.

You can find more info here:

• Dropbox for Developers
• SharpBox@Codeplex

/Johan

In part 1 the scene was set  by enabling WIF with a little help of a custom HTTP module. The module grabs the SAML token from the incoming request’s authorization header and hands it over to WIF, which in turn does its token validation job.

But how does WIF know what to do with the incoming SAML token? Well it doesn’t, not unless we tell it what to do. So this can be done programmatically or through configuration (or a combination of both).
In this case we will initialize the WIF configuration programmatically by giving it a reference to a service configuration element specified inside the web.config file (shown shortly). For this we first need to create a class that inherits from ServiceConfiguration:

using Microsoft.IdentityModel.Configuration;

namespace Jayway.IdentityModel.Configuration
{
    public sealed class CustomServiceConfiguration : ServiceConfiguration
    {
        public CustomServiceConfiguration()
            : this("[The microsoft.identityModel service name goes here]")
        {
        }

        public CustomServiceConfiguration(string serviceName)
            : base(serviceName)
        {
            if (!IsInitialized)
            {
                Initialize();
            }
        }
    }
}

With this class in place we can get a hold of the WIF configuration from inside the WIfEnablingModule defined in part 1…

private static readonly object _lockObject = new object();

private ServiceConfiguration ServiceConfiguration
{
    get
    {
        if (serviceConfiguration == null)
        {
            lock (_lockObject)
            {
                serviceConfiguration = new CustomServiceConfiguration();
            }
        }
        return serviceConfiguration;
    }
}

… and use it the way we did in the AuthenticateRequest method.

If we now shift our focus to the actual configuration part inside the web.config file, we first need to register the WIF configuration section:

 

<configSections>
    <section name="microsoft.identityModel"
             type="Microsoft.IdentityModel.Configuration.MicrosoftIdentityModelSection,
     Microsoft.IdentityModel,  Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</configSections>

 

 

And our WIF section goes like this:

 

<microsoft.identityModel>
    <service name="Jayway.Service">
        <audienceUris>
            <add value="https://localhost/jaywayservice" />
        </audienceUris>
        <issuerNameRegistry type="Microsoft.IdentityModel.Tokens.ConfigurationBasedIssuerNameRegistry, Microsoft.IdentityModel, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
            <trustedIssuers>
                <add thumbprint="J123A4567890Y1W23A456Y78R9OC1d2K3S456090" name="AuthorizationServer" />
            </trustedIssuers>
        </issuerNameRegistry>
        <securityTokenHandlers>
            <add type="Microsoft.IdentityModel.Tokens.Saml2.Saml2SecurityTokenHandler, Microsoft.IdentityModel, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
        </securityTokenHandlers>
        <claimsAuthenticationManager type="Jayway.IdentityModel.Claims.CustomClaimsAuthenticationManager, Jayway.IdentityModel, ..." />
        <claimsAuthorizationManager type="Jayway.IdentityModel.Claims.CustomClaimsAuthorizationManager, Jayway.IdentityModel, ..." />
    </service>
</microsoft.identityModel>

 

By specifying an audienceUri as above we require the SAML token to contain a matching URI. That way we know that the token was indeed meant for our RP (relying party).

Next we use the built-in ConfigurationBasedIssuerNameRegistry which takes care of the heavy cryptographic work, validating the token’s digital signature against a list of trusted issuers (or their matching public keys that is). In this case we only have one. 

We also make use of the built-in Saml2SecurityTokenHandler which handles the deserialization from the SAML 2.0 assertion into a Saml2SecurityToken CLR object, validates it, checks that it has not yet expired and so on, and while it’s at it, also transforms the security token object into a ClaimsIdentityCollection.

Ok so now that we have the set of claims that corresponds to the assertion of the incoming token it’s up to us what we want to do with it. We can for example call a custom claims store to add some more claims to the collection or perhaps delete certain identifying claims that should not be passed all the way to the RP. It’s really up to the requirements at hand.

The way we can do this is by creating a customized ClaimsAuthenticationManager, and call its Authenticate method, which we pass the claims collection. This is exactly what the next configured element in our WIF section is, the CustomClaimsAuthenticationManager above. (See also the AuthenticateRequest method in part 1 on how to use it).

The next step in the WIF pipeline is to authorize (or deny) the incoming request before the claims finally are handed over to the RP. For this purpose we have configured the CustomClaimsAuthorizationManager that inherits ClaimsAuthorizationManager.

Summary: The focus of this post has been on how we can initialize the WIF configuration through code and configure the WIF pipeline through the microsoft.identityModel configuration section.

In the next post we will look closer on the implementation of the CustomClaimsAuthenticationManager and CustomClaimsAuthorizationManager classes. We will also go ahead and implement a simple REST service and a test client to try it all out.

What is the difference between the following two commands?

powershell.exe -Command "& {invoke-command {throw 'error'}}"

powershell.exe -Command "& invoke-command {throw 'error'}"

As it turns out, the first one will exit with error code 0, the second one will exit with error code 1. This in turn is very important if you want to integrate some powershell command into your build process, and want to make sure that the build does or does not fail if the invoked command fails. An example from real life would be stopping and starting a web server, such as

powershell.exe -Command "& invoke-command -ComputerName MYSERVER {Import-Module WebAdministration; Stop-Website Default}"

In my case I needed to do automatic deploy to a web server from a CI system, and thus it was important to mark the build as failed if my commands to the web server didn't get through. Since I am somewhat of a beginner to powershell, it took a while to find that wrapping the command in curly braces was the cause.

I hope this is of some use if you find your build succeeding even though your powershell commands failed.

Summary

• WebClient will always return on the UI thread if called from the UI thread
• WebRequest will always return on a background thread

The investigation

To test this I created a super-simple app that fetches some stuff using WebClient and WebRequest, from the UI and from a background worker.

The code:

public partial class MainPage : PhoneApplicationPage
{
    private readonly int _uiThreadId = Thread.CurrentThread.ManagedThreadId;

    // Constructor
    public MainPage()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        WriteThreadInfo("UI");

        Dispatcher.BeginInvoke(() => WriteThreadInfo("dispatcher"));

        RunUiRequests();

        LaunchWorkerRequests();

        base.OnNavigatedTo(e);
    }

    private void RunUiRequests()
    {
        var request = WebRequest.CreateHttp("http://www.jayway.com");
        request.BeginGetResponse(RequestCallbackFromUI, null);

        var client = new WebClient();
        client.DownloadStringCompleted += client_DownloadFromUIStringCompleted;
        client.DownloadStringAsync(new Uri("http://www.jayway.com", UriKind.RelativeOrAbsolute));
    }

    private void LaunchWorkerRequests()
    {
        var worker = new BackgroundWorker();
        worker.DoWork += (sender, ex) =>
                                {
                                    Thread.Sleep(2000);

                                    WriteThreadInfo("worker");

                                    var request = WebRequest.CreateHttp("http://www.jayway.se");
                                    request.BeginGetResponse(RequestCallbackFromWorker, null);

                                    var client = new WebClient();
                                    client.DownloadStringCompleted += client_DownloadFromWorkerStringCompleted;
                                    client.DownloadStringAsync(new Uri("http://www.jayway.com", UriKind.RelativeOrAbsolute));

                                };
        worker.RunWorkerAsync();
    }

    private void client_DownloadFromWorkerStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        WriteThreadInfo("webclient from worker");
    }

    private void RequestCallbackFromWorker(IAsyncResult ar)
    {
        WriteThreadInfo("webrequest from worker");
    }

    void client_DownloadFromUIStringCompleted(object sender, DownloadStringCompletedEventArgs e)
    {
        WriteThreadInfo("webclient from UI");
    }

    private void RequestCallbackFromUI(IAsyncResult ar)
    {
        WriteThreadInfo("webrequest from UI");
    }

    private void WriteThreadInfo(string threadName)
    {
        var id = Thread.CurrentThread.ManagedThreadId;
        Debug.WriteLine("{0,-28} Thread is {1} ({2})",
                        threadName,
                        id,
                        (id == _uiThreadId) ? "UI" : "background");
    }
}

 

And one set of results from running this is:

UI                           Thread is 257753342 (UI)

dispatcher                   Thread is 257753342 (UI)

webrequest from worker       Thread is 255066402 (background)

As you can see, the WebClient returns on the UI thread when called from the UI thread, but when called from the worker thread – it returns on a background thread.

I hope you feel enlightened – I do

Deciding what to show

Since the app was going to be used throughout the conference, showing something about what’s coming up would be nice. At first we were thinking about showing upcoming session titles with speaker names etc – maybe one randomized at a time. But then, we ended up with something more personal and more graphical – thumbnails of upcoming speakers. Here’s what the tile looks like:

front:           back:

Hence the front of the tile shows the speakers, and the back of the tile shows at what time the next sessions start. Instead of just using the back of the tile – we opted for giving the user as immediate information as possible – so whenever he/she would look at their start screen – something useful would be there, not just the app logo. This we think is a viable solution for this kind of short-term usage app, but maybe is not suitable for a lifetime app, like your bank, that you will (hopefully) keep forever and will not use every 5 minutes.

We put a finale in there as well; after the conference was over – the tile changed to:

front:          back:

Nice huh? When the conference is over – the conference logo comes back as the app’s front tile and a nice message shows on the back. Maybe the message is a bit too much, but I think it’s a nice pointer to un-pin the app from your start screen. An app should be on the start screen for a reason– and this conference app does not really belong there once the conference is over.

Install size vs bandwidth usage

We bundled all speaker images with the app. This creates a larger file to install, but gives less data to download when updating the tile, and less hassle if you compare with downloading and caching. With lots of people coming from abroad, we thought it would be better to rely the dodgy conference wireless once during installation instead of on each tile update.

Implementing the tile

The of-the-shelf solution for updating a tile is very well documented here: updating the tile and running in the background. What can be a bit tricky is creating a fully customized tile, which is done by rendering a background image for the tile using WriteableBitmap. The blog post Customize a Windows Phone 7 Live Tile by John P Alioto helped me on the way.

The OnInvoke method first checks whether to reset the tile and remove the background agent, then launches the canvas setup on the current dispatcher. When not running on the dispatcher, cross threading issues keep popping up.

protected override void OnInvoke(ScheduledTask task)
{
    if (CheckConferenceEndedAndDisableAgent(task))
    {
        NotifyComplete();
        return;
    }

    Deployment.Current.Dispatcher.BeginInvoke(SetupCanvas);
}

private bool CheckConferenceEndedAndDisableAgent(ScheduledTask task)
{
    if (!ConferenceTimeCalculator.HasConferenceEnded())
        return false;

    var tileData = new StandardTileData
                       {
                           BackgroundImage = new Uri("Background.png", UriKind.RelativeOrAbsolute),
                           Title = APP_TITLE,
                           BackTitle = "welcome back!",
                           BackContent = APP_TITLE + " is over"
                       };
    var tile = ShellTile.ActiveTiles.First();
    tile.Update(tileData);

    Debug.WriteLine("conference has ended, removing scheduled task");
    ScheduledActionService.Remove(task.Name);
    return true;
}

private void SetupCanvas()
{
    _canvas = new Canvas
                  {
                      Height = TILE_SIDE,
                      Width = TILE_SIDE
                  };

    var bmp = new BitmapImage
                  {
                      CreateOptions = BitmapCreateOptions.None
                  };

    bmp.ImageOpened += OnBackgroundBmpOpened;
    bmp.UriSource = new Uri("Background.png", UriKind.RelativeOrAbsolute);
}

as you can see, the SetupCanvas only opens the background image then returns. Since the original tile file Background.png is a content file – we have to wait for the ImageOpened event to be raised before trying to render it – otherwise the result will only be black.

So, when the image is opened, we open all the images for all the speakers:

private void OnBackgroundBmpOpened(object sender, RoutedEventArgs e)
{
    Debug.WriteLine("background opened");
    var image = new Image
                    {
                        Source = (BitmapImage)sender,
                        Width = 173,
                        Height = 173
                    };

    Canvas.SetLeft(image, 0);
    Canvas.SetTop(image, 0);
    _canvas.Children.Add(image);

    Deployment.Current.Dispatcher.BeginInvoke(LaunchOpenOfAllSpeakerImages);
}

public void LaunchOpenOfAllSpeakerImages()
{
    _nbrOfSpeakers = _speakers.Count;
    Debug.WriteLine("starting tile update for {0} speakers",
                    _nbrOfSpeakers);
    foreach (var speaker in _speakers)
        GetSpeakerBitmap(speaker);
}

private void GetSpeakerBitmap(ISpeaker speaker)
{
    var bmp = new BitmapImage { CreateOptions = BitmapCreateOptions.None };
    bmp.ImageOpened += OnSpeakerBmpOpened;

    //live
    //bmp.UriSource = new Uri(speaker.ImageUri, UriKind.RelativeOrAbsolute);

    //cached
    bmp.UriSource = new Uri("/images/speakers/" + speaker.Id + ".jpg", UriKind.RelativeOrAbsolute);
}

private void OnSpeakerBmpOpened(object sender, RoutedEventArgs e)
{
    Debug.WriteLine("image opened");
    var mySpeakerIndex = _nbrOfSpeakers;
    _nbrOfSpeakers -= 1;

    AddImageToCanvas(mySpeakerIndex, (BitmapImage)sender);

    if (_nbrOfSpeakers == 0)
        RenderComposedBitmap();
}

private void AddImageToCanvas(int mySpeakerIndex, BitmapImage bitmapImage)
{
    var image = new Image
                    {
                        Source = bitmapImage,
                        Width = 57,
                        Height = 57,
                        Stretch = Stretch.UniformToFill,
                        Opacity = 1
                    };

    _canvas.Children.Add(image);
    Canvas.SetLeft(image, 58 * (mySpeakerIndex % 3));
    Canvas.SetTop(image, 58 * (mySpeakerIndex / 3));
}

and finally, when all images have been opened, we render the image and update the tile:

private void RenderComposedBitmap()
{
    Debug.WriteLine("rendering composed bitmap");
    var writeableBitmap = new WriteableBitmap(173, 173);

    writeableBitmap.Render(_canvas, null);
    writeableBitmap.Invalidate();

    WriteJpg(writeableBitmap);
    UpdateTile();
}

private void UpdateTile()
{
    var tile = ShellTile.ActiveTiles.First();
    var data = new StandardTileData
                   {
                       Title = "",
                       BackTitle = APP_TITLE,
                       BackgroundImage = new Uri("isostore:/" + TILE_BACKGROUND_IMAGE_URI, UriKind.RelativeOrAbsolute),
                       BackContent = "next sessions: " + _sessionstart
                   };
    tile.Update(data);
    NotifyComplete();
}

The Control Canvas is used for layout of the tile. As guys who love Grid’s and dynamic layout – we first tried using a Grid with three columns and three rows, but could not get the images to render correctly. During a Windows Phone Code Camp at Jayway, Dag König nicely pointed us towards the Canvas which he had used in his Month Tile app – works beautifully. It’s probably just some Measure/Arrange-calls together with an Invalidate to get a Grid-powered tile to render correctly, left as exercise for the reader

That’s it! Hope this inspires or helps someone out there. L8r g8rs!

This time was no different, so when I finally reached some sort of understanding I ended up with this blog post. I’ll try to explain charms and contracts. I also want to show how you can use a charm, more specifically the search charm, to extend your application into Windows 8.

Charms and contract - no comprende?

Let’s start with charms. As it is, you get five charms in Windows 8. You have Search, Share, Start (you can’t really do anything with this one, it just shows the home screen), Devices and Settings. They can either be accessed by sliding in from the right hand side or, if you are using a mouse, you can find them in the bottom left. You can think of charms as a more powerful version of the traditional start menu. A start menu that you can use to extend your application into the operating system.

What about contracts then? Contracts are what connect your application to the charms. You just select the required contract in your appmanifest and then voilà. You can write all of your code without doing this, but then will get an AccessViolationException when running your code - which tends to go against best practice.

Implementing the search charm

So, I started with a basic implementation of the search charm. As a test application I had my conference application that I wrote for Øredev. First up, declare the contract in order to avoid that nagging exception. Just open up your Package.appxmanifest file and declare your application as one that can interact with the search charm.

If we start our application now and then press the search charm we will see our own little Øredev application, at the very top with the ugly icon, in the list for applications implementing the search contract. That’s basically all one need to know about contracts.

Now we’re all set up to start coding. In App.xaml.cs, add the following code.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    ActivateSearchCharm();
    ShowCollection();
    Window.Current.Activate();
}

private void ActivateSearchCharm()
{
    var pane = SearchPane.GetForCurrentView();
    pane.QuerySubmitted += QuerySubmitted;
    pane.SuggestionsRequested += SuggestionsRequested;
    pane.ResultSuggestionChosen += ResultSuggestionChosen;
}

protected override void OnSearchActivated(SearchActivatedEventArgs args)
{
    // the first page in a collection of many - just for testing
    ShowSplit(_sampleData.GroupedCollections.First(), args.QueryText);
}

What we get here is basically three different events and one override that you should handle in order to implement the search charm.

• Event – QuerySubmitted
• Event – SuggestionsRequested
• Event – ResultSuggestionChosen
• Override – OnSearchActivated

We start with the override of OnSearchActivated. This will trigger if our application is not in the foreground and you swipe out the right pane, press the search charm and then tap the application. In the screenshot below you can see what happened when I did just that. In this case I just show a plain view containing all the talks for the Agile track, naturally, one should navigate to something more suitable in a real application.

We continue with the implementation of QuerySubmitted. This event will fire when the user enters a query and then press enter. I to remind any and all that this code is only intended to make my example work, I would not implement any real search functionality this way.

private void QuerySubmitted(SearchPane sender, SearchPaneQuerySubmittedEventArgs args)
{
    var items = page.Items as SampleDataCollection;
    page.Items = items.OfType<SampleDataItem>()
                      .Where(a => a.Description.Contains(args.QueryText));
}

Right, so we pick out all the items bound to the page. Then we pick out any item that has a description that contains the query string. To test my code I simply entered “someone” and tapped enter.

As you can see, all other sessions, not containing the word “someone” are removed, only showing the session that match the search criteria.

This was basically all that I expected from the search charm. But there’s actually one more thing to the it that can really make your application shine. The secret sauce? SuggestionsRequested and ResultSuggestionChosen.

private void SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)
{
    var suggestions = args.Request.SearchSuggestionCollection;
    var items = page.Items
                    .OfType<SampleDataItem>()
                    .Where(i => i.Category.StartsWith(args.QueryText, StringComparison.OrdinalIgnoreCase));

    foreach (var item in items)
    {
        suggestions.AppendResultSuggestion(

                    item.Category,
                    item.Title,
                    item.Title,
                    StreamReference.CreateFromUri(new Uri(item.ImagePath)),
                    item.Title);
    }
}

private void ResultSuggestionChosen(SearchPane sender, SearchPaneResultSuggestionChosenEventArgs args)
{
    var items = page.Items as SampleDataCollection;
    page.Items = items.OfType<SampleDataItem>()
                      .Where(a => a.Title == args.Tag));
}

So, this is what happens. When the user start to write in the search field, SuggestionsRequested is called, once called we can find any partial matches for the query string. In my case I match against everything that is the start of Category. Then I add those results to the search charm with AppendResultSuggestion(string text, string detailText, string tag, StreamReference image, string imageAlternateText). This will give us this very neat behavior.

If the user starts writing a word we can send suggested items to the search charm. If the user taps on one of them it will trigger ResultSuggestionChosen where we will get the Tag for the selected item allowing us to display it. Also notice that “Joha” gets highlighted in the suggestion list; this is done automagically by Windows 8.

Possibilities

Personally - I’m very excited about this. Charms really take one step closer to really erase the borders between the OS and your application. Much like what Microsoft has done with Windows Phone. I believe that this is the right way to go and I look forward to see it evolve.

But - there’s always a but. Don’t implement it if your application doesn’t have the need for it. It can be pretty annoying to have several applications taking up space in the search pane without having any real reason for doing so.

In this particular scenario we have a REST API built on WCF and ASP.NET which exposes resources owned by some imaginary users, and we want to make their resources accessible to third-party applications (clients) in a secure way. That is, we want to allow our users to grant authorization to clients requesting access to their resources without handing over their username and password to the third-party. In that sense this could be seen as a simplified implementation of a .NET OAuth Resource Server.
Each and every request that the API receives must contain a valid SAML token. The token is expected to be found in the request’s authorization header and it must be signed by an OAuth Authorization Server which our service has a trust relationship with.

The focus in this initial post is on how to extend the request pipeline with a custom HTTP module that will hand over the SAML token to Windows Identity Foundation (WIF) to do its authentication and authorization logic.

The Visual Studio wizards that come with the WIF SDK makes the job easy when it comes to enabling claims-based identity for ASP.NET web applications as well as SOAP-based WCF services. However at the time of this writing, the SDK has no wizard that enables WIF on the kind of REST API that we are building here. We will get around this though by implementing our own WIF-enabling module. Below I will describe how to do this while showing important parts of a possible code implementation.

The HTTP module that we are going to create has mainly three roles. The first is to extract the SAML token from the authorization header. Secondly it will hand the token over to WIF that validates it according to the WIF configuration inside the web.config. Finally the module will attach the IClaimsPrincipal that it gets back from WIF to the current HTTP user.

Let’s see how we can accomplish all this:

First we need to create a class that implements System.Web.IHttpModule, let’s call it WifEnablingModule:

public class WifEnablingModule : IHttpModule

In its Init method we hook up to the following HttpApplication events:

context.AuthenticateRequest += OnAuthenticateRequest;
context.EndRequest += OnEndRequest;

The code in OnAuthenticateRequest goes as:

HttpContext context = HttpContext.Current;

if (context.Request.ContainsAuthorizationHeader())
{
    bool valid = AuthenticateRequest(context.Request);

    if (!valid)
    {
        context.SendUnauthorizedResponse();
    }
}
else
{
    context.SendUnauthorizedResponse();
}

ContainsAuthorizationHeader() is an extension method on the Request object:

public static bool ContainsAuthorizationHeader(this HttpRequest request)
{
    if (!string.IsNullOrWhiteSpace(request.Headers["Authorization"]))
    {
        if (request.Headers["Authorization"].ToLower().StartsWith(“bearer “))
        {
            return true;
        }
    }
    return false;
}

    whereas SendUnauthorizedResponse() is an extension method on HttpContext:

public static void SendUnauthorizedResponse(this HttpContext context)
{
    context.Response.StatusCode = (int)HttpStatusCode.Unauthorized;
    context.Response.StatusDescription = “Access Denied“;
    context.Response.Write(“401 Access Denied“);
    context.Response.End();
}

The last line above will immediately raise the EndRequest event:

public virtual void OnEndRequest(object sender, EventArgs args)
{
    var context = (HttpApplication)sender;
    if (context.Response.StatusCode == 401)
    {
        string realm = String.Format(CultureInfo.InvariantCulture, "BASIC Realm=\"{0}\"", context.Request.Url.AbsolutePath);
        context.Response.AppendHeader("WWW-Authenticate", realm);
    }
}

The most interesting bits though is found in AuthenticateRequest:

private bool AuthenticateRequest(HttpRequest request)
{
    string accessToken = request.ExtractSamlTokenFromAuthorizationHeader();
    if (string.IsNullOrWhiteSpace(accessToken))
    {
        return false;
    }
    SecurityToken token;
    using (var stringReader = new StringReader(accessToken))
    {
        var reader = XmlReader.Create(stringReader);
        if (!ServiceConfiguration.SecurityTokenHandlers.CanReadToken(reader))
        {
            return false;
        }
        token = ServiceConfiguration.SecurityTokenHandlers.ReadToken(reader);
    }
    ClaimsIdentityCollection identities = ServiceConfiguration.SecurityTokenHandlers.ValidateToken(token);
    HttpContext.Current.User = new ClaimsPrincipal(identities);

    return true;
}

In  AuthenticateRequest above we first extract the SAML token from the authorization header with the help of the following extension method:

public static string ExtractSamlTokenFromAuthorizationHeader(this HttpRequest request)
{
    string token;
    string authHeader = request.Headers["Authorization"];

    if (string.IsNullOrEmpty(authHeader))
    {
        token = string.Empty;
    }
    else
    {
        const string header = "bearer ";
        if (string.CompareOrdinal(authHeader, 0, header, 0, header.Length) == 0)
        {
            token = authHeader.Remove(0, header.Length);
        }
        else
        {
            token = string.Empty;
        }
    }
    return token;
}

We then check to see if the security token handler that we have configured in the WIF section of web.config can read the token, and given that it can, we tell it to validate the token.

Now we can create a new IClaimsPrincipal object and assigns it to the current HTTPContext user.

Finally we want to enable the HTTP module by adding it to the module collection in web.config:

<modules>
    <add name="WifEnablingModule" type="Jayway.IdentityModel.WifEnablingModule, …" />
    <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web, … " />
</modules>

We also need to register routes for our secured services in the global.asax.cs.

Summary: The focus in this post has been on how to secure a REST API, acting as a simple OAuth Resource Server, and built on WCF and ASP.NET by implementing a custom HTTP module and there by adding some custom code into the request pipeline where we extract a SAML token and hand it over to WIF to do its token authentication.

In part two we’ll talke a look on how to initialize the WIF configuration programmatically and also how to configure the WIF pipeline in the web.config file.

Steps:

1. Download/install VirtualBox
2. Download/install Ubuntu
3. Download/install Graphite
4. Expose VM to network
5. Use Graphite from C#

Download/install VirtualBox

Start by downloading and installing virtualbox.

The installer is a "Next - next - next" type of installer, so just click through it.

Download/install Ubuntu

Once installed, download and install ubuntu as a new virtual machine.

Now, what you have to do is to bring up a terminal window. Press Win and type Terminal in the input field and launch the terminal.

A bit on the terminal and sudo

When working with a linux, you have to type sudo before any command that makes changes to 'root'-owned directories such as /etc/ and /opt/ where we are going to install graphite, Apache and other dependencies.

pushd pushes a folder onto an in-memory stack and changes the current directory to the first argument, while popd pops the stack and moves to the previous directory.

You can paste into the terminal with [CTRL]+[SHIFT]+[V] and copy with [CTRL]+[SHIFT]+[C]. Another tab in the terminal is created with [CTRL]+[SHIFT]+[T] - this can be nice to have if you want to look up data about your VM, such as its ip (with 'ifconfig').

Installing Graphite

This gist contains the commands you can use to install graphite.

When you have followed the gist, try to navigate to http://127.0.0.1 or http://[::1]/ from Firefox. You should be able to see the graphite start page.

Expose the VM to the network

When you have a graphite installation, you likely want to start logging things into it - perhaps you already have a piece of software you want to enable metrics from. In order to reach the virtual machine from other computers on the network.

In order to do this, shut down the virtual machine and change its network interface to be 'bridged' - this is in order to let your DHCP server give the server and IP rather than only having access to it through your private computer-LAN-to-VM (NATted). Change the following: Machine Settings > Network > Adapter 1 > Attached to: [Bridged].

Start the virtual machine again.

Now check with ifconfig from the Terminal what IP the machine has, and navigate to that IP from your main development operating system. You should be able to see the graphite install now and the example data you added (from the last line of the gist).

Use the graphite from C#

Now it's time to log some data with C# into your brand new graphite install!

Open VS and create a new console application. Using Tools > Library Package Manager > Package Manager Console, type "install-package Graphite.NET", targeting your new console project.

Then type this code in the main method (put a using Graphite; directive on top):

Try and run the program!

Now you should have some nice data point in graphite! Zoom in the latest minute so that you can see them.

References:

• Michael Grace - http://geek.michaelgrace.org/2011/09/how-to-install-graphite-on-ubuntu/

]]> http://blog.jayway.com/2012/01/04/graphite-with-dotnet-and-ubuntu-11-10/feed/ 0 http://blog.jayway.com/2011/12/14/n2cms-tinymce-and-cufon/ http://blog.jayway.com/2011/12/14/n2cms-tinymce-and-cufon/#comments Wed, 14 Dec 2011 14:17:31 +0000 Anders Poulsen http://blog.jayway.com/?p=11555 Problem

On http://www.leanonme.net/ we use cufon to create text with special stylized fonts.

This presents a challenge in cases such as the one above, where the content editor should be able to mix regular font with cufon-enabled font.
We have solve the problem by integrating custom formatting directly in the TinyMCE editor, which N2CMS uses as rich text editor:

The purpose of this page is to describe how to enable custom formatting in the N2CMS rich text editor, since it is really not very well documented anywhere else.

Solution

With N2CMS it is possible to configure the TinyMCE editor from your web.config.

<n2>
 <edit>
 <tinyMCE enabled="true" cssUrl="~/Content/css/editor.css">
 <settings>
 <add key="formats" value="{cufon : {inline : 'span', classes : 'cufon'}}" />
 <add key="theme_advanced_blockformats" value="p,pre,h1,h2,h3,h4,cufon"/>
 </settings>
 </tinyMCE>
 </edit>
</n2>

css classes in TinyMCE

The cssUrl points to a stylesheet, which has two purposes:
1. It defines how text is displayed in the TinyMCE editor

2. It defines classes that TinyMCE will pick up on
If the css files contains:

a.pdf
{
 display: block;
 height: 22px;
 padding-left: 25px;
 padding-top: 5px;
 background-image: url(/Content/images/icons/icn_pdf.png);
 background-repeat: no-repeat;
}

a.disclaimerpopup{}
.cufon
{
 font-style: italic;
 font-weight: bold;
 font-family: Comic Sans MS, Lucida Handwriting;
 font-size: larger;
}
a.popup{}

Then the TinyMCE editor will allow you to select the 'pdf', 'disclaimerpopup', 'cufon' and 'popup' classes on elements:

And if you set e.g. the 'pdf' class on a link, the the link will be displayed inside the rich text editor with the styling, that was defined in the css pointed to by web.config

Advanced formatting

The lines

<settings>
 <add key="formats" value="{cufon : {inline : 'span', classes : 'cufon'}}" />
 <add key="theme_advanced_blockformats" value="p,pre,h1,h2,h3,h4,cufon"/>
 </settings>

control the formatting available in the drop down box:

The line

<add key="theme_advanced_blockformats" value="p,pre,h1,h2,h3,h4,cufon"/>

controls what can be chosen. In this case the standard tags p, pre, h1, etc. are available + an additional formatting called 'cufon'.

TinyMCE knows what to do with the standard tags, but it doesn't know how to handle 'cufon'.

The line

<add key="formats" value="{cufon : {inline : 'span', classes : 'cufon'}}" />

tells TinyMCE that text chosen to be 'cufon' should be inline styled with

<span class='cufon'>

Combine this with a stylesheet or jquery script to properly style/handle 'span.cufon' and we are almost ready to rumble.

But there is one problem left. The drop down box contains the cufon-formatting, but the 'cufon' entry is missing:

The reason is that TinyMCE keeps the texts for the front-end in translation files. To solve this, you must first add

cufon:"advanced.cufon"

in the function _createBlockFormats in \N2\Resources\tiny_mce\themes\advanced\editor_template.js so TinyMCE knows which key to look for in the translation file. Then you must add

cufon:"Cufon"

in \N2\Resources\tiny_mce\themes\advanced\langs\en.js, which contains the english translations used by TinyMCE.

Finally you might want to style the cufon entry in the drop down list. This is done in \N2\Resources\tiny_mce\themes\advanced\skins\default\ui.css by adding the line

.defaultSkin .mce_cufon span.mceText {font-style: italic;font-weight: bold;font-family: Comic Sans MS, Lucida Handwriting;font-size: larger;

and the final result is:

References

N2CMS: http://n2cms.codeplex.com

TinyMCE custom formatting http://www.tinymce.com/wiki.php/Configuration:formats

TinyMCE advanced blockformats: http://www.tinymce.com/wiki.php/Configuration:theme_advanced_blockformats

Migrations continues the story, to handle just that. Migrations. Change of your model during the lifetime of your application.

Introduction

Migrations offers automatic migrations or non automatic migrations. In the latter there are two key parts. DbMigrationsConfiguration<TContext> and DbMigration.  Configuration is for settings like automatic migrations and allowing data loss. The former responsibility of the Initializer to seed data also resides in configuration. Now seeding is done when all migrations has run. The DbMigration class describes the model changes to update or downgrade the database.

What I learned

The order of sets in your context matters! The convention for naming relation tables may choose different name depending on the order. This can cause some nasty things in your migrations!

Lets say we have a model where Foo and Bar have a many to many relationship. EF might represent the relationship table as FooBars.

If we later add to our model some other object relation to Foo or Bar and update our Context, EF may then represent the same relation as BarFoos. This has nothing to do with migrations, it has to do with the order of your set in the context. You might not have noticed this when working with Initializers, BUT when reviewing generated DbMigration classes you will. In a migration scenario this could also mean that you lose data due to dropping and recreating relationship tables.

Conclusion

Some friendly advice is to review your migrations or manually configure naming of relationship tables for full control.

Nice to see migrations as another ingredient added to the 4.5 kettle.

Enjoy!

The working title was actually “Allowing Windows 8 Metro applications to access files”, but I think that this one has more Omph! to it.

Someone moved my cheese!

If this was a normal application and I wanted to load a xml file from disk, I would probably do something like this.

XDocument xDocument = null;
using(var fileStream = File.OpenRead(@"C:\data.xml"))
{
    xDocument = XDocument.Load(fileStream);
} 

But .NET Framework 4.5 and WinRT is something new and really different. Reading files from disk just are not what it used to be. Just start to write System.IO. and you get – well, not much.

With WinRT, any operation that potentially can run longer than 50 ms has been converted to an async method. So, when it comes to reading a file you get a bunch of them. After some frantic googling and experimentation (without ReSharper and with an American keyboard) I managed to create this async file reading method.

private async Task<XDocument> ReadFileAsync(string fileName)
{
    var file = await KnownFolders.DocumentsLibrary.GetFileAsync(fileName);
    var readable = await file.OpenAsync(FileAccessMode.Read);
    uint size = (uint)readable.Size - 1;
    var stream = readable.GetInputStreamAt(0);
    var reader = new DataReader(stream);
    await reader.LoadAsync(size);
    var result = reader.ReadString(size);
    return XDocument.Parse(result);
}

Not quite as streamlined is it? I don’t know about you, but when I look at this, I certainly feel that I have a lot of new stuff to learn. So, did it work?

No. It did not.

May I please access a file?

To be a little more precise, nothing happened at all. Well, something did happen. An exception was thrown when I tried to read a file. But since Visual Studio 2011 is not by default set to always break for any thrown CLR exception I only got a line in my output window. With hindsight I probably should have looked there directly, but I didn’t. So I noticed this after quite some time.

WinRT information: Access to this location requires a corresponding capability.
A first chance exception of type 'System.UnauthorizedAccessException' occurred in mscorlib.dll

What it basically means is that you need to ask nicely before accessing any file. Also, you need to specify which kind of files you want to access and where you would like to access them. You can do this by opening your Package.appxmanifest found in your solution directory.

Since I had placed my xml files in “My Documents”, I first needed to add the capability to read from that folder. (click on the image to see a bigger version)

The next step was to declare my application association with xml files. In the tab Declarations you first chose to add File Type Associations.

Now you need to specify that it is a xml file that you want to read.

You can enter any name that you want and as file type I just entered “.xml”. Pressed F5 and launched my application. So did it work?

Yes. Yes it did.

To be perfectly honest

I’m not still not happy with my lack of understanding with how file access actually works. Right now it just seems overly complex to me. Important to note is that both Windows 8 Metro application development and WinRT is in an extremely early stage. A lot can still change.

Also - thanks to Håkan that helped me out with the application design.

During this weekend I was elaborating with Microsoft Charting Tool and want with this blog post share the knowledge that I gained.

Demo

I started with an empty ASP.NET MVC 3 Web Application with the View engine Razor and I selected an Empty template. I added a reference to the assembly System.Web.DataVisualization.

Thereafter I created ViewModel called BarGraphViewModel.

using System.Web.UI.DataVisualization.Charting;

namespace Charters.Models
{
    public class BarGraphViewModel
    {
        public Chart BarChart
        {
            get { return BuildBarChart(); }
        }
        private Chart BuildBarChart()
        {
            var data = new BarData
            {
                xValues = new int[] { 1, 2, 3, 4 },
                yValues = new double[] { 0.3, 0.3, 0.1, 0.7 }
            };
            return BindChartData(data);
        }
        private Chart BindChartData(BarData data)
        {
            Chart chart = new Chart();
            chart.Width = 150;
            chart.Height = 150;

            chart.ChartAreas.Add(new ChartArea());
            chart.Series.Add(new Series());

            chart.Series[0].ChartType = SeriesChartType.Column;
            chart.Series[0].BackGradientStyle = GradientStyle.HorizontalCenter;
            chart.Series[0].BackSecondaryColor = System.Drawing.Color.Black;

            for (int i = 0; i < data.xValues.Length; i++)
            {
                int x = data.xValues[i];
                double y = data.yValues[i];
                int ptIdx = chart.Series[0].Points.AddXY(x, y);
                DataPoint pt = chart.Series[0].Points[ptIdx];
            }

            return chart;

        }
    }

    internal class BarData
    {
        public int[] xValues;
        public double[] yValues;
    }

}

After I created the viewmodel I created the Controller that I called BarGraphController.

using System.IO;
using System.Web.Mvc;
using Charters.Models;
using System.Web.UI.DataVisualization.Charting;

namespace Charters.Controllers
{
    public class BarGraphController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult DrawBarChart()
        {
            var viewModel = new BarGraphViewModel();
            Chart charter = viewModel.BarChart;
            MemoryStream ms = new MemoryStream();
            charter.SaveImage(ms, ChartImageFormat.Png);
            ms.Position = 0;
            return File(ms.GetBuffer(), "image/png");
        }
    }
}

Now it is time to create the view. I selected the Razor view and no strongly-typed view. In the view I added following line of code.

<a href="@Url.Action("DrawBarChart","BarGraph")"/>Graph

Compile and Run your web application. Don’t forget to enter correct path to the controller. My path are

http://localhost:54217/BarGraph/

In my previous post, I mentioned how AppHarbor provides an online tool for manually testing transformations. Also, the Visual Studio extension SlowCheetah provides support for manually testing and transformation and diffing them against the base configuration from inside Visual Studio. These tools are useful and may be fine for tinkering with getting a transform just right, but being software professionals, we find it highly desirable to reliably automate our transformation testing.

In this article we shall look at one way to exercise our Web.config transformations from our own code, so that we can TDD our transformations and regression test them as part of our continuous integration cycle, like everything else.

Starting Point

The actual Web.config transformation process is normally invoked by MSBuild, as described in detail by Elton Stoneman in this post. (One approach to testing the transformations could, thus, be to fork off MSBuild processes on custom build targets, but we'd like to take a less cumbersome route.)

Being an MSBuild task means that the transformation is implemented as an ITask realization. The concrete implementation is called TransformXml and resides in the Microsoft.Web.Publishing.Tasks.dll assembly. Note that this assembly is not pre-installed with Windows/.NET but rather installed along with Visual Studio 2010, typically to C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v10.0\Web). Given that its location is not fixed, you'd probably want to add it to your dependencies folder (caveat emptor: check license terms before passing it around).

From Elton's post, we can also see 3 arguments being passed to the TransformXml task:

• Source (the XML file to transform)
• Transform (the transformation XML file itself)
• Destination (the target of the transformed XML file)

Armed with that background knowledge, let's move on and try to get the transformation to run outside of the MSBuild environment in which it normally executes. For our experiment, we'll be transforming the following source (app.config):

   <configuration>
     <appSettings>
	   <add key="testKey" value="testValue"/>
     </appSettings>
   </configuration>

The transformation we'll be testing (app.Debug.config) should change the "testValue" of the "testKey" to something transformation specific ("debugValue" in this case):

   <configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
     <appSettings>
       <add key="testKey"
            value="debugValue"
            xdt:Locator="Match(key)" xdt:Transform="SetAttributes" />
     </appSettings>
   </configuration>

Test Approach

Our initial stab at automatically testing the transformation will be to invoke the XmlTransform through its outermost interface; i.e. the ITask interface. First, we need to add a reference to Microsoft.Web.Publishing.Tasks.dll as mentioned above. Additionally, we need to reference Microsoft.Build.Framework and Microsoft.Build.Utilities.v4.0 (these should be available from your usual Project, Add Reference, .NET tab).

Opening up the XmlTransform class in Visual Studio's Object Browser shows us a single method, Execute(), plus a handful of properties, most of which we recognize from Stoneman's previously mentioned post. A little experimentation reveals the following details:

• SourceRootPath
• The base path to which the XML file specified in Source is relative. If not specified, this will  be the current directory (which, when running from a test runner, would typically be your build target directory).
• Source
• The name of the XML source file to be transformed. If this is not an absolute path, it will be relative to the SourceRootPath.
• TransformRootPath
• The base path to which the XML file specified in Transform is relative. If not specified, this will be the same as SourceRootPath.
• Transform
• The name of the XML transformation to be applied to the source. If this is not an absolute path, it will be relative to the TransformRootPath.
• Destination
• The name of the resulting transformed XML file. If this is not an absolute path, it will be relative to the current directory (typically your build target directory, in a test context).

So all we need to do is something like the following, right?

   var transformer = new TransformXml
   {
      SourceRootPath = @"..\..\..\Jayway.WebTransformTesting\",
      Source = @"app.config",
      Transform = @"app.Debug.config",
      Destination = @"app.transformed.config"
   };
   var transformationSucceeded = transformer.Execute();

Well, as the System.InvalidOperationException with the message "Task attempted to log before it was initialized" thrown in our face subtly tells us, this is not quite the case...

Investigating the task implementation with Reflector shows the problem to be due to the fact that a property, BuildEngine, of the Task base class has not been set. It is used as a dependency injection mechanism, giving the task access to some environment services (see IBuildEngine on MSDN) normally provided by MSBuild.

Well, the whole purpose of this experiment was to run outside of MSBuild, so we'll roll our own "build engine" instead:

   public class BuildEngineForTest : IBuildEngine
   {
      public void LogErrorEvent(BuildErrorEventArgs e)
      {
         Console.WriteLine(LogFormat, "ERROR", e.Message);
      }

      public void LogWarningEvent(BuildWarningEventArgs e)
      {
         Console.WriteLine(LogFormat, "WARNING", e.Message);
      }

      public void LogMessageEvent(BuildMessageEventArgs e)
      {
         Console.WriteLine(LogFormat, e.Importance, e.Message);
      }

      public void LogCustomEvent(CustomBuildEventArgs e)
      {
         Console.WriteLine(LogFormat, "CUSTOM", e.Message);
      }

      public bool BuildProjectFile(
         string projectFileName, string[] targetNames,
         IDictionary globalProperties, IDictionary targetOutputs)
      {
         return true;
      }

      public bool ContinueOnError
      {
         get { return true; }
      }

      public int LineNumberOfTaskNode
      {
         get { return 0; }
      }

      public int ColumnNumberOfTaskNode
      {
         get { return 0; }
      }

      public string ProjectFileOfTaskNode
      {
         get { return string.Empty; }
      }

      private const string LogFormat = "{0} : {1}";
   }

This was the piece we were missing to be able to run the transformation outside MSBuild. We are, thus, able to write our coveted test:

...
   [Test]
   public void ApplyingDebugTransformationToConfigurationSetsExpectedKey()
   {
      const string targetFile = @"app.transformed.config";

      var transformer = new TransformXml
      {
         BuildEngine = new BuildEngineForTest(),
         SourceRootPath = @"..\..\..\Jayway.WebTransformTesting\",
         Source = @"app.config",
         Transform = @"app.Debug.config",
         Destination = targetFile
      };

      // Left as exercise for the reader... ;]
      AssertKeyInTransformedFile(targetFile);
   }
...

Our transformation runs successfully, yielding the following console output from our "build engine":

Normal : Transforming Source File: ..\..\..\Jayway.WebTransformTesting\app.config
Normal : Applying Transform File: ..\..\..\Jayway.WebTransformTesting\app.Debug.config
Low : Executing SetAttributes (transform line 6, 35)
Low : on /configuration/appSettings/add[@key='testKey']
Low : Applying to 'add' element (source line 4, 6)
Low : Set 'key' attribute
Low : Set 'value' attribute
Low : Set 2 attributes
Low : Done executing SetAttributes
Normal : Output File: app.transformed.config
Normal : Transformation succeeded

Yay? Yay.

Conclusion

We have shown how Web.config Transformations can be invoked programmatically, outside the MSBuild process by providing a simple custom IBuildEngine realization; a technique that might prove useful for other scenarios as well.

We have applied that knowledge to enable automated testing of our transformations.

In my next post in this series, we'll continue our investigation, aiming to get rid of the whole, nasty detour around the file system.

You'll be self-signing with makecert from the Windows 7.1 SDK. The certificate tool is a single executable, specifically at %PROGRAMFILES%\Microsoft SDKs\Windows\v7.1\Bin\makecert.exe, per default. You'll need it - copy it to the server unless you already have the SDK installed on it.

Secondly, you've got a domain name, mydomain.com. Otherwise, just substitute the IP in the following instructions.

Without further ado; on the SERVER:

1. First, create the self-signed certificate with the regular cmd.exe:

   makecert -sk "mydomain.com" -ss My -sr localMachine -r -n "CN=mydomain.com, O=Jayway Stockholm AB, L=Drottninggatan 108 Stockholm" -a sha1 -eku "1.3.6.1.5.5.7.3.1"
   (flags ref)

   Substituting your own values.

   This command will create a certificate for Server Authentication and save it in the certificate store for the local machine.

   With powershell, get the thumbprint is for the generated certificate

   ls cert:\LocalMachine\my

   It'll look like this: 87B1C1818F1828958524A598B4131757EBAF4D35

2. Now, configure winrm (PowerShell needs escaping, so use cmd.exe):

   winrm create winrm/config/listener?Address=IP:8.8.8.8+Transport=HTTPS @{Hostname="mydomain.com";CertificateThumbprint="87B1C1818F1828958524A598B4131757EBAF4D35";Port="5986"}

   Again, substitute your variables.

3. Open port 5986, inbound TCP for all programs (and potentially restricted to your CI-server by IP), by going to Start > Administrative Tools > Windows Firewall with Advanced Security

4. Now, from the CLIENT, PowerShell:

   $so = New-PsSessionOption -SkipCACheck
   etsn -cn mydomain.com -Credential MyMachineName\YourUserName -UseSSL -SessionOption $so

   Answer the password dialog box, and you're in! Try running "whoami" to see the user name

That's it. Congratulations. If you stay at this for a small-scale deployment you have OK security on your communication with WinRM! However, do check out some more details:

More details

On makecert and how to switch certificate for one signed by a trusted certificate authority.

makecert switches

1. -sk says what the Subject Key name should be. This is like the 'user name for keys, i.e. a uniquely identifiable name for your key in the key store.

2. -ss is the store's name. It's most often either My or Root depending on what you're using your certificate for.

3. -sr is really just if it's a user-local store or the machine store that you are saving the key to. Has either value currentUser or localMachine.

4. -r is for self-signing which is what we want.

5. -sn stands for Subject Name and in this case our subject (what we want to authenticate and encrypt access to) is our domain.

6. -a stands for Algorithm - default is md5 which is not much more secure than a 4-digit pin code on a post-it taped to an old man's wallet. Ref: Attacking MD5, ref 2

Changing Certificates

Let's discuss what you do when you get a trusted-CA-signed certificate

Justification

So this works nicely for a while, until someone captures you laptop because you forgot it on the tube. Suddenly you can't revoke the certificate and you're in a world of pain of managing your keys (to be honest, this has never happened to me and this is already 1000x better than no authentication or basic unencrypted authentication!). Also, you grew a bit and have a few more servers to manage. Fine, let's upgrade WinRM's HTTPS certificate.

First, get the new one. I am personally involved in StartSSL.org, since I like the idea of free, community-driven crypto over the default server-taxation style type of certificates - this will also integrate finely with browser-based X.509 certificates if you're planning on adding an STS to your infrastructure and authenticating users with certificates rather than username/password combos

However, the world is a harsh place and we want real humans in front of bots to verify our identity for ultra security. We've used geotrust previously and have no real complaints.

Too long, didn't read

Use certreq.exe to generate the request, and install it on the server.

Once installed and visible through ls cert://localmachine/my in PowerShell, copy its thumbprint.

Then, you update the listener's binding (SERVER):

winrm set winrm/config/listener?Address=IP:8.8.8.8+Transport=HTTPS @{Hostname="mydomain.com";CertificateThumbprint="CB7434F35E3EA11D49D209F41BB16E96B472D30E";Port="5986"}

The set operation idempotently changes the listener's configuration to the hash presented inside the @{} hash syntax.

Now try it out (CLIENT):

etsn -cn mydomain.com -Credential MyMachineName\YourUserName -UseSSL

What on earth is etsn?

See for yourself! Get-Alias etsn in PowerShell

The previous entry, where I demonstrated how to use databound controls in xaml based webservice is available here.

The purpose of this post is to provide an overview of methods that will allow your application to seem to "run in the background" eventhough Windows Phone doesn't actually allow it.

These methods are not hacks, they are well-documented and intended for the purpose that I describe here. I just couldn't find a good overview for this purpose anywhere else, so I decided to try to summarize the documentation from msdn.

Overview

There are a number of techniques that can be used to make your application (seem to) do stuff, eventhough it is in the background:

• Tiles
• Tile schedule
• Push notifications
• Alarms and reminders
• Scheduled tasks
• Background audio
• Background file transfer

Tiles

Tiles are the big squares that make up the start-page.

An application can have to kinds of tiles:

• Application tile
  Created by user when he "pins" the application to the start screen.
  Each application can have exactly 1 application tile on the start screen.
  When the users taps the application tile, the application is launched to the normal startpage.
• Secondary tiles
  Created in code from the application.
  Each application can have any number of secondary tiles.
  A secondary tile can act as a deep link into the application, so it can bypass the normal startpage.

If you set one or more of the properties on the back of the tile, Windows Phone will flip back and forth between the front and back of the tile with a nice animation, making your app look alive.

In project settings you can set the title and background image of your application tile. If you want to set the count or any of the back content, you can do this programmatically when the application runs or by editing /Properties/WMAppManifest.xml in your project.

All properties of secondary tiles are set programmatically.

Fore more information on tiles see Tiles for Windows Phone 7.

 Tile schedule

You can create a(ny number of) ShellTileSchedule that will update your application tile or any of your secondary tiles.

The schedule can run once, a number of times or indefinitely.

The schedule can run hourly, daily, weekly or monthly.

When you create the schedule, you supply a RemoteImageUri, from which the phone will attempt to fetch a new background image for the frontpage of the tile.

You can not change anything else on the tile.

For more information on tile schedules see How to: Schedule Tile Updates for Windows Phone

Push notifications agents

Push notifications provide a way for a third party developers to push messages to the phone.

Types of push notifications:

• Toast
  a toast message is shown on the top of the screen. If the user taps the toast, the application is launched.
  
  Toast messages are not shown if the application is running.
• Tile
  Updates the application tile or any of the secondary tiles, with the supplied values. This could include (but is not limited to) a new count, or urls to new images.
• Raw
  Raw messages do not in themselves trigger any UI and are only delivered if the application is running.

Push notifications cannot start your application or trigger any processing except for download of images for the tiles.

For more information about push notifications see Push Notifications for Windows Phone

Alarms and reminders

By setting alarms and reminders, you can launch the phones default UI for alarm or reminder at a specified time (accuracy < 1 minute).

In short, alarms are meant to be loud and insisting (like an alarm clock) and reminders are more discreet (like the reminder for a calendar appointment).

For more information about alarms and reminders see Alarms and reminders overview for Windows Phone

Background agents

Scheduled task

Scheduled tasks associated to your application, allow you to execute code eventhough your application is not running. Scheduled tasks cannot have UI or launch applications, but may trigger tile update or toast notifications.

Scheduled tasks are restricted by requirements for memory usage, time until completion, available APIs, battery level, device limit on total allowed scheduled tasks etc.

If these restrictions are not met the task will not run or be terminated.

You have the choise between two types of tasks

• Periodic task
  - Runs regularly (every 30 minutes +- 10 minutes)
  - May only run for 25 seconds
• Ressource intensive task
  - Runs when certain conditions are met: external power+high battery, wifi, screen lock, no call etc
  - May run for 10 minutes

Tasks need to be rescheduled by the application every 2 weeks. They cannot reschedule themselves. If a task fails two consecutive times it will be be unscheduled.

The restrictions may cause a scheduled task to never be run.

For more information about scheduled tasks see Background agents for Windows Phone.

Background audio

An AudioPlayerAgent is a specialized background agent, that allows you to control playback of local or streamed audio through the Zune Media Queue eventhough your application is not running.

The restrictions listed for scheduled tasks do not apply to AudioPlayerAgents.

For more information about background audio see Background Audio Overview for Windows Phone

Background file transfer

Background file transfer allows your application to queue a number of up- or downloads that will be executed in the background, regardless of wether the application is running in the foreground. The system manages the queue and decides wether it will process the queued items.

There are restrictions on the number of requests per application and per device as well as the size of the files.

Upload files must not exceed 5 MB.

Download file size limits range from 20 MB to unlimited.  The limits are determined by the TransferPreferences property, which indicates the conditions that should be met, for the transfer to take place. The conditions are a combination of external power and/or wifi connection.

Background file transfers are automatically suspended and resumed based on wether the conditions are met.

For more information about background file transer see Background File Transfers for Windows Phone.

I was adding a transformation to adapt our NLog configuration for the various environments, when I ran into a problem. I'd added the following transformation, intended to set the log level to Warning on the given deloyment:

<nlog xmlns="http://www.nlog-project.org/schemas/NLog.xsd">
  <rules>
    <logger name="*" minlevel="Warn"
      xdt:Transform="SetAttributes(minlevel)" xdt:Locator="Match(name)"
    />
  </rules>
</nlog>

However, the original fragment kept being passed through without modification. I tried various modes of matching (incidentally, the online Web Config Transformation Tester is a good tool for such tinkering with transformations) to no avail, until I decided to try and remove the NLog namespace from the transformation:

<nlog>
  <rules>
    <logger name="*" minlevel="Warn"
      xdt:Transform="SetAttributes(minlevel)" xdt:Locator="Match(name)"
    />
  </rules>
</nlog>

And lo and behold; it worked.

That could have been the end of it, but I decided to dig a bit deeper, since we have the NLog schema in our solution and properly referencing it allows us to have IntelliSense within the web.config.

Eventually, as an experiment, I tried associating a namespace prefix with the NLog namespace at the top level, and then explicitly qualify the NLog elements with that prefix, rather than relying on specifying a default namespace on the NLog element:

<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform"
  xmlns:nlog="http://www.nlog-project.org/schemas/NLog.xsd"
>

  <nlog:nlog>
    <nlog:rules>
      <nlog:logger name="*" minlevel="Warn"
        xdt:Transform="SetAttributes(minlevel)" xdt:Locator="Match(name)"
      />
    </nlog:rules>
  </nlog:nlog>

</configuration>

Success!

Conclusion

Explicitly prefixing elements from foreign XML namespaces in config transformations must be described as a workaround, since semantically the first and the third NLog fragments are equivalent.

In spite of this flaw in the web.config transformations implementation, this workaround allows you to get the benefits of IntelliSense and better validation when you have the schema for NLog or any other foreign fragment available.

The problem

An app created before July 18th 2011 will not have the AssemblyInfo attribute NeutralResourcesLanguage and submitting an update to this app will give you the error:

Error 2003: The [NeutralResourceLanguage] attribute is missing on the entry assembly.

The fix

So, the fix for this is simple – add the attribute in AssemblyInfo.cs. (can also be done through selecting in a drop down in app properties)

[assembly: NeutralResourcesLanguage("en-us")]

The quirk

English it not always English. There is something called location groups. If you’re lucky – you’ll now pass through submission. If you’re not, you’ll end up with:

Error 1047: An update cannot support fewer languages than the previous app instance supported.

Whoah, what is this? For me, this was because I had stated the language as English (International) when submitting the first time. The rules are:

I learned this from the MSDN forum page helpful tips on language processes during app submission. To quote: If the parent instance was marked as “English (International)”, you need to use [NeutralResourcesLanguage(“en”)], if it was “English”, use [NeutralResourcesLanguage(“en-US”)] or [NeutralResourcesLanguage(“en-CA”)], in other cases use two-letter language name.

Summary

My final statement ended up as:

[assembly: NeutralResourcesLanguage("en-us")]

This bit me when submitting updates – I really hope this helps you avoid or find the problem quickly

Bye!

Why?

What the we also found was that applications using MEF for extensibility would also use it for internal composition, a-la IoC. From Nicholas Blumhardt’s blog.

Demo

First we need to download and reference System.ComponentModel.Composition.Web.Mvc.CodePlex.dll from codeplex.

In my last post we started off with a simple model that we scaffold. We’re going to use the same model here.

Scaffold Controller Pizza –Repository

When were done our controller has a constructor that takes IPizzaRepository. (Remove the parameter less constructor)

   public PizzasController(IPizzaRepository pizzaRepository)
        {
            this.pizzaRepository = pizzaRepository;
        }

Time to let MEF wire up this dependency. The convention for auto wire is based on namespace. The repository needs to be under a namespace path of .Parts. ex Pizza.App.Parts.PizzaRepository. So to get this working all we need is to move the generated repository to a Parts folder and adjust the namespace, and done!

Run the app and the dependency for PizzaController will be wired up. This is the simple scenario with no configuration just auto magic. There is also a way for you to configure this more in detail manually, check this BCL Team post for more on convention-based part registration.

The convention also works with namespaces with Parts in it. We’ll do a quick fix in the demo code. Lets make an quick interface for our EF context.

    public interface IPizzaContext
    {
        IDbSet<Pizza> Pizzas { get; set; }

        int SaveChanges();

        DbEntityEntry Entry(object entity);
    }

Then we fix the constructor of the Pizza Repository to match.

    private IPizzaContext context;

        public PizzaRepository(IPizzaContext context)
        {
            this.context = context;
        }

The we put the context in a Data folder in the Parts folder and fix the namespace to match. Run the app and all should be wired up. Neat!

Of course this is a simple demo, with no consideration of life time management etc.

Conclusion

A lot is happening around .NET web with ASP.NET MVC and WCF Web Api and the integration between the two. Interesting to see what “Simplifying the use of MEF in web applications is a core goal of the new release.” (post) could add to the 4.5 web story.

Enjoy!

The previous entry, where I demonstrated how to retrieve and data from a REST based webservice is available here.

In that blog post I created a fairly naive application, which retrieves som Json data and manually assigns values to some labels on screen.

In this post I will demonstrate how to use Visual Studios databound application template to create an application, that can display the contents of an RSS feed.

Background

If, like me, you suddenly have a profound interest in the subject of having twins, you might create an application that displays all the latest stories from http://www.having-twins.com/.

A more likely example could be that you have an existing website/community or similar and would like to create a simple mobile app from it. You could then create an RSS feed on your site and then create an RSS driven application.

Fortunately for the lazy programmer, Microsoft has created a couple of project templates, that make it simple to get started.

Simple Datebound Application

Since this is going to be an app that displays a list of news entries drawn from a single source, I will use the template "Windows Phone Databound Application".

Lets examine the project that was created for us. The main application screen has the basic Windows Phone 7 application layout, with the top third of the screen reserved for application and page name, and below there is a list of items, each with a title and a summary. When the users taps on an item, he is taken to the details screen.

Design datasource

First thing you might notice is, that the design view of the template application is filled with example data already:

Now, where did that come from? Well, if we examine the xaml for the view, we'll find that Visual Studio has added a d:DataContext declaration, that points to the file MainViewModelSampleData.

<phone:PhoneApplicationPage
    (...)
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    (...)
>

This sample data corresponds to the example viewmodels MainViewModel and MainViewModel.Items.
Using this metod you can define your own example data or use the autogenerated data to see what your views will look like when you design them in Visual Studio or Expression Blend. Expression blend even has the ability to generate data for you, once you have defined your custom ViewModel.

Secondly, the controls are bound to properties in the datamodel using standard xaml-based databinding syntax {Binding PropertyName}.

    <!--Data context is set to sample data above and LayoutRoot contains the root grid where all other page content is placed-->
    <Grid x:Name="LayoutRoot">
        (...)
        <Grid>
            <ListBox ItemsSource="{Binding Items}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                      <StackPanel>
                          <TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" />
                          <TextBlock Text="{Binding LineTwo}" TextWrapping="NoWrap" />
                      </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

Notice that the ListBox binds to Items, which is an ObservableCollection<ItemViewModel> on MainViewModel and each <TextBlock> within the <ListBox.ItemTemplate> then binds to properties LineOne and LineTwo on the ItemViewModel.

Runtime datasource

When you run your application, you'll notice that the running app displays another set of  data:

The "runtime one", "runtime two", etc data is default template data generated in MainViewModel.LoadData, which is called from MainPage.MainPage_Loaded.

/// <summary>
/// Creates and adds a few ItemViewModel objects into the Items collection.
/// </summary>
public void LoadData()
{
    // Sample data; replace with real data
    this.Items.Add(new ItemViewModel() { LineOne = "runtime one", LineTwo = "Maecenas praesent accumsan bibendum", LineThree = "Facilisi faucibus habitant inceptos interdum lobortis nascetur pharetra placerat pulvinar sagittis senectus sociosqu" });
    (...)
    this.Items.Add(new ItemViewModel() { LineOne = "runtime sixteen", LineTwo = "Nascetur pharetra placerat pulvinar", LineThree = "Pulvinar sagittis senectus sociosqu suscipit torquent ultrices vehicula volutpat maecenas praesent accumsan bibendum" });

    this.IsDataLoaded = true;
}

To keep this example as simple as possible, the only thing I'll change is which data we put into the items collection, so to download the RSS feed and use that data instead, the above lines are changed into.

/// <summary>
/// Creates and adds a few ItemViewModel objects into the Items collection.
/// </summary>
public void LoadData()
{
    var webClient = new WebClient();
    webClient.DownloadStringCompleted += webClient_DownloadStringCompleted;
    webClient.DownloadStringAsync(new Uri("http://www.having-twins.com/Twins.xml"));
}

private void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error != null) return;

    var reader = XmlReader.Create(new StringReader(e.Result));
    SyndicationFeed feed = SyndicationFeed.Load(reader);

    foreach (var item in feed.Items)
    {
        Items.Add(new ItemViewModel(){LineOne = item.Title.Text.Trim(), LineTwo = item.Summary.Text.Trim()});
    }
    this.IsDataLoaded = true;
}

This code downloads the rss-feed from http://www.having-twins.com/Twins.xml, parses it using SyndicationFeed (you must manually reference it from \Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\System.ServiceModel.Syndication.dll) and uses the Title and Summary texts from that feed to populate the LineOne and LineTwo properties of the ItemViewModel.

When you run the app in the emulator, you'll get a nice view like this (you'll need to set TextWrapping to NoWrap on the TextBlocks):

Starting a browser

Finally, the feed from having-twins.com provides a link to the article and not the actual article, so when you click on an item in the list, we should start a webbrowser and go directly to the article on the website.

First we need to add a property to store the item url on the ItemViewModel:

private Uri _uri;
public Uri Uri
{
    get
    {
        return _uri;
    }
    set
    {
        if (value != _uri)
        {
            _uri = value;
            NotifyPropertyChanged("Uri");
        }
    }
}

Next we need to extract the url and store it per item, so we'll change the line of code in webClient_DownloadStringCompleted to:

Items.Add(new ItemViewModel(){LineOne = item.Title.Text.Trim(), LineTwo = item.Summary.Text.Trim(), Uri = item.Links.First().Uri});

The final step is to start the webbrowser. This is done in MainListBox_SelectionChanged, where we replace the code that opens the details view:

// Navigate to the new page
NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" + MainListBox.SelectedIndex, UriKind.Relative));

with code that opens a browser:

var webBrowserTask = new WebBrowserTask {Uri = ((ItemViewModel) MainListBox.SelectedItem).Uri};
webBrowserTask.Show();

So now, when you tap on an item in the list, the browser will open and go directly to the article mentioned in the rss-feed.

Naturally, you could error handling, offline caching of content, splash screen etc. but that is beyond the scope of this demonstration.

This concludes this example of how to use the standard databound template to create an app that displays latest news (in form of an rss-feed) from a website.

The previous entry, where I demonstrated how to store and retrieve view states between application deactivation and activation is available here.

In this blog post I will demonstrate how to fetch data from a simple REST based web service and use it in an application, that many, many people have been waiting for.

Background

In Copenhagen there is a famous neon billboard from 1953 showing a hen laying eggs.

It just so happens that there is a REST api available, where one can query the status of the egglaying.

If you load

http://sevengoslings.net/~fangel/hvormangeaeg/eggs_laid/json

You will get the status in json format

{"eggs":105300654,"on":902667014,"currently_laying_eggs":false}

When I made the request,  the hen had been working for 902667014 seconds, it had layd 105.300.654 eggs and was not currently laying any eggs (it was not dark outsite).

The status is also available in xml, php-serialized and LOL (don't ask). The complete developers api is documented at http://sevengoslings.net/~fangel/hvormangeaeg/developers.

 The application

In the following, I'm assuming that you have either read the previous posts or have sufficient knowledge of how to create a new Windows Phone 7 based application.

I have created a new Windows Phone project using the simple "Windows Phone Application" template.

In the grid called ContentPanel, I've added a few TextBlocks to display the status and Rectangles to serve as dividers between the TextBlocks.

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="20"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="20"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" x:Name="txbHenAge" TextWrapping="Wrap"></TextBlock>
    <Rectangle Grid.Row="1" Width="300" Height="2" Stroke="White" Fill="White"></Rectangle>
    <TextBlock Grid.Row="2" x:Name="txbEggCount" TextWrapping="Wrap"></TextBlock>
    <Rectangle Grid.Row="3" Width="300" Height="2" Stroke="White" Fill="White"></Rectangle>
    <TextBlock Grid.Row="4" x:Name="txbEggLayingStatus" TextWrapping="Wrap"></TextBlock>
</Grid>

To retrieve the egg-laying status, I'll use the WebClient class, which uses a simple event -based system to make requests and receive responses. For more details on how to use the WebClient class, you might check out Accessing a REST web service quick start on create.msdn.com.

Sending the request

In my page constructor I'll add:

_webClient = new WebClient();
_webClient.DownloadStringCompleted += _webClient_DownloadStringCompleted;
_webClient.DownloadStringAsync(new Uri("http://sevengoslings.net/~fangel/hvormangeaeg/eggs_laid/json"));

First I create a new instance of WebClient. Then I provide a method to handle the DownloadStringCompleted event, and finally I call DownloadStringAsync with the URI that I want to load.

Handling the response

In the method handling the DownloadStringCompleted event I have to parse the received Json. For that purpose I'm using Json.NET.

First I create class to model the data I expect to receive:

public class IrmaHenStatus
{
    public int eggs { get; set; }
    public long on { get; set; }
    public bool currently_laying_eggs { get; set; }
}

Then I apply JsonConvert.DeserializeObject to the received Json:

void _webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    IrmaHenStatus result = JsonConvert.DeserializeObject<IrmaHenStatus>(e.Result);
    ...

Add a bit of error handling:

if (e.Error != null)
{
    // Do something meaningfull if the response was not OK

Add strings and a helper method to turn the number of seconds into human readable format:

string HenAgeText= "The hen has been laying eggs for {0}.";
string EggCountText = "During that time, the hen has layed {0} eggs.";
string NetworkErrorText = "A network error occured!";
string EggLayingOngoing = "The hen is currently laying eggs";
string EggLayingPaused = "The hen is currently not laying any eggs";

private string FormatEggLayingTime(long time)
{
    var seconds = time;
    var elapsedDays = (int) (seconds/(60*60*24));
    seconds = seconds % (60*60*24);

    var elapsedHours = (int) (seconds/(60*60));
    seconds = seconds%(60*60);

    var elapsedMinutes = (int) (seconds/60);
    var elapsedSeconds = seconds%60;

    string returnValue = string.Format("{0} days, {1} hours, {2} minutes and {3} seconds", elapsedDays, elapsedHours, elapsedMinutes, elapsedSeconds);
    return returnValue;
}

And we are now ready to update the UI

txbEggCount.Text = string.Format(EggCountText, result.eggs.ToString("N"));
txbHenAge.Text = string.Format(HenAgeText, FormatEggLayingTime(result.on));
txbEggLayingStatus.Text = result.currently_laying_eggs ? EggLayingOngoing : EggLayingPaused;

The final result may not be very impressive, but it does illustrate quite nicely how an app can display data retrieved from a REST based webservice.

Now, onto the topic of the hour: Beta submission.

Empirical timing results

I have during the past months submitted numerous apps to the Marketplace as beta – and come to the conclusion: (this probably will just be true for the near future AND the region I’m in – Sweden)

1) Beta submission takes 4 hours to complete – the app then becomes “published”

2) It takes another 8 hours before the app becomes available for download!

Error when trying to download right after submission completed

Before the 8 hours, hitting the deep link gives Marketplace error: 805a0194. An explanation of the error can be found in this StackOverflow response: it’s a 404 – not found.

Why is it like this? I don’t know. Probably propagation of the xap package onto download servers. Annoying – but more bearable once you see the system in it.

Go publish those apps!

First what is what.

Intro

JsViews, is the next generation of jQuery templates and data link, divided in two parts JsRender and JsViews. On github introduced as “Interactive data-driven views, built on top of JsRender templates”. For more info check out the blog Dancing with data by Boris Moore.

MvcHaack.Ajax is a “proof-of-concept prototype” by Phil Haack to ease access to mvc actions from javascript. Available as a nuget package.

Demo

To use this two in a update scenario we’re using a simple model of a Pizza.

    public class Pizza
    {
        public int Id { get; set; }

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

        public double Price { get; set; }

        public bool Available { get; set; }
    }

We’ll scaffold the model, using MvcScaffolding.

Scaffold Controller Pizza –Repository

 

So now we have the needed base to start using MvcHaack.Ajax.

We’ll edit the PizzaController to look like.

  public class PizzaController :  MvcHaack.Ajax.JsonController
    {
        private readonly IPizzaRepository pizzaRepository;

        public PizzaController(IPizzaRepository pizzaRepository)
        {
            this.pizzaRepository = pizzaRepository;
        }

        public IEnumerable<Pizza> List()
        {
            return this.pizzaRepository.All;
        }

        public object SaveList(List<Pizza> pizzas)
        {
            pizzas.ForEach(x => this.pizzaRepository.InsertOrUpdate(x));
            this.pizzaRepository.Save();

            return new { success = true, pizzas = pizzas };
        }

    }

First thing to note is that we derive from a base controller from the MvcHaack library. Second we don’t return ActionResults. Other than that there isn’t much strange things going on. We’re using injection of IPizzaRepository here, if you like you could keep the instantiation of the repository generated by the scaffolding template.

Ok, now how do we put this to use and gain ease of access to this controller from jQuery ?

First we’ll need to add a special route (code shown using an area).

context.Routes.Add(new JsonRoute("json/{controller}"));

The we’re off to the client side! In our view we now add;

<script src="/json/haack?json" type="text/javascript"></script>

This is where the magic of MvcHaack comes in to play. This will generate an access point to our actions. Please take a look in the generated script. Its simple but as often with simple - useful.

This gives us the following access points to our actions. Neat!

     $mvc.Pizza.List().success(function(data) {
                ....
     });


     $mvc.Pizza.SaveList(pizzasJson).success(function(data) {               ....       });

Now we’ll switch over to put JsViews to use. First we’ll need some scripts for JsViews.

    <script src="http://borismoore.github.com/jsviews/jsrender.js" type="text/javascript"></script>
    <script src="http://borismoore.github.com/jsviews/jquery.observable.js" type="text/javascript"></script>
    <script src="http://borismoore.github.com/jsviews/jquery.views.js" type="text/javascript"></script>

Then we’ll add a table to hold our pizzas and the a jQueryTemplate (JsRender) to display each pizza in edit mode. Then a save button.

<button id="sendJson">Send Json</button>

<table><tbody id="editPizzaTable"></tbody></table>

<script id="editRowTmpl" type="text/x-jquery-tmpl">
<tr>
    <td data-getfrom="[Name]" />
    <td>
        <input data-getfrom="[Name]" data-to="[Name]" />
    </td>
</tr>
</script>

Ok, this ain’t an ordinary template. It contains some JsViews binding specific attributes. This from and to attributes lets you track changes to your json object that we bound to template. Note that I only show Name here, you could add the other properties too.

And now how do we bind to this template ? Simple;

$("#editPizzaTable").link(pizzas, "#editRowTmpl");

The magic lies in the link operator here, that tells JsViews to track changes to our pizzas. Interested or confused ? Check out Booris samples to get the whole picture.

So all we need to do is tie this two things together. My demo module looks like.

if (!Jayway) { var Jayway = {}; }
if (!Jayway.Demos) { Jayway.Demos = {}; }

Jayway.Demos = lib(function () {
    var app = {
        pizzas: null
    };
    return {
        // Public functions
        init: function() {

            $mvc.Pizza.List().success(function(data) {
                app.pizzas = data;
                _render();

            });

            $('#sendJson').click(function() {
                $mvc.Pizza.SaveList(app.pizzas).success(function(data) {
                    alert(data.success);
                });
            });
        }
    };

    //Private
    function _render() {
        $("#editPizzaTable").link(app.pizzas, "#editRowTmpl");
    }
} ());

Conclusion

We looked at JsViews in a context where often Knockout or Backbone could be mentioned. I’ll hope you’ll follow the project to see in what scenarios this could be helpful for you.

MvcHaack.Ajax is a prototype with a question attached. Would you like to see something like this in ASP.NET MVC 4 ?

It’s simple and does not interfere with other library choices, so I think that it would be a neat addition.

Enjoy! 

The previous entry, where I created a simple app for collecting feedback on how a presentation went is available here.

Application life cycle

An obvious problem with the app created in the previous post is that it reset the counters every time the app is started.

This means that the counters are reset if the phone receives an incoming call, if it goes to sleep or if somebody accidentally presses the Start button. This is of course very inconvenient.

To address this problem, we need to look at application life cycle management. Here is a good throrough description.

The issue at hand is called tombstoning. Since Windows Phone doesn't allow apps to run in the background, our application process gets killed, when the application doesn't occupy the UI.

The user can then either start a new instance of the application (in which case the counters SHOULD be reset) or navigate "back" into the application (in which case the counters should NOT be reset).

So to resume at the point, where we left off, we have to save our state information, so it can be reloaded if the application gets reactivated.

There are two ways to save information, application state and page state.

Application state

Application state is the state of the application that is not related to a specific page in the application. It could e.g. be login information.

The application has a set of events that can be used to handle/save/restore application state:

// Code to execute when the application is launching (eg, from Start)
// This code will not execute when the application is reactivated
private void Application_Launching(object sender, LaunchingEventArgs e)
{
}

// Code to execute when the application is activated (brought to foreground)
// This code will not execute when the application is first launched
private void Application_Activated(object sender, ActivatedEventArgs e)
{
}

// Code to execute when the application is deactivated (sent to background)
// This code will not execute when the application is closing
private void Application_Deactivated(object sender, DeactivatedEventArgs e)
{
}

// Code to execute when the application is closing (eg, user hit Back)
// This code will not execute when the application is deactivated
private void Application_Closing(object sender, ClosingEventArgs e)
{
}

Page state

Page state is the state of a single page, typically UI-related such as content of textboxes or scroll-position of a scroll view.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    // this.State is a dictionary, where one can store page state information
    base.OnNavigatedTo(e);
}

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    // this.State is a dictionary, containing previously stored page state information
    base.OnNavigatedFrom(e);
}

These methods are called every time a page is navigated to or from, so if the application gets deactivated, you can store page state information in OnNavigatedFrom and restore it in OnNavigatedTo.

 Using Page state to save counters

In this case the counters are page-specific, so they will be treated as page-state information for now.

The following code will save the counter values during deactivation and restore them during reactivation. You might notice that there is room for some improvement here, if one were to refactor the code a bit, but I choose not to in order to keep the example as simple and illustrative as possible.

private const string StateHappyCount = "happyCount";
private const string StateNeitherCount = "neitherCount";
private const string StateSadCount = "sadCount";

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    _happyCount = (int)(State.ContainsKey(StateHappyCount) ? State[StateHappyCount] : 0);
    _neitherCount = (int)(State.ContainsKey(StateNeitherCount) ? State[StateNeitherCount] : 0);
    _sadCount = (int)(State.ContainsKey(StateSadCount) ? State[StateSadCount] : 0);

    base.OnNavigatedTo(e);
}

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
    State[StateHappyCount] = _happyCount;
    State[StateNeitherCount] = _neitherCount;
    State[StateSadCount] = _sadCount;

    base.OnNavigatedFrom(e);
}

When you test the application, be sure to distinguish between wether the app is deactivated or closed and wether it is reactivated or launched.

An app is closed, when the user backs out from the main screen with the back button. Otherwise it is deactivated (tombstoned).

An app is launched, when it is started from the start screen (regardless of wether it was previously deactivated), otherwise it is activated. The State dictionary is empty, when an application is launched.

The previous entry about installing the tools is available here.

 Idea for an app

The app I'd like to create is a simple tool, that one might use if one was conducting a course on, say, Windows Phone development.

The idea is that as people leave the room, the can indicate if they were satisfied with the presentation they just witnessed by simple pressing a red or green smiley on the screen of a phone, held by a person in the doorway.

The user interface would look something like this drawing:

Below each smiley is a number indicating how many people pressed each smiley.

Creating the UI

Unless you are creating games using XNA, you will be creating your userinterface using XAML. If you do not know XAML, then this is a good introduction to XAML on Windows Phone.

The following is the definition of the UI:

The top half of the screen is a graphical editor, while the botttom half is the XAML editor.

The UI of this application consists of three buttons filling the entire screen. Each button has a smiley (a character from the windings character set) and a count.

The buttons are arranged using a StackPanel with orientation=Horizontal, so they line up next to each other.

Below is shown the complete XAML code for this application:

<phone:PhoneApplicationPage
    x:Class="PhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="728" d:DesignHeight="480"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Landscape" Orientation="Landscape"
    shell:SystemTray.IsVisible="True">

    <StackPanel x:Name="TitlePanel" Margin="0,0,0,0" Background="Black" Orientation="Horizontal" >
        <Button Name="btnHappy" Background="Green" BorderBrush="{x:Null}" Padding="0" Width="242" Tap="btnHappy_Tap">
            <StackPanel OpacityMask="Black">
                <TextBlock Text="J" FontFamily="Wingdings" FontSize="200" />
                <TextBlock Name="txtHappyCount" TextAlignment="Center" />
            </StackPanel>
        </Button>
        <Button Name="btnNeither"  Background="Orange" BorderBrush="{x:Null}" Padding="0" Width="242" Tap="btnNeither_Tap">
            <StackPanel OpacityMask="Black">
                <TextBlock Text="K" FontFamily="Wingdings" FontSize="200" />
                <TextBlock Name="txtNeitherCount" TextAlignment="Center" />
            </StackPanel>
        </Button>
        <Button Name="btnSad" Background="Red" BorderBrush="{x:Null}" Padding="0" Width="242" Tap="btnSad_Tap">
            <StackPanel OpacityMask="Black">
                <TextBlock Text="L" FontFamily="Wingdings" FontSize="200" />
                <TextBlock Name="txtSadCount" TextAlignment="Center" />
            </StackPanel>
        </Button>
    </StackPanel>
</phone:PhoneApplicationPage>

The <phone:PhoneApplicationPage> part of the xaml is standard for a page in a Windows Phone application.

Coding the functionality

During initialization, the  counters on the UI should be initialized to 0.

When you click on a button, the Tap event occurs and the method defined on each button is called. The Tap method will increment the tap counter and update the UI. The complete code looks like this:

(If you're annoyed by the fact that I've only posted a picture of the code, so you cant copy/paste it: It is intentional. I'd like to force you to do a little bit of coding yourself

Testing the finished app

Finally, press F5, press the buttons and verify that the counters works like they should.

The emulator starts with the phone in portrait mode, but you can turn it using the button on the toolbar in the top-right corner:

You might also notice the strange numbers in the top of the screen:

These numbers are performance metrics that would come in handy if you were a game developer. For now, you can just ignore them. They only show up, when the emulator is in debug mode.

That really is all there is to it!

The purpose is both to help others get started but also to show how simple it really is, to get started developing for Windows Phone 7.

Where to find everything

The best online ressource for all-thing Windows Phone 7 I have found is create.msdn.com. Here you'll find everything you need to know/download.

Install

First thing you need is to download the SDK: download here. It will install everything you need, including Visual Studio 2010 Express if necessary. NOTE: If you already have Visual Studio 2010 without Service Pack 1, prepare yourself or a looooong installation process. The Service Pack 1 installer goes on for hours with no cpu-load or activity on the harddrive. No, it isn't broken or crashed. It really does work that way! Leave it overnight and you'll be pleasently suprised the next day.

Confirm that it works

Now that you've installed the Windows Phone SDK, it is time to spin up the bad boy and see if it works.

Start Visual Studio, select new project

Select the template "Windows Phone Application".

Press F5 to start debugging and wait for the emulator to finish loading your app.

Congratulations. You have now created your first application and started it in the emulator.

You now have all the tools necessary to start coding your very own app.

Next steps

You next steps will be to learn more about application development for Windows Phone 7 and think of an actual app to develop.

A good place to start is the quickstarts part of create.msdn.com.

One very interesting ressource in my opinion is this documentation on User Experience Design Guidelines, which will help you ensure your application looks and feels wp7-like.