Developing XSL outside of the component edit view

Posted: 3 June 2009 in Components, SitePublisher

Let’s face it, the Appearance XSL box is not the greatest tool to do development. Here’s a method you can use to create the XSL using just your browser and your favorite editor.

After you have added all your datum elements in appearance XML or content XML, preview the component and copy the rendered XML in the content XML pane. Create a new file with the name of the component but with a .xml extension. For example, an articles component has you create a articles.component.xml file. Paste your content XML in this file, but you want to make sure to remove IE’s markers for sub elements and add a new xml declaration like

<?xml version="1.0" encoding="utf-8" ?>

Next, create a new file, with the name of your skin but with a .xsl extension. For example a skin named default would have you create a default.xsl file. Open the xsl and paste in the content of the appearance XSL box of the component. If it’s a new component, your file should loook like this:

<!DOCTYPE html-entities SYSTEM "http://www.interwoven.com/livesite/xsl/xsl-html.dtd">
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <!-- Skin: default (Default Browser Type) -->
    <xsl:include href="http://www.interwoven.com/livesite/xsl/HTMLTemplates.xsl"/>
    <xsl:include href="http://www.interwoven.com/livesite/xsl/StringTemplates.xsl"/>
    <xsl:template match="/">
        <div>
        </div>
    </xsl:template>
</xsl:stylesheet>

Finally, all we need to do is link up the two together by adding the xsl to the xml like so:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="default.xsl"?>
<Properties ComponentID="1237290742220" Admin="true">
...
</Properties>

You can now modify the xsl file and preview the changes by opening the xml directly in Firefox or IE. Once you’re all done and it looks the way you want, paste the content of the XSL file into the appearance XML box. Voila.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s