| AutoCompleter Component Tutorial |
| |
AutoCompleter is a smart, simple in use flash tool, designed to give the possibility to use auto-complete instrument with any text field. It is very useful for Flash applications. You can customize AutoCompleter both with parameters of component, and with ActionScript cod, using special API.
Step 1- Install the component (if you did not it before)
Run the MXP file and install the component with Macromedia Extension Manager.
Step 2- Initialize the component
Place the component on the stage in your .fla file. After that, give an instance name to the component.
Step 3- Choose the text field
Choose the text field in your .fla file, which you want AutoCompleter operate with.
Step 4- Customize the component
Customize the component using the "Parameters" tab in the Component Inspector.
Step 5- Test and load to your web site
Test your .swf or .html (it will exist if you publish the .fla file) file(s). Then upload file(s) to your web server. Note that installation package include also samples of comoponent using, and intrinsic class AutoCompleter.
|
Customizing AutoCompleter using the Component Inspector |
| |
You can customize the AutoCompleter Component using the Component Inspector. To find the Component Inspector in Flash go to the menu: Window > Development panels > Component Inspector or if using Flash 8 select: Window > Component Inspector.
The following is a list of all the properties you can change in the Component Inspector.
| Parameter |
Sample value |
Default value |
Description |
| Minimum Number Of Letters For Autocompleting |
2 |
1 |
Defines the minimum number of letters printed in text field, after which prompting rising |
| Case Sensitivity |
true |
false |
Defines whether AutoCompleter will be case-sensitive or not |
| Data Provider |
[apple, take, application, Canada, philosophy] |
[] |
Array of data, which AutoCompleter will take information from |
| Frame Background Color |
#F0F0F0 |
#FFFFFF |
Background color for prompting frame |
| Text Background Color |
#FF00FF |
#82FE81 |
Background color for prompting rows |
| Text Color |
#00FF00 |
#000000 |
Color of font in prompting rows |
| Instance Name |
textField |
input_txt |
Defines the instance name of a TextField which AutoCompleter will operate with |
| Text Font |
Verdana |
_sans |
Font name in prompting rows |
| Text Style CSS |
css/flashstyle.css |
no |
Defines the css style that will be applied for font in prompting rows. If the value is "no" than css will not be applied |
| Text Style |
{size:14,bold:true,italic:false} |
{size:12,bold:false,italic:false} |
Defines the font style of promting rows |
| Frame Style |
{width:80,
spaceBeetweenItems:5,
leftIndent:7,
heightOfRow:16,
maximumNumberOfVisibleRows:4} |
{width:100,
spaceBeetweenItems:4,
leftIndent:5,
heightOfRow:15,
maximumNumberOfVisibleRows:6} |
Defines the prompting frame style. |
|
| Setting properties with actionscript |
| |
All properties that can be set in the Component Inspector can also be set using actionscript.
The following example sets properties using actionscript:
|
myAutoCompleter.setMinimumNumberOfLetters(1);
myAutoCompleter.setCaseSensitivity(false);
myAutoCompleter.setFrameBackgroundColor(0xFFFFFF);
myAutoCompleter.setFrameWidth(200);
myAutoCompleter.setSpaceBetweenItems(4);
myAutoCompleter.setItemsLeftIndent(5);
myAutoCompleter.setItemHeight(15);
myAutoCompleter.setItemsTextColor(0x000000);
myAutoCompleter.setItemsTextSize(14);
myAutoCompleter.setItemsTextThickness(false);
myAutoCompleter.setItemsTextItalicType(false);
myAutoCompleter.setItemsFont("_sans");
myAutoCompleter.setDataProvider(["apple","an","agriculture","am","at","apartament"]);
|
|
| Actionscript methods |
| |
AutoCompleter.setDataProvider(array:Array,type:String):Boolean
|
Parameters
array: Array - The Array object that AutoCompleter object should understand as source of data.
type: String - The String value that defines how array should add data to an AutoCompleter object. If there was already some piece of data it could just add new data or replace it. If type equals to "r", data will be replaced. By default, type does not equal to "r".
Description:
setDataProvider() is used to set source of data as Array object to an instance of AutoCompleter object. Method could just add to or replace the content of previous data provider.
Returns:
Boolean - A Boolean value that tell us any data was added, or not.
Usage:
//this will adds content of data1 array as source of data for autoCompleter
autoCompleter.setDataProvider(data1);
//this will replace source of data for autoCompleter with content of data2 array
autoCompleter.setDataProvider(data2,"r");
var data3:Array=new Array("apple", "hockey", "ball");
//as output of the next line we will see: true
trace(autoCompleter.setDataProvider(data3,"r"));
|
AutoCompleter.setXMLDataProvider(url:String,type:String):Void
|
Parameters
url: String - A string that represents the URL where the XML document to be loaded as source of data for AutoCompleter object is located. If the SWF file that issues this call is running in a web browser, url must be in the same domain as the SWF file.
type: String - The String value that defines how xml file, which set in url parameter, should add data to an AutoCompleter object. If there was already some piece of data it could just add new data or replace it. If type equals to "r", data will be replaced. By default, type does not equal to "r".
Description:
setXMLDataProvider() is used to set source of data as .xml file to an instance of AutoCompleter object. Method could just add to or replace the content of previous data provider.
Returns:
No value.
Warning: It takes a certain period of time for the .xml file to be loaded, so to set several data providers you have to wait for this period. So, you should control such situations by yourself, and try to avoid them. Here is the example of situation that may cause some unexpected results:
autoCompleter.setXMLDataProvider("sampleData1.xml");
autoCompleter.setDataProvider(sampleData1);
autoCompleter.setXMLDataProvider("sampleData2.xml");
There is no guarantee that now autoCompleter has as source of data the sum of contents of "sampleData1.xml" file, "sampleData2.xml" file, and "sampleData1" array. Maybe, the size of "sampleData1.xml" file is too large to be loaded before second or third line was called. That's why, there is no guarantee that second or third line was called successfully.
Usage:
//this will adds content of data1.xml file as source of data for autoCompleter
autoCompleter.setDataProvider("data1.xml");
//this will replace source of data for autoCompleter with content of data2.xml file
autoCompleter.setDataProvider("data2.xml","r");
//as output of the next line we will see: true
trace(autoCompleter.setDataProvider("data3.xml","r"));
|
AutoCompleter.setCSSStyle(css:StyleSheet):Void
|
Parameters
css: StyleSheet - The Cascading Style Sheet for AutoCompleter object.
Description:
setCSStyle() is used to set Cascading Style Sheet as StyleSheet object to prompting font of AutoCompleter object.
Returns:
No value.
Usage:
//this will set style.css file as source of Cascading Style Sheet for autoCompleter
var my_styleSheet:StyleSheet = new StyleSheet();
my_styleSheet.onLoad = function(success:Boolean) {
if (success) {
autoCompleter.setCSSStyle(this);
}
}
my_styleSheet.load("style.css");
|
AutoCompleter.setCSS(url:String):Void
|
Parameters
url: String - A string that represents the URL where the CSS document to be loaded as source of Cascading Style Sheet for AutoCompleter object. If the SWF file that issues this call is running in a web browser, url must be in the same domain as the SWF file.
Description:
setCSStyle() is used to set Cascading Style Sheet as .css file to prompting font of AutoCompleter object.
Returns:
No value.
Warning: It takes a certain period of time for the .css file to be loaded, so to set several Cascading Style Sheet providers you have to wait for this period. So, you should control such situations by yourself, and try to avoid them. Here is the example of situation that may cause some unexpected results:
autoCompleter.setCSS("sampleCSS1.css");
autoCompleter.setCSS("sampleCSS2.css");
There is no guarantee that now autoCompleter has as source of Cascading Style Sheet "sampleCSS2.css" file. Maybe, the size of "sampleCSS1.css" file is too large to be loaded before second line was called. That's why, there is no guarantee that second line was called successfully.
Usage:
//this will set style.css file as source of Cascading Style Sheet for autoCompleter
autoCompleter.setCSS("style.css");
|
AutoCompleter.setTextFormat(textFormat:TextFormat):Void
|
Parameters
textFormat: TextFormat - The font format for AutoCompleter object.
Description:
setTextFormat() is used to set font format as TextFormat object to prompting font of AutoCompleter object.
Returns:
No value.
Usage:
//this will set certain prompting font format "sampleTextFormat" for autoCompleter
var sampleTextFormat:TextFormat = new TextFormat();
sampleTextFormat.bold = true;
sampleTextFormat.size = 15;
sampleTextFormat.italic = true;
autoCompleter.setTextFormat(sampleTextFormat);
|
AutoCompleter.addEventListener(listener:Object,eventName:String):Void
|
Parameters
listener: Object - The Cascading Style Sheet for AutoCompleter object.
eventName: String - The Cascading Style Sheet for AutoCompleter object.
Description:
addEventListener() registers a listener object with a component instance that is broadcasting an event with name eventName. When the event occurs, the listener object is notified.
The full list of possible events for AutoCompleter object you will find in Actionscript Events chapter.
Returns:
No value.
Usage:
//this will defines a listener object, and defines the callback function for the onChoosed event
var myListener = new Object();
myListener.onChoosed = function(o: Object) {
trace("It was choosed item "+o.value);
}
autoCompleter.addEventListener("onChoosed", myListener);
|
|
| Actionscript Get-methods |
| |
AutoCompleter.getMinimumNumberOfLetters():Number
|
Returns:
The Minimum Number Of Letters For Autocompleting parameter of AutoCompleter object.
Usage:
//this will output the "Minimum Number Of Letters For Autocompleting" parameter of autoCompleter
var value:Number = autoCompleter.getMinimumNumberOfLetters();
trace(value);
|
|
| |
AutoCompleter.getCaseSensitivity():Boolean
|
Returns:
The Case Sensitivity parameter of AutoCompleter object.
Usage:
//this will output the "Case Sensitivity" parameter of autoCompleter
var value:Boolean = autoCompleter.getCaseSensitivity();
trace(value);
|
|
| |
AutoCompleter.getFrameBackgroundColor():Number
|
Returns:
The Frame Background Color parameter of AutoCompleter object.
Usage:
//this will output the background color of prompting frame of autoCompleter
var value:Number = autoCompleter.getFrameBackgroundColor();
trace(value);
|
|
| |
AutoCompleter.getFrameWidth():Number
|
Returns:
The prompting frame width of AutoCompleter object.
Usage:
//this will output the value of prompting frame width of autoCompleter
var value:Number = autoCompleter.getFrameWidth();
trace(value);
|
|
| |
AutoCompleter.getSpaceBetweenItems():Number
|
Returns:
The value of space between items in prompting frame of AutoCompleter object in pixels.
Usage:
//this will output the value of space between items in prompting frame of autoCompleter
var value:Number = autoCompleter.getSpaceBetweenItems();
trace(value);
|
|
| |
AutoCompleter.getItemsLeftIndent():Number
|
Returns:
The items left indent in prompting frame of AutoCompleter object in pixels.
Usage:
//this will output the value of items left indent in prompting frame of autoCompleter
var value:Number = autoCompleter.getItemsLeftIndent();
trace(value);
|
|
| |
AutoCompleter.getItemHeight():Number
|
Returns:
The items' height of prompting frame of AutoCompleter object in pixels.
Usage:
//this will output the value of items' height of prompting frame of autoCompleter
var value:Number = autoCompleter.getItemHeight();
trace(value);
|
|
| |
AutoCompleter.getItemsBackgroundColor():Number
|
Returns:
The Text Background Color parameter of AutoCompleter object.
Usage:
//this will output the "Text Background Color" parameter of autoCompleter
var value:Number = autoCompleter.getItemsBackgroundColor();
trace(value);
|
|
| |
AutoCompleter.getItemsTextColor():Number
|
Returns:
The Text Color parameter of AutoCompleter object.
Usage:
//this will output the "Text Color" parameter of autoCompleter
var value:Number = autoCompleter.getItemsTextColor();
trace(value);
|
|
| |
AutoCompleter.getItemsTextSize():Number
|
Returns:
The font size of promting rows of AutoCompleter object.
Usage:
//this will output the value of promting rows' font size of autoCompleter
var value:Number = autoCompleter.getItemsTextSize();
trace(value);
|
|
| |
AutoCompleter.getItemsTextThickness():Boolean
|
Returns:
The boolean value that identify the bold value of text in rows of AutoCompleter object.
Usage:
//this will output the bold parameter of text in rows of autoCompleter
var value:Boolean = autoCompleter.getItemsTextThickness();
trace(value);
|
|
| |
AutoCompleter.getItemsTextItalicType():Boolean
|
Returns:
The boolean value that identify the italic value of text in rows of AutoCompleter object.
Usage:
//this will output the italic parameter of text in rows of autoCompleter
var value:Boolean = autoCompleter.getItemsTextItalicType();
trace(value);
|
|
| |
AutoCompleter.getItemsFont():String
|
Returns:
The items' font name of AutoCompleter object.
Usage:
//this will output the "Text Font" parameter of autoCompleter
var value:String = autoCompleter.getItemsFont();
trace(value);
|
|
| Actionscript Events |
| |
AutoCompleter.onOpened
|
Description:
Event; broadcast to all registered listeners when a prompting frame is arising. The event object contains the number of items in prompting list.
Usage:
var listenerObject:Object = new Object();
listenerObject.onOpened = function(eventObject:Object)
{
trace("Prompting frame was opened, and number of items in list = " + eventObject.length);
}
AutoCompleterInstance.addEventListener(listenerObject,"onOpened")
|
AutoCompleter.onSelect
|
Description:
Event; broadcast to all registered listeners when you select an item from prompting list with mouse or by pressing up/down arrows. The event object contains the number of item selected and the text in item.
Usage:
var listenerObject:Object = new Object();
listenerObject.onSelect = function(eventObject:Object)
{
trace("Item number " + eventObject.item + " is now selected. The item is " + eventObject.value);
}
AutoCompleterInstance.addEventListener(listenerObject,"onSelect")
|
AutoCompleter.onChoosed
|
Description:
Event; broadcast to all registered listeners when you choose an item from prompting list with mouse click or by pressing "Enter" key. The event object contains the number of item choosed and the text in item.
Usage:
var listenerObject:Object = new Object();
listenerObject.onChoosed = function(eventObject:Object)
{
trace("Item number " + eventObject.item + " has been choosed. The item is " + eventObject.value);
}
AutoCompleterInstance.addEventListener(listenerObject,"onChoosed")
|
|
| Requirements |
| |
To use AutoCompleter Flash Component on web page browser must have Flash Player 7 or later installed. This is a free plugin available here.
To use the AutoCompleter Component you need Macromedia Flash MX 2004 or
Macromedia Flash 8 (Standard or professional) Window or Macintosh. May be published for Flash Player 7 or 8.
|