class tag

Category: persistent logic tag

Defines a custom tag from which multiple instances can be created.

Note: class cannot be used to define ephemeral logic tags.

Sample usage

<heading:class _=text *=<span size=40 bold=true {</p><text:span></p>}>> creates a heading tag that can be used to create consistently sized heading text throughout an app, with a paragraph break before and after the heading text.

<b:class *=<span bold=true>> creates a b tag that can be used to make text bold.

Fields

Primary field

None

Secondary fields

• *: (required) sets the tag definition
• _: (optional) defines the primary field by providing a path to a field or tag inside the class definition, that the primary tag of an instance will correspond to
• Other fields defined by the user: (optional) define other fields for the class by providing paths to their corresponding fields or tags inside the class definition.

Behaviour

Classes provide a way to define your own custom presentation tags (or persistent logic tags in some cases).

To be useful, a class tag must be given a name, like <tagName:class ....>. The tag name can later be used anywhere within the scope of where the tag is defined, to create a new instance of the custom tag type.

A class also requires a tag definition, defined in the * field. This definition must consist of a single presentation or persistent logic tag, which may optionally be given a name of its own. That tag may itself contain as many tags and fields as needed to define the custom tag's appearance and behaviour.

All tag and field names within the definition are internal to the tag definition. They are hidden from the user of that tag. To expose tags and fields to the user, add fields to the class tag, where each field contains the path to the corresponding field inside the tag definition. Set the _ field to define which internal tag or field the custom tag's primary field will correspond to.

If you do not set the _ field, the custom tag's primary field will correspond to the primary field of the main tag inside the tag definition.

Example

The following example creates a heading class that can be used to create different levels of headings and subheadings within a document.

<heading:class _=text level=level *=
  <span
    <level:scalar 1>
    size=<sub 40|mul 10,level>,{px}
    bold=true
    {</p><text:span></p>}
  >
>


<heading level=1 {Top level heading}>
<heading level=2 {Sub-heading}>
<heading level=3 {Small Heading}>
Body text

The class works by defining a span tag within the tag definition. Inside this tag is an inner span tag named text that contains the heading text, and is used as the primary field of the new heading class. The purpose of nesting the text in an inner tag is to allow the heading text to be surrounded by paragraph breaks, so each heading is on its own line and visually separated from the surrounding content.

A custom field named level is also defined which is used to calculate the size of each kind of heading. A scalar inside the tag definition is used to store the field value. Level 1 is the default value and corresponds to a top-level heading. The font size for each heading level is calculated as (40px − (10 × level)).