Acknowledgments

Many thanks to

• Erik Bruchez (Orbeon)
• Joern Turner (betterFORM)
• Alain Couthures (XSLTForms)

for their review and comments

Quiz

Image © Wikimedia

1/3

Image © Wikimedia

XForms quiz (1/3), question

Instance:

<figures>
   <line>
      <length>
         <value>10</value>
         <unit>in</unit>
      </length>
   </line>
</figures>

Expected result:

XForms quiz (1/3), answer

Model:

<xf:model>
   <xf:instance>
      <figures>
         <line>
            <length>
               <value>10</value>
               <unit>in</unit>
            </length>
         </line>
      </figures>
   </xf:instance>
</xf:model>

XForms quiz (1/3), answer

View:

<xf:group ref="line/length">
   <xf:input ref="value">
      <xf:label>Length: </xf:label>
   </xf:input>
   <xf:select1 ref="unit">
      <xf:label></xf:label>
      <xf:item>
         <xf:label>pixels</xf:label>
         <xf:value>px</xf:value>
      </xf:item>
      <xf:item>
         <xf:label>font size</xf:label>
         <xf:value>em</xf:value>
      </xf:item>
      .../...
      <xf:item>
         <xf:label>%</xf:label>
         <xf:value>%</xf:value>
      </xf:item>
   </xf:select1>
</xf:group>

XForms quiz (1/3), answer

Controller:

<!--No controller... yet!-->

2/3

Image © Wikimedia

XForms quiz (2/3), question

Instance:

<xf:instance id="main">
   <figures>
      <line length="10in"/>
   </figures>
</xf:instance>

Expected result:

XForms quiz (2/3), answer

Model:

<xf:model>
   <xf:instance id="main">
      <figures>
         <line length="10in"/>
      </figures>
   </xf:instance>
   <xf:instance id="split">
      <line>
         <length>
            <value/>
            <unit/>
         </length>
      </line>
   </xf:instance>
   .../...
</xf:model>

XForms quiz (2/3), answer

View:

<xf:group ref="instance('split')/length">
   <xf:input ref="value" id="length-control">
      <xf:label>Length: </xf:label>
   </xf:input>
   <xf:select1 ref="unit" id="unit-control">
      <xf:label/>
      <xf:item>
         <xf:label>pixels</xf:label>
         <xf:value>px</xf:value>
      </xf:item>
      .../...
      <xf:item>
         <xf:label>%</xf:label>
         <xf:value>%</xf:value>
      </xf:item>
   </xf:select1>
</xf:group>

XForms quiz (2/3), answer

Controller:

<xf:model>
   .../...
   <xf:action ev:event="xforms-ready">
      <xf:setvalue ref="instance('split')/length/value" 
          value="translate(instance('main')/line/@length, '%incmptxe', '')"/>
      <xf:setvalue ref="instance('split')/length/unit" 
          value="translate(instance('main')/line/@length, '0123456789', '')"/>
   </xf:action>
   <xf:action ev:event="xforms-value-changed" ev:observer="length-control">
      <xf:setvalue ref="instance('main')/line/@length" 
          value="concat(instance('split')/length/value, instance('split')/length/unit)"/>
   </xf:action>
   <xf:action ev:event="xforms-value-changed" ev:observer="unit-control">
      <xf:setvalue ref="instance('main')/line/@length" 
          value="concat(instance('split')/length/value, instance('split')/length/unit)"/>
   </xf:action>
</xf:model>

3/3

Image © Wikimedia

XForms quiz (3/3), question

Instance:

<xf:instance id="main">
   <figures>
      <rectangle height="10in" width="4em"/>
   </figures>
</xf:instance>

Expected result:

Same than previous, twice

Hint: Copy/paste is your friend

XForms quiz (3/3), answer

Model:

<xf:model>
   <xf:instance id="main">
      <figures>
         <rectangle height="10in" width="4em"/>
      </figures>
   </xf:instance>
   <xf:instance id="height">
      <height>
         <value/>
         <unit/>
      </height>
   </xf:instance>
   .../...
   <xf:instance id="width">
      <width>
         <value/>
         <unit/>
      </width>
   </xf:instance>
   .../...
</xf:model>

XForms quiz (3/3), answer

View:

<xf:group ref="instance('height')">
   <xf:input ref="value" id="height-value-control">
      <xf:label>Height: </xf:label>
   </xf:input>
   <xf:select1 ref="unit" id="height-unit-control">
      <xf:label/>
      <xf:item>
         <xf:label>pixels</xf:label>
         <xf:value>px</xf:value>
      </xf:item>
      .../...
   </xf:select1>
</xf:group>
<xh:br/>
<xf:group ref="instance('width')">
   <xf:input ref="value" id="width-value-control">
      <xf:label>Width: </xf:label>
   </xf:input>
   <xf:select1 ref="unit" id="width-unit-control">
      <xf:label/>
      <xf:item>
         <xf:label>pixels</xf:label>
         <xf:value>px</xf:value>
      </xf:item>
      .../...
   </xf:select1>
</xf:group>

XForms quiz (3/3), answer

Controller:

<xf:model>
   .../...
   <xf:action ev:event="xforms-ready">
      <xf:setvalue ref="instance('height')/value" 
        value="translate(instance('main')/rectangle/@height, '%incmptxe', '')"/>
      <xf:setvalue ref="instance('height')/unit" 
        value="translate(instance('main')/rectangle/@height, '0123456789', '')"/>
   </xf:action>
   <xf:action ev:event="xforms-value-changed" ev:observer="height-value-control">
      <xf:setvalue ref="instance('main')/rectangle/@height" 
        value="concat(instance('height')/value, instance('height')/unit)"/>
   </xf:action>
   <xf:action ev:event="xforms-value-changed" ev:observer="height-unit-control">
      <xf:setvalue ref="instance('main')/rectangle/@height" 
        value="concat(instance('height')/value, instance('height')/unit)"/>
   </xf:action>
   .../...
   <xf:action ev:event="xforms-ready">
      <xf:setvalue ref="instance('width')/value" 
        value="translate(instance('main')/rectangle/@width, '%incmptxe', '')"/>
      <xf:setvalue ref="instance('width')/unit" 
        value="translate(instance('main')/rectangle/@width, '0123456789', '')"/>
   </xf:action>
   <xf:action ev:event="xforms-value-changed" ev:observer="width-value-control">
      <xf:setvalue ref="instance('main')/rectangle/@width" 
        value="concat(instance('width')/value, instance('width')/unit)"/>
   </xf:action>
   <xf:action ev:event="xforms-value-changed" ev:observer="width-unit-control">
      <xf:setvalue ref="instance('main')/rectangle/@width" 
        value="concat(instance('width')/value, instance('width')/unit)"/>
   </xf:action>
</xf:model>

Homework

Image © Wikimedia

XForms homework

Instance:

<xf:instance id="main">
   <figures>
      <rectangle height="10in" width="4em"/>
      .../...
      <rectangle height="20in" width="4%"/>
   </figures>
</xf:instance>

What if the element was repeated?

So what?

Image © Wikimedia

The problem

Lack of "components" to package group of controls with their models, views and controllers.

There is nothing so practical as a good theory --Balisage

Image © Wikimedia

MVC vs modularity

How can you reuse something split into three domains?

H(ierarchical)MVC

Image © JavaWorld

HMVC is what we need!

Components should have their own models, views and controllers!

Solutions

Image © Wikimedia

Solution 1: copy/paste

Image © Wikimedia

Copy/paste

• See XForms quiz (3/3)!
• Tricky to support repeats
• Probably the most common practice with XForms!

Solution 2: generation or templating

Image © Wikimedia

Generation or templating

• A way to automate copy/paste
• Reasonably easy (example coming soon!)

Templating: model

<xf:model>
    <xf:instance id="main">
        <figures>
            <rectangle height="10in" width="4em"/>
        </figures>
    </xf:instance>
</xf:model>

Same as for XForms quiz (3/3)

Templating: view

<xh:body>
    <my:dimension ref="rectangle/@height">
        <xf:label>Height</xf:label>
    </my:dimension>
    <br/>
    <my:dimension ref="rectangle/@width">
        <xf:label>Width</xf:label>
    </my:dimension>
</xh:body>

<my:dimension> elements to be replaced by a transformation

Templating: generating the model

<xsl:template match="my:dimension" mode="model">
    <xsl:variable name="id" select="if (@id) then @id else generate-id()"/>
    <xf:instance id="{$id}-instance">
        <height>
            <value/>
            <unit/>
        </height>
    </xf:instance>
</xsl:template>

Templating: generating the view

<xsl:template match="my:dimension">
    <xsl:variable name="id" select="if (@id) then @id else generate-id()"/>
    <xf:group ref="instance('{$id}-instance')">
        <xf:input ref="value" id="{$id}-value-control">
            <xsl:apply-templates/>
        </xf:input>
        <xf:select1 ref="unit" id="{$id}-unit-control">
            <xf:label/>
            <xf:item>
                <xf:label>pixels</xf:label>
                <xf:value>px</xf:value>
            </xf:item>
            .../...
        </xf:select1>
    </xf:group>
</xsl:template>

Templating: generating the controller

<xsl:template match="my:dimension" mode="model">
    <xsl:variable name="id" select="if (@id) then @id else generate-id()"/>
    .../...
    <xf:action ev:event="xforms-ready">
        <xf:setvalue ref="instance('{$id}-instance')/value"
            value="translate(instance('main')/{@ref}, '%incmptxe', '')"/>
        <xf:setvalue ref="instance('{$id}-instance')/unit"
            value="translate(instance('main')/{@ref}, '0123456789', '')"/>
    </xf:action>
    <xf:action ev:event="xforms-value-changed" ev:observer="{$id}-value-control">
        <xf:setvalue ref="instance('main')/{@ref}"
            value="concat(instance('{$id}-instance')/value, instance('{$id}-instance')/unit)"/>
    </xf:action>
    <xf:action ev:event="xforms-value-changed" ev:observer="{$id}-unit-control">
        <xf:setvalue ref="instance('main')/{@ref}"
            value="concat(instance('{$id}-instance')/value, instance('{$id}-instance')/unit)"/>
    </xf:action>
</xsl:template>

Templating: not that easy

• my:dimension/@ref won't behave like XForms' @ref
• What about repeated content?

Solution(s) 3: XForms vendor extensions

Image © Wikimedia

XForms vendor extensions

• XForms implementations provide extensions to deal with this issue
• These extensions are not interoperable

Solution 3.1: Orbeon's XBL components

XBL components

• Designed for this kind of use cases
• Inspired by W3C's XBL 2.0 (deprecated) spec
• Has evolved over time (version 4.0 described hereafter)

XBL: caller model

<xf:model>
    <xf:instance id="main">
        <figures>
            <rectangle height="10in" width="4em"/>
        </figures>
    </xf:instance>
</xf:model>

Same as for templating's model

XBL: caller view

<xh:body>
    <my:dimension ref="rectangle/@height">
        <xf:label>Height</xf:label>
    </my:dimension>
    <br/>
    <my:dimension ref="rectangle/@width">
        <xf:label>Width</xf:label>
    </my:dimension>
</xh:body>

• Same as for templating's view
• <my:dimension> elements instantiate the component

XBL: global structure

<xbl:binding id="my-dimension" element="my|dimension" xxbl:mode="lhha binding value">
   <xbl:handlers>
      .../...
   </xbl:handlers>
   <xbl:implementation>
      .../...
   </xbl:implementation>
   <xbl:template>
      .../...
   </xbl:template>
</xbl:binding>

• Fourth element available for component specific resources

XBL: component's model

<xbl:implementation>
   <xf:model id="my-dimension-model">
      <xf:instance id="my-dimension-instance">
         <dimension>
            <value/>
            <unit/>
         </dimension>
      </xf:instance>
      .../...
</xbl:implementation>

XBL: component's view

<xbl:template>
   <xf:input ref="value" id="my-dimension-value-control"/>
   <xf:select1 ref="unit" id="my-dimension-unit-control">
      <xf:label/>
      <xf:item>
         <xf:label>pixels</xf:label>
         <xf:value>px</xf:value>
      </xf:item>
      .../...
   </xf:select1>
</xbl:template>

XBL: component's controller (external)

<xbl:handlers>
   <xbl:handler event="xforms-enabled xforms-value-changed">
      <xf:setvalue ref="instance('my-dimension-instance')/value" 
          value="translate(xxf:binding('my-dimension'), '%incmptxe', '')"/>
      <xf:setvalue ref="instance('my-dimension-instance')/unit" 
          value="translate(xxf:binding('my-dimension'), '0123456789', '')"/>
   </xbl:handler>
</xbl:handlers>

XBL: component's controller (internal)

<xbl:implementation>
   <xf:model id="my-dimension-model">
      .../...
      <xf:setvalue ev:event="xforms-value-changed" ev:observer="my-dimension-value-control" 
          ref="xxf:binding('my-dimension')" 
          value="concat(instance('my-dimension-instance')/value, instance('my-dimension-instance')/unit)"/>
      <xf:setvalue ev:event="xforms-value-changed" ev:observer="my-dimension-unit-control" 
          ref="xxf:binding('my-dimension')" 
          value="concat(instance('my-dimension-instance')/value, instance('my-dimension-instance')/unit)"/>
   </xf:model>
</xbl:implementation>

XBL: summary

• Perfect fit for this use case
• Components' models, views and controllers are encapsulated
• No limitation
• Implemented in Orbeon Forms

Solution(s) 3.2: Subforms

Image © Wikimedia

Subforms

• Implemented (differently) by betterFORM and XSLTForms
• Designed for modularity and performance issues
• (Sub)Forms can be embedded into other forms
• Subforms can be loaded and unloaded

Solution(s) 3.2.1: betterFORM Subforms

Subforms are *not* components

Subforms are called subforms as they are *not* components ;)

-- Joern Turner on the betterform-users mailing list.

Wait till betterFORM 6

We will come up with our own component model in betterFORM 6 which will orient at more modern approaches (Web Components).

-- Joern Turner on the betterform-users mailing list.

betterFORM subforms

• Strongly encapsulated
• No support for id collision though
• Extensions defined to communicate between models

betterFORM id collision

• It's not possible to load a form that defines ids twice
• Our subform requires two instances and must define ids
• Workaround: load only one subform at a time

betterFORM inter-model communication

• In-memory submissions (model: pseudo protocol)
• instanceOfModel extension function
• Custom events with parameters

betterFORM subform's model

<xf:model id="dimension-model">
    <xf:instance id="concat">
        <data/>
    </xf:instance>
    <xf:instance id="split">
        <height>
            <value/>
            <unit/>
        </height>
    </xf:instance>
    .../...
</xf:model>

betterFORM subform's view

<xf:group ref="instance('split')">
    <xf:input ref="value">
        <xf:action ev:event="xforms-value-changed">
            <xf:setvalue ref="instance('concat')" value="concat(instance('split')/value, instance('split')/unit)"/>
            <xf:send submission="set-dimension-value"/>
        </xf:action>
    </xf:input>
    <xf:select1 ref="unit">
        <xf:action ev:event="xforms-value-changed">
            <xf:setvalue ref="instance('concat')" value="concat(instance('split')/value, instance('split')/unit)"/>
            <xf:send submission="set-dimension-value"/>
        </xf:action>
        <xf:item>
            <xf:label>pixels</xf:label>
            <xf:value>px</xf:value>
        </xf:item>
        .../...
    </xf:select1>
</xf:group>

betterFORM subform's controller

<xf:model id="dimension-model">
    .../...
    <xf:submission id="get-dimension-value" resource="model:master#instance('dimension-interface')/*"
        replace="instance" method="get">
        <xf:action ev:event="xforms-submit-done">
            <xf:setvalue ref="instance('split')/value" value="translate(instance('concat'), '%incmptxe', '')"/>
            <xf:setvalue ref="instance('split')/unit" value="translate(instance('concat'), '0123456789', '')"/>
        </xf:action>
    </xf:submission>
    <xf:send ev:event="xforms-ready" submission="get-dimension-value"/>
    <xf:submission id="set-dimension-value" resource="model:master#instance('dimension-interface')/*" replace="none"
        method="post"/>
</xf:model>

betterFORM master model

<xf:model id="master">
    <xf:instance id="main">
        <figures>
            <rectangle height="10in" width="4em"/>
        </figures>
    </xf:instance>
    
    <!-- Instance used as an "interface" with the subform -->
    <xf:instance id="dimension-interface">
        <dimension active=""/>
    </xf:instance>
</xf:model>

betterFORM master view

<xf:group ref="rectangle">
    <!-- Height -->
    <xf:group ref="@height">
        <xf:label>Height: </xf:label>
        <!-- This should be displayed when the subform is not editing the height -->
        <xf:group ref=".[instance('dimension-interface')/@active!='height']">
            <xf:output ref="."/>
            <xf:trigger ref=".[instance('dimension-interface')/@active = '']">
                <xf:label>Edit</xf:label>
                <xf:action ev:event="DOMActivate">
                    <xf:setvalue ref="instance('dimension-interface')" value="instance('main')/rectangle/@height"/>
                    <xf:setvalue ref="instance('dimension-interface')/@active">height</xf:setvalue>
                    <xf:load show="embed" targetid="height" resource="subform-embedded.xhtml"/>
                </xf:action>
            </xf:trigger>
        </xf:group>
        <xh:div id="height"/>
        <!-- This should be displayed only when we're editing the height -->
        <xf:group ref=".[instance('dimension-interface')/@active='height']">
            <xf:trigger>
                <xf:label>Done</xf:label>
                <xf:action ev:event="DOMActivate">
                    <xf:setvalue value="instance('dimension-interface')" ref="instance('main')/rectangle/@height"/>
                    <xf:setvalue ref="instance('dimension-interface')/@active"/>
                    <xf:load show="none" targetid="height"/>
                </xf:action>
            </xf:trigger>
        </xf:group>
    </xf:group>
    <br/>
    <!-- Width -->
    <xf:group ref="@width">
        .../...
    </xf:group>
</xf:group>

betterFORM subforms: summary

• Not designed to implement components
• Main complexity for us: avoid id collisions

Solution(s) 3.2.2: XSLTForms subforms

XSLTForms subforms

• No encapsulation (models, views and controllers are merged)
• No support for id collision
• Context node available in subform's views
• No need for inter-model communication
• Subform unloading done differently

Porting from betterFORM to XSLTForms

Porting our example from betterFORM to XSLTForms is not that difficult (see my paper)

A gift from XSLTForms to XML London

I have implemented a new component control in XSLTForms. It is named "xf:component" and has two attributes named "@ref" and "@resource".

-- Alain Couthures on the Xsltforms-support mailing list.

XSLTForms' xf:component

• Experimental feature
• Similar to subforms
• Automatically loaded
• No support for id collision
• Comes with two functions to get the context node and the subforms' default instance

XSLTForms component's extension functions

• Reduce (eliminate in our case) the need to use ids
• Life savers in our specific case
• XSLTForms' @changed MIP can be handy too

XSLTForms component's model

<xf:model>
    <xf:instance>
        <size>
            <value xsi:type="xsd:decimal">2</value>
            <unit>cm</unit>
        </size>
    </xf:instance>
    <xf:bind ref="subform-instance()/value" 
        changed="translate(subform-context(), '%incmptxe', '')"/>
    <xf:bind ref="subform-instance()/unit" 
        changed="translate(subform-context(), '0123456789', '')"/>
</xf:model>

XSLTForms component's view

<xh:body>
    <xf:input ref="subform-instance()/value">
        <xf:label/>
        <xf:setvalue ev:event="xforms-value-changed" 
            ref="subform-context()" value="concat(subform-instance()/value, 
            subform-instance()/unit)"/>
    </xf:input>
    <xf:select1 ref="subform-instance()/unit">
        <xf:label/>
        <xf:item>
            <xf:label>pixels</xf:label>
            <xf:value>px</xf:value>
        </xf:item>
        .../...
        <xf:setvalue ev:event="xforms-value-changed" 
            ref="subform-context()" value="concat(subform-instance()/value, 
            subform-instance()/unit)"/>
    </xf:select1>
</xh:body>

XSLTForms component master form model

<xf:model>
    <xf:instance id="main">
        <figures>
            <rectangle height="10in" width="4em"/>
        </figures>
    </xf:instance>
</xf:model>

XSLTForms master form view

<xf:group ref="rectangle">
    <!-- Height -->
    <xf:group ref="@height">
        <xf:label>Height: </xf:label>
        <xf:component ref="." resource="component-subform.xml"/>
    </xf:group>
    <br/>
    <!-- Width -->
    <xf:group ref="@width">
        <xf:label>Width: </xf:label>
        <xf:component ref="." resource="component-subform.xml"/>
    </xf:group>
</xf:group>

XSLTForms subforms: summary

• Similar but different from betterFORM's subforms
• A component experimental control comes with two functions that meet the needs of our example
• We would still be in trouble if we had to define ids

The end

Image © Wikimedia

Conclusion / Summary

• Copy/paste and generation/templating are the only interoperable solutions
• Orbeon's XBL is designed to implement components
• Subforms must be tricked to implement components
• XSLTForms experimental component is useful for simple cases
• Don't forget that you can combine generation with subforms or XBL

Future

• Components / subforms will *not* be included in XForms 2.0
• Couldn't some implementers agree on something interoperable, please?