Windows Phone 7 Wishlist #2

So I’ve been playing with the phone now for over two weeks now and having a great time showing it to my friends. They are shocked that it’s a Windows phone. I have two friends, in particular – one from Vancouver and one from Toronto – who were in town for this past weekend and are huge iPhone fans.

Between the two of them they’ve owned every iteration of the iPhone, including their now current iPhone 4. They put their phones down and were fighting over my Samsung Focus.

The one was quite miffed that the Rogers rep at the mall didn’t demo it for him as he just picked up his iPhone 4 three weeks ago.

Things I’ve Noticed

• When you give the home screen a little inertia to let it scroll, then repeatedly hit the Windows button, you can make the tiles skip and keep rolling from the start. This turned out to be a fun game for my kids, who have contests by pinning all the apps to the home screen and then seeing who can be the first to scroll-home-tap and give it enough momentum to get to the bottom of the list.
• I tend to hit the back or search buttons when I’m using the camera. I am so used to holding my other phone that had no buttons in that area that my fingers get in the way. This isn’t so much a WP7 problem as a Samsung Focus problem. It happens enough to be annoying but not so much that it’s a problem.
• Same thing with the volume and power, which are on exact opposite sides. You use the phone for leverage on the opposite side to push the button…with unintended results.

Things I’d (Still) Like to See

• Video sharing
• Zune Pass and music in the Zune marketplace for Canadians (I’ve already mentioned this, but it’s worth repeating)
• Updates to the Facebook app – (doesn’t really seem to do it’s work in the background)
• Some way to organize the apps list. I love the tiles, I love the way the other apps are off to the side, but what would really work is to carry forth the Metro metaphor and allow me to make a panorama out of the apps, with categories I can set. I wouldn’t even mind – at first – if I had to do it in Zune.

ASP.NET, MVC 3, the Razor View Engine and Google Maps

With the release of MVC 3, the updated project templates and the Razor view engine we have several new features and tool improvements at our disposal.  I wanted to see how hard it would be to get a quick mash-up of some ASP.NET goodness and the Google Maps API.  For this project, I’m going to walkthrough creating a new project in ASP.NET using MVC 3 in Visual Studio 2010.  You’ll need to have the RTM build of MVC 3 (which contains other ASP.NET enhancements, btw).

Getting Started

Once installed, it’s fairly easy to invoke the New Project dialog and select ASP.NET MVC 3 Web Application from the Web templates.  If you don’t see the project type listed, make sure that you are targeting the correct framework.

I named my project RazorMaps.  When we click ok, we are then presented with a bit of a wizard to select our options for the project.  This is a simple but good improvement over the previous MVC bits because it rolls up the wizard, test project creation and multiple templates (empty versus the “internet application”) and lets us select the view engine.

For simplicity sake here I’ve just selected an Empty template and no test project. 

Most of the project pieces feel familiar, in fact, there’s no noticeable changes to the MVC project at a root level and all the expected folders are there.

It’s nice to see that jQuery is added by default to the _layout.cshtml file, and to see that jQuery UI is included in the project.

As at my writing this, it’s also the latest bits for the jQuery library, and they have the vsdoc file updated (AWESOME! No more renaming the old one and replacing the library!), and there are other libraries in the mix as well (enabling unobtrusive validation, etc.).

A Simple Home Page

We need to get a view set up so that we have something to look at.  The base project doesn’t include the controller or the view we’re going to want, so we’ll start there.

Right-click on controllers, Add > Controller and name it HomeController.  We get our basic controller up-and-running and the code for our first ActionResult (our home page) is free:

Next, right-click anywhere in the Index method and select Add View from the context menu.  If the View Name is Index then you shouldn’t need to change anything else.  We’re using the Razor view engine and we already have our layout specified in _viewstart.

Press F5 to see your lovely work!

Hello, Google Maps

We have a couple of things that we need to do to get the basic, no-frills map up-and-running.  Though I worked from the simple tutorial on the Google Maps Javascript API page, I’m going to try to MVC this up as much as possible and look at some of the features of the Razor view engine.

We know that we need to add the Google Maps script to our page, and we can see from the tutorial that you also need to have a couple of styles.  Because we are using layouts in Razor and don’t want these on every page we create, we’ll take advantage of Razor Sections in our layout.

Open up _Layout.cshtml and add the following lines of code to the <head> portion of the document:

@RenderSection("Scripts", false)

<style type="text/css">
    @RenderSection("Styles", false)
</style>

We’re adding two optional RenderSections here.  This is very similar to creating content sections when using master pages.

Next, pop back into our index.cshtml file so that we can add the juicy bits to get the map loading.

Fleshing out the Page

Right at the top of the file, you’re going to want to add the following code:

@{
    ViewBag.Title = "MVC 3 and Google Maps";
}

@section Scripts {
    <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>
}

@section Styles {
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 80% }
}

The ViewBag is a dynamic expression and evaluated at runtime.  The “Title” property is filled into our layout template with the @ViewBag.Title expression. 

Next, we have our two sections; the first adds the map script to our page, the second applies and specifies the styles we need to get the map rendering correctly.

The rest of the page consists of:

• A div element (to host the map)
• An initialize function that sets up the map, and
• A jQuery shortcut to invoke the initialize function when the page is ready

Here’s the code:

<h2>Hello, Google Maps</h2>

<div id="map_canvas" style="width:80%; height:80%"></div>

<script type="text/javascript">

    function initialize() {
        var latlng = new google.maps.LatLng(40.716948, -74.003563);
        var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById("map_canvas"), options);
    }

    $(function () {
        initialize();
    });
   
</script>

And there you have it!  Press F5 again and the map loads.

Conclusion

If you have a good handle on ASP.NET MVC and you understood MasterPages, the switch to the Razor engine and templates is going to be easy and refreshing.  Integrating per-page code, via Razor section rendering, is straightforward and keeps our templates clean.

Updated script libraries and improved templates and a ton of feature enhancements round out this release nicely.

Built-In Authentication and Authorization Providers in ASP.NET with the MVC Framework

If you’re not already doing so, you should seriously be using the the built-in Auth & Auth in ASP.NET. While the subject is fairly well covered, I continue to get several questions and comments related to creating accounts, logging in and permissions and when talking with other developers. I am shocked at how many still roll their own authentication and authorization bits – often for no better reason than not knowing how great (and FREE!) the default providers are.

The Basics of Authentication and Authorization

There are two things you will need to do on most web sites with “account” functionality: identify existing users based on provided user names and passwords (authentication) and then express privileges to control access to protected resources (authorization).

These two facilities allow us to do some creative things, like showing different content to users when they are logged in, or to restrict and redirect requests based on the logged in user’s set of privileges.

In ASP.NET, Auth & Auth are Free

The first official, for-a-customer e-commerce web site that I notched on my belt was back in 1997. I spent days creating a system to log users in, store cookies (that I do not care to discuss security about!), store user information, track log-ins and the like.  Each page that I wanted to protect with security meant checking cookies for certain keys, looking those keys up, then checking against a static set of rules for permissions.  I spent weeks fixing the broken parts.  Because most of it was wrapped up in per-page scripts, I had to essentially recreate the whole mess when the customer decided they wanted to self-administer the storefront.

Today, so much of that mess is cleaned up for us.  I want to give you the steps to set up Authentication and Authorization in your next MVC web site.

1. Open Visual Studio 2010 and create a new ASP.NET MVC 2 Web Application.

Yeup.  We’re done.

Walking Through What’s There

If you are familiar with the MVC pattern the default project is quite straightforward, but not entirely trivial.  There is no magic here, just convention and after working with the project for a few minutes you should be able to orient yourself.

The three basic concepts of MVC – Model, View and Controller – are expressed as classes and .aspx pages (as well as .ascx for partial pages and templates).  As part of the convention, each part has it’s own directory, and in the View folder we have subfolders for each controller.

The Project Components

What is relevant to us today are the items related to user accounts. You can see that there is an AccountController for us as well as the classes we need to log a user on in AccountModels.  The Account subfolder in Views gives us four pages dealing with account creation, maintenance and sign on.  Finally, the Shared subfolder in Views has a LogOnUserControl that displays different content based on the authentication status of the user.

At this point, we’re actually still missing a couple of pieces.  If you drill into your App_Data directory you would find that there is no database to hold your account data.  Thankfully, we don’t need to do much to create one; namely, we just use the site.

The Registration Process

Press F5 to start debugging the application.  When the site opens up you’ll see the default master page and index in action:

Follow the Log On link up in the top right corner of the page.  This will take you to a page with a form to log on, but also a link to the registration page. Follow that, and create an admin account.

Once you’ve created your account you can return to the App_Data directory and see that the database has been created (you may need to click the show all button in the Solution Explorer).

The show all button looks like this:

Authorization In An Attribute

This is where the easy kicks in.

To add authorization to your application you can make use of the attributes available to us in the ASP.NET MVC Framework.  It is as simple as adding one line of code to your controller.

Let’s turn our about page into something that only authenticated users can view.

Perfect! The [Authorize] attribute describes the controller action as something that only users who have been authenticated can access.  And now, when we load up our site, if we try to navigate to the About page prior to logging in you will be redirected to the login page.  To prove this, start debugging the site and add /home/about to your URL.  You’ll see this:

After logging in, you can see the About page in all its empty glory.  In fact, because your request was originally for the About page, the default AccountController pushes you through to that page once you’ve authenticated.

Some MVC Sweetness

Views in ASP.NET MVC inherit from the System.Web.Mvc.ViewPage object and therefor expose some interesting objects for us that we don’t have to work for to use.  Taking advantage of this fact allows us to shortcut to some features right in our views.

For example, the User object on our ViewPage allows us to test for authenticated users:

Or, we can test to see if they belong to roles in the ASP.NET membership/role provider:

While this can be super handy, it’s important to consider coding practices and whether or not your logic for such elements should be in your controller or your view.  This post will not enter that conversation, but it’s important to note that a similar roles-based approach is just as easy inside your controller:

Oh Yeah, About Those Roles

The easiest way to get roles going would be to navigate to the ASP.NET Configuration site.  You can enable and define roles from there:

This built-in administration tool simplifies the process of enabling roles on your site, adding existing users to roles and/or creating roles and bringing in existing users.  It also allows you to add a role to a user as you create them.  It’s tidy and functional, but doesn’t have many bells and whistles.

This isn’t the best for a production environment as the ASP.NET Configuration site is not deployed when you publish your app.  One solution would be to use a community-based console to help administer the site post-launch such as this one.

Some Reading Homework

I recently had the privilege of working with one of the authors of this book (Stephen Walther) and I can attest to the fact that these guys know this stuff inside and out.

ASP.NET 4 Unleashedcontains a ton of great information on using and abusing the .NET Framework when working on web applications, including a section devoted to the membership framework.

Conclusion

We’ve come a long way in web development.  Tasks that used to require “rolling your own” and a day or a week of dedicated time can now be reduced to simply clicking on “New –> Project”.

The beauty in that is that way that we can fully customize those bits, integrate them with our existing auth/auth stores and more.  We can choose our view engine (classic ASP.NET, MVC or now Razor).  We can integrate jazzy Ajax features through the fully supported jQuery libraries and its good-looking sister, jQuery UI.

It’s a good time to be a web developer.

Windows Phone 7 Wishlist

I have the Samsung Focusand am quite happy with the phone.  I’ve been using it for just about a week.  The device is the device and can’t change; it’ll be what I use for the next two years or so unless WP8 comes out and I can get a hardware upgrade.

However, this is still a first-generation iteration and there is room for improvement. Here are some things that I would like to see as far as changes to the platform go:

• Give Canadians Zune Music in the Marketplace, as well as Zune Pass.
• Build a way to keep the elegance of differentiation with email account notifications (on the lock screen) but unify the inbox. I am going to prototype what I would like to see here.  I want just one email tile on my home screen.
• Copy and paste, as well as better cursor placement.
• Let Canadian customers buy music in the Zune Marketplace, and let us purchase a Zune Pass.
• I want a first-party app for Live Messenger that runs in the background and runs as quickly as email and text messenging.
• Enable uploads for video to my Live account, Facebook and YouTube.  Give me an easy way to share (like, “Post to YouTube and Share on Facebook”).  Give me the option to only do this when I’m on WiFi (but to queue it when I’m not).
• Finally, make music from Zune available for purchase to Canadian customers (and enable Zune Passes in Canada, while you’re at it!).

The first update to WP7 is rumored to be coming in the next few weeks.  I am looking forward to seeing what on my list makes the cut.

Got My Phone–Samsung Focus

It took a bit of wheeling and dealing – I had three cell phone contracts for my wife and I – but I was able to lock down this little beast of a phone this weekend.

I had a WinMo 6.5 phone with another carrier, and two flip phones with Rogers here in Canada.  I had to dump my other contract, which cost me $150, and then pay $99 to upgrade my flip phone to the snazzy little Windows Phone 7 number from Samsung.

Though I am a software developer, I am writing this review as a user and trying not to pay attention to the elements I would normally focus on as someone in the development camp.

First Impressions

I have to admit: I’ve long been been a WinMo user, so I had really low expectations going into this phone.  When I picked it up and tried it at the booth in the mall I was looking for something not to like.

I got locked into my last smart phone contract before the iPhone had any decent corporate email and calendaring support (and those who follow know my history with Apple anyways) so my choices back then were quite limited.

But I was refreshingly surprised.  The interface was speedy, swipey, flippy, crisp, and that really lured me in.  I entered into Operation Crapdump: getting rid of my old WinMo 6.5 device and jumping into the new now.

The Device Itself

This is a lightweight phone, easy to hold.  I have big man-hands, and it is on the upper-end of wide when you’re holding it to talk, but it’s no wider than an iPhone.  I’ve only had it for a couple of days, but it has not been awkward to hold, use or store in my pockets.

The battery judgement will have to come later, as I’ve only had the phone for a few days, but it’s lasted now almost 90 hours without much charging (I charged it when I got it, then had it plugged in a couple of hours while I was pooting around in Zune).

The screen is great – big, sharp, contrasty, good colors.  My wife thinks her iPod Touch looks like a relic next to this.  When we pulled up the same photos on Facebook and held the devices side-by-each, the difference was startling.  Black is black, white is white and the colors POP off the screen.  I absolutely love how good this phone looks.

The touch experience is different than iPhone/iPod.  I haven’t used it enough to say I have a preference either way, but I don’t mind it.  It’s less ‘pressy’ than iPhone and more ‘tappy’.  You also get a little vibration from the device to confirm button presses taps.

The camera on the device takes reasonably good pics and I love having the video handy as well.  My HTC Touch Diamond took “okay” pictures, but the video the device captured wasn’t worth the boot time of the video camera on the device.  I already have a Grammy-winning prize video of my daughter off the Focus, and I’m about as un-biased as they come. ;o) 

I’ve heard that on some other brands running WP7 that the camera and screen aren’t that great, but the Focus really shines well here for a 1st generation phone.

My only complaint is more related to my previous phone, which trained me that the manufacturer logo is at the bottom of the screen.  Every time I pull the thing out of my pocket it’s upside down and I’m looking for the power button before I realize what I’m doing.

The Windows Phone 7 Platform

I have to say that I am really impressed with what I’ve seen, with a few caveats.  The minimum specs and the way the framerate is locked at 60fps will make any phone on the OS nice and snappy.  The very quick boot (though nearly irrelevant in my always-on world) is such a difference from the 1m30s + boot times I’m used to.

Back to the camera quickly…I think it was a really good choice to make some vendor-level requirements and have the device respond quickly to a held-in camera button.  If you’re not familiar with this feature, basically, whatever state your device is in (locked, phone call, playing a game) if you press and hold the camera button for about 2 seconds the camera flips on.  Again, less than 4 days in, but I’ve used this feature half a dozen times already. 

The look-and-feel of the phone is driven by the Metro UI and a custom font that is reportedly inspired by Verdana.  Everything is flippy and slick.  Things peel away in 3D and slide around nicely.  There are some great design elements here.

Pinning is great and can’t really be explained without some video.  This is the feature that lets you put important people, apps or deep links onto the home screen.

The home screen itself I’m a little mixed on.  At first it was great…there was enough there to be functional and show off push-enabled tiles and the likes, but as I pin more and more things, it’s getting a little long.  You can leave apps off the home screen and just in the apps page (a right-to-left swipe of the home screen) but with only the two options I think there is definitely room for some organizational improvements.  My hope in this regard is that they are able to maintain the truly awesome Metro interface.

Finally, the apps.  They’re coming, but there’s not a lot there yet.  I’ve picked up a few and will post on those later.  The Marketplace is easy to navigate and uses the integrated search button on the phone, but I think it’ll also need some improvements when the volume of apps goes up.

The Ecosystem

I get it now.  Xbox changed.  Messenger changed.  Zune changed.  And now, they all look the same as Windows Phone 7.  Though I hadn’t really used Zune too much prior to getting the Focus, I knew exactly what to do just by loading it up. 

It is very natural to move between these devices and applications and I think that Microsoft has done a better job at this than any other vendor.  Apple, for example, has their Apple TV, their iOS stuff and the Mac platform, and it doesn’t feel the same at all. iTunes feels nothing like the iPod touch or iPhone.  This is where the unified UI really works for Microsoft…Zune looks like it could run on the WP7 phones.  Apparently the other vendors have noticed, too, as Apple preps to overhaul Mac OS to look more like iOS.

The Zune software is slick and easy to use.  In a few minutes I had podcasts and playlists set up.  I burned several CDs and set up wireless syncing.  I also browsed through some movie rentals, was able to view my points balance and check out apps in the Marketplace.

Using Windows Live ID for me worked really well as I’m an Xboxer and I use Live Messenger and Hotmail.  With Xbox live and Zune and the phone and everything synced to the cloud, I’m really liking the experience so far but have yet to push it to its edges.

Things I don’t Like

“Hello?  Microsoft?  Yeah, this is Canada calling.  Please give us the Zune Music Marketplace.  And Zune Pass. Please.”  And I’m very serious about this.

That’s right, fellow Canucks, no music store. Lamers to the max extreme. 

Again, one thing I’m kind of torn on is messaging all in one place.  I would also like to see a unified inbox, though I do like the way I am able to differentiate between email accounts on the home screen.

Conclusion

This phone and platform is a different experience.  It doesn’t behave like an Android or an iPhone.  If you go into something expecting it to work like something else you know – as though the other one was better simply by definition of its creation – you will never be impressed with other items in the same commercial space.  You will also be labeled a fan boy.

I am pleasantly surprised by this device.  I am happy to be a (relatively) early-adopter but I am looking forward to the updates and some of the features down the road.  My hope is that Microsoft rolls out features and updates early and often and continues to accept consumer feedback.

I suspect that any non-smartphone user would be excited about this phone, as well as any of the early iPhone users.  My iPhone friends and non-smartphone users are all really impressed with the phone (especially the screen).

If it is time to upgrade, you may wish to wait until later in the year, but if you pick up the Focus right now I don’t think you’d be disappointed.  If you use Hotmail, Live and have an Xbox, you’ll be geekin’ out.