String Templating in Flex

When working with String templates, code can easily become quite difficult to read and, consequently, to understand, maintain and modify. This blog post explains 2 techniques that can help you dealing with String concatenation and templating: StringUtil.substitue and [Embed] compiler directive.

For simple String concatenation like:

var value : String = "The value " + user + " requested is \"" + value "\"";

You can alwayus use StringUtil.substitue, which will help you having a wider vision of the message being built:

import mx.utils.StringUtil;
var value : String = StringUtil.substitute("The value {0} requested is \"{1}\"", user, value);

When creating multi-line Strings, things can easily get uglier:

var errorCode:String;
var errorString:String;
var errorMessage:String;

var str:String = "<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\">\n"
str += "<html><head>\n";
str += "<title>" + errorCode + " " + errorString + "</title>\n"
str += "</head><body>\n";
str += "<h1>" + errorCode + "</h1>\n";
str += "<p>" + errorMessage + "</p>\n";
str += "</body></html>";

Not to say that this could get worse. A way to make it a little bit more readable would be using the StringUtil substitution technique:

var str:String = "<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\">\n"
str += "<html><head>\n";
str += "<title>{0}{1}</title>\n"
str += "</head><body>\n";
str += "<h1>{0}</h1>\n";
str += "<p>{2}</p>\n";
str += "</body></html>";

StringUtil.substitute( str, errorCode, errorString, errorMessage);

The problem with this is that there’s still too much infrastructure to create the base template and it’s difficult, at first sight, to see where are the substitution tokens. On the other hand, the templated text by itself might not have that much relevance in the code and might distract developers from other imporntant things.

A nice way to achieve the same result consists in externalizing the template to a text file and get some help from the compiler:

[Embed(source="yourTemplate.txt", mimeType="application/octet-stream")]
private var templateDefinition : Class;

StringUtil.substitute( new templateDefinition(), errorCode, errorString, errorMessage);

Where yourTemplate.txt is a simple text file with the template itself:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>{0} {1}</title>
</head><body>
<h1>{1}</h1>
<p>{2}</p>
</body></html>

Note that using the [Embed] metadata instructs the compiler to link the file content at compile time, making our code completely synchronous.

Also note that we’re substituting the parameters using the order, it’d would fairly easy to do a named-parameter subsitution instead (i.e. using tokens like ${var1})

Finally, in MXML you can use this other technique to compile an external text file:

<fx:String id="template" source="path/to/your/template.txt"/>

7 Comments to “String Templating in Flex”

  1. Quentin 10 May 2010 at 12:55 pm #

    Thanks!
    Actually I was looking for something like that to use with Lupo Manager and localization!

  2. String Templating in Flex | Dev Art Of War

    [...] Source http://www.rialvalue.com/blog/2010/05/10/string-templating-in-flex/ [...]

  3. Eric Wilson 16 May 2010 at 7:11 am #

    Another way that works in a code file that makes String handling more natural: You can avoid concatenating lines of a string by newing a String and putting the contents of the string between
    );

    Example:
    public var template1 : String = new String(
    ); // end of string

  4. Eric Wilson 16 May 2010 at 7:15 am #

    In my previous comment, the CDATA block was removed by the website. The code should have a CDATA block withing the contructor call of the String.

  5. David Salahi 16 May 2010 at 6:40 pm #

    Xavi,
    This is very nice except that I’m having a problem with the fx:String syntax you present at the very end. When I use this approach the string that is loaded does not have the curly braces surrounding the template parameter numbers. Therefore, the string substitution does not work. Here’s my code:
    < fx:String id=”template” source=”yourTemplate.txt”/>
    David Salahi

  6. David Salahi 16 May 2010 at 6:50 pm #

    P.S. The RSS feed link at the top of this page doesn’t work.

  7. xbeumala 16 May 2010 at 6:54 pm #

    Hi David,

    I’m just in the middle of upgrading my WordPress installation, I’ll check the link after the installation process. In meantime you can use this url feed:http://www.rialvalue.com/blog/feed/

    I’ll check the problem you mention with fx:Sting and I’ll let you know


Leave a Reply