Use myTab.addTextArea() to add a textarea to a tab, where myTab is a Tab object.

Example

 function onLoad() {
 
     // Create a new tab
     Setup.addTab( "New Tab" );
 
     // Add a textarea to the tab
     Setup[0].addText( "Enter multiple lines of text:" );
     Setup[0].addTextArea();
 }
 

Each Tab object in the Setup array corresponds to a tab in a Klip's Customize window. This window is visible when a user right-clicks on a Klip and chooses the command 'Customize Klip...'

Each Tab object can have multiple UI components, and each Klip can have multiple tabs. Use the Button, Checkbox, ComboBox, ListControl, Spacer, Text, TextArea, and TextField objects in a tab to enable users to configure the Klip to their preferences.

Properties Detail

disabled

boolean disabled

The enabled (true) or disabled (false) state of this component. A disabled textarea component does not accept user input.

value

String value

The text contained within this component.

onBlur

function onBlur()

Specifies a Handler Function for Klipfolio Dashboard to call when the user moves focus away from the textarea.

onChange

function onChange( [<String> text] )

Specifies a Handler Function for Klipfolio Dashboard to call when the user types a character into the textarea.

Example
The following Klip creates a new tab called 'New Tab', then creates a textarea and assigns it the handler function textAreaOnChange. When text is entered into the textarea, it is output into the Debug Window.



<klip>
   <identity>
      <title>
         API: TextArea.onChange()
      </title>
   </identity>
   <locations>
      <contentsource>
         http://support.klipfolio.com/files/demo/demo.xml
      </contentsource>
      <icon>
         http://www.klipfolio.com/static/klips/klipfolio/sample_icon.png
      </icon>
      <banner>
         http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png   
      </banner>
   </locations>
   <style>
      alert {
         type: item;
      }

      sender {
         itemcol: 2;
         noterow: 1;

         label: 'Sender';

         emphasis: strong;
      }


      summary {
         itemcol: 3;
         noterow: 4;

         wrap: false;

         notelabel: false;
      }

      date {
         itemcol: 4;
         noterow: 2;

         label: 'Date';
      }

      category {
         noterow: 3;

         label: 'Category';
      }


      level {
         itemcol: 1;
         noterow: 5;
         notelabel: false;
         
         type: image;
      }

      url {
         type: link;
      }
            
      id {
         key: override;
      }
      
   </style>
   <klipscript>
   <![CDATA[

var textarea; 

function onLoad() {

    // Create a new tab
    var tab = Setup.addTab( "New Tab" );

    // Add a textfield to the tab
    textarea = tab.addTextArea();
  
    // Add a handler
    textarea.onChange = textarea_onChange;
}

function textarea_onChange( text ) {
   traceln( text );
}


function onRefresh()
{
	return Engines.Data.process( Prefs.contentsource );
}
  
   ]]>
   </klipscript>
</klip>

     	

Parameters:
text - the current text of the textarea [optional]

onFocus

function onFocus()

Specifies a Handler Function for Klipfolio Dashboard to call when the user places the textarea in focus.

Example
The following Klip creates a new tab called 'New Tab', then adds two textareas and assigns handler functions to onFocus() and onBlur() for each textarea. Watch the Debug Window's Trace Output area as you type into and move focus between the two textareas.



<klip>
   <identity>
      <title>
         API: TextArea.onFocus
      </title>
   </identity>
   <locations>
      <contentsource>
         http://support.klipfolio.com/files/demo/demo.xml
      </contentsource>
      <icon>
         http://www.klipfolio.com/static/klips/klipfolio/sample_icon.png
      </icon>
      <banner>
         http://www.klipfolio.com/static/klips/klipfolio/sample_banner.png   
      </banner>
   </locations>
   <style>
      alert {
         type: item;
      }

      sender {
         itemcol: 2;
         noterow: 1;

         label: 'Sender';

         emphasis: strong;
      }


      summary {
         itemcol: 3;
         noterow: 4;

         wrap: false;

         notelabel: false;
      }

      date {
         itemcol: 4;
         noterow: 2;

         label: 'Date';
      }

      category {
         noterow: 3;

         label: 'Category';
      }


      level {
         itemcol: 1;
         noterow: 5;
         notelabel: false;
         
         type: image;
      }

      url {
         type: link;
      }
            
      id {
         key: override;
      }
   </style>
   <klipscript>
   <![CDATA[

var textarea1, textarea2; 

function onLoad() {
    var tab = Setup.addTab( "Tab1" );
    
    textarea1 = tab.addTextArea();
    textarea1.onBlur = textarea_onBlur;
    textarea1.onFocus = textarea_onFocus;
    
    textarea2 = tab.addTextArea();
    textarea2.onBlur = textarea_onBlur;
    textarea2.onFocus = textarea_onFocus;
}

function textarea_onBlur() {
	trace( "textArea onBlur: " + this.value + "\r\n" );
}

function textarea_onFocus() {
	trace( "textArea onFocus: " + this.value + "\r\n" );
}


function onRefresh()
{
	return Engines.Data.process( Prefs.contentsource );
}
  
   ]]>
   </klipscript>
</klip>