For more information on the Microsoft BizSpark program, visit http://www.microsoft.com/BizSpark/.

Fueling Your Application’s Engine with Windows Azure Storage via MSDN Magazine: http://msdn.microsoft.com/en-us/magazine/ee335721.aspx

Those of you who have been reading my blog for a while know that I’m not always just about .NET – I’m a pretty huge iPhone guy as well. In fact, I’m a fan of all technologies and programming languages that don’t suck, regardless of who makes them or on what platform they run.

At one point I was actually thinking about writing a book for .NET developers to learn Cocoa but other plans, time constraints, and life issues all got in the way. I have posted countless times comparing the worlds of Cocoa and .NET and have twice presented at Apple’s WWDC comparing both the desktop and mobile programming environments of Apple and Microsoft. So you can imagine the raw, unfiltered, pure geek joy that coursed through my veins when I heard about Monotouch, a programming library coupled with an IDE (MonoDevelop + Interface Builder) that would let me write my iPhone applications using C# and the .NET Framework (the mono version).

To get Monotouch working you’re going to need the following:

• A Mac.
  • Intel
  • Running Leopard or Snow Leopard
  • Decently fast (a current Macbook Air is about the slowest I can tolerate for compilations)
• Monotouch Framework (can download the eval free)
• MonoDevelop – IDE for mono and monotouch, for the Mac, NOT Windows or linux!
• $500 for the professional edition, $3500 for the enterprise edition. You can evaluate for free, but you can’t put a monotouch app on an actual piece of hardware without forking over the duckets.

Understanding all of the plumbing of how this works requires a time investment that I just can’t put forth right now. So, for now, assume that little magic elves within the MonoDevelop IDE perform post-build tasks on your compiled mono application that can then convert it to native iPhone code. When you’re working with C# classes like UITableViewController, all you’re really doing is telling the post-compile steps that your final C type in the native app will be a UITableViewController. It’s smoke and mirrors, but it’s damned powerful smoke and mirrors.

So what’s it like to build a monotouch application? It’s actually pretty similar to building a regular Cocoa Touch application. You create a new project in monotouch (there are several really good “hello world” tutorials available on monotouch from their site). Drag UI elements into your XIB using Interface Builder and, here’s where some of the magic starts, create outlets and actions and link your C# code to your interface builder UI elements. I am pretty sure portions of my brain liquified when I first created a C# view controller and ctrl-dragged to link UI actions to the controller.

This is where many of my avid .NET readers are going to think I’ve simply flipped and gone off the reservation…

Despite the fact that I can now quickly and easily create C#/.NET classes and use them to power my iPhone applications, which gives me access to things like WCF and the absolutely, definitively better XML libraries of .NET… I am not going to be using monotouch for real application development.

ok, I’ll pause here to let you all stop shouting, “OMFGWTFTRAITOR!!!1″

A little history: I learned C# in 2000 on .NET 1.0. I published my first book on the .NET Framework in 2001 and have been writing blogs, books, articles, and flaming truckloads of code on this framework for the past 9 years now. If there ever was a human being on the planet who should by all rights reach out to and lovingly hug the Monotouch box – it should be me. However, all of that time and experience has made me wary of layers of abstraction. I learned how to write Cocoa for the Mac when Leopard was in beta. I found the learning curve steep, and painful. I felt like I was being deprogrammed – but it was a good thing. If you remember my blog posts from that era, you’ll recall that I felt like I was growing as a programmer and architect. My skills in .NET increased dramatically as a result of the enlightenment that I found while learning Cocoa and Objective-C. My .NET skills also increased (though not as dramatically) when I suffered through writing enterprise Java applications.

I literally spent hours trying to write down the list of reasons why I didn’t want to use Monotouch and some of them were extremely valid reasons concerning the fact that monotouch is always going to be behind the leading SDK revision from Apple and blah blah yadda yadda… The bottom line is I just love the way it feels to write Objective-C and Cocoa code. Period.

Bottom line:

[self heart:Cocoa];

That said, there are a thousand reasons for people to use monotouch, including the ability to re-use .NET (mono) code across the client (iPhone) and server as well as to allow .NET developers who have absolutely no experience with Cocoa or Objective-C to quickly and easily get rolling building iPhone apps. In the real world we don’t always have the luxury of learning new languages and environments – if you’re a .NET developer and your boss tells you write an iPhone app for your company and to do it in 3 weeks or you’re fired – you’re going to use Monotouch (and so would I). I have the luxury of knowing both .NET and Cocoa and so I can pick and choose. Knowing both, I’ll be writing my iPhone apps in Cocoa and the back-end servers that support them in .NET.

Resources

• Windows Azure Platform
• Amazon Web Services
• Azure TCO Calculator
• Amazon AWS Monthly Calculator

Recently, I was working on a website redesign project for a client.  They wanted to keep some of their product catalog, shopping cart and back-end pages, but redesign their homepage while keeping the catalog’s borders and styles.  The existing design had a drop shadow around the main content along with several borders.  I designed a new CSS-based layout for the page, and instead of trying to modify all of the existing drop shadow and border graphics to fit, I decided to use jQuery and the LiquidCanvas plugin to keep the page size small while retaining all of the visual effects.

LiquidCanvas can be used to draw all sorts of graphics without any actual images, such as drop shadows, rounded corners, gradients, borders, and shapes.  The developer’s demo page shows a lot of examples.

I’ve seen a lot of forum posts discuss how the plugin looks great in Firefox and IE8, but fails to render in IE6 and IE7.  If you are here looking for a LiquidCanvas fix for IE6 and IE7, it’s included in this post.  You’ll kick yourself at how easy the fix is.

Getting Started

To start using LiquidCanvas in your site, download jQuery and the LiquidCanvas plugin from their respective sites.  Copy the scripts to a location that your website can access (I’m using a subdirectory called js in my examples), and then add the following lines to the header section of your HTML:

[code language="html"]<head>
...
<script type="text/javascript" src="/js/jquery-1.3.2.js" </script>
<script type="text/javascript" src="/js/liquid-canvas.js"</script>
<script type="text/javascript" src="/js/liquid-canvas-plugins.js"</script>
...
</head>[/code]

Most jQuery scripts are loaded using the $(document).ready() function.  However, IE6 and IE7 choke on this with LiquidCanvas, so you need to use $(window).load() instead.

To start drawing, use a jQuery selector to select a div or other container.  Call the liquidCanvas() function on your selection and pass in parameters to add your visual effects.

To produce a simple rectangle with a border:

[code language="javascript"]$(window).load(function() {
        $("#container").liquidCanvas(
            "border => rect");});
[/code]

IE6/7 Fix

Even when using $(window).load(), IE6 and IE7 won’t render the effects.  The fix for these browsers is incredibly simple – you simply need to add one more script that’s included with the LiquidCanvas package:

[code language="javascript"]
<!--[if IE]
<script type="text/javascript" src="/js/excanvas.js"</script>
<![endif]-->
[/code]

That’s it.  The [if IE] statement that wraps the script include tells IE to load the script while all other browsers simply ignore it.  This one line makes your visual effects fully cross-browser compatible.  Now that we’re up and ready to go, let’s play around with some examples.

Examples

To fill a rectangle with a color (we used blue, but gray is the default if you don’t specify one), you can use:

[code language="javascript"]$(window).load(function() {
        $("#container").liquidCanvas(
            "fill{color:#39c} => rect");});[/code]

To pass in multiple parameters, you can use an array.  To fill a rounded rectangle with gray and add a drop shadow:

[code language="javascript"]$(window).load(function() {
        $("#container").liquidCanvas(
            "[shadow fill] => roundedRect");});[/code]

Even in an array, you can set your colors and other options.  Here, we’ll add a semi-transparent gradient and a blue border to a rectangle:

[code language="javascript"]$(window).load(function() {
        $("#container").liquidCanvas(
            "[gradient{from:rgba(255, 255, 255, 0.2); to:#888;} border{color: #00f}] => rect");});[/code]

To create the gray drop shadow and light gray border around the white main content container on my client’s site, we used the following snippet:

[code language="javascript"]$(window).load(function() {
        $("#container").liquidCanvas(
            "[shadow{color:#333} border{color:#eee} fill{color:#fff} ] => roundedRect{radius:5}");});[/code]

Creating Your Own Effects With Custom LiquidCanvas Plugins

If you really want to dive in, you can create your own effects by writing your own LiquidCanvas plugins.  On the demo page, for example, the final example uses a user-written effect called “Mandala” to create a circular background effect.

[code language="javascript"]
$("#container").liquidCanvas(
            "fill => rect, mandala => ([border{color:#fff; width:1}] => roundedRect{radius:10})");[/code]

To accomplish this, the author uses the .registerLiquidCanvasPlugin() function and writes the custom painting code:

[code language="javascript"]$.registerLiquidCanvasPlugin({
 name: "mandala",
 paint: function(area) {
 var opts = this.opts;
 var ctx = area.ctx;
 var min = area.width > area.height ? area.height : area.width;
 var trans = min / 2;
 var rad = trans / 3;
 for (var i = 0; i < 10; ++i) {
     area.save();
     ctx.translate(area.width / 2, area.height / 2);
     ctx.rotate(i * 2*Math.PI / 10);
     ctx.translate(trans - rad, 0);
     area.width = 10;
     area.height = 10;
     this.action.paint(area);
     area.restore();
     }
   }
 });[/code]

There several things to focus on in this function.  The key variable is “area.”  By modifying properties like the height and width of the area variable, you can manipulate what gets drawn.  The “ctx” variable, which is really the area.ctx property, allows you to perform other functions on the drawing such as translating (moving where the image gets drawn) and rotating. The best way to see how this plugin works is to modify various things in the function and see what happens to your drawing. Once you get the basics down, you’ll be well on your way to creating your own custom effects.

Conclusion

There are lots of possibilities with this plugin to create great visual enhancements while keeping your page size small (no images!) and cross-browser compliant.  Add it to your toolbox today!

The Visual Studio project templates included with the Azure Tools provide a quick way to get started with a cloud-hosted web application. Unfortunately, it only supports classic ASP.NET web projects by default. This tutorial will get you going on deploying an ASP.NET MVC web application to Azure.

PreRequisites

To get started, you’ll need to have the following tools installed on your machine:

• Microsoft Visual Studio 2008 (or Visual Web Developer 2008 Express Edition)
• SQL Server Express (or SQL Server 2008)
• Windows Azure Tools for Microsoft Visual Studio (July 2009 CTP)
• Windows Azure SDK (July 2009 CTP) (this is included in the Visual Studio Azure Tools installation)
• ASP.NET MVC 1.0

Installing the Azure SDK will install the two important local development components – Development Fabric, which simulates the cloud on your local machine, and Development Storage, which simulates the Azure Storage components (table, blob, and queue) using SQL Server.

In addition to the listed components, you will reuse code from the Azure Samples. These are included with the Azure SDK in a samples.zip file, which can be found in the installation directory (C:\Program Files\Windows Azure SDK\v1.0 by default). Unzip this file to a folder on your local machine, such as C:\Azure Samples.

Create Your Cloud Project

To get started, start up a session of Visual Studio 2008. If you are using Windows 7 or Vista, make sure you start it with administrator privileges or you will run into permission problems later:

Click File -> New -> Project and select “Cloud Service” from the list of Project Types on the left. Then choose “Cloud Service” from the list of templates, give your project a name, and click OK.

You’ll need to choose one or more Roles to add to your cloud service. Roles are the basic managed-code, scalable components in an Azure-based application. Web Roles are web applications accessed by HTTP or HTTPS endpoints, while Worker Roles are background-processing applications with no external endpoints (although they communicate with storage and other internet-enabled services). The third option, FastCGI, allows developers to easily incorporate third-party programming languages into the Azure-enabled application. Since we will be writing an ASP.NET MVC application accessed over HTTP, add a single ASP.NET Web Role and click OK.

Let’s take a look at the Solution Explorer. You’ll see two projects have been created from the template: the Cloud Service project, consisting of two Azure configuration files and the WebRole association; and the classic ASP.NET project named WebRole1.

As basic as it is, this simple solution is a fully-functional cloud-based web application. Hit F5 to launch the debugger instance. If all goes well, the Development Fabric will start in the background (you should see an icon for it appear in the system tray) and your default web browser will launch to your local cloud-enabled application (usually something like http://127.0.0.1:85).

If you get some funky errors messages, make sure your CloudService project is selected as the StartUp Project. It should be the bold name in your list of projects in the Solution Explorer. If it’s not, right-click on the project name, choose “Set as StartUp Project” from the menu, and try again.

Change Your Web Project to an ASP.NET MVC Application

Now we need to change our Web Role to an MVC application. First, remove the ASP.NET application from the solution by right-clicking the project name in the Solution Explorer window and selecting “Remove.” Next, add a new ASP.NET MVC project by right-clicking on the solution name and selecting Add -> New Project. From the list of project types on the left, choose “Web” under the “Visual C#” category. Select “ASP.NET MVC Web Application” from the list of installed templates. Give your web project a name, and click okay. A unit test project will be created by default, although we won’t utilize it in this tutorial.

Attempt to build the solution, or hit F5 to start the debugger. You’ll get an error: “A Web or Worker project is required but could not be found.” The CloudService project needs to know what web application is associated with the Web Role; without it, it doesn’t know how to configure the HTTP endpoint. In the solution explorer, the Roles folder in the CloudService project will display “No project associated (WebRole1)”. To create this association, right click on that role, select Associate with -> Web Role Project in solution. In the dialog that appears, choose your newly added ASP.NET MVC project and click OK. The solution explorer will now show the MVC application under the Roles subfolder.

Hit F5 to start the debugger. Looking good! Your MVC application is now running on your local Azure fabric. Although the application is up and running, try clicking on the “Log On” link in the top right corner of the page. Try to register for an account. Uh oh. You’ll get an exception indicating the membership provider couldn’t connect to the database.

While we could modify the connection string in our web.config to configure the ASP.NET SQL Membership Provider, this would completely defeat the purpose of deploying our app to the cloud. Instead, we’ll utilize Azure Storage to enable the membership functionality.

Configure the Membership Provider

The Azure SDK ships with great samples that demonstrate the various features of Azure Storage. These samples include two incredibly useful projects: StorageClient, a wrapper around the Azure Storage functions, and AspProviders, which implement the Membership, Profile, Role, and Session State Providers using Azure Table storage. We’ll utilize these two projects to enable the remaining features of our basic MVC application.

Navigate to the folder where you unzipped the Azure samples and go to the StorageClient\Lib directory. Select everything in this folder and copy it to the clipboard. Create a new folder in your solution folder and name it StorageClient. Paste all of the files in your clipboard to this new folder. Repeat the process for the AspProviders folder – copy all of the AspProviders\Lib files to a new AspProviders folder in your solution directory.

Add these two new projects to your solution. Right-click on the solution and select Add -> Existing project. Choose the StorageClient.proj file from your solution directory’s newly-created StorageClient folder. Repeat the process for the AspProviders project.

At this point, you should have five projects in your solution:

• AspProviders
• AzureMVCSample (StartUp project)
• <Your MVC web project>
• <Your MVC web project>.Tests (if you selected to create unit tests)
• StorageClient

Looking good? Great. We have a few last steps before we can utilize the Azure-enabled membership provider. First, we need to tell our MVC application where the provider exists. To do this, add a reference to the AspProviders project in your MVC application.

We also need to configure Azure storage to work on your local machine. First, you need to configure the required keys in your cloud service configuration files: ServiceDefinition.csdef and ServiceConfiguration.cscfg. The StorageClient project has three configuration settings that it uses to connect and authenticate to Azure Storage. In ServiceDefinition.csdef, add the following three setting keys to the ConfigurationSettings node:

<ConfigurationSettings>
<Setting name="AccountName" />
<Setting name="AccountSharedKey" />
<Setting name="TableStorageEndpoint" />
</ConfigurationSettings>

Then, in ServiceConfiguration.cscfg, we need to set the values of those settings. For simplicity’s sake, we’ll use the same values used by the Azure sample projects. If you were to deploy this solution to the cloud, you would need to change these values to match your production (or staging) configuration.

<ConfigurationSettings >
<Setting name="AccountName" value="devstoreaccount1"/>
<Setting name="AccountSharedKey" value="Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw=="/>
<Setting name="TableStorageEndpoint" value="http://127.0.0.1:10002"/>
</ConfigurationSettings>

Now, we need to initialize our local SQL Server with the required tables so we can simulate Azure Storage. There are two ways to do this. If you are running SQL Server Express, you can right-click on your cloud service project and select “Create Test Storage Tables.” If you are using SQL Server 2008, you will need to use the DevTableGen command-line tool. From an Azure Command Prompt (found in the Start Menu), run the following command:

devtablegen <path-to-your-cloud-service-assembly> /server localhost

At this point, your Azure configuration is ready to go. All we have left is to configure your application to use the Azure Storage Membership provider. In your MVC application’s web.config file, scroll down to the membership section. The default configuration will be using the SqlMembershipProvider. Delete that line, add your TableStorageMembershipProvider, and set the defaultProvider property as shown below:

<membership defaultProvider="TableStorageMembershipProvider">
<providers>
<clear/>
<add name="TableStorageMembershipProvider" type="Microsoft.Samples.ServiceHosting.AspProviders.TableStorageMembershipProvider" description="Membership provider using Azure table storage" applicationName="AzureMVCSample" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" minRequiredPasswordLength="1" minRequiredNonalphanumericCharacters="0" requiresUniqueEmail="true" passwordFormat="Hashed"/>
</providers>
</membership>

Save the file, hit F5, and try registering for an account and logging on. All of the basic site features should work – enjoy your Azure-hosted MVC application!

Next steps

While it may feel like you’ve put in a lot of work just to get a basic “Hello World” site up and running, you are now in a very good position to easily extend your application and quickly add features that utilize Azure functionality. The StorageClient project allows you to easily access Table, Blob, and Queue storage, and all of your initial configuration to get that up and running has already been completed. Similarly, you can now implement the Role and Profile providers just by modifying the web.config file in the same way as the membership provider – no extra configuration required.

The sky (the cloud?) is the limit from here – explore the features of Azure and how you can integrate them into your MVC application!