Use a dataview to create a color table from XML

I’m Steve Schermerhorn, one of the new developers on the Expression Web team.

When I’m developing a website or application I’m typically dealing with a wide range of colors throughout my project. On more than one occasion it would have been really handy to have a visual reference that also mapped the colors to their names and hex values. I eventually managed to come up with a solution using an XSL to transform an XML file into a nice little color reference table I could print off and hang on my wall. This little ‘how to’ is going to give you a very hands on example on how you can take an XML file and create an HTML page.

1. The data
   For this example I started with an XML file I that I created referencing the system colors used by Windows. [ http://msdn.microsoft.com/en-us/library/system.drawing.systemcolors.aspx ].
   
   
   
2. Create a dataview of the XML file
   Next, I created an HTML page in Expression Web, and then simply dragged the ColorTable.xml file from the Folder List task pane into the Design view of the HTML page. When you do that, Expression Web generates an XSL file and JavaScript for you, which display the data in a table.
   
   
   When you save the page, Expression Web prompts you to save the JavaScript and XSL files to your website.
   
   
   
3. Add style to the XML data
   
   You can format the dataview of your XML file as you would any other table or text in Expression Web. When you format the table or text in a data view, Expression Web automatically updates the XSL file for you. For example, I used the Highlight button in the toolbar to add a color background to the top header row of the table, changed the font of the header cells, and reduced the width of my columns. I also added a new column to the left of the first column.When I saved my page, Expression Web prompted me to save the changes it made to the XSL file.
   
    
   
   Next I opened up the XSL file that Expression Web generated, located my new blank column, and added the following attribute to the <td> tag for that column:
   bgcolor="{@ColorValue}"

That attribute sets the background column of every cell to the value of the ColorValue specified for that row in the Color Value column.