Examples for Norm

This is the XForms version of this article about vue.

First example

The first example is trivial:

<input ref="name" incremental="true"><label>Name:</label></input>
<output ref="name"/>

Second example

The second example is almost identical, just no @incremental:

<input ref="name"><label>Name:</label></input>
<output ref="name"/>

Third example

Changing styling is easy-peasy: use an AVT in a class attribute.

<output class="{state}" value="'Sometimes I need to be styled differently'"/>
<trigger><label>Toggle me</label>
   <setvalue ref="state" value="if(.!='warning', 'warning', 'normal')" ev:event="DOMActivate"/>
</trigger>

Fourth example

Hiding and showing is one of the basic activites of XForms. If a value is not 'relevant', any controls bound to it are not shown.

<bind ref="greeting" relevant="../show='yes'"/>
 ...
<trigger><label>Toggle me</label>
   <setvalue ref="show" value="if(.='yes', 'no', 'yes')" ev:event="DOMActivate"/>
</trigger>
<output ref="greeting" class="box"/>

Fifth example

I would normally use a <hint> element for the next example

<input ref="taco"><label>What is your favourite kind of taco?</label>
  <hint>Let us know!</hint>
</input>

but their example only displays the message if the input is non-zero length (a weird use case, but there you go).

<bind ref="tell" relevant="string-length(../taco) != 0"/>
 ...
<input ref="taco" incremental="true"><label>What is your favourite kind of taco?</label></input>
<output class="boxy" ref="message"/>

Sixth example

Unsurprisingly, submit handling is the stuff XForms eats for breakfast, and we can do much better, such as live checking for valid email addresses, and not allowing submit before that.

<submission resource="http://example.com/somewhere" replace="instance" instance="response"/>
 ...
<bind ref="ok"
      readonly="string-length(../name)=0 and string-length(../email)=0 and string-length(../answer)=0"/>
<bind ref="email" type="email"/>
 ...
<input ref="name" incremental="true"><label>Name:</label></input>
<input ref="email" incremental="true"><label>Email:</label></input>
<textarea ref="answer" incremental="true"><label>How do I turn off caps lock:</label></textarea>
<submit ref="ok"><label>Submit</label></submit>
<output ref="instance('response')/response"><label>Response from server</label></output>

Do a [view source] of this page to see the instance data and controls.

See also the Quick intro to XForms.