Tuesday 28 February 2012

How do Developers Benefit from Windows Azure?

Before you learn about what the Windows Azure platform is, you should be aware of how —as a developer— you can benefit from the Windows Azure platform.
  • Spend more time coding, less time managing hardware. The Windows Azure platform provides the machines, rack space, switches, and connectivity. In contrast to the traditional on-premise development model, you now spend less time managing the hardware of your infrastructure. Using the Windows Azure platform, you have more time to spend developing applications
  • Spend more time coding, less time deploying applications. The platform automates the processes of deploying and configuring applications. You can deploy directly from Visual Studio, from a command-line, or from the Windows Azure Management Portal. In contrast to the traditional on-premise development model, you do not need to remote into machines, FTP files, or synchronize your application across machines. Again, you have more time to spend developing applications.
  • Isolate your work from others. When you deploy an application to the Windows Azure platform, your application is isolated from other applications that you developed. It is also isolated from other organizations.
  • Scale your applications up and down. Most applications must handle lots of users and variable traffic peaks. For social networking applications, the need to scale up and down is critical. However, the traditional on-premise development model does not support the ability to scale up and down with ease. In contrast, the Windows Azure platform was specifically built to handle variable loads. You can quickly and easily add instances or your application or remove instances—without buying, deploying, managing, or removing hardware.
  • Ensure your application is always available. In the traditional on-premise development model, your application would typically need to be taken offline for upgrades, OS patches, hardware upgrades, etc. In contrast, The Windows Azure programming model is designed to let applications be continuously available, even in the face of software upgrades and hardware.

Windows Azure SDK for Java

The Windows Azure SDK for Java provides client libraries and tools to allow Java developers to quickly and easily create applications that run on Windows Azure or leverage Windows Azure services such as Windows Azure Storage or Service Bus.

This page compiles information about some of the resources available for Java developers. For more information about Windows Azure and the Windows Azure SDK for Java, see the Windows Azure Java Developer Center.

Visual Studio 11 Beta arrives on February 29, 2012

Overview

Visual Studio 11 Developer Preview is an integrated development environment that seamlessly spans the entire life cycle of software creation, including architecture, user interface design, code creation, code insight and analysis, code deployment, testing, and validation. This release adds support for the most advanced Microsoft platforms, including the next version of Windows (code-named "Windows 8") and Windows Azure, and enables you to target platforms across devices, services, and the cloud. Integration with Team Foundation Server allows the entire team, from the customer to the developer, to build scalable and high-quality applications to exacting standards and requirements.

Visual Studio 11 Developer Preview is prerelease software and should not be used in production scenarios.

This preview enables you to test updates and improvements made since Visual Studio 2010, including the following:
  • Support for the most advanced platforms from Microsoft, including Windows 8 and Windows Azure, as well as a host of language enhancements.
  • New features such as code clone detection, code review workflow, enhanced unit testing, lightweight requirements, production IntelliTrace® exploratory testing, and fast context switching.

This preview can be installed to run side by side with an existing Visual Studio 2010 installation. The preview provides an opportunity for developers to use the software and provide feedback before the final release. To provide feedback, please visit the Microsoft Connect website.

The .NET Framework 4.5 Developer Preview is also installed as part of Visual Studio 11 Developer Preview

Monday 20 February 2012

Build Mobile-Friendly HTML5 Forms with ASP.NET MVC 4 and jQuery Mobile

Mobilized Web Project Templates in Visual Studio 2010

The MVC 4 Mobile project template in Visual Studio 2010 contains all the files and references necessary to create a mobile-friendly Web site. When you create a new MVC 4 Mobile project, you’ll notice the familiar Models, Views and Controllers folders requisite for all MVC 4 projects (mobile or not) alongside new or modified scripts in the \Scripts folder. The \Scripts folder is where you’ll find the many jQuery files that serve as an API for building mobile-friendly Web sites, in particular, the jquery.mobile-1.0b2.js file for development and its minified partner, jquery.mobile-1.0b2.min.js, for deployment.
The \Content folder contains the location for style sheets, images and design-related files. Keep in mind that the jquery.mobile-1.0b2.css style sheet defines a look and feel that specifically targets multiple mobile platforms. (See http://jquerymobile.com/gbs/ for a list of supported mobile and tablet platforms.) Much like JavaScript files, there are two style sheets: a fat version for development and a minified version for production.

Data Sources for HTML5 Forms: MVC 4 Models and ViewModels

Regardless of whether the target is mobile or desktop, HTML5 form elements map to a property of an entity in a model or a ViewModel. Because models expose varied data and data types, their representation in the user interface requires varied visual elements, such as text boxes, drop-down lists, check boxes and buttons. You can see the full set of available controls or elements at the jQuery Mobile Web site’s Form Element Gallery.
Simple forms that contain only text inputs and buttons are not the norm. Most forms have several types of data. Because of this data variety, coding and maintenance will be easier if you use a ViewModel. ViewModels are a combination of one or more types that together shape data that goes to the view for consumption and rendering.
Let’s say you want to build a quick way for users of your Web site to provide feedback. You need to collect the user’s name, the type of feedback the user wants to leave, the comment itself, and the priority of the comment—that is, whether or not it’s urgent. Figure 1 shows how the FeedbackModel class definition captures these features in simple data structures such as strings, an int, and a Boolean.
  1. public class FeedbackModel
  2. {
  3.     public string CustomerName { get; set; }
  4.     public int FeedbackType { get; set; }
  5.     public string Message { get; set; }
  6.     public bool IsUrgent { get; set; }
  7. }
Figure 1 Feedback Model
The FeedbackType property in Figure 1 is of type int, and it corresponds to the value the user selects at run time in the feedback type drop-down list defined in Figure 3.
Figure 2 contains the definition for the FeedbackViewModel, which is a combination of the FeedbackModel described in Figure 1 and the FeedbackType class (described in Figure 3).
  1. public class FeedbackViewModel
  2. {
  3.     public FeedbackModel Feedback { get; set; }
  4.     public FeedbackType FeedbackType { get; set; }        
  5.     public FeedbackViewModel()
  6.     {
  7.         Feedback = new FeedbackModel();
  8.         FeedbackType = new FeedbackType();
  9.     }
  10. }
Figure 2 Feedback ViewModel Containing the FeedbackModel and FeedbackType Properties
The use of the FeedbackType property highlights the purpose of ViewModels, which, as I mentioned earlier, is to shape disparate data sources or models together to form a single consumable source from the view, using strongly typed syntax.
While you can represent most of the data in a simple ViewModel as text boxes or check boxes, you also need to capture the type of feedback, which is a list of name-value pairs exposed in code as a more complex dictionary object. Figure 3 shows the FeedbackType class and the dictionary contained within it.
  1. public class FeedbackType
  2. {
  3.     public static SelectList FeedbackSelectList
  4.     {
  5.         get { return new SelectList(FeedbackDictionary, "Value""Key"); }
  6.     }
  7.     public static readonly IDictionary<stringint
  8.          FeedbackDictionary = new Dictionary<stringint
  9.     { 
  10.         { "Select the type ..."0 },
  11.         { "Leave a compliment"1 },
  12.         { "Leave a complaint"2 },
  13.         { "Leave some SPAM"3 },
  14.         { "Other"9 }
  15.     };
  16. }
Figure 3 FeedbackType Class, Including User Feedback Types
Now that the ViewModel is complete, the controller must pass it to the view for rendering. This straightforward code is in Figure 4 and is virtually identical to code that passes back a model.
  1. public ActionResult Feedback()
  2. {
  3.     FeedbackViewModel model = new FeedbackViewModel();
  4.     return View(model);
  5. }
Figure 4 Controller Passing the ViewModel to the View
The next step in the process is setting up the view.

Creating HTML5 Mobile Forms in ASP.NET MVC 4 Views

You use the standard Add New Item command in Visual Studio 2010 to create feedback.cshtml, the view that will host your HTML5 form. ASP.NET MVC 4 favors a development technique named convention over configuration, and the convention is to match the name of the action method (Feedback) in the controller in Figure 4 with the name of the view, that is, feedback.cshtml. You can find the Add New Item command from the shortcut menu in Solution Explorer or the Project menu.
Inside the view, various ASP.NET MVC 4 Html Helpers present components of the FeedbackViewModel by rendering HTML elements that best fit the data types they map to in the ViewModel. For example, CustomerName renders as a standard single-line text box, while the Message property renders as a text area. FeedbackType renders as an HTML drop-down list so that the user can easily select an item rather than manually enter it. Figure 5 shows that there is no lack of Html Helpers to choose from for building forms.
  1. @using (Html.BeginForm( "Results","Home")) {
  2.     @Html.ValidationSummary(true)
  3.     <fieldset>
  4.         <legend>Leave some feedback!</legend>
  5.         <div class="editor-label">
  6.             @Html.LabelFor(model => model.Feedback.CustomerName)
  7.         </div>
  8.         <div class="editor-field">
  9.             @Html.TextBoxFor(model => model.Feedback.CustomerName)
  10.             @Html.ValidationMessageFor(model => model.Feedback.CustomerName)
  11.         </div>
  12.         <div class="editor-label">
  13.             @Html.LabelFor(model => model.Feedback.FeedbackType)
  14.         </div>
  15.         <div class="editor-field">
  16.             @Html.DropDownListFor(model => model.Feedback.FeedbackType, 
  17.                  FeedbackType.FeedbackSelectList) 
  18.             @Html.ValidationMessageFor(model => model.Feedback.FeedbackType)
  19.         </div>
  20.         <div class="editor-label">
  21.             @Html.LabelFor(model => model.Feedback.Message)
  22.         </div>
  23.         <div class="editor-field">
  24.             @Html.TextAreaFor(model => model.Feedback.Message)
  25.             @Html.ValidationMessageFor(model => model.Feedback.Message)
  26.         </div>
  27.         <div class="editor-label">
  28.             @Html.LabelFor(model => model.Feedback.IsUrgent)
  29.         </div>
  30.         <div class="editor-field">
  31.             @Html.EditorFor(model => model.Feedback.IsUrgent)
  32.             @Html.ValidationMessageFor(model => model.Feedback.IsUrgent)
  33.         </div>
  34.         <p>
  35.             <input type="submit" value="Save" />
  36.         </p>
  37.     </fieldset>
  38. }
Figure 5 Html Helpers
With the ViewModel, controller and view, the form is now ready to test in the browser.

Testing the HTML Form on the Windows Phone 7 Emulator

Running a browser from Visual Studio is the easiest way to test the form, but the look and feel doesn’t behave in a very mobile-like way. For viewing the output and testing the form, the Windows Phone 7 Emulator works perfectly.
The HTML5 form displays in the Windows Phone 7 Emulator, as shown in Figure 6. You can enter a name, select a type from the drop-down list, fill in the comments and submit the form. Without modifications to the default styling provided by jQuery Mobile style sheets, the overall HTML5 form looks like the image on the left side of Figure 6. After tapping on the drop-down, the list of items looks like the image on the right side of Figure 6. Tapping a list item to select it returns the user to the form.
Interacting with the Windows Phone 7 Emulator
Figure 6 Interacting with the Windows Phone 7 Emulator
Submitting the form directs the browser to send the form information to the Home controller because of the call to the Html Helper, Html.BeginForm( "Results","Home"). The BeginForm method directs the HTTP request to the HomeController controller and then runs the Results action method, as the arguments denote.
Before the form submission process sends the HTTP Request to the server, however, client-side validation needs to happen. Annotating the data model accomplishes this task nicely. In addition to validation, data annotations provide a way for the Html.Label and Html.LabelFor helpers to produce customized property labels. Figure 7 details the entire data model with attributes for both validation and aesthetic annotations, and Figure 8 illustrates their results in the Windows Phone 7 Emulator.
  1. public class FeedbackModel
  2. {
  3.     [Display(Name = "Who are you?")]
  4.     [Required()]
  5.     public string CustomerName { get; set; }
  6.     [Display(Name = "Your feedback is about...")]
  7.     public int FeedbackType { get; set; }
  8.     [Display(Name = "Leave your message!")]
  9.     [Required()]
  10.     public string Message { get; set; }
  11.     [Display(Name = "Is this urgent?")]
  12.     public bool IsUrgent { get; set; }
  13. }
Figure 7 Complete Data Model with Annotations
Left: Data Annotation Validations; Right: Data Annotation Aesthetics
Figure 8 Left: Data Annotation Validations; Right: Data Annotation Aesthetics
You can customize the error message of the Required attribute to make the user interface friendlier. There are also many more annotations available in the System.Data.DataAnnotations namespace. If you can’t find a data annotation that fits your validation, aesthetic or security needs, inheriting from the System.Attribute class and extending it gives you that flexibility.

From the Phone to the Server Through HTTP POST

Once the user taps the submit button on the phone—and assuming the form passes validation—an HTTP POST Request is initiated and the data travels to the controller and action method designated in the Html.BeginForm method (as was shown in Figure 5). The sample from Figure 9 shows the controller code that lives in the HomeController and processes the data that the HTTP Request sends. Because of the power of ASP.NET MVC 4 model binding, you can access the HTML form values with the same strongly typed object used to create the form – your ViewModel.
  1. [HttpPost()]
  2. public ActionResult Results(FeedbackViewModel model)
  3. {
  4.     // calls to code to update model, validation, LOB code, etc...
  5.     return View(model);
  6. }
Figure 9 Capturing the HTTP POST Data in the Controller
When capturing HTTP POST data, data annotations once again assist in the task, since action methods that have no attribute stating the type of HTTP verb default to HTTP GET. 

Conclusion

Creating shiny new forms for mobile devices as well as desktops has never been easier with the partnership between ASP.NET MVC 4, jQuery Mobile and HTML5.

Friday 3 February 2012

Deploying Your Application To Windows Azure

You can deploy your application to Windows Azure either through the portal or directly from within Visual Studio. This guide shows you how to deploy your application from within Visual Studio.
In order to deploy your application to Windows Azure, you need an account. If you do not have one you can create a free trial account. Once you are logged in with your account, you can download a Windows Azure publishing profile. The publishing profile will authorize your machine to publish packages to Windows Azure using Visual Studio.

CREATING A WINDOWS AZURE ACCOUNT

  1. Open a web browser, and browse to http://www.windowsazure.com.
    To get started with a free account, click free trial in the upper right corner and follow the steps.
  2. Your account is now created. You are ready to deploy your application to Windows Azure!

PUBLISHING THE APPLICATION

  1. Right click on the ToDoListApp project in Solution Explorer and click Publish to Windows Azure.
  2. The first time you publish, you will first have to download credentials via the provided link.
    1. Click Sign in to download credentials:
    2. Sign-in using your Live ID:
    3. Save the publish profile file to a location on your hard drive where you can retrieve it:
    4. Within the publish dialog, click on Import Profile:
    5. Browse for and select the file that you just downloaded, then click Next.
    6. Pick the Windows Azure subscription you would like to publish to:
    7. If your subscription doesn’t already contain any hosted services, you will be asked to create one. The hosted service acts as a container for your application within your Windows Azure subscription. Enter a name that identifies your application and choose the region for which the application should be optimized. (You can expect faster loading times for users accessing it from this region.)
    8. Select the hosted service you would like to publish your application to. Keep the defaults as shown below for the remaining settings. Click Next:
    9. On the last page, click Publish to start the deployment process:
      This will take approximately 5-7 minutes. Since this is the first time you are publishing, Windows Azure provisions a virtual machine (VM), performs security hardening, creates a Web role on the VM to host your application, deploys your code to that Web role, and finally configures the load balancer and networking so you application is available to the public.
    10. While publishing is in progress you will be able to monitor the activity in the Windows Azure Activity Log window, which is typically docked to the bottom of Visual Studio or Visual Web Developer:
    11. When deployment is complete, you can view your website by clicking the Website URL link in the monitoring window:

MAKING YOUR APPLICATION READY TO DEPLOY TO WINDOWS AZURE

Now, you will prepare your application to run in a Windows Azure hosted service. Your application needs to include a Windows Azure deployment project before it can be deployed to the cloud. The deployment project contains configuration information that is needed to properly run your application in the cloud.
  1. To make your app deployable to the cloud, right click on the ToDoListApp project in Solution Explorer and click Add Windows Azure Deployment Project:
  2. To enable the built-in membership provider you must use the ASP.NET Universal Providers. This provider enables the account management capabilities in your application. In Solution Explorer, right click on ToDoListApp and then click Manage NuGet Packages... (or Add Library Package Reference... in older versions of NuGet):
  3. In the ToDoListApp – Manage NuGet Packages dialog, in the top right corner within the Search Online field, write "universal providers":
  4. Select the "ASP.NET Universal Providers" and click Install. Close the ToDoListApp – Manage NuGet Packages dialog after installation is complete.
  5. In Solution Explorer, open the Web.config file in the root directory of the ToDoListApp project.
  6. Under the <configuration> / <connectionStrings> section replace the DefaultConnection connection stringas shown below.
        <add name="DefaultConnection" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=aspnet_ToDoListApp;Integrated Security=True;MultipleActiveResultSets=True"
          providerName="System.Data.SqlClient" />
  7. To test your application, press F5.
  8. This will start the Windows Azure compute emulator. The compute emulator uses the local computer to emulate your application running in Windows Azure. You can confirm the emulator has started by looking at the system tray:
  9. A browser will still display your application running locally, and it will look and function the same way it did when you ran it earlier as a regular ASP.NET MVC 3 application.

CREATING AN ASP.NET MVC 3 APPLICATION

CREATING THE PROJECT

  1. Use administrator privileges launch either Microsoft Visual Studio 2010 or Microsoft Visual Web Developer Express 2010. To launch Visual Studio with administrator privileges, right-click Microsoft Visual Studio 2010 (or Microsoft Visual Web Developer Express 2010) and then click Run as administrator. The Windows Azure compute emulator, discussed later in this guide, requires that Visual Studio be launched with administrator privileges.
    In Visual Studio, on the File menu, click New, and then click Project.
    From Installed Templates, under Visual C#, click Web and then click ASP.NET MVC 3 Web Application. Name the application ToDoListApp and click OK:
In the New ASP.NET MVC 3 Project dialog, select the Internet Application template and the Razor view engine. Click OK.

MODIFY UI TEXT WITHIN YOUR APPLICATION

  1. In Solution Explorer, under Views\Shared open the _Layout.cshtml file.
  1. Within the body tag, find the title of the page enclosed in h1 tags. Change the title text from My MVC Application to To Do List. Here is where you type this in:

RUN YOUR APPLICATION LOCALLY

Run the application to verify that it works.
  1. Within Visual Studio, press F5.
  2. Your application should appear running in a browser:

.NET Web Application with SQL Azure

Developing for Windows Azure is easy using Visual Studio 2010 and the free Windows Azure SDK for .NET. If you do not already have Visual Studio 2010, the SDK will automatically install Visual Web Developer 2010 Express, so you can start developing for Windows Azure entirely for free. This guide assumes you have no prior experience using Windows Azure. On completing this guide, you will have an application that uses multiple Windows Azure resources up and running in the cloud.
You will learn:
  • How to enable your machine for Windows Azure development with a single download and install
  • How to create and modify a Visual Studio ASP.NET MVC 3 project so it can run on Windows Azure
  • How to use a SQL Azure database to store data in the cloud
  • How to deploy and update your application to Windows Azure
You will build a to-do list web application that runs in Windows Azure and stores its data in SQL Azure. The application is hosted in an instance of a Web role that, when running in the cloud, is itself hosted in a dedicated virtual machine (VM). A screenshot of the completed application is below:


 

SETTING UP THE DEVELOPMENT ENVIRONMENT

Before you can begin developing your Windows Azure application, you need to get the tools and set-up your development environment.