Get Started using the Live Framework Tools

Author: Anson Horton

This walkthrough explains how to use the Live Framework Tools for Microsoft Visual Studio to create, build, debug and deploy Mesh-enabled Web Applications.  Although the sample applications used are trivial examples, this walkthrough is applicable for setting up any Mesh-enabled Web Application regardless of size or complexity.

Create and Run a DHTML Mesh-enabled Web Application

1. The first step in creating a simple Mesh-enabled Web Application is to use Visual Studio to select the proper project template.   Open Visual Studio 2008.

2. Select the File | New | Project… command

3. Under the Visual C# node in the Project Types pane, select the Live Framework category.  In the Templates pane two project template icons should appear.  Select the Mesh-enabled Web Application project template and then give your new application the name NarweeMeshApp.  Click OK.

NewProjectDialog.png

4. The index.html file will be open in the editor, change the inner text of the <title> element to “Hello World”

5. In the <body>, remove the html that is already there and replace it with “<p>A Mesh Application built with the Live Framework Tools</p>”.  The resulting html will look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <script type="text/javascript" src="js/Microsoft.LiveFramework.js"></script>
  <script type="text/javascript" src="js/NarweeMeshApp.js"></script>
  <head>
    <link rel="stylesheet" type="text/css" href="css/NarweeMeshApp.css" />
     <title>Hello World</title>
  </head>
  <body onload="initialize()">
    <p>A Mesh Application built with the Live Framework Tools</p>
  </body>
</html>

6. Select File | Save.

7. Select the Debug | Start Without Debugging menu command (Ctrl+F5)

8. A dialog will appear asking for the credentials associated with the Azure Services Developer Portal.  This dialog will allow the username and password to be remembered for future sessions.  Enter credentials and check the “Remember me on this computer” and “Remember my password” checkboxes.  Click the ‘Sign In’ button.


Login dialog.png

9. A new dialog will appear asking for the Application Self-Link.  Click on the hyperlink with the text ‘Navigate to the Developer Portal’. 


ApplicationLinkNeededBlank.png

10. In the upper right (or upper left) corner of the Developer Portal click on the “New Project” hyper link


11. Click on the 3rd option down in the project types list, named “Live Services: Live Framework Community Technology Preview”


12. Enter NarweeMeshApp for the Project Label and leave the Project Description blank.  Click the “Next” button.


13. Choose the “Create a Mesh-enabled Web application” radio button.  Click “Create”.


14. Click on the “Upload Package” button


15. Select Visual Studio again, and click on the link “Copy full path of the NarweeMeshApp.zip to clipboard” and then activate the Developer Portal browser page

16. Click the “Browse” button and then use Ctrl+V to paste in the .zip filename that is on the clipboard.  Click OK.  Click on the Deploy button.


17. On the Summary page that is returned, select the entire Application Self-Link and then copy it onto the clipboard by using Ctrl+C


18. Activate the Visual Studio window, and paste the Application Self-Link into the textbox in the ‘Application Self-Link needed’ dialog box:


ApplicationLinkNeededFilled.png

19. Click the OK button.  The login step is needed at most once per Visual Studio session and less if the ‘remember user name and password’ checkboxes are checked.  Uploading the application, and finding the application self link need only be done once per project the first time it is run.

20. A dialog showing the progress of the update will be shown – the details button may be clicked for additional information.  Live Desktop will be launched when the application has been updated with any changes.  


RunningMeshApp.png

21. Close the browser and navigate back to Visual Studio

22. Open Index.html, and change the text ‘A Mesh Application built with the Live Framework Tools’ to ‘The second iteration is faster’.

23. Hit Ctrl+F5 to run the application

24. Notice that subsequent iterations using Visual Studio require no additional steps outside of hitting Ctrl+F5!

25. Close the browser and navigate back to Visual Studio to start the next step-by-step

Debug a DHTML Mesh-enabled Web Application

26. Open Index.html from the Mesh-enabled Web Application developed in the previous step-by-step

27. Add the following line to the html in order to draw a button:

<body onload="initialize()">
  <p>The second iteration is faster</p>
  <button onclick="buttonClicked()">Click me!</button>
</body>

28. Open Solution Explorer by clicking on View | Solution Explorer (Ctrl+W, S with the Visual C# Development Settings)

29. Double-click on the NarweeMeshApp.js file located in the js folder

30. Add the following code, to show an alert when the button defined in index.html is clicked:

function buttonClicked()
{
  alert("An example of debugging");
}

31. Click in the ‘gutter’ of the editor window, on the line ‘alert(“An example of debugging”);’ in order to set a breakpoint on that line:


AddButtonClick.png

32. Click on Debug | Start Debugging (or hit F5)

33. Click on the “Click me!” button

34. If you see the following message follow the steps listed on the dialog in order to enabled script debugging:


ScriptDebuggingDisabled.png

35. Visual Studio will become active and the breakpoint will be hit:


ButtonClickDebug.png

Create, Run and Debug a Silverlight Mesh-enabled Web Application

1. Silverlight Mesh-enabled Web Application running and debugging is virtually identical to DHTML Mesh-enabled Web Application running and debugging.  Open Visual Studio 2008.

2. Select the File | New | Project… command

3. Under the Visual C# node in the Project Types pane, select the Live Framework category.  In the Templates pane two project template icons should appear.  Select the Silverlight Mesh-enabled Web Application project template and then give your new application the name NarweeSilverlightMeshApp.  Click OK.


NewProjectDialogSilverlight.png

4. Page.xaml will open.  Change the .xaml to be the following (which will add a button):


<UserControl x:Class="NarweeSilverlightMeshAppSilverlight.Page" xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
  <Button Name="button1" Background="Green" Content="Click Me!" Click="Button_Click" Width="100" Height="20"/>
</Grid>
</UserControl>

5. Open Solution Explorer using View | Solution Explorer (or Ctrl+W, S if using the Visual C# Development Settings)

6. Open Page.xaml.cs (it’s nested underneath Page.xaml, and can be shown by clicking the + icon)

7. Add the following event handler within the Page class:


private void Button_Click(object sender, RoutedEventArgs e)
{
  MessageBox.Show("Silverlight debugging!");
}

8. Set a breakpoint on the line MessageBox.Show(“Silverlight debugging”); line by putting the caret on that line and hitting F9

9. Launch the application by using F5

10. Follow steps 8-19 in the Create and Run a DHTML Mesh-enabled Web Application above

11. Click on the “Click Me!” button

12. Visual Studio will appear and the breakpoint will be hit


ButtonClickDebugSilverlight.png

Page view tracker