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.
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
<link rel="stylesheet" type="text/css" href="css/NarweeMeshApp.css" />
<p>A Mesh Application built with the Live Framework Tools</p>
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.
9. A new dialog will appear asking for the Application Self-Link. Click on the hyperlink with the text ‘Navigate to the Developer Portal’.
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:
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.
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:
<p>The second iteration is faster</p>
<button onclick="buttonClicked()">Click me!</button>
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:
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:
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:
35. Visual Studio will become active and the breakpoint will be hit:
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.
4. Page.xaml will open. Change the .xaml to be the following (which will add a button):
<Grid x:Name="LayoutRoot" Background="White">
<Button Name="button1" Background="Green" Content="Click Me!" Click="Button_Click" Width="100" Height="20"/>
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)
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