XForms/A Trigger for Inserting BBcode into a Textarea box

Using Trigger to Add BBcode or Other Text to Input or Textarea Controls

Here is a simple way to use a button (trigger) to add commonly used text to your xforms-input or xforms-textarea controls. This could be many things such as BBcode (bold/unbold codes), date-time stamps, frequently used formatted text such as a letterhead, signature blocks, special codes that aren't easy to remember-- all depending on the purpose of your form and your specific needs.

Link to working XForms Application

Load Example XForms Application

A more advanced example for inserting at the beginning or end of text (with some additional code inserts such as links and images)

Load Example XForms Application

Program Structure

For simplification, we are using a single <text/> element in our model/instance to hold our example input. The style is not really necessary other than to give one a larger text area to test with.

The real power, and simplicity, of the form is in the value attribute of the xforms-setvalue element which itself is placed inside an xforms-trigger:

  value="concat(//text,'whatever you desire goes here')"

Sample Program

   <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>Insert BB code</title>
         <style type="text/css">  <!--mozilla specific style-->
         @namespace xf url('http://www.w3.org/2002/xforms');
         xf|textarea .xf-value{ width:25em; height:20ex; }
         </style>
      <xf:model>
         <xf:instance>
            <data xmlns="">    
               <text/>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <xf:trigger><xf:label>Bold</xf:label>
         <xf:action ev:event="DOMActivate">
            <xf:setvalue ref="//text" value="concat(//text,'[b][/b] ')"/> 
            <xf:setfocus control="textArea"/>     
         </xf:action>
      </xf:trigger><br/>
      <xf:textarea id="textArea" ref="//text">
          <xf:label>Post:</xf:label>
      </xf:textarea>
   </body>
   </html>

Discussion

This solution will only append the inserted code/text to the end of the current text in the text box. To have it always at the beginning, simply change the order of the arguments in your concat function (see the second example link above).

Limitation: This solution cannot insert code/text into the middle of the current text in the text box.

You can use html entities to do complex formats like a letterhead (if you need to preserve space or bold etc..) (!!note: the ampersand-& is replaced by the percent-% as I couldn't figure out how to escape html entities in this wikibook)

   <xf:setvalue ref="//text" value="concat(//text,'
      %lt;div xmlns=%quot;http://www.w3.org/1999/xhtml%quot;%gt;
         %lt;p%gt;%lt;b%gt;Testing insert with HTMLentities%lt;/b%gt;
         %lt;/p%gt;
         %lt;p%gt;%lt;i%gt;Testing Insertwith HTMLenitites%lt;/i%gt;
         %lt;/p%gt;
         %lt;pre%gt;     Indent Here%lt;/pre%gt; 
      %lt;/div%gt;')"/>

In such a case, make sure your xforms-output has a mediatype attribute like so:

   <xf:output ref="//text" mediatype="application/xhtml+xml"/>

Discussion

Next Page: Multiple model comparison | Previous Page: Incremental Model Loading
Home: XForms