This is still experimental and will most likely change later

We have a main stylesheet that crawls the whole source of Extended XForms documents.

<xsl:template match="node()|@*">
  <xsl:copy>
    <xsl:apply-templates select="@*|node()"/>
  </xsl:copy>
</xsl:template>

The main stylesheet does not alter the actual code except for <xhtml:head>. We output its existing content, and then we add a link to our CSS stylesheet and our JavaScript file.

We then find the main model and append a new instance to it that will hold data managed by Extended XForms.

In the future, we will probably add a separate model specifically for Extended XForms

We also apply templates with specific modes, more on this later.

<!-- html -->
<xsl:template match="xh:head">
  <xsl:copy>
    <xsl:apply-templates select="@*"/>
    <xh:script src="/res/xx-forms.js" type="text/javascript" />
    <xh:link href="/res/xx-forms.css" type="text/css" rel="StyleSheet"/>
    <xsl:apply-templates select="node()"/>
    <xsl:apply-templates select="/" mode="head" />
    <xsl:apply-templates select="/" mode="style" />
  </xsl:copy>
</xsl:template>
<!-- model -->
<xsl:template match="xf:model[1]">
  <xsl:copy>
    <xsl:apply-templates select="@*"/>
    <xsl:apply-templates select="node()"/>
    <xf:instance id="xxforms">
      <data>
        <xsl:apply-templates select="/" mode="model" />
      </data>
    </xf:instance>
    <xsl:apply-templates select="/" mode="events" />
  </xsl:copy>
</xsl:template>

This alone provides custom CSS classes that can be used directly by the developer. However, most of these classes are meant to be used by Extended XForms. The rest of CSS classes are mostly for theming.

It also provides low-level JavaScript functions allowing:

The main stylesheet includes other stylesheets, each for a specific task (a feature, a component, a style, etc.). These stylesheets use the special modes to add their own styles, data, and events.

If needed, the stylesheet can also add a template that matches a specific Extended XForms syntax and replace it with XForms code.

<xsl:template match="xxf:sidebar">
...
</xsl:template>