Tag Classes, Inheritance, Styles, Attributes & Methods

From Frontal Wiki

Jump to: navigation, search

Tags in Frontal are similar to those in HTML, though in HTML, there's more emphasis placed on the relationship of a tag to the document being presented. For example, an HTML document may have <h1 />, <li /> and <p /> tags. All of these display text, and also indicate relationships between the text and other pieces of text in the document. In Frontal, there's simply a <text /> tag (though within that tag, there may be <p />, <li /> and other tags via Flash's simple HTML support). The reason for this is, with Frontal, we're primarily concerned about the display of divs, and less about their particular meaning within the document as a whole. The upshot of this is that there are far fewer tags in Frontal than in HTML.

In this section, we'll discuss Frontal tags and the Flash AS3 classes that implement their behaviors. See the section Accessing Frontal Tags for Scripting for a discussion about what this means. In general, when we write a script to handle an interaction or use the 'gE' method to get an element, we're dealing with the objects that implement the Frontal tags and not the element in the XML definition. (To access that, we use the "node" property on the object.) So when we talk about properties and methods, we're talking about features accessible through these objects.

Contents

Methods

All of the Frontal tags listed below are implemented by subclasses of DocumentElement, which we introduced earlier in "Accessing Frontal Tags for Scripting". Along with the methods mentioned there, we now add the following:

  • applyInteraction: This method adds an interaction to an element and is used as part of the rendering process described in Advanced Topics. Sometimes though, it's useful to apply it manually, particularly after removing an interaction. It takes the following parameters:
    • type: The type of event that triggers the interaction, such as Flash's MouseEvent.CLICK.
    • target: The event dispatcher to listen to. By default, it listens to the object itself. User interactions are for visual elements, and they listen to the object's movie.
    • attribute: The attribute to use for the interaction. By default, it's the word "on" plus the 'type', with its first letter capitalized. The attribute will be sought in all XML namespaces for which attributes have been applied to this element.
    • handlerOptions: An object with the following members. By default, it's null, in which case, standard event handling is done.
      • preventDefault: Whether to prevent this event's default behavior or not.
      • stopImmediatePropagation: Whether handling of this event should stop immediately.
      • stopPropagation: Whether propagation of this event should stop.
  • removeInteraction: This method removes an interaction. This is helpful when trying to optimize a processor-consuming interaction like onMouseMove or onEnterFrame.
  • runInteractions: This method will run the script associated with the given attribute in the given namespace. If no namespace is given, then all namespaces are examined for the given attribute. In that case, the return value is always that of running the interaction defined by the attribute in the document's default namespace. To get results from attributes in other namespaces, use runInteractionsWithResults. It returns the value returned by the script associated with the attribute in the given namespace. If namespace is null, then the value returned by the script associated with the attribute in the document's default namespace is the one returned. If no such script exists, then undefined is returned. The methods take the following parameters:
    • attribute: The attribute to get the script from, e.g., "onClick."
    • localVariables: An Object keyed by variable names that should be pre-populated in the script's scope when it's executed.
    • namespace: A namespace (either a String or a Namespace) to examine for the given attribute. Leave as null to run interactions for the given attribute in all namespaces.
  • runInteractionsWithResults: This method is similar to runInteractions but returns an object of results keyed by the namespaces for which the interaction was run.
  • getLoadProgress: This returns the current progress of this object. See the onProgress interaction in the Adding Interactions section for more details. Also see Advanced Topics for a discussion of loaders.
  • prepStyleTween: This prepares the object to tween to a new set of styles. After calling this method, any calls to setStyle will not take effect (unless they're untweenable styles like 'underline'). Then a call to tweenStyles will tween to the set of styles defined this way. Note that there's a single style tween per object, and so calling prepStyleTween while a style tween is already running will replace the running tween.
  • tweenStyles: See prepStyleTween.
  • stopStyleTween: Stop any current style tween. Note that when a style tween begins, styles like "20%" or "auto" are converted to numbers. Then during the tween, the given style is set to a number and not some intermediate percentage like "10%". When the tween finishes, the style is set to the original format that was the target of the style, like back to a percentage, for example. This method then will leave the style values at whatever value they currently are in the tween, and will not convert them to the original or target format. This should simply be noted in case it becomes an issue.
  • fforwardStyleTween: This fast forwards the current style tween (if there is one) immediately to its end.
  • addListener: This method is very similar to addEventListener, but with the added benefit that if this DocumentElement is destroyed, it will automatically remove any listeners added with this method. It takes the following parameters:
    • dispatcher: The event dispatcher to listen to.
    • type: The type of the event (a String) we're interested in.
    • listener: A function pointer to the listener.
    • useCapture: See the Flash documentation for addEventListener for details. The default is false.
    • priority: See the Flash documentation for addEventListener for details. The default is 0.
    • useWeakReference: See the Flash documentation for addEventListener for details. The default is true.
  • removeListener: This will remove a listener added with addListener. It takes the following parameters:
    • dispatcher: The event dispatcher to stop listening to.
    • type: The type of the event (a "string") we were listening to.
    • listener: The listener function to remove.
    • useCapture: Match the value used when calling addListener. The default is false.

Styles

The styles particular to DocumentElement objects (and so to all Frontal tag objects) are:

  • processes-own-content: This tells the Frontal parser to ignore any children nodes of the element. This must be set directly on the element with the "style" attribute.
  • disable-rendering: See the description of the rendering process in Advanced Topics. When true, the needsRender flag always appears false.
  • is-link: Marks this element as a link, which initiates Frontal's handling of the ":link" and ":visited" style sheet pseudo-classes on this element.
  • is-marker: Indicates to Frontal that this element is dependent on a manager element. It initiates the functionality by which this object may behave as a slide show control, thumbnail button, or menu button for example. See Adding Interactions and the 'manager' tag for details.
  • disabled: Makes this object disabled.
  • wants-reset: This marks the object as being resettable. See Adding Interactions and the 'manager' tag for details.
  • deep-link: Set to "path", "query", or "none", this style determines if this DocumentElement's state is reflected in the browser's address bar, and whether or not it may be deep-linked to. See Advanced Topics for more details.
  • deep-link-delay: Allows for a delay before processing a deep link. See Advanced Topics for more details.
  • deep-link-delay-use-secs: See Advanced Topics for more details.

Attributes

Attributes particular to DocumentElement objects (and so to all Frontal tag objects) are:

  • style: This attribute is used to apply styles directly to an element.
  • custom: The value of this attribute is treated as a class name, an instance of which will be used to implement the tag.
  • class: This attribute is used to apply style classes (separate them with spaces) to an element.

The following attributes are used during the SEO conversion process. During that process, the Frontal definition is output as XML, but with certain alterations to aid in the conversion to HTML -- a conversion that greatly improves indexing by search engines.

  • altContent: When an element has an altContent attribute, it and its children will be represented by the value of this attribute. The value must be valid XML.
  • altId: When an element has an altContent attribute, it and its children will be represented by the value of an 'alt' tag with the given "id" attribute.

For more details on these attributes, see the 'alt' tag.

Learn more about tags

You can learn more about tags in Tag Reference.


previous | next
Retrieved from "http://www.frontalcode.com/wiki/index.php/Tag_Classes,_Inheritance,_Styles,_Attributes_%26_Methods"
Personal tools
Get Adobe Flash player