TextField

The TextField object provides an API to an textfield component that enables users to enter a single line of text. This object is very similar to a TextArea object, which is a multi-line component. Both components support the standard cut/copy/paste operations.

Use myTab.addTextField() to add a textfield to a tab, where myTab is a Tab object.

Example

The following onLoad() function creates a new tab called 'New Tab', then adds a textfield.

 function onLoad() {
 
     // Create a new tab
     var tab = Setup.addTab( "New Tab" );
 
     // Add a textarea to the tab
     tab.addText( "Enter a single line of text:" );
     tab.addTextField();
 }

In the above function, the call to Setup.addTab( "New Tab" ) adds a new Tab object to the Klip's Setup array.

Each Tab object in the Setup array corresponds to a tab in a Klip's Customize window. This window is visible when a user selects 'Customize Klip...' from the Klip's menu.

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.

Example

The following Klip uses a textfield to you change the <contentsource> URL.

<klip>
   <identity>
      <title>
         API: TextField
      </title>
   </identity>
   <locations>
      <contentsource>
         http://news.com.com/2547-1_3-0-5.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>
   <klipscript>
   <![CDATA[

// Globals
var textfield_URL;


function onLoad()
{
	var tab = Setup.addTab ("Setup");	

	// Enable user to enter URL for source
	tab.addText( "Enter URL: " );
	textfield_URL = tab.addTextField();
	if (Prefs.getPref( "textfield_URL" ) == "" ) {
		Prefs.setPref( "textfield_URL", Prefs.contentsource );
	}
	textfield_URL.value = Prefs.getPref( "textfield_URL" );

	Setup.onClose = Setup_onClose;
}


function onRefresh()
{
	Setup_saveTextFields ();

	var result = Engines.Data.process ( textfield_URL.value );

	return result;
}


//
// Support functions -----------------------------------------------
//

function Setup_onClose()
{
	if (Setup_saveTextFields ())
	{
		// Neet to refresh the Klip with new data	
		Klip.requestRefresh ();
	}
}

function Setup_saveTextFields()
{
	var request_refresh = false;

	// Check if the user changed the text field URL
	if (Prefs.getPref( "textfield_URL" ) != textfield_URL.value) {
		Prefs.setPref( "textfield_URL", textfield_URL.value ); 

		// Clear everything and request a refresh
		Items.clear (true);
		Items.Deleted.clear (true);

		request_refresh = true;
	}

	return request_refresh;
}	

  
   ]]>
   </klipscript>
</klip>

Properties Summary
`boolean`	`disabled` The enabled (`true`) or disabled (`false`) state of this component.
`Boolean`	`obscured` Specifies whether the text in this component is obscured with '*' characters..
`String`	`value` The text contained within this component.

Function Summary
`function`	`onBlur()` Specifies a Handler Function for Klipfolio Dashboard to call when the user moves focus away from the textfield.
`function`	`onChange( [<String> text] )` Specifies a Handler Function for Klipfolio Dashboard to call when the user types a character into the textarea.
`function`	`onFocus()` Specifies a Handler Function for Klipfolio Dashboard to call when the user places the textfield in focus.

Properties Detail

disabled

boolean disabled

true

false

obscured

Boolean obscured

Specifies whether the text in this component is obscured with '*' characters..

value

String value

The text contained within this component.

Function Detail

onBlur

function onBlur()

Handler Function

onChange

function onChange( [<String> text] )

Handler Function

Example:
The following creates a new tab called 'New Tab', then creates a textfield and assigns it the handler function textFieldOnChange. The handler function outputs the typed text in the Trace Output area of the Debug Window.

<klip>
   <identity>
      <title>
         API: TextField.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 textfield; 

function onLoad() {

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

    // Add a textfield to the tab
    textfield = tab.addTextField();
  
    // Add a handler
    textfield.onChange = textfield_onChange;
}

function textfield_onChange( text ) {
    traceln( text );

}


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

Parameters:

text

onFocus

function onFocus()

Handler Function

Example:
The following Klip creates a new tab called 'New Tab', then adds two textfields and assigns handler functions to onFocus() and onBlur() for each textfield.

<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>