Complex Annotations

You can also define more complex annotations that contain an information structure as well as a name and a presentation. The Content Store starter pack includes three examples of this kind of annotation: inline_link, internal_link and note. The internal_link annotation, for example has the name internal_link, an associated rendering (blue text with an underline), but in addition it needs to hold the URL and link text plus a couple of other values. In order to achieve this, the annotation definition includes a reference to a special story element type used to define the annotation's data structure:

<annotation name="inline_link">
  <allow-story-element-type>
    <ref-story-element-type name="external_link"/>
  </allow-story-element-type>
  <ui:style>
    {
      color: blue;
      text-decoration: underline;
    }
  </ui:style>
</annotation>

The allow-story-element-type element specifies that an annotation may include a reference to a single story element, and the ref-story-element-type element specifies that the story element must be of the type external_link.

Here is the definition of the external_link story element type (which is also supplied in the Content Store starter pack).

<?xml version="1.0" encoding="UTF-8"?>
<story-element-type
  xmlns="http://xmlns.escenic.com/2008/content-type"
  xmlns:ui="http://xmlns.escenic.com/2008/interface-hints"
  name="external_link">
  <ui:label>External Link</ui:label>
  <ui:icon>external_link</ui:icon>
  <ui:hidden/>

  <field name="uri" type="uri">
    <ct:constraints
      xmlns:ct="http://xmlns.escenic.com/2008/content-type">
      <ct:required>true</ct:required>
    </ct:constraints>
    <ui:label>Link</ui:label>
  </field>

  <field name="newWindow" type="boolean">
    <ui:label>Open in new window</ui:label>
    <ui:value-if-unset>true</ui:value-if-unset>
  </field>

  <field name="noFollow" type="boolean">
    <ui:label>Do not follow</ui:label>
    <ui:value-if-unset>true</ui:value-if-unset>
  </field>

</story-element-type>

This story element type defines the items of information that will be stored with an inline_link annotation, and the fields in the dialog that is displayed by CUE when the user inserts an inline link:

graphics/annotation-dialog.png

There are two things to bear in mind when defining a story element type for use with an annotation:

  • There is no point including any ui:style or annotation elements – they will be ignored.

  • The definition should always include a ui:hidden element. This ensures that the story element type will not appear anywhere in CUE other than as an annotation dialog.