Creating and Editing XML Documents and Schema

The text editor is equally adept, and just as productive, at editing documents with XML and HTML content. There is also a specific CSS editor for writing and editing cascading style sheets.

Both HTML and XML documents contain structured content involving concepts of nodes and tags, attributes, and node containership. CSS documents fall into this camp, too. The XML, HTML, and CSS editors are aware of the syntactical requirements for their respective defining structures and provide appropriate IntelliSense and formatting help where possible. For a proper treatment of the various editing, validation, and productivity aids available with these editors, see Chapter 7, "Working with Visual Studio's Productivity Aids."

In the following section, we will look at the core editing features supported for the XML, HTML, and CSS document types.

Working with XML Data

XML documents are edited using either a document view or data view. The document view provides standard text editing of the document content; this is the default view you see when loading XML into the XML editor by, for instance, double-clicking an XML file in the Solution Explorer.

The data view presents the XML as a data grid, allowing you to easily add and edit the core XML data contained within the document. You access the data view by first opening the XML document and then selecting the Data Grid command under the View menu. (You can also get access to this command from the shortcut menu. Right-click anywhere within the open XML editor and select View Data Grid.)

The standard document view is typically used to edit the structure of the XML document, while the data grid view excels at letting you quickly edit the data within the XML structures. You can compare and contrast the two views using a simple product catalog sample XML document. Figure 6.27 shows the text view of the document, and Figure 6.28 shows the data view. Notice in the data view that editing is supported across multiple tables and datasets and that both core node data and node attributes can be populated and edited in the grid.

Figure 6.27. XML document: text view.

Figure 6.28. XML document: data view.

Inferring Schema

The XML Editor can automatically generate an XML schema document (XSD) based on a valid XML document. While the XML document is open, select Create Schema from the XML main menu. This will create an XSD document and open it in the XML editor (as a separate document). From there, you can make any needed changes to the XSD document and save it to disk. You can also include it in your project at this point.

Note

If you run the Create Schema command against an XML document that already contains a Document Type Definition (DTD) or XML-Data Reduced (XDR) schema, the XML inference algorithm will use these schemas as the basis for the conversion as opposed to the actual data within the XML document.

Running XSLT Against XML

The XML menu also houses an option to run an XSLT style sheet against an XML document and view the output within a new editor window. You must first attach the XSLT sheet to the XML document; the Properties window for the XML document will include a Stylesheet property. Entering the full path and filename of the XSLT in this property will attach the stylesheet. Alternatively, you can manually code the stylesheet into the XML document's prolog section by typing an xml-stylesheet Processing Instruction prolog into the document, like this:

<?xml-stylesheet type='text/xsl' href='myxsl.xsl'?>

When a stylesheet is associated, selecting the Show XSLT Output option from the XML menu will run the transforms against the XML document and show you the results in a separate editor window.

Working with Cascading Style Sheets

The CSS Editor allows you to build and edit cascading style sheet documents. Because CSS documents are, at their core, text documents, the editor doesn't need to provide much more than standard text-editing features to be effective. There are, however, a few built-in tools available from the editor that allow you to add style rules and build styles using dialog boxes as opposed to free-form text entry.

Adding Style Rules

Right-click within the CSS editor to access the shortcut menu. From there, select the Add Style Rule option. The Add Style Rule dialog box allows you to input an element, class name, or class ID and even define a hierarchy between the rules. Committing the change from this dialog box will inject the necessary content into the CSS editor to create the rule.

Defining Style Sheet Attributes

After you've added a style to the CSS document by either writing the style syntax manually or by using the aforementioned Add Style Rule dialog box, you can edit the attributes of that style using the Style Builder dialog box. You launch this dialog box by right-clicking anywhere within the previously entered style section and then selecting the Build Style option. When you use this dialog box, it is possible to fully describe the style across several different categories from font to layout to list formatting.