With XForms 1.0,
xforms:output was limited to displaying plain text. With the introduction of XForms 1.1,
xforms:output adds powerful capabilities which include handling images, HTML content and more, depending on your XForms implementation.
To achieve this, XForms 1.1 introduces a new
mediatype attribute. You use it to specify the type of the content to display, using the familiar Internet media type (or "MIME type") syntax. This includes values such as
image/* (any image content) or
text/html (HTML content).
Orbeon Forms already supported the
text/html mediatype, so we had to add support for image mediatypes. To achieve this, we made Orbeon Forms a little smarter.
Consider that XForms allows you to refer to images not only as URLs (e.g.
http://example.org/my/image.png), but as binary data embedded in an XForms instance. With Orbeon Forms, this data is handled on the server. So somehow, this information has to be brought to the client. In addition, browsers typically do not support providing image content as binary (although with some clients this is possible with the data: URI scheme)
Even when using URLs, consider the following scenario: an image resides on your client computer, you upload it to the server through
xforms:upload, at which point the image is available, in your XForms instance, as a temporary server-side URL. Now bind an
xforms:outputto that image URL: clearly, your browser cannot access that URL directly since it is server-side and therefore private.
Orbeon Forms solves these problems by creating proxy URLs for dynamically produced image content. Concretely, you see in the resulting HTML page paths of the form
/xforms-server/dynamic/7FF0AD061DD9BAD27BCA1FF4674C75D6. Orbeon Forms takes care of handling these URLs as needed: you don't need to worry a bit about this.
That was for the "smart" bit, so how does it look in the end to you, the form author? It's as simple as this:
<xforms:upload ref="my-image"> <xforms:label>Logo</xforms:label> <xforms:hint>Please upload an image</xforms:hint> </xforms:upload> <xforms:output mediatype="image/*" ref="my-image"/>
Yes that's right: the few lines above handle uploading an image, attaching it to your data, and displaying the uploaded image to the user. Beat that.