Standard appearance

Using a media type

In XForms 1.0, <xforms:output> is only used to display text. However, XForms 1.1 supports a mediatype attribute on that element allowing display of other media types.

Image types

For the <xforms:output> control to display an image, you need to:

• Have a mediatype attribute on the <xforms:output>. That attribute must refer to an image mediatype, such as image/* or image/jpeg.

• Use the value attribute on <xforms:output> or bind to the control to a node without type, with an xs:anyURI type or with an xs:base64Binary type.

The resulting value from the instance is interpreted either as a URI pointing to an image, or as a base64-encoded binary representation of the image. The image will display in place of the xforms:output. It is possible to dynamically change the image pointed to. For example:

<xforms:output mediatype="image/*" value="'/images/moon.jpg'"/>

<xforms:model>
  <xforms:instance>
    <image-uri/>
  </xforms:instance>
  <xforms:bind nodeset="image-uri" type="xs:anyURI"/>
</xforms:model>
...
<xforms:output mediatype="image/*" ref="image-uri"/>

The image URI may or may no be reachable from the client browser. Orbeon Forms hides this from the developer. For example, to upload and show an image:

<!-- Hide xforms:output when there is no URI available -->
<xforms:group ref="image[normalize-space() != '']">
  <!-- Image output -->
  <xforms:output ref="." mediatype="image/*">
    <xforms:label/>
  </xforms:output>
</xforms:group>
<!-- File chooser -->
<xforms:upload ref="image">
  <xforms:label/>
  <xforms:filename ref="@filename"/>
  <xforms:mediatype ref="@mediatype"/>
  <xxforms:size ref="@size"/>
</xforms:upload>

In that example, the upload control stores a temporary URI pointing to a local file: resource. While this URI is not visible from the client web browser, the output control automatically proxies it so that the end user can see the image.

HTML type

When an xforms:output control has a mediatype attribute with value text/html, the value of the node to which the control is bound is interpreted as HTML content. Consider the following XForms instance:

<xforms:instance id="my-instance">
  <form>
    <html-content> This is in &lt;b&gt;bold&lt;/b&gt;! </html-content>
  </form>
</xforms:instance>

You bind an xforms:output control to the html-content node as follows:

<xforms:output ref="instance('my-instance')/html-content" mediatype="text/html"/>

This will display the result as HTML, as expected: "This is in bold!". If the mediatype is not specified, the result would be instead: "This is in <b>bold</b>!". In the XForms instance, the HTML content must be escaped as text. On the other hand, the following content will not work as expected:

<xforms:instance>
  <form>
    <html-content> This is in in <b>bold</b>! </html-content>
  </form>
</xforms:instance>

NOTE: When using a mediatype="text/html", an HTML <div> element will be generated by the XForms engine to hold the HTML data. As in HTML a <div> cannot be embedded into a <p>, if you have a <xforms:output mediatype="text/html"> control, you should not put that control into a <xhtml:p>.

Appearance xxforms:download

HTTP headers

[SINCE: 2011-03-21]

When the output control performs an HTTP request as a result of dereferencing a URL, for example, as the result of using an image mediatype, the nested <xf:header> child element allows specifying custom headers to set on the HTTP request.

The syntax for <xf:header> is the same as the  <xf:header> child element of <xf:submission>.

<xf:output ref="instance()" mediatype="image/*">
    <xf:header ref="instance('headers')/header">
        <xf:name value="@name"/>
        <xf:value value="@value"/>
    </xf:header>
</xf:output>