More Frontal Markup

From Frontal Wiki

Namespaces

Frontal documents support XML namespaces. Namespaces are a wacky but very useful addition that allow you to use the same tag names and attributes names to mean different things, depending on which namespace they're defined in. This is best shown in an example:

<div xmlns:ns="http://www.frontalcode.com/ns/">
    <text onClick="document.write('normal click');" ns:onClick="document.write('click from another dimension!');">click me</text>
</div>

So in this example, you can see that we've defined the "onClick" attribute twice, but we differentiated them with a namespace. And when we click the text, both interactions are run. Why is this important? Why can't we do the following instead?

<text onClick="document.write('normal click');" onClick="document.write('click from another dimension!');">click me</text>

First of all, if you recall from the section Frontal Markup, we can only have one attribute at a time on an element, so these two "onClick" attributes would cause an error. Second, what would this mean? Would it mean to run both, or would it mean that the second should override the first? Well, namespaces solve this problem and more.

With Frontal, there are many convenient style classes that define onClick behaviors. While these behaviors might be what you want, they might just be a subset of what you want. With namespaces you can easily add more interactions to these style classes. For example, the Frontal style sheet defines something called a "marker" that creates an interaction which lets your visitor easily jump to a particular slide in a slide show. Let's say you also want that marker to play a sound when it's clicked. Using namespaces, you can easily add this interaction to the style class that defines a marker. Or, perhaps you want to track the click with Google Analytics? That's another great use of namespaces. See Two-Way Communicating between JavaScript and Frontal Scripts for an example of namespaces in action.

As we saw in the example, the way to define a namespace is with another namespace 'xmlns'. In this namespace, we create namespace prefixes that are particular to the document. In our example, we created a prefix "ns" but it could've been "mynamespace", "foo", or "bar". The primary constraint on these prefixes is that they need to be unique in the document.

Then the value for this namespace attribute is what is called a URI or Universal Resource Indicator. The most common URI is a URL, otherwise known as a web address. The point of this value is to associate this namespace with something unique. In practice it means entering URLs to some domain that you own, simply so that your namespaces won't conflict with someone else's. Don't use "http://www.google.com/" for example! Having said that, this link won't be visited by Frontal or your site's visitors; it's just a reference point.

Adding Your Own Tags

Adding custom tags to a Frontal document is done with an interaction. When the document is parsed and an unknown tag is encountered, then the interaction getClassRefByNodeName is called. The pre-defined variables it has are:

• nodeName: The name of the unknown tag.
• attributes: An instance of the Frontal attributes class that represents the attributes on the tag. This object supports the same getAttribute and attributeExists methods that are defined in the DocumentElement class.
• node: This is the Flash XML node that is being parsed. That is, node.name() is equivalent to the "name" variable.

As an example, here we treat the 'foo' tag like a 'div' tag, by virtue of the fact that com.frontalcode.Container is the class that Frontal uses to handle the div element.

<script><![CDATA[
    document.sA ( "onGetClassRefByNodeName", "return getClassRefByNodeName ( nodeName, attributes, node );" );
 
    function getClassRefByNodeName ( nodeName, attributes, node )
    {
        var result = null;
        if ( nodeName == "foo" ) result = com.frontalcode.Container;
        return result;
    }
]]></script>
<foo style="width: 50px; height: 50px; background-color: purple;" />

The primary use of this feature is to be able to change the tag names in order to support different style classes, or to be able to render a non-Frontal XML document in some primitive way. Its utility increases if you build your own Frontal Renderer by downloading the source code. By doing so it's possible to create custom DocumentElement classes that could then be returned by this interaction. This would allow for completely custom element implementations.