Click OK to close the Linkage Properties dialog box. With the Actions panel open, insert the following script just below addURL_pbListener.click = function () { :
listURL_lb.enabled = true;
listURL_lb.addItemAt (0, inputURL_ti.text);
listURL_lb.selectedIndex = 0;
listURL_lb.iconFunction = function (item:Object):String {
var tempString:String = item.label;
if (tempString.indexOf ("www.") >= 0) {
return "symbolWWW";
} else if (tempString.indexOf ("mailto:") >= 0) {
return "symbolMail";
} else if (tempString.indexOf ("ftp.") >= 0) {
return "symbolFTP";
} else {
return "symbolNone";
}
};
inputURL_ti.text = "";
Because this script is inserted within the
click handler of the
addURL_pbListener object, it gets executed when the
addURL_pb instance is clicked. Let's look at how this script works.
The first line enables the
listURL_lb instance, just in case it has been disabled (such as when the application is initially opened). The next line of script uses the
addItemAt() method, which is available to List component instances. This method adds an item (line of information) to the specified List component instance, which in this case is the one named
listURL_lb.
Note
A disabled component cannot be manipulated by the user or via ActionScript.
To understand how this method works, you need to understand that each item displayed in a List component instance is actually an object with two properties named
label and
data. The
label property holds a value representing the text displayed for the item; the
data property is a hidden value associated with that
label. For example, if you had a List component that displayed computer parts, the
label property could be used to hold a text description of the piece of hardware, whereas the associated
data property could be used to hold the associated part number (hidden from the user) like this:
label: Monitor data: Mon359a4
label: Keyboard data: Key4e94f
And so on.
If the user later selected one of these items from the list, you could use a script to retrieve either the
label or
data value of the selected item. The
data item is the preferred choice because it contains more specific information; the
label property is used mostly for readability. With this understanding, let's look at the syntax for using the
addItemAt() method:
nameOfListInstance.addItemAt(index, label, data);
The
index parameter indicates where in the list to add the new item, with 0 being the top of the list. The
label parameter represents the text you want to display for the new item. The
data parameter represents any hidden value you want to associate with the new item. The
data parameter is optional, and omitting it will cause the
label and
data properties of the newly added item to contain the same value.
As you can see in the script we inserted, the method is set up to add a new item to index 0 (which again is the topmost position on the list), and the value assigned to the
label property of this newly added item is the text currently displayed in the
inputURL_ti instance (what the user has entered). Because we're not using the optional third parameter in the method call, the
label and
data properties contain the same value when the item is added to the list.
Tip
Items shown in List component instances have index numbers (beginning with 0), indicating their position in the list. Thus, the first item in the list has an index of 0, the second has an index value of 1, and so on.
The third line of the script assigns a value to the
selectedIndex, property of the
listURL_lb instance. This will set and highlight the item at index 0, which will always be any newly added item.
The next several lines of script set the
iconFunction property of the
listURL_lb instance. The value of this property specifies a function to execute when a new item is added to the list. This function is used to add an icon to the newly added item by returning a string value, representative of the identifier name of the icon to use (as discussed in Step 3). Let's look at how this function works.
When this function is executed, it's passed an object that we named
item. This object has two properties named
label and
data. The values of these properties are the same as the
label and
data properties, as defined in the
addItemAt() method call we just discussed. If our method call looked similar to the following, the object passed to
iconFunction would have a
label property value of
"fruit" and a
data property value of
47:
myList.addItemAt(0, "fruit", 47);
The value of one or both of these passed properties is used by the function to determine the name of the icon to attach.
The function's first action creates a variable named
tempString. This variable is assigned a value based on the
label property of the object passed to the function. If the user is adding the URL
www.derekfranklin.com, for example,
tempString will be assigned that URL as its value. Next, a series of conditional statements is used to determine whether the value contained in
tempString includes
www.,
mailto:,
ftp., or none of these. As a result,the function will return a string value representing the linkage identifier name of the movie clip in the library to use.
The last line in the script clears the
inputURL_ti instance of the URL the user has entered, allowing the user to quickly add another URL.
Let's test our project.
In the preceding exercise, we registered the inputURL_tiListener object to listen for the focusIn event in relation to the inputURL_ti component instance. The script we just inserted tells the Listener object what to do when this event occurs in relation to that instance. When the user clicks inside the inputURL_ti instance (gives it focus), this script will execute.
The remaining three movie clips have also been given identifier names representative of their movie clip names. Giving movie clips identifier names allows us to dynamically insert them into our project as it plays, which is something we'll script next.
