Customizing Code Snippets in FrontPage 2003

 

Lisa Wollin
Microsoft Corporation

May 2004

Applies to:
    Microsoft® Office FrontPage® 2003

Summary:   Learn how to create custom code snippet files in Microsoft Office FrontPage 2003 that adhere to the Code Snippet Configuration schema. (8 printed pages)

Contents

Introduction to Custom Code Snippets
Working with Code Snippets
Code Snippet Configuration Schema Reference
Extending Code Snippets
Conclusion

Introduction to Custom Code Snippets

Have you ever found yourself typing the same code over and over again? If you're like me, you have a text file that contains snippets of code that you frequently use, such as DOCTYPE declarations and scripts, that you can easily copy and paste into your Web pages. Well, we designed the code snippet feature in Microsoft® Office FrontPage® 2003 especially for you.

A code snippet is a fragment of code or text that you can store and reuse many times. In addition to being able to use a selection of pre-defined code snippets, FrontPage allows you to create new snippets, delete unused snippets, and modify existing snippets. In addition, you can create and distribute custom code snippet files.

For example, perhaps you have an external Cascading Style Sheet that you typically reference in each of your Web pages. You could create a code snippet that allows you to insert quickly and easily the necessary code into new pages that you create with very little, if any, typing. You can even create custom code snippet files and distribute them to others, for example to other Web developers within your organization or to customers and clients.

This article briefly explains how to create and insert custom code snippets in FrontPage, and then describes in detail the XML schema that FrontPage uses when working with code snippets.

Note   XML stands for Extensible Markup Language. Similar to HTML, XML is a markup language designed for the Internet. However, unlike HTML, which was designed to define formatting of Web pages, XML was designed to describe data. You can use XML to develop custom schemas. As with HTML, the World Wide Web Consortium defined the specifications for XML. For more information on XML and the XML specification, see Extensible Markup Language on the World Wide Web Consortium Web site.

Working with Code Snippets

By default, FrontPage installs several pre-defined code snippets. Pre-defined code snippets installed with FrontPage are stored in an XML file named FPSnippets.xml located at a default location for an English installation of %Program Files%\Microsoft Office\Templates\1033\Snippets11. (The folder name 1033 indicates the English language, so you may see a different folder number depending on the language of your FrontPage installation.) These pre-defined code snippets include DOCTYPE declarations, META elements, and script blocks. You can modify these for your own use or even remove them by using the Code Snippet tab in the Page Options dialog box (Tools menu).

When you create your own custom code snippets by using the Add Code Snippet dialog box, FrontPage saves your code snippets to an XML file named FPSnippetsCustom.xml located at %userprofile%\Application Data\Microsoft\FrontPage\Snippets. This XML file stores code snippets in an XML format that adheres to the Code Snippet Configuration schema

To create a code snippet

  1. In FrontPage, open the Tools menu and click on Page Options.
  2. Click on the Code Snippets tab.
  3. Click Add.
  4. In the Add Code Snippet dialog box, enter the following values:
    Keyword: css1
    Description: CSS reference
    Code: <link rel="stylesheet" type="text/css" href="http://www.cohowinery.com/resources/web.css">
  5. Click OK.

The new code snippet appears in the list of available snippets on the Code Snippets tab in the Page Options dialog box, and you can insert the code snippet into your files by using the keyword "css1".

To insert a code snippet

  1. Switch to Code view and position your insertion point where you want to insert the code. Press CTRL+ENTER. You see a drop-down list (similar to the IntelliSense drop-down list) with all the code snippets available on your computer.
  2. Type css1. As you type the keyword that you assigned, notice that the selected code snippet changes. In many cases, you do not even need to finish typing the keyword before FrontPage highlights the correct code snippet.
  3. Press Enter. FrontPage inserts the code into your page at the insertion point.

If you often work in Code view, you may want to turn on the Code View toolbar, which includes access to all code snippets. To display the toolbar, on the View menu, click Toolbars, and select Code View. To use the toolbar, position your insertion point where you want to insert the code, and then click the List Code Snippets icon on the Code View toolbar and double-click the code snippet that you want to insert.

Note   The Code View toolbar is available only in Code view or when the insertion point is in the code window in Split view. It is not available in Design view or when the insertion point is in the design window in Split view.

Understanding the Code Snippet XML

As mentioned previously, when you create a custom code snippet, FrontPage stores it in the FPSnippetsCustom.xml file located at %userprofile%\Application Data\Microsoft\FrontPage\Snippets. This file adheres to the Code Snippet Configuration schema (explained later in this article). If you performed the steps provided previously to create a custom code snippet, when you open the FPSnippetsCustom.xml file, you see that the contents of the file look very similar to the following XML code.

Note   To open the FPSnippetsCustom.xml file, navigate to it in Microsoft Windows® Explorer, and open it in Notepad.

<?xml version="1.0"?>
<!-- Code Snippet Configuration File -->
<snippets>
   <snippet keyword="css1">
      <description>CSS reference</description>
      <text>&lt;link rel="stylesheet" type="text/css" 
      href="http://cohowinery.com/resources/web.css"&gt;</text>
   </snippet>
</snippets>

Sample 1

As you can see, the schema for code snippets is relatively simple. The first line of the query syntax indicates the document type declaration. The version attribute indicates that the document conforms to version 1.0 of the XML specification. This is the standard DOCTYPE declaration that is used when working with XML files.

Following the DOCTYPE declaration is a comment. Although this comment is optional, you may find it useful to describe the contents of your custom code snippet files. For example, say you have a collection of code snippets that you want to send to Web developers within your organization. You could insert a comment here that explains the purpose of the code snippets in the file. Although your users never see the comment, it can be useful if you maintain several snippet files.

Following the comment line is the snippets element. The snippets element marks the beginning of the collection of code snippets and is the top-level element for the Code Snippet Configuration schema.

The snippet element is the only child element for the snippets element and contains one required attribute named keyword. The keyword attribute contains the characters that you can use to insert the snippet. This keyword uniquely identifies each code snippet, so you should ensure that no two code snippets use the same keyword.

Note   Although using the same keyword for multiple snippets will not cause problems in FrontPage, multiple snippets with the same name may cause confusion when users attempt to use your snippets.

The description element provides a friendly description of the code snippet. The description is displayed in the list of available snippets on the Code Snippets tab in the Page Options dialog box (Tools menu), and in the drop-down list that is displayed when you press CTRL+ENTER when in Code view.

The code snippet itself is in the text element. Look at the value of the text element in sample 1; it contains HTML special symbol codes for the greater than (&gt;) and less than symbols (&lt;). Because XML uses the greater than and less than symbols as element delimiters, as does HTML, the symbol codes are necessary when working with HTML code within an XML document unless they are contained within special CDATA sections. Otherwise, the code snippet appears the same inside the text element as it would when placed in a Web page, including tabs and line breaks.

Note   CDATA sections are sections embedded within XML that contain markup text that is not part of the XML markup, such as putting HTML markup text inside XML markup. Otherwise, XML parsers view the HTML markup text as XML and attempt to process it as such. However, XML parsers ignore text inside CDATA sections. The format for CDATA sections is as follows:

<![CDATA[ markup ]]>

If you want a code snippet to surround selected text or you want to type text inside the snippet after you insert it into a document, use a single pipe character "|" to mark the position of the insertion point. For example, in the following code snippet the insertion point should be positioned within the quotes for the href attribute:

<text>&lt;link rel="stylesheet" type="text/css" href="|"&gt;</text>.

Add a second pipe character to create a selection that comprises everything between the two pipe characters.

Managing Default Code Snippets

When you remove one or more of the pre-defined code snippets, FrontPage creates a file named FPSnippetsHidden.xml located at %userprofile%\Application Data\Microsoft\FrontPage\Snippets. The FPSnippetsHidden.xml file is similar to that of FPSnippets.xml in that it contains a snippets element with one or more snippet elements. However, the snippet elements do not include the description and text elements, but instead include the hidden attribute with a value of true. The original code snippet is not removed from the FPSnippets.xml file. This allows users to recover removed snippets without reinstalling FrontPage.

Note   FPSnippetsHidden.xml contains only FrontPage predefined code snippets that were removed, not custom code snippets. When users remove custom code snippets, FrontPage deletes them permanently from the custom code snippet file.

Creating Custom Code Snippet Files

You can easily create custom code snippet files and then distribute them to other developers. You can generate the necessary XML by using the Add Code Snippet dialog box to create the XML for the code snippets, and then copying the resulting XML from the FPSnippetsCustom.xml file into another file that adheres to the Code Snippet Configuration schema. (Alternatively, you can type code snippets directly into a new file using the Code Snippet Configuration schema.)

In fact, we recommend that if you want to distribute code snippets to others, you do so by creating a custom file and sending the code snippet file. If you do this, you ensure that you do not overwrite any code snippets that others have created on their local computers.

If you plan to distribute code snippets to others, we recommend that you create a custom code snippet file. If you give your custom snippet file the same file name that FrontPage uses to store custom code snippets, you overwrite the custom snippet files of your recipients, perhaps deleting any custom snippets they created. Using a different file name for your custom code snippet files ensures that you do not overwrite the custom code snippets of others.

You should store custom code snippet files in the Snippets folder in the recipient's Application Data folder, which is located at %userprofile%\Application Data\Microsoft\FrontPage\Snippets. If you store them in a different location, FrontPage cannot find them.

To create a custom code snippet file

  1. Create a custom code snippet as explained previously in To create a code snippet.

  2. Open in Notepad the FPSnippetsCustom.xml file located at %userprofile%\Application Data\Microsoft\FrontPage\Snippets.

  3. On the File menu, click Save As.

  4. In the File name text box, type "CustomFPSnippets.xml". Click Save.

  5. Remove any snippets that you do not want to distribute to others. (You may want to turn off Word Wrap on the Format menu.)

  6. Save the file again and close Notepad.

  7. Open Windows Explorer and navigate to %userprofile%\Application Data\Microsoft\FrontPage\Snippets.

  8. Locate the file named CustomFPSnippets.xml and move it out of the Snippets folder.

    Note   Because you saved the FPSnippetsCustom.xml file with a new name, if you do not move the new file, each of the snippets appears twice on the Code Snippets tab in the Page Options dialog box.

Now you have a custom code snippet file that you can distribute to anyone who has FrontPage 2003.

Code Snippet Configuration Schema Reference

The Code Snippet Configuration schema is a relatively simple schema that contains four elements. The schema syntax is shown below. More information on each of the elements is contained in the sections that follow.

Schema Syntax

<snippets>
   <snippet>
      <description></description>
      <text></text>
   </snippet>
</snippets>

Example

The following code sample shows a basic code snippet file that adheres to the Code Snippet Configuration schema. This example contains one code snippet.

<?xml version="1.0"?>
<!-- Code Snippet Configuration File -->
<snippets>
   <snippet keyword="css1">
      <description>CSS reference</description>
      <text>&lt;link rel="stylesheet" type="text/css" 
      href="http://cohowinery.com/resources/web.css"&gt;</text>
   </snippet>
</snippets>

description Element

The description element provides a descriptive statement about the snippet. FrontPage displays code snippet descriptions in the list of snippets on the Code Snippet tab in the Page Options dialog box and in the IntelliSense drop-down list. The description element is a child of the snippet element and contains no attributes or child elements. The description element is required but can remain empty if you choose not to include a description for a code snippet.

Note   Because multiple snippets with the same keyword are possible, a description provides more information about a snippet.

Syntax

<description></description>

snippets Element

The snippets element is the top-level element for the Code Snippet Configuration schema. The snippets element is required and contains no attributes and one required child element.

Syntax

<snippets>
   <snippet></snippet>
</snippets>

snippet Element

The snippet element contains the information necessary for each individual code snippet. The snippet element is required and contains one required attribute, one optional attribute, and two required elements. Table 1 describes the attributes of the snippet element.

Syntax

<snippet>
   <description></description>
   <text></text>
</snippet>

Table 1. Attributes of the snippet element

Attribute Data type Description
keyword String Required. Contains a sequence of characters that can be used to insert the code snippet into a Web page.
hidden Boolean Optional. Indicates whether the snippet is displayed in the list of code snippets.

text Element

The text element contains the actual code for the code snippet.

Important   If you create code snippets manually rather than using the Add Snippet dialog box, the angle brackets (greater than and less than symbols) that surround HTML element names must be converted to their HTML equivalents. For example, you must replace the greater than (>) symbol with "&gt;" and the less than (<) symbol with "&lt;". Doing otherwise produces an error and prevents FrontPage from opening the snippet file. FrontPage converts these to the angle brackets prior to inserting the snippets into your Web pages.

Alternatively, you can use CDATA sections to store the HTML code without converting the angle brackets. For example, the following code shows HTML code nested within a CDATA section.

<![CDATA[<link rel="stylesheet" href="|" type="text/css">]]>

Syntax

<text></text>

Extending Code Snippets

Code snippets are not accessible from the FrontPage object model; however, you can easily create an add-in that extends the FrontPage Code Snippet functionality. For example, you might want to create a snippet manager that allows users to categorize and organize snippets, create new snippets, edit snippets, and delete snippets. You can do this by using the XML Document Object Model (XMLDOM) and XPath queries to parse the code snippet XML files.

To access the XMLDOM in a Microsoft Visual Basic® for Applications, Visual Basic, or other COM add-in project, add a reference to the Microsoft XML, 5.0 type library. For more information on the XMLDOM, see the DOM Developer's Guide.

To access the XMLDOM in a managed add-in project, add a reference to the System.XML namespace. For more information, see the System.Xml Namespace in the .NET Framework Class Library.

Conclusion

The Code Snippets feature in FrontPage provides a way to save time and keystrokes—no more retyping or copying and pasting code from another file. Now you can create simple code snippets and distribute your custom code snippet files to others. You can even extend the Code Snippet feature to create an add-in to manage code snippets. You are ready to begin sharing your code snippets with others as well as creating your own custom solutions for fun and profit.