Getting Started with Tags
From Frontal Wiki
You use tags in your Frontal document to create a visual structure that will support your design. You'll then use styles to make this structure look the way you want it to look.
The tags you have to do this are:
There are also non-visual tags that you may use as well:
All of these tags are described in detail in the Category:Tag Reference but here we give a brief overview of what's available and when you'd use them.
Contents |
div
The div tag is the most basic visual element of Frontal. As such, it's the basis of all the other visual tags.
The 'div' tag delivers all the formatting and layout functionality that's at the heart of the Frontal renderer, fully explained in Frontal's Layout Scheme.
<div> supports many visual styles to add backgrounds, borders, drop shadows, glow, transparency, rotation, scaling, and more. It also supports many interactions to handle mouse roll over and roll out, clicks and double clicks, etc. Also, the 'div' tag supports scrollbars and progress indicators.
Because the 'div' tag is so fundamental, yet has so much functionality, it tends to get overused. If you catch yourself wrapping every 'text', 'img' and 'video' tag inside of a div, remember that the 'div' tag is the basis for all of these visual elements, and so they have the same properties and capabilities. For example, there's no need to write this:
<div style="margin: auto;" onClick="doSomething();"> <img src="http://frontalcode.com/assets/images/image_8.jpg" /> </div>
This will do just fine, and will initialize and render faster:
<img style="margin: auto;" onClick="doSomething();" src="http://frontalcode.com/assets/images/image_8.jpg" />
img
The img tag is used to load images, Flash SWFs and Flash library symbols into our rendered Frontal document. Here for example we load an image and a SWF.
<img style="margin: auto;" src="http://frontalcode.com/assets/images/image_8.jpg" /> <img style="top: 0px;" src="http://www.frontalcode.com/assets/swfs/test.swf" />
In the img tag reference, we discuss how to scale images so that they maintain their aspect ratio, the Flash permissions behind loading images and manipulating them with styles like allow-smoothing, and the styles you can use to control a SWF's or movie clip's "[playhead][1]" when it responds to events like roll over and out.
text
The text tag adds text to your Frontal document. The text tag is implemented using Flash's "TextField" class, so it provides all of Flash's font rendering capabilities. It also supports some limited HTML that can come in handy when creating relatively complex text layouts.
In the text tag reference section, you can see how to load external fonts with Frontal, how to add scrollbars to text elements, and how to use text tags to create links and other things.
video
The video tag embeds video into your Frontal document. Frontal uses the "FLVPlayback" class for this purpose, so it supports that class's myriad features like skins, fullscreen mode, streaming and buffering options, etc.
In addition, and as you can see in the video tag reference section, you can add cue points to videos that trigger scripts when they're hit, and you can set them up with their own deep links, making them indexable by search engines. We also discuss video scaling, how to make a video loop, how to rewind a video when it's selected, etc.
form and input
We use the form and input tags as we would in HTML -- to build forms that the user can fill out and submit to a server-side program.
In the form tag reference section, we discuss how to build out a complete form with form validation and processing, and "thank you" messages. We also discuss various ways that form data may be encoded and transmitted. And we talk about how returned data may be handled.
In the input tag reference section, we talk about all of the various form input types that Frontal supports, like text inputs, checkboxes, radio buttons, file inputs, etc. We also talk about how these inputs are fully customizable and replaceable. And, we discuss an easy way to add new input types.
manager and transitioner
The manager and transitioner are non-visual tags. <manager> is used to control the selection of one visual element from a group of visual elements. As the selection changes, <transitioner> governs how it looks to move away from one element to another. For example, fading out from the current selection, and fading into the new selection. Some common uses for both 'manager' and 'transitioner' tags are:
- slide shows
- menued sections
- tabbed interfaces
- forms with processing, error, and "thank you" pages
The 'manager' tag is designed to be extremely flexible, so the above use cases represent the proverbial "tip of the iceberg".
Here's a simple example of how to use a 'manager' tag to create a slide show of images. Click the image to change the slide.
<style><![CDATA[ .slideshow { layout: stack; margin: auto; } manager { hide-unselected: true; tween-container-init: true; } img { shadow-distance: 4px; shadow-strength: 0.25; allow-smoothing: true; @mgrId: mgr } ]]></style> <div class="slideshow"> <manager id="mgr"> <transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="15" /> <transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="15" delay="15" /> </manager> <img class="frButtonNext" src="http://www.frontalcode.com/assets/images/image_1.jpg" /> <img class="frButtonNext" src="http://www.frontalcode.com/assets/images/image_2.jpg" /> <img class="frButtonNext" src="http://www.frontalcode.com/assets/images/image_3.jpg" /> </div>
In the manager tag reference section, you'll see how interactions may be tied into the selection of elements, how buttons can be added to change the selection, and how other visual elements may be made to react to a selection. You'll also see how complex hierarchical relationships can be imposed on the elements affected by a manager.
In the transitioner tag reference section, you'll see how complex transitions may be defined for a manager. This complexity includes being able to change the transition based on which visual element is being selected, or which is being deselected. It also includes being able to apply any number of effects at once, or delayed over time.
style
The style tag is a non-visual element that's used to create a style sheet. A style sheet is a way to group styles (visual and functional modifiers for the elements in our Frontal document) that are then applied to your document. This is very handy for organizing and maintaining your code. For details, see Frontal Style Sheets and More Frontal Style Sheets.
script
The script tag is a non-visual element that allows you to run Frontal scripts inline when the document is parsed. This is handy for conditionally altering the structure of the Frontal document, or for defining global variables and functions for use later. See Frontal Scripting for details.
include
The include tag is a non-visual element that allows you to insert external XML documents into your Frontal document, or to load external resource SWF's that may contain ActionScript libraries, fonts, and symbols. The include tag reference section talks about this in detail, as well as about how to build these external resources. It also discusses how to deal with potential security issues.
template
The template tag is a non-visual element that allows you to group a set of Frontal elements for use later. For example, you could use a 'template' tag to define the structure of scrollbars and progress indicators. You could also use them whenever you need to replicate a lot of elements in a Frontal document. See the template tag reference section for details.
alt
The alt tag enables you to define alternate content for Frontal document elements. For example, you can use this when the Frontal document is being transformed, into HTML as part of the the Frontal SEO process. See the alt tag reference section for more details.