Rick Strahl's Weblog
Rick Strahl's FoxPro and Web Connection Weblog
White Papers | Products | Message Board | News |

Creating Custom Web Connection Page Templates for Visual Studio


1 comment
August 21, 2006 •

When designing Web Control Framework pages in Visual Studio, Web Connection has a customized Page template that is used to set up the default page layout that pops up when you create a new page. Here’s what the Add New Item dialog looks like:

 

 The process is driven through Visual Studio’s support for templates and can be easily extended to build custom templates. The template lives in the following directory:

 

<Document Folder>\Visual Studio 2005\Templates\ItemTemplates\Visual Web Developer

 

And can be found with Web Connection Page.zip.

 

Templates are zip files that are made up of the particular item template – in this case a single page, an icon and configuration file:

  • Default.wcsx
  • MyTemplate.vstemplate
  • _TemplateIcon.ico

 

The page is the raw page that is created in the designer – along with a few embedded template expressions – and the icon is the icon that is shown in Visual Studio. The vsTemplate file contains configuration information about the template and looks like this:

 

 

<VSTemplate Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" Type="Item">

  <TemplateData>

    <DefaultName>Default.wcsx</DefaultName>

    <Name>Web Connection Page</Name>

    <Description>West Wind Web Connection WebControl Framework Page</Description>

    <ProjectType>Web</ProjectType>

    <ProjectSubType>CSharp</ProjectSubType>

    <SortOrder>10</SortOrder>

    <Icon>__TemplateIcon.ico</Icon>

  </TemplateData>

  <TemplateContent>

    <References />

    <ProjectItem TargetFileName="$fileinputname$.$fileinputextension$" ReplaceParameters="true" >Default.wcsx</ProjectItem>

  </TemplateContent>

</VSTemplate>

 

The actual template page looks like this:

 

<%@ Page Language="C#" %>

<%@ Register Assembly="WebConnectionWebControls"

    Namespace="Westwind.WebConnection.WebControls"

    TagPrefix="ww" %>

 

<!--

     * Set the name of your class in the ID property

     * Set the GeneratedSourceFile at a PRG file in your FoxPro project directory

     * NOTE: the path is relative to your executing directory (CURDIR())

     * Remove this block of comment text

-->

<ww:wwWebPage ID="$safeitemname$_Page" runat="server"

              GeneratedSourceFile="*** Path/$safeitemname$_Page.prg" >

<html>

<head>

    <title>Untitled</title>

    <link href="westwind.css" rel="stylesheet" type="text/css" />

</head>

<body style="margin-top:0px;margin-left:0px">

    <form id="form1" runat="server">

   

    &nbsp;

 

    </form>

</body>

</html>

</ww:wwWebPage>

 

which, if you’ve built Web Control Framework pages, should look pretty familiar. Notice that the page contains a few $ template expressions which get injected when the page is created to handle setting the name that you typed into the new item dialog.

Creating Custom Templates

What’s nice about this configuration set up is that it’s easy to override and create custom templates. If you wanted to create a custom template type all you have to do is copy these files, change the template (default.wcsx) to your liking and change the name of the template in the vsTemplate file.

 

For example let’s change the template to include a second CSS file add a wwWebErrorDisplay control to the page and clear out some of the comments we used previously:

 

<%@ Page Language="C#" %>

<%@ Register Assembly="WebConnectionWebControls"

    Namespace="Westwind.WebConnection.WebControls"

    TagPrefix="ww" %>

 

<ww:wwWebPage ID="$safeitemname$_Page" runat="server"

              GeneratedSourceFile="*** Path/$safeitemname$_Page.prg" >

<html>

<head>

    <title>My Company</title>

    <link href="westwind.css" rel="stylesheet" type="text/css" />

    <link href="css/MyCompany.css" rel="stylesheet" type="text/css" />

</head>

<body style="margin-top:0px;margin-left:0px">

    <form id="form1" runat="server">

   

    <ww:wwWebErrorDisplay runat="server" id="ErrorDisplay" center="true" />

   

    &nbsp;

 

    </form>

</body>

</html>

</ww:wwWebPage>

 

Next we’ll need to change the VSTemplate file to change the display name of the template:

 

<VSTemplate Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vstemplate/2005" Type="Item">

  <TemplateData>

    <DefaultName>Default.wcsx</DefaultName>

    <Name>My Custom Page</Name>

    <Description>My Custom West Wind Web Connection Page</Description>

    <ProjectType>Web</ProjectType>

    <ProjectSubType>CSharp</ProjectSubType>

    <SortOrder>10</SortOrder>

    <Icon>__TemplateIcon.ico</Icon>

  </TemplateData>

  <TemplateContent>

    <References />

    <ProjectItem TargetFileName="$fileinputname$.$fileinputextension$" ReplaceParameters="true" >Default.wcsx</ProjectItem>

  </TemplateContent>

</VSTemplate>

 

All the rest of the template stays the same.

 

Finally zip these files into a ZIP file called My Custom Page.zip and copy to the template directory above. If you bring up the add new item dialog in Visual Studio now you’ll see the new custom template and when you select it your page generated will have the new template content in it.


Voila - minimal effort and maximum configurability!

 

The possibilities here are endless! It’s so easy to do it might make sense to actually set up custom templates for individual projects to reference custom assemblies (with your own custom controls maybe), project specific stylesheets and controls that end up on most pages for the application.

 

Posted in:

Feedback for this Weblog Entry


Re: Creating Custom Web Connection Page Templates for Visual Studio



Ryan Rahlf
December 21, 2006

Rick, do you know where there is a list of tokens for the .vstemplate file? I see $fileinputname$ and $fileinputextention$ in your examples. Are there more?

 
© Rick Strahl, West Wind Technologies, 2003 - 2024