Last modified on 4 September 2009, at 11:46

XForms/Message Types

MotivationEdit

With JavaScript you did not have much choice in how intrusive you were about alerting a user. The JavaScript alert() function required the user to acknowledge a message before they proceeded in filling out a form. With XForms there are now three ways to proceed. Each has a different level of intrusiveness. There are three message options:

  1. ephemeral - a message that just appears briefly and goes away by itself
  2. modeless - a message you can ignore for now
  3. modal - a message the user must acknowledge before you go on

Screen ImageEdit

Here is a sceen image with the ephemeral message showing:

XForms-message-types.jpg

Link to working XForms ApplicationEdit

Simple Messages

Sample ProgramEdit

<html
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:xf="http://www.w3.org/2002/xforms"
 xmlns:ev="http://www.w3.org/2001/xml-events"
>
   <head>
      <title>XForms Message</title>
      <xf:model id="myModel">
         <xf:instance>
            <MyMessage xmlns="">This is a modeless message stored directly in the model.
                Note you can drag me to the side and still proceed to the next task.
            </MyMessage>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <p>Put your cursor in the first input.  A message will appear for just a moment.</p>
         <xf:input>
            <xf:label>Ephemeral message: </xf:label>
            <xf:message level="ephemeral" ev:event="DOMFocusIn">This is an ephemeral message.
                Don't worry, I go away after a few seconds.</xf:message>
         </xf:input>
         <br/>
          <p>Press enter in the input field to get a modeless message:</p>
         <xf:input>
            <xf:label>Modeless message input: </xf:label>
            <xf:message level="modeless" model="myModel" ref="/MyMessage" ev:event="DOMActivate"/>
         </xf:input>
         <br/>
          <p>A standard and intrusive modal message that must be dismissed:</p>
         <xf:trigger>
            <xf:label>Press for a modal message</xf:label>
            <xf:message level="modal" ev:event="DOMActivate">This is a modal message.</xf:message>
         </xf:trigger>
   </body>
</html>

DiscussionEdit

The data for the first and last message come from the body of the document. The modeless message is taken directly from the body by using an XPath expression into the model.

Note that the first event happens when you start to enter data in an input field. This is the DOMFocusIn event. The other two use the DOMActivate event which happens when you enter a return on the second example and press the button on the last example.

Next Page: Textarea | Previous Page: Secret

Home: XForms