Frontal Markup

From Frontal Wiki

A markup language is a set of text annotations that describe how something should be structured. Examples you probably know are HTML, which stands for Hyper Text Markup Language, and XML, which stands for eXtensible Markup Language. We use the term so that we can refer to the tag-based aspect of Frontal.

Tags

So the markup language nature of Frontal is found in its use of tags in a text file to describe a graphical presentation. A tag is a word surrounded by angle brackets like <div>. Tags always come in pairs. That is, if there's a <div> tag then there's a corresponding </div> tag. The <div> tag is called the "start tag" or "opening tag" because it always comes first, and the </div> tag is called the "end tag" or "closing tag" because (you guessed it!) it always comes last. Note the forward slash just after the left angle bracket in the end tag.

Elements

An element is a start tag, its matching end tag, and everything in between. If an element has a start tag and an end tag only, then it's called "empty." For example, <text></text> is an empty text element. As a shorthand, XML allows empty elements to also be written like this: <text />.

An element may contain other elements. In that case, the inner elements are called "nested" and the outer element is said to have "complex contents". Here's an example of a 'div' element with complex contents. The 'text' element is nested.

<div>
 
    <text>
 
    </text>
 
</div>

While elements may be nested, they may not be interleaved. This is an invalid construct:

<div>
 
    <text>
 
</div>
 
    </text>

If you enter this into the Workspace editor, Frontal will report an error.

While Frontal is very much like HTML, it's a bit stricter than some flavors of HTML and some HTML browsers. For example, in HTML, an 'img' tag like the following will render quite happily:

<img src="http://www.frontalcode.com/assets/images/image_1.jpg">

In Frontal (and in strict XHTML for that matter), this would produce an error because there's no closing tag. For Frontal, the correct syntax would be this:

<img src="http://www.frontalcode.com/assets/images/image_1.jpg" />

Also, unlike HTML, all tag and attribute names are case sensitive. (We'll discuss what attributes are shortly.)

Here's the complete list of tags that Frontal uses:

• div: This creates a division or section in the document.
• text: This adds text.
• img: This adds an image.
• video: This adds a video.
• manager: This groups and manages its sibling tags to do things like slide shows and sites with menus.
• transitioner: This tag describes to the manager how to animate from one tag to another.
• style: This tag adds a style sheet to a document.
• include: This tag loads external resources or document snippets.
• script: This tag runs programs that can manipulate the document.
• template: This tag groups a number of tags for easy reproduction and reuse in the document.
• form: This tag defines a form that can be used to submit input and files to a server.
• input: This tag is used to define an input in a form.

While this list may seem short, especially compared to HTML, it's a very complete set largely because of Frontal's philosophy that everything should be readily extensible. Check out some of the examples in the Code Cookbook -- for example, see how a 'div' can be made to act like a Google Map or a Brightcove video player. However, if you do want more tags, Frontal makes it easy to add custom tags. See the Advanced Topics section for more details.

There are a few more tags that you can use, though they aren't really part of Frontal proper. These are the HTML tags that Flash's AS3 TextField class understands. Since the Frontal 'text' tag is implemented using this class, then it too can understand these tags. But because they aren't native to Frontal, they need to be escaped so that Frontal doesn't try to process them itself. We do that with a special and somewhat odd XML sequence called the CDATA element. This element is like other elements in that it has a start tag and an end tag, but other than that, they don't look much like normal tags. The CDATA element's start tag is '<![CDATA[' and its end tag is ']]>'. For example, here's a 'text' tag with HTML content that Flash will interpret for us. With this example, be careful not to separate the opening 'CDATA' tag from the opening 'img' tag -- it exposes a small problem in the Flash player: http://bugs.adobe.com/jira/browse/FP-1947

<text style="condense-white: true; width: 300px;">
<![CDATA[<img src="http://frontalcode.com/images/logo.gif" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
]]>
</text>

If we didn't include the CDATA element, the HTML markup wouldn't have been preserved.

Attributes

Elements may have attributes. These are words added to the start tag that provide extra information to the Frontal renderer, or your own scripts, about how the element should be displayed or how it should interact. For example, here's an 'img' tag with three attributes: 'src', 'onMouseOver' and 'onMouseOut'.

<img onMouseOver="setAttribute('src','http://www.frontalcode.com/assets/images/image_2.jpg');" onMouseOut="setAttribute('src','http://www.frontalcode.com/assets/images/image_1.jpg');" src="http://www.frontalcode.com/assets/images/image_1.jpg" />

So as you can see, an attribute is a name, followed by the equals sign, followed by a value in quotes (either double or single). Attributes should follow these rules:

• Attributes are case sensitive.
• Do not add space around the equals sign.
• If the value is in double quotes, then it may contain single quotes, e.g., attribute="I'm so happy." If it's in single quotes, then it may contain double quotes. If the value needs to contain both, then use the escape sequence "&quot;" for double quotes and "&apos;" for single quotes.
• A particular attribute may occur only one time with an element.

Adding Comments to Your Code

You can add comments to your Frontal document using the XML comment element. This is a special element that starts with "<!--" and ends with "-->". Anything in between these tags will be ignored, including other elements.

So for example, here we have a red div inside of a blue div.

<div style="width: 20%; height: 20%; background-color: blue;">
	<div style="width: 20%; height: 20%; background-color: red;" />
</div>

And in this exmaple, we've added comment tags around teh red div and so it no longer shows up:

<div style="width: 20%; height: 20%; background-color: blue;">
<!--
	<div style="width: 20%; height: 20%; background-color: red;" />
-->
</div>

Note the comment tags "<!-- -->" are for hiding elements in the markup. Elsewhere we'll see other comment structures ("//" and "/* */") for hiding elements within the contents style and script tags. We mention this here to avoid confusion.

Conclusion

We've now introduced the building blocks of a Frontal document. It's a collection of elements that consist of tags, attributes and content. The particular elements that we use and how we organize them will determine how our Frontal document is rendered.