Home > ASP.NET and Silverlight > Using the Xaml Control with Dynamic Languages

ASP.NET Futures (July 2007): Integrating XAML in an ASP.NET Web Site with Dynamic Languages

Prerequisites

To complete the walkthrough, you need the following:

• Microsoft Silverlight 1.1 Alpha Refresh. For download information, visit the Silverlight download site.
• Microsoft Visual Studio Code Name "Orcas" Beta 2. For download information, visit the download site.
• Microsoft Silverlight Tools Alpha Refresh for Visual Studio (July 2007). For download information, visit the download site.
• The ASP.NET Futures release (July 2007) or later. For download information visit the ASP.NET Futures (July 2007) download site. The .msi installer file includes a Visual Studio Content Installer (.vsi) for creating a blank ASP.NET Futures Web application in Visual Studio.

Creating an ASP.NET Futures (July 2007) Web Site

To begin, you will create an ASP.NET Futures (July 2007) Web Site in Visual Studio. When you use the Visual Studio project template to create a new Web Site, Visual Studio creates a normal Web site folder structure with the following additional items:

• A Bin folder that contains the assemblies for the Futures release.
• A Web.config file that is configured for the features in the ASP.NET Futures (July 2007) release.
• A Default.aspx page that contains a ScriptManager control.

To create a new ASP.NET Futures (July 2007) Web Site in Visual Studio

1. In the File menu, click New, and then click Web Site.
2. In the New Web Site dialog box, select the ASP.NET Futures (July 2007) Web Site template.
3. In the Location list, select File System.
4. Specify a name, path, and language for the application, and then click OK.

Adding a XAML page to a Web Application in Visual Studio

You must create a XAML page that contains the user interface that you want to display in the browser. The XAML page will be launched by the Xaml control. You can create the XAML by hand, or you can use a tool such as Microsoft Expression Blend. In either case, you can use dynamic languages to control the XAML. In this walkthrough, starter XAML is provided by the page template.

To add a XAML file to a Web application

1. In Solution Explorer, right-click the Web application project name and then click Add New Item ....
2. In the Add New Item dialog box, click Silverlight Page.
3. In the Language list, select one of the two dynamic languages included in the Microsoft Silverlight 1.1 July Preview, IronPython or Managed JScript. Notice that there is no choice about where the code is located; the code will be placed in a separate file.
4. Give the page a name and then click OK.

Adding a Xaml Control to an ASP.NET Web Page

Next, you will add a Xaml control to the Default.aspx page and configure it to launch the XAML page that you just created.

To add a Xaml control to your Web page

1. Open or switch to the Default.aspx page.
2. Add a Xaml control, and set its XamlUrl property to the page you just created. For example, if you accepted the default name for the XAML page, Page.xaml, your markup will look like the following:

   		
   <asp:ScriptManager ID="ScriptManager1" runat="server" />
   <div>
     <asp:xaml runat="server" XamlUrl="Page.xaml" MinimumSilverlightVersion="1.1" />
   </div>
   

   Declarative

3. Set the Height and Width properties to values that will enable you to see the result of running the XAML in the page (such as 320 x 320).

If you run the Web page now, the control will load the XAML. The next step is to add dynamic language code to respond to events and manipulate the XAML.

Adding Dynamic Language Code to Manage the Xaml Control

In this section, you will add to the code in the XAML page template.

To add dynamic language code to manage the Xaml control

1. Open or switch to the XAML page (Page.xaml) to open it.

   The root Canvas element contains two XAML elements, a Canvas element and a TextBlock element. The Loaded event of the Canvas element is set to OnLoaded, and the TextBlock element is named TextBlock1.

2. Open the code file for the XAML page. The page template provides an OnLoaded event handler that sets the Text property of the TextBlock object.
3. Add code to handle the Click event of the TextBlock object. For example, the following code increases the size of the text by ten percent.
   
   

   		
   def OnClick(sender, e):
       TextBlock1.FontSize *= 1.1
   

   IronPython
   
   
4. Switch to the XAML page and bind the event handler by setting the MouseLeftButtonUp property of the TextBlock object to OnClick.

   		
   <TextBlock x:Name="TextBlock1" MouseLeftButtonUp="OnClick" />
   

   Declarative

5. Press CTRL+F5 to run the page in the browser, and click the text to verify that its size increases.

Debugging Your Code in the Browser

Your code must be downloaded to a browser in order to run. The debugger must be started after the code is downloaded. Each time you run your application for debugging, you must attach the debugger to the browser. To force the browser to load a new copy of your code instead of using the cached copy, you must close the browser between debugging sessions.

To debug dynamic language code in the browser

1. Press CTRL+F5 to run the Default.aspx page without server debugging.

   Default.aspx opens in the browser, downloads your dynamic language code, and runs the OnLoaded event handler. The only code that executes in the server is the Default.aspx page class and the Xaml control.

2. In Visual Studio, on the Debug menu, click Attach to Process.

   Because your application is running in the browser, you must attach to the browser process in order to debug it.

3. In the Attach to Process dialog box, make sure that the Attach to box includes Core Managed code or Automatic: Core Managed code. If it does, go to the next step. Otherwise, perform the following procedure:
   
   
   1. Click the Select button to open the Select Code Type dialog box.
   2. In the Select Code Type dialog box, make sure that Debug these code types is selected.
   3. In the list of code types, clear Managed and Native if they are selected, and select Core Managed to debug Silverlight managed code.

      If you check Core Managed while an incompatible code type is selected, you will be prompted to clear the incompatible types. Clear all incompatible code types.

   4. Click OK to accept the changes.
      
      
4. In the Attach to Process dialog box, in the Available Processes list, in the Process column, click the appropriate instance of the browser to select it.

   Note  If you have other instances of the browser open, give Default.aspx a title that will make it easy to identify in the Title column.

5. Click Attach.

   A message box appears, informing you that your application is running the Core managed runtime for Silverlight, and asking whether you want to debug this runtime.

6. Click Yes to debug using the Silverlight runtime.
7. Switch to the browser and press F5 to refresh the page.

   Your application is reloaded under the debugger, and you are now ready to debug. When the page is reloaded, the debugger stops at any breakpoints you have set in your initialization code.

   You must refresh the page to reload your application after the debugger is attached. If you do not, execution will not stop at your breakpoints.

8. When you are finished debugging, close the browser. Otherwise, the browser will used its cached copy of your application the next time you debug.

   Note  If you are using the ASP.NET Development Server to run the page, it is not necessary to close it between debugging sessions.

Status of Dynamic Language Debugging Features

In Microsoft Silverlight 1.1 July Preview, support for debugging applications written in dynamic languages has some limitations. The following list provides the status of some debugging features:

• Setting breakpoints works with both IronPython and Managed JScript.
• Stepping works with both IronPython and Managed JScript, except that F11 currently does not step into functions. To work around this, you can set a breakpoint in the function body.
• Support for Edit and Continue has not been added, so you cannot change code while you are debugging.
• You can drag the execution pointer back to execute code again, or forward to skip code.
• In Managed JScript, support for viewing local variables and function parameters has not yet been added. Currently there is no way to view these in watches or quick watches, or in the Locals or Immediate windows.
• In IronPython, you can view local variables in the Locals window, the Immediate window, quick watches, and watches, with the following conditions:
  
  
  • You cannot view function parameters, but you can work around this by assigning function parameters to local variables. You can set variables in the Immediate window.
  • In dynamic languages, a variable that has not been set has no type. The type belongs to the value, not to the variable. The debugger shows the value of an unassigned variable as null.
  • In the Locals window, you can expand objects contained in local variables and view their properties.
  • In the Immediate window, you can examine and set the properties of objects, but in this release you must cast the objects to a specific type in order for the debugger to recognize their properties and methods. For example, the following shows the use of the Immediate window to set the color of text in a TextBlock object. After the property is set, the state of the SolidColorBrush property is echoed to the window.

    		
    ((System.Windows.Media.SolidColorBrush)((System.Windows.Controls.TextBlock)s).Foreground).Color 
                       = System.Windows.Media.Colors.Yellow
    {#FFFFFF00}
        A: 255
        B: 0
        G: 255
        R: 255
        ScA: 1.0
        ScB: 0.0
        ScG: 1.0
        ScR: 1.0
    

    IronPython