Dialog Editor

This page is obsolete and available for historical purposes only.

Rationale

You typically use a <xforms:textarea> to enable users to edit a piece of text. Sometimes, placing a text area large enough for users to edit the text directly in your page takes too much space. Instead, it might be better to just show a portion of the text and let users edit the full text in a larger text area shown inside a dialog. This is precisely what the <fr:dialog-editor> component does.


Writable node

The control will show as follows in your form:


The <fr:dialog-editor> only generates the button shown on the right of the text area in the screenshot above. The small text area is generated by a regular <xforms:textarea>. You can of course use the <fr:dialog-editor> without the <xforms:textarea>, with another XForms control (such as an <xforms:output>), or by itself.

<xforms:textarea ref=".">
    <xforms:label>Excerpt</xforms:label>
</xforms:textarea>
<fr:dialog-editor ref="." id="my-dialog-editor"/>

When users click on the Edit button, the component shows a dialog enabling them to edit the text:


Changes users make in the text are saved to the node you bound the control to only if they click on the OK button. If close the dialog by clicking on the Cancel button or the X in the title bar, their changes are discarded. By default, the dialog doesn't have a title; to add a title, specify an <xforms:label> inside the <fr:dialog-editor>.


Read-only node

If you bind the <fr:dialog-editor> control to read-only node, instead of an Edit button, you get a View button:


When users click on the button, they get a read-only text area, and instead of the OK / Cancel button, they get a single Close button:



Comments