XForms/A Trigger for Inserting BBcode into a Textarea box

From Wikibooks, open books for an open world
< XForms
Jump to: navigation, search

Using Trigger to Add BBcode or Other Text to Input or Textarea Controls[edit]

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[edit]

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[edit]

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[edit]

  <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">  
        @namespace xf url('http://www.w3.org/2002/xforms');
        xf|textarea .xf-value{ width:25em; height:20ex; }
        </style>
     <xf:model>
        <xf:instance>
               
              <text/>
           
        </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>
<xf:textarea id="textArea" ref="//text"> <xf:label>Post:</xf:label> </xf:textarea> </body> </html>

Discussion[edit]

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[edit]

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

Home: XForms