Getting Started:
Building an Application with Volta in 8 Steps

The following steps help get you started quickly building applications with Volta. Once you have a good understanding of Volta you should adjust these steps according to your objectives, preferences and constraints. See the developer guidance for additional detail. Note that Volta requires Visual Studio 2008.

Step1: Create a Volta Project

Along with the Volta compiler and libraries, the Volta installer configures a VSIP package that adds several Volta project types to Visual Studio.

In Visual Studio 2008 go to File, New, Project and then select Volta under Visual C#,[1] and then Volta Application:

clip_image002[6]

Give the project a name, such as "Quickstart." The Volta Application template populates the project with several files:

clip_image004[6]

Step 2: Design the User Interface

The Volta applications covered in this document target the browser. Consequently the UI comprises HTML elements.

Expand the VoltaPage1.cs file to edit the HTML file.

clip_image006[6]

The initial HTML code follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Quickstart</title>

    <link rel="shortcut icon" href="/favicon.ico"/>

    <style type="text/css">

    </style>

</head>

<body>

</body>

</html>

With either the HTML editor or with the designer add to the HTML page a text line, a text input field, a button, and a div element.

clip_image008[6]

Note that you can use either the <button> or <input> elements for buttons. In the HTML editor the former is more compact, while the designer uses the latter. The browser renders these elements in the same manner.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title>Quickstart</title>

    <style type="text/css">

    </style>

</head>

<body>

    <p>

        Your name:

    </p>

    <p>

        <input id="Text1" type="text" />

    </p>

    <p>

        <button id="Button1">

            Greet

        </button>

    </p>

    <div id="Greeting">

    </div>

</body>

</html>

Step 3: Design the Business Logic

A single class contains all the business logic for this Quickstart.

Add a Greeter class to the project using the definition below:

namespace Quickstart

{

    public class Greeter

    {

        string helloStr;

 

        public Greeter()

        {

            helloStr = "Hello";

        }

 

        public string Greet(string name)

        {

            return helloStr + " " + name;

        }

    }

}

Following this addition the solution looks similar to the following screenshot.

clip_image010[6]

Step 4: Connect to the DOM and Wire the Events

In response to the user pressing the Greet button, the application should invoke the Greet method of a Greeter instance.

First, create instance variables in the VoltaPage1 class for the HTML DOM elements that the applications needs access to (if you used the HTML designer button1 is of type Input rather than Button):

Input nameElement;

Button button1;

Div greetingElement;

Then define the partial method InitializeComponent() that connects these objects to the DOM. The GetById<>() method provides access to the DOM’s elements, such as the button (which will generate events) and the text field (which will contain the name filled in by the user).

partial void InitializeComponent()

{

    nameElement = Document.GetById<Input>("Text1");

    greetingElement = Document.GetById<Div>("Greeting");

    button1 = Document.GetById<Button>("Button1");

public VoltaPage1()

{

    InitializeComponent();

 

    var greeter = new Greeter();

    button1.Click += delegate

    {

        var name = nameElement.Value;

    };

} 

Now you can use the debugger to test that the event fires. First make sure that Visual Studio uses the Debug configuration:

clip_image012[6]

Then select what browser you’d like Visual Studio to start up debugging. You can choose between Internet Explorer and Mozilla Firefox. This is useful for cross-browser testing.

clip_image014[6]

Next set a breakpoint within the anonymous delegate.

clip_image016[6]

Start the application in Debug mode (F5). Once the IE windows shows the HTML elements enter some text in the input field and click the “Greet” button.

clip_image018[6]

The Visual Studio debugger will show the breakpoint. The experience is identical to that of debugging other C# applications. This includes the call stack, locals, watches, and immediate windows, step into, step over, step out of operations, etc.

clip_image020[6]

Step 5: Update the Display

Your application manipulates the display through changing method, passing the contents of the name local variable as the argument. The anonymous delegate reads as follows:

button1.Click += delegate

{

    var name = nameElement.Value;

    greetingElement.InnerText = greeter.Greet(name);

};

At this point the application’s functionality is complete. To run the generated JavaScript code you need to switch to Visual Studio’s Release configuration first.

clip_image022[6]

Once you switch the configuration pressing F5 in Visual Studio launches Internet Explorer, pointing it to the HTML page:

clip_image024[6]

Deploying the application is literally one click away. In the Solution Explorer select Publish from the context menu of the project, and then select the target directory for the generated files.

clip_image026[6]

clip_image028[6]

Step 6: Refactor into a Multi-Tier Application

The Volta application built so far represents a single tier application; everything executes entirely on the client side, in the browser.

You transform it into a multi-tier application by declaratively specifying the split point using a custom attribute. To do that:

Verify that the Enable Volta Tiersplitting box is checked on the project properties page.

clip_image030[6]

Open the Greeter.cs file. Right-click on the class and select Refactor->Tier-split to run at Origin. The refactoring adds a using directive to the class and marks it with a custom attribute:

using Microsoft.LiveLabs.Volta.MultiTier;

 

namespace Quickstart

{

    [RunAtOrigin()]

    public class Greeter

    {

        private string greeting;

 

        public Greeter()

        {

            greeting = "Hello";

        }

 

        public string Greet(string name)

        {

            return greeting + " " + name;

        }

    }

}

Now start the application with F5. Without any other changes to the code the application runs in the browser, while the Greeter class runs in the development server showing up in the task bar:

clip_image034[6]

You can examine the server requests from the client part of the application. Double-click on the above server icon and the server details page opens up. Then check the “Log requests” box. Clicking the application’s “Greet” button makes the POST operation visible in the server log: uests from the client part of the application. Double-click on the above server icon and the server details page opens up. Then check the “Log requests” box. Clicking the application’s “Greet” button makes the POST operation visible in the server log:

clip_image036[6]

Step 7: Switch to Asynchronous Invocation

Now that the application runs in a distributed manner an asynchronous invocation of the Greet() method is a better fit.

In the Greeter class create a new Greet() method of type void that takes 2 parameters. Next Add the Async custom attribute to this method:

[Async]

public extern void Greet(string name, Callback<string> callback);

Then add a new button to the HTML, hook it up to a new, button2 instance variable of the VoltaPage1 class, and wire its event handler to call the above Greet method, passing the user-supplied name, and a lambda expression as arguments.

<button id="Button2">

    Async Greet</button></p>

 

 

Button button2;

 

button2 = Document.GetById<Button>("Button2");

                         

button2.Click += delegate

{

    var name = nameElement.Value;

    greeter.Greet(

        name,

        message => { greetingElement.InnerText = "async: " + message; });

};

Now run the application with F5 and click the button labeled “Async Greet”; this time the greeting message is generated and updated asynchronously.

Step 8: Add End-to-End Profiling

Typically when you build distributed applications you want to have a good picture of the interaction between the distributed elements.

Volta provides support for end-to-end profiling from within Visual Studio. To profile a tier-split application you simply check the “Enable Rotunda end-to-end profiling” in the project’s properties page. This setting ensures that the application generates performance instrumentation.

clip_image038[6]

Then ensure you are in Release mode and launch the application with F5. Behind the covers Volta generates a logging service to record runtime information:

clip_image040[6]

When finished (either by closing the browser or stopping from Visual Studio) the Windows Communication Foundation (WCF) Service Trace Viewer Tool opens. The viewer reads the profiling information and provides several views showing what happened at run time. For example, the following figure shows the Graph view (in the Activity tab select the row named Volta profiling session, and then switch to the Graph tab):

clip_image042[6]

Comprehensive information about using the trace viewer is available online and is beyond the scope of this document:

[1] You can write Volta applications in other .NET languages, such as Visual Basic. This document covers only C#.