Components

[ LiB ]  

Components

Components are ready-made movie clips containing all the code needed for a specific task. For example, you can use a blank List component and make it appear with a list of options from which the user can select. Figure 3.8 shows the interface from a movie voting application you'll build in Chapter 8.

Figure 3.8. The interface portion of this movie voting app (built in Chapter 8) uses several new components.

graphics/03fig08.jpg


This particular example includes a List and two Button components. Changing the contents of a list or enabling and disabling a button are just two simple tasks you can achieve with these components. Flash ships with a variety of "version 2"(V2) components that not only reflect an updated graphic look (called Halo ) but also function differently. There's a whole chapter on components, but they'll pop up during many exercises before that because they're so useful.

Using Components

At first I thought components would stifle creativity, but in fact, they relieve you from the mundane task of designing and programming common interface elements. (I should note, I'm talking about the user interface [UI] components; there are others that solve more specific needs.) The only downside is that they require a bit of investment to learn. Worse yet, there have been many changes to the way they work over the old "V1" components. There are two shards of good news in this: You can use V2 components and deliver to Flash Player 6, and the investment of learning V2 components is paid back in time saved using them.

Note

Primary Differences in V2 Components

The best improvement is that most contained properties are now accessible directly, like any clip property. For example, in the past if you had a ListBox component with an instance name my_lb , you could find the currently selected index using result=my_lb.getSelectedIndex() or set the index using my_lb.setSelectedIndex(1) . Now, if you have a list named my_list you can do the same thing but using result=my_list.selectedIndex and my_list.selectedIndex=1 . After you figure out the property names , this is so much better.

Another big difference is the way you make the components trigger code in your movie. In the past, you would use setClickHandler() or setChangeHandler() to specify a homemade function you wanted to trigger. Now you use addEventListener() and specify both the event ( "click" , "change" , or whatever applies to the particular component) and the function you want to trigger. For example:


 my_list.addEventListener("change",doClickList); 


Now, any time the my_list List component changes, the doClickList() gets triggered. The only trick here is to find the events available to the component type. (For example, buttons only have a "click" event, but not a "change" event.) The cool thing is that some components have several events you can trap.

Finally, a subtle difference that seems worth mentioning too is that the automatic parameter that arrives in any function call is not a reference to the component instance any more. It's a custom generic object that contains several properties. For you to get a handle on the instance that triggered your code, look for the target property. Check out the following "old vs. new" example that assumes you have some buttons associated with the doClick() function (either through setClickHandler() or addEventListener() ).

Old way:


 function doClick(b){ trace("a reference to button clicked: " + b) } 


New way:


 function doClick(b){ trace("a reference to button clicked: " + b.target) } 


The idea is that instead of each button having its own function, you can have several buttons that all trigger doClick() . Then you figure out who triggered it when you're inside the function.


I really didn't want to get so specific in this chapter, but these tips should help avoid some frustration. In addition, you will use components in several places before you get to Chapter 12, "Using Components"so this should help.

Providing Data to Components

Generally speaking, you just populate your components and then let the user interact with the data presented. Often you'll change the contents of a component while the movie plays. For example, the movie voting application we build lists how many votes each movie received. As you add votes , the display needs to change.

The wizards who designed the components realized this was a typical need, so they made some components "data aware." These support the concept of data binding. There are a few ways to implement this. Basically you can link a data-aware component to your data so that any time the data changes the component automatically reflects the change. This is primarily an automatic data-synchronization feature. I mention this feature because we won't fully exploit it until Chapter 12.

Data Components

Flash MX Professional 2004 ships with a several data components that are arguably worth the price difference over Flash MX 2004. These components are a bit different because they include no visual interface. They're just used to connect to outside data sources. In addition, the DataSet and DataHolder components help you manage data maintained inside your Flash movie. It's just a bit confusing because these are different from the "data-aware" components discussed in the preceding section.

[ LiB ]  


Macromedia Flash MX 2004 for Rich Internet Applications
Macromedia Flash MX 2004 for Rich Internet Applications
ISBN: 0735713669
EAN: 2147483647
Year: 2002
Pages: 120

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net