Resources Config File

How many of you are using XSLT? XSLT is a really powerful tool  which I haven’t been using in a while, but recently had a chance to refresh my memory while working on a project.

Sometimes, when there are some resources that are used in several places, it can be useful to keep the information of their properties in a separate file. For example, for an image it could be its path, for a video its URL etc. That way, when a property is changed, it should be updated only in one place. If this sounds like you are creating a config file for your resources – you are

I’m going to explain this idea on a simple example, in which the icons’ information for a html file is stored separately.

Here is the file containing icons’ aliases and paths (Icons.xml):

<?xml version="1.0" encoding="utf-8"?>
<Icons>
  <Icon name="STAR" location="Images\star.png"></Icon>
  <Icon name="DOG" location="Images\dog.png"></Icon>
  <Icon name="CLOUD" location="Images\weather_clouds.png"></Icon>
</Icons>

Each Icon node represents an icon’s properties, and in my case those are: alias (name) and image location (location). Other properties can be saved too, for example alternative text, width, height etc.

The file to be transformed (Original.xml):

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="IconsTransformer.xslt"?>
<Controls>
  <Control id="ID1" img="STAR"></Control>
  <Control id="ID2" img="DOG"></Control>
  <Control id="ID3" img="CLOUD"></Control>
</Controls>

Note: in my example, each image in the original file is represented by Control tag, while its alias is in img tag. Of course, this might not be the case in your project. Instead, you may have completely different tags and attributes to represent the resources in question. That’s not a problem, just be sure to change XSLT variables accordingly!

XSLT file (IconsTransformer.xslt):

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"                >
  <xsl:output method="html" indent="yes"/>
    <xsl:variable name="icons_var" select="document('Icons.xml')/Icons/Icon"></xsl:variable>
    <xsl:template match="Control">
      <xsl:if test="boolean(@img)">
        <xsl:variable name="current_img" select="@img"/>
        <img>
          <xsl:attribute name="src">
            <xsl:value-of select="$icons_var[@name=$current_img[1]]/@location"/>
          </xsl:attribute>
        </img>
      </xsl:if>
      <br />
    </xsl:template>
</xsl:stylesheet>

As you can see, the code is pretty straightforward. First of all, we read all the Icon nodes from the Icons.xml document and put them into icons_var variable. Then, for each control in original file, if the img attribute exists (which is actually the alias of the image declared in Icons.xml), its value is used to extract the path to the image with that alias.

The result of the transformation, in my case, looks something like this:

How will this work? Well, each time an image is needed in the output html file, its alias (STAR) is set in the original file, instead of its location path (Images\star.png). This way, if an image is replaced, there is no need to do search & replace all of its occurrences in the document. Instead, only its location is changed in Icons.xml.

This simple change has shown to be very useful in my project, hopefully it’ll help you with yours!