Extract complete data from list items

In this tutorial we will be creating a list containing the names of employees in a company. The list items will contain all of the employees' details which will be used to populate the full contact card.

1. Place an instance of the dndList (BJC DnD) component onto the stage.

2. Set the required properties in the properties panel:

Element mode: Button/Drag Item/Both
Element transfer mode: Move/Copy - move will only work when dragging between two lists.
Element click callback: The function that will be called when clicking on an element. This value is necessary if the element mode has been set to Button or Both. In this tutorial, enter cb in this field.

3. Give the dndList component that's on your stage an instance name of: dnd

4. Create movie clips in your library for the drag symbols and the icons which will appear next to each item in the list. After creating each movie clip, right click on the movie clip symbols in the library, select "linkage", give the symbol a linkage name and select the checkboxes for "export for ActionScript" and "export in first frame".

An example of these symbols can be seen in the demo file called "demo_dnd_2.fla" which is included with your download.

5. Now we'll add the elements dynamically to the dndList. Add the following ActionScript code to the main timeline, to the first frame in which the DnD component appears:

id = dnd.addElementCustom("John Smith", "verdana", "0x666666", "0xF5F5F5", "0xE1E1E1", "0x999999", "pIcon1", "dragSymbol1");
dnd.setObjectName(id, "John Smith's details");
dnd.setProperty(id, "fname", "John");
dnd.setProperty(id, "lname", "Smith");
dnd.setProperty(id, "title", "HR");
dnd.setProperty(id, "section", "Management");

id = dnd.addElementCustom("Peter Piper", "verdana", "0x666666", "0xF5F5F5", "0xE1E1E1", "0x999999", "pIcon1", "dragSymbol1");
dnd.setObjectName(id, "Peter Piper's details");
dnd.setProperty(id, "fname", "Peter");
dnd.setProperty(id, "lname", "Piper");
dnd.setProperty(id, "title", "Accounts");
dnd.setProperty(id, "section", "Management");

id = dnd.addElementCustom("Julie Williams", "verdana", "0x666666", "0xF5F5F5", "0xE1E1E1", "0x999999", "pIcon1", "dragSymbol1");
dnd.setObjectName(id, "Julie Williams's details");
dnd.setProperty(id, "fname", "Julie");
dnd.setProperty(id, "lname", "Williams");
dnd.setProperty(id, "title", "IT");
dnd.setProperty(id, "section", "Management");

This is an explanation of the methods used above:

addElementCustom (title: String, font: String, fontColor: Number, bgColor: Number, bgUpColor: Number, bgDownColor: Number, icon: String, dragIcon: String) Returns a number (id).

setObjectName (index: Number, name: String)
setProperty (index: Number, property: String, value: String)

6. Next we should create the fields that will display the employee's details. To do this, create 5 dynamic textfields to the left of the dndList component that's on your stage and give them the following instance names:

_oname
_fname
_lname
_title
_section

You will probably want to place a label alongside each of these fields, to give them more meaning (as show in the example below).

7. We're now ready to populate the fields with data. We'll start by creating the function that will be called to populate the fields by simply clicking on an item in the dndList. In this tutorial, the element click callback function that we specified is called "cb". Place the following function into the first frame, on the same timeline as the dndList component:

function cb(obj, id) {
_oname.text = obj.getObjectName();
_fname.text = obj.getProperty("fname");
_lname.text = obj.getProperty("lname");
_section.text = obj.getProperty("section");
_title.text = obj.getProperty("title");
}

8. Next, we'll create a movie clip which will accept the elements that are dropped onto it and will populate the textfields accordingly. The idea behind this is to create a transparent movie clip that will define the drop area. Here are the steps for doing this:

a. Add a new layer, above the layer containing the description fields.
b. Draw a rectangle (without any borders) in this layer, with the size being large enough to cover the textfields. The size of this rectangle will define the drop area.
c. Select the rectangle and press F8 to convert it into a movie clip.
d. Double click on the movie clip that you just created in order to edit it.
e. Add a new layer to the timeline of the rectangle movie clip. Call this layer "actions".
f. Place the following code in the first frame of the "actions" layer:

function dropHandler(obj, index) {
_parent._element.text = index;
_parent._oname.text = obj.getObjectName();
_parent._fname.text = obj.getProperty("fname");
_parent._lname.text = obj.getProperty("lname");
_parent._section.text = obj.getProperty("section");
_parent._title.text = obj.getProperty("title");
}

g. Return to the main timeline and select the movie clip containing the rectangle. Set the color to "alpha", "0" in order for this movie clip to be transparent.

That's it!

Test you movie (ctrl-enter) and tray drag items from the list over the details on the right. You can also try simply clicking on each item in the list to see the details.