Flash MX 2004 Data binding (1)

Data

The author of this article: Mizarli
Article Source: Ultrashock
This translator: Egoldy
The original English link is:http://www.ultrashock.com/tutorials/flashmx2004/databinding.php

the beginning of creation ...

At the beginning of creation, God created the sky and the Earth. At that time the earth was amorphous and square, so God created flash and found that it was good to use. It was the first day of the affair. By the fourth day, God was not satisfied with the ordinary animation, so he introduced ActionScript. On the fifth day, God abandoned the old ActionScript and started building again, but only to make the as more normative. By the sixth day, as was supplemented and God created the component. Later, God discovered that the components were very lonely and created data streams through which components could be bundled together to share the fun of data synthesis. The seventh Day, God intends to rest, but in the invention of Flash even better is in the authoring environment to consolidate the data binding capabilities and neat component architecture.

So, what is data binding?

You may have realized that data binding is no longer a new feature for Flash, but it has been greatly improved since the FLASHMX has been enhanced. Simply put, data binding is an easy way to bundle your data together without too much effort. You can coordinate the properties of different UI (user interface) components, and even connect them to server-side data through data components. Data binding does not need to understand complex as or manipulate XML, but to reduce this operation to a simple "click" Operation can be done. Data binding is a key feature of rapid application Development (RAD) as well as a tool for prototyping development.

Point-to-Point (Point-and-click) data binding is essentially implemented through the Run-time data-binding Application Interface (API). If you have the resources you need in your movie, you can also access it through your script. This only needs to replicate the data-binding class symbol (Binding Classes) in the public library, which can be found in the Flash menu:

Windows--Other panels--common libraries--classes. This is the best way, if you only need to create a binding to dynamic content or just like to work in a code environment. However, what we are looking at now is the visual interface.

Before you begin, download the source file and unzip it to a new directory.

to find your way

Let's go! Let's look at the new panel used to implement data binding. It's a bit flustered at first, but we'll get used to it soon. I've already set them up, starting with the palette, ending the schema tag in the component inspector. Don't think more, keep on studying!

Component Panel

Component Checker: Parameter labels

Component Inspector: Binding labels

Component Inspector: Schema label

Basic Components

Since the palette makes us a little flustered, let's start with this study. We're going to build a very simple binding between the two radio buttons (CheckBox), like this:

Checkboxes.fla

When you click each radio button, you will notice that the other one has changed the same way. This is what we want to achieve.
1, from the palette drag and drop out of two radio buttons, respectively to these two instances named CheckBox1 and CheckBox2;
2, open the palette of the "binding" tab, and then select CheckBox1, then the panel should be empty, because no binding has been established;
3, click the "+" button, will pop up "add binding" panel;
4, we want to bind is the selected CheckBox selected property, so click the name "Selected:boolean" can, and then click "OK";

5. A new binding is displayed under the binding label. Now let's connect it to the other objects. Double-click the blank area of the bound to argument in the argument list (there will be a bind to window pop-up) and complete the binding by selecting the schema location selected property of the component path CheckBox2, as follows:

6, OK, test your film bar!

Although it looks good, it's not very tight. There is a panel we haven't seen yet. The most disturbing "schema" tag. The schema tag of a component is a generalization of the component's data structure. In the case of a radio button, the simplest, default is a property--decide whether it is selected or not selected. You can see the word "selected" displayed in the list of the radio buttons you just created. Source file name is Checkboxes.fla

Architecture

Using the schema panel, we are not restricted to the default criteria. We can add new attributes here, and these properties are controllable and useful. Usually this doesn't have to be too much, because attributes don't mean anything, but in fact you can create more component properties to provide data binding.

For the second example, we're going to bind two radio buttons, but this time bind a component's "available" attribute to use it to activate another component. ：

Checkboxes_enabled.fla

Note Select or deselect radio button 1 to activate or not activate radio button 2. This is more useful. You can use this function to activate or not activate other parts of the form in the form, depending on the user's choice. Let's get started.

1. Remove the binding option in Example 1 before starting, select any radio button, and then select the binding label, click the "-" button;
2, select the component instance "CheckBox2", click on the schema tag, click "+" to add a new attribute;
3, there will be a lot of information displayed under the Architecture panel, but don't worry, this example does not need too many settings. Just set the field Name argument to Enabled, and the data type argument is Boolean.

4, now as the previous do, the establishment of help. This time, however, is the "selected" attribute of the binding order button 1 to the "enabled" property of radio button 2, test it!

is all the data currently based on XML?

Yes! So be familiar with it, otherwise there will be the possibility of being eliminated! Other methods, other than XML, are having trouble with data binding! Next, we'll introduce the XML schema and then migrate the data from the external XML file to do the menu bar and use the Xmlconnector component.

First you should know the menu bar component, in fact there are many XML-driven components (such as menus, menu bars, directory trees), but the name of the XML node is ignored, only the XML attribute is used. Here is an example of an XML file:

Code: <menu>
<menu-title label= "File" >
<menu-item label= "Load"/>
<menu-item label= "Save"/>
<menu-item label= "Print"/>
</menu-title>
<menu-title label= "Edit" >
<menu-item label= "Cut"/>
<menu-item label= "Copy"/>
<menu-item label= "Paste"/>
<menu-item label= "Sub-menu" >
<menu-item label= "Nothing Here"/>
</menu-item>
</menu-title>
</menu>

xmlmenu.swf File Demo

(XMLMENU.FLA)

The architecture panel will provide us with more convenience. We will load the data with the Xmlconnector component and use the schema Panel to guide the menu to refer to the corresponding part of the XML file.

1, first of all, we need to place a menu bar component menus and a xmlconnector component on the stage, naming menubar and xmlconnector for the component instance respectively. You can place the Xmlconnector component anywhere on the stage because it is not visible when it is released;
2. Next, you need to set up the Xmlconnector component to load the data. To do this, use the following settings in the Component parameters Panel:

Menu.xml is an XML filename, note that the direction parameter is set to receive because it is a static XML document;
3, then add some smart settings. We use the architecture panel to tell Xmlconnector what kind of XML file is acceptable. Determine that the Xmlconnector component is in the selected state and open the schema label for the component's property inspector;
4, select the "results" attribute under the schema label, because the data will be loaded here. Click the button to import an XML schema, select the "menu.xml" file in the navigation bar, and select open options. Your architecture panel will look something like the following:

All this information is intended to illustrate the structure of your XML document. Flash finds duplicate elements and treats them as arrays, and flash also detects values such as "true" or "1" and making them Boolean or number types. Now we are only interested in the root node and the menu;
5, select the MenuBar component and open the property Inspector's binding label. The MenuBar component defaults to a bindable property, a data source property;
6, add a binding to the data source, as we did in Example 2:

Select menu node, data binding complete

7, there is one thing we haven't done: Load XML documents; Just put a little piece of code in the main timeline:
Xmlconnector.trigger ();

8, test the film bar!

Arrays and Indexes

Most data binding is now done using arrays, which are done through a list based component, such as the list component, the DataGrid component, or the ComboBox component. Flash can detect duplicate nodes in an XML schema and process them as an array. As a demonstration, we'll build a small, simple application that shows the duty table for housework.

selectindex.swf File Demo here

Selectindex.fla

The following is the XML code that drives the program:

Code: <chores title= "house Work Rota" >
<day label= "Monday" >
<job description= "Dishes" person= "john" time= "mins"/>
<job description= "Cooking" person= "Sam" time= "1 hour"/>
<job description= "Walking Dog" person= "David" time= "mins"/>
<job description= "Laying the table" person= "Peter" time= "5 mins"/>
<job description= "slacking off" person= "Elisabeth" Time= "All Day"/>
</day>
<day label= "Tuesday" >
<job description= "Dishes" person= "David" time= "mins"/>
<job description= "Cooking" person= "Peter" time= "1 hour"/>
<job description= "Walking Dog" person= "Sam" time= "mins"/>
<job description= "Laying the table" person= "John" time= "mins"/>
<job description= "slacking off" person= "Elisabeth" Time= "All Day"/>
</day>
<day label= "Wednesday" >
<job description= "Dishes" person= "Sam" time= "mins"/>
<job description= "Cooking" person= "David" Time= "1 hour"/>
<job description= "Walking Dog" person= "Peter" time= "mins"/>
<job description= "Laying the table" person= "John" time= "mins"/>
<job description= "slacking off" person= "Elisabeth" Time= "All Day"/>
</day>
<day label= "Thursday" >
<job description= "Dishes" person= "Peter" time= "3 hours"/>
<job description= "Cooking" person= "John" time= "1 hour"/>
<job description= "Walking Dog" person= "David" time= "mins"/>
<job description= "Laying the table" person= "Sam" time= "mins"/>
<job description= "slacking off" person= "Elisabeth" Time= "All Day"/>
</day>
<day label= "Friday" >
<job description= "Dishes" person= "Sam" time= "mins"/>
<job description= "Cooking" person= "Sam" time= "1 hour"/>
<job description= "Walking Dog" person= "Peter" time= "mins"/>
<job description= "Laying the table" person= "Sam" time= "5 mins"/>
<job description= "slacking off" person= "Elisabeth" Time= "All Day"/>
</day>
<day label= "Saturday" >
<job description= "Dishes" person= "John" time= "1 hour"/>
<job description= "Cooking" person= "John" time= "1 hour"/>
<job description= "Walking Dog" person= "David" time= "mins"/>
<job description= "Clean car" person= "Sam" time= "mins"/>
<job description= "Laying the table" person= "David" time= "mins"/>
<job description= "slacking off" person= "Elisabeth" Time= "All Day"/>
</day>
<day label= "Sunday" >
<job description= "Dishes" person= "Peter" time= "mins"/>
<job description= "Cooking" person= "David" Time= "1 hour"/>
<job description= "Walking Dog" person= "Peter" time= "mins"/>
<job description= "Laying the table" person= "John" time= "5 mins"/>
<job description= "slacking off" person= "Elisabeth" Time= "All Day"/>
</day>
</chores>

So where do we start?
First import our XML Schema, place a Xmlconnector component instance on the stage (and name it, because no named component instance is not allowed to be bound), import file "Chores2.xml"--Confirm importing it into results parameters instead of other parameters Next, we will bind the data of the driver application to the ComboBox component. Note The attributes of the XML--store each day of the week as a label. This can be handy because that's what the ComboBox component needs, but it's usually not the best habit. We'll see a more appropriate usage in the "format" section of the name.

Binding ComboBox Data driver to XML document Source:
1, new ComboBox component instance, and named;
2, select the list box component, open the Component Checker binding label;
3. Create a new binding in the data driver properties;
4, click the "Bound to" field, point to Xmlconnector component, select the number of days from the framework of the array Day:array

Next, we need to configure the data grid DataGrid component and the XML data source. This is a bit complicated because the entire data source needs to be changed-regardless of which day the date in the list box is selected. If you compare XML documents with the XML schemas interpreted by Flash, you will find that it is structured like a nested array. Include an "work array" job on each day of "array of Days". Since everything is mentioned only once in the schema, we next use the schema to bind the N-indexed job array in the day array. Now you can do it alone; in the Xmlconnector schema, you bind the job array node with the Dataprovider property of the DataGrid component instance.

So far, we can't say that the job array is already bound to the actual XML document, in fact, there are 7 choices--and we only bind the nth-day array, but Flash has a secret when it determines the value of N.

1, select Xmlconnector again and open the binding label;
2, select the binding--results.chores.day from the job array to the DataGrid component instance. [N].job. You may notice that a new parameter index for ' Day ' has already appeared at the bottom. This parameter lets us specify the index value of the day array. Here you can enter a value, but we want it to change with the option of the ComboBox component instance. In essence, this can be done on other bindable properties, so we just bind it to the SelectedIndex property of the ComboBox component instance, just like any other bindings we've done--double-click index for ' Day ' parameter, pops up the binding index window, cancels using the constant value option, and selects the schema location Selectedindex:number option for the component path ComboBox.

3, test the film well.