Tutorial for Using Default DSS XSLT Template

  • Article

Glossary Item Box

Visual Studio: Working with XML Data | Edit XSLT Style Sheets | Debugging XSLT

.NET Framework Developer's Guide: Resources in Applications

See Also Microsoft Robotics Developer Studio Send feedback on this topic

Tutorial for Using Default DSS XSLT Template

A common way of creating a Web-based UI for a service is by using an XSL Transformation (or XSLT) over the service state creating a resulting HTML document that can be rendered in a traditional Web browser. Using XSLT for creating HTML provides great flexibility in getting the look and feel you want for a particular service. By mixing in scripting languages and CSS for style, the options become virtually infinite. If you happen to like the default layout used by DSS System Services and many of the samples then this tutorial shows how to quickly build an XSLT for your service using this style.

This tutorial teaches you how to:

  • Getting Started.
  • Introducing DSS XSLT Template.
  • Applying the template.
  • Example.

Prerequisites

Hardware

This tutorial requires no special hardware.

This tutorial assumes you have basic understanding of XSLT stylesheets and that you already know the steps required to embed and apply XSLT stylesheets to your service assembly as described in Service Tutorial 6 (C#) - Retrieving State and Displaying it Using an XML Transform.

Software

This tutorial is designed for use with Microsoft Visual C#. You can use:

  • Microsoft Visual C# Express Edition
  • Microsoft Visual Studio Standard, Professional, or Team Edition.

You will also need Microsoft Internet Explorer or another conventional web browser.

Getting Started

Before you begin, you should be familiar with using a web browser to examine DSS services. You might also want to examine the XML code behind the web pages for some services.

Introducing DSS XSLT Template

The DSS XSLT Template is intended as a help for creating an XSLT for your service that has the same look and feel as other DSS services, with the Microsoft DSS page layout. This common template or Master Page is provided as an Embedded Resource in the DssRuntime.dll assembly which makes it automatically available when running a DSS node.

As you can see in the following screenshot, the view of all DSS services in the browser has a common layout, with the Microsoft DSS header and the left navigation pane. The Service State area in the middle shows the name and description of the service being viewed and the XML button on the top right corner to view the raw XML of the service state. Below that is the content area where the customized view of the state of the service appears.

Figure 1

Figure 1 - DSS Default XSLT Layout

To view the master page run a DSS node

dsshost /p:50000

And browse to the following location.

https://localhost:50000/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt

You just need to import this master page in your service's XSLT to have it automatically use the template.

Applying the template

There is an embedded template file that shows how to import and use the master page.

While the DSS node is running, browse to:

https://localhost:50000/resources/dss/Microsoft.Dss.Runtime.Home.Template.xml

This XML file attaches the Template.xslt for its stylesheet. Click on the Template.xslt link to view it. This template is what you need to copy and paste to your service's XSLT file and modify to work for your service.

Bb648762.hs-note(en-us,MSDN.10).gif

To copy the contents of the template as plain text, select View Source from the context menu and copy the text from there.

Below is the contents of the Template.xslt file.

<!--
This file is a template for xslt files that use the default
Microsoft DSS layout to represent a DSSP service state.
-->
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:soap="http://www.w3.org/2003/05/soap-envelope"
    xmlns:dssp="https://schemas.microsoft.com/xw/2004/10/dssp.html"
    xmlns:svc="http://schemas.tempuri.org/app/2007/1/template.html"
    >

  <xsl:import href="/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt" />

  <xsl:template match="/">
    <xsl:comment><!-- Service Header Info --></xsl:comment>
    <xsl:variable name="title">
      Service Page Title
    </xsl:variable>
    <xsl:variable name="serviceName">
      Service Name
    </xsl:variable>
    <xsl:variable name="description">
      Service Description
    </xsl:variable>

    <xsl:call-template name="MasterPage">
      <xsl:with-param name="serviceName" select="$serviceName" />
      <xsl:with-param name="description" select="$description" />

      <!-- If title is not provided, serviceName will be used instead. -->
      <xsl:with-param name="title">
        <xsl:value-of select="$serviceName" />
        <xsl:if test="$title != ''">
          <xsl:text> - </xsl:text>
          <xsl:value-of select="$title" />
        </xsl:if>        
      </xsl:with-param>

      <!-- Possible values for navigation are: 'Open', 'Closed', and 'None'
           'Open' is the default value. -->
      <xsl:with-param name="navigation" select="'Open'" />

      <!-- Turn on/off XML Button for RAW XML view. Options are: 'None' and 'Show' -->
      <xsl:with-param name="xmlButton" select="'Show'" />

      <!-- The contents of head param will be placed just before the </head> tag in html. -->
      <xsl:with-param name="head">
        <style type="text/css">
          /* Service-specific stylesheet goes here */
        </style>
        <script language="javascript" type="text/javascript">
          <![CDATA[<!--

/* Service-specific script goes here */

dssRuntime.init = function()
{
  // Add page initialization code here.
  // This function is attached to the window.onload event.
  // Do not override window.onload.
}

//-->     ]]>
        </script>
      </xsl:with-param>
    </xsl:call-template>
  </xsl:template>

  <!-- Match service state's document element. -->
  <xsl:template match="/svc:Template">
    <xsl:comment><!-- Service State Contents --></xsl:comment>
    <form name="DssForm" method="post">
      <xsl:copy-of select="." />
    </form>
  </xsl:template>

</xsl:stylesheet>

The above template overwrites the <xsl:template match="/"> in MasterPage.xslt and passes in the service-specific parameters.

  • The 'title' parameter is optional. If title is not provided, 'serviceName' will be used instead for html title.
    As a convention when specifying title always use the pattern [Service Name] - [service title]
  • The 'navigation' parameter is optional. Possible values for navigation are: 'Open', 'Closed', and 'None'. The default value is 'Open'.
  • The 'xmlButton' parameter is optional and can be used to turn of or off the XML button used to link to the raw XML view of the service state. Possible values are: 'None' and 'Show'. The default value is 'Show'.
  • Add any stylesheets, javascript imports, inline scripts and <link>s to the 'head' parameter.
  • Use the dssRuntime.init function to implement the script to run on Body onload event. This function is called in the masterpage.
  • Do not override window.onload or document.body.onload. Instead, add your onload code in dssRuntime.init.

Just after <xsl:template match="/" /> template comes another xsl:template matching the root element of the service state.

<xsl:template match="/svc:MyServiceState">
  <div>
    Add service state stylesheet here...
  </div>
</xsl:template>
  • Modify the xmlns:svc namespace on top of the page to match the Contract Identifier of your service.
  • Make sure that the above xsl:template matches the Root Element of your service state. i.e. rename MyServiceState above to the name of your service's State type.
  • Do not use <head> and <body> tags in the service state template.

If your service supports HttpPost and you want to post back data from the page, use the <form> tag as shown below:

<xsl:template match="/svc:MyServiceState">
  <form name="DssForm" method="post">
    Add service state stylesheet here...
  </form>
</xsl:template>
Bb648762.hs-caution(en-us,MSDN.10).gif

When debugging the XSLT in Internet Explorer, always open the page in a new browser window or tab in order to see the changes. The caching in IE sometimes does not allow the page to refresh when there is an XSLT error even if you press Ctrl+F5. Opening the page in a new window always reloads the page.

You can clean up your XSLT file by removing unused parts of the template such as comments and place holders when you get the desired results in the browser.

Example

The following shows how to modify the XSLT file in Service Tutorial 6 (C#) - Retrieving State and Displaying it Using an XML Transform to use the default DSS XSLT Template.

<?xml version="1.0" encoding="UTF-8" ?>
<!--
    This file is part of Microsoft Robotics Developer Studio Code Samples.
    Copyright (C) Microsoft Corporation.  All rights reserved.
    $File: ServiceTutorial6_DssLayout.xslt $ $Revision: 5 $
-->
<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:soap="http://www.w3.org/2003/05/soap-envelope"
    xmlns:dssp="https://schemas.microsoft.com/xw/2004/10/dssp.html"
    xmlns:rst6="https://schemas.microsoft.com/2006/06/servicetutorial6.html"
    >

  <xsl:import href="/resources/dss/Microsoft.Dss.Runtime.Home.MasterPage.xslt" />

  <xsl:template match="/">
    <xsl:comment>
      <!-- Service Header Info -->
    </xsl:comment>
    <xsl:variable name="title">
      Service Tutorial 6 - Retrieving State and Displaying it Using an XML Transform
    </xsl:variable>
    <xsl:variable name="serviceName">
      Service Tutorial 6
    </xsl:variable>
    <xsl:variable name="description">
      This service retrieves the state of another service and applies an XSLT stylesheet on the service state to provide
      a richer user interface. This page uses the default DSS XSLT Template.
    </xsl:variable>

    <xsl:call-template name="MasterPage">
      <xsl:with-param name="serviceName" select="$serviceName" />
      <xsl:with-param name="description" select="$description" />
      <!-- If title is not provided, serviceName will be used instead. -->
      <xsl:with-param name="title">
        <xsl:value-of select="$serviceName" />
        <xsl:if test="$title != ''">
          <xsl:text> - </xsl:text>
          <xsl:value-of select="$title" />
        </xsl:if>
      </xsl:with-param>
      <!-- Possible values for navigation are: 'Open', 'Closed', and 'None'
           'Open' is the default value. -->
      <xsl:with-param name="navigation" select="'Open'" />
      <!-- The contents of head param will be placed just before the </head> tag in html. -->
      <xsl:with-param name="head">
        <style type="text/css">
          /* Service-specific stylesheet goes here */
        </style>
        <script language="javascript" type="text/javascript">
          <![CDATA[<!--

/* Service-specific script goes here */

dssRuntime.init = function()
{
  // Add page initialization code here.
  // This function is attached to the window.onload event.
  // Do not override window.onload.
}

//-->     ]]>
        </script>
      </xsl:with-param>
    </xsl:call-template>
  </xsl:template>

  <!-- Match service state's document element. -->
  <xsl:template match="/rst6:ServiceTutorial6State">
    <table border="1">
      <tr class="odd">
        <th colspan="2">Service State</th>
      </tr>
      <tr class="even">
        <th>Clock:</th>
        <td>
          <xsl:value-of select="rst6:Clock"/>
        </td>
      </tr>
      <tr class="odd">
        <th>Initial Tick Count:</th>
        <td>
          <xsl:value-of select="rst6:InitialTicks"/>
        </td>
      </tr>
      <tr class="even">
        <th>Current Tick Count:</th>
        <td>
          <xsl:value-of select="rst6:TickCount"/>
        </td>
      </tr>
    </table>
  </xsl:template>

</xsl:stylesheet>
See Also 

Visual Studio: Working with XML Data | Edit XSLT Style Sheets | Debugging XSLT

.NET Framework Developer's Guide: Resources in Applications

 

 

© 2012 Microsoft Corporation. All Rights Reserved.