MX2004 Components (4): DATA Components - Binding

?

Today, come to learn the Data Components in 2k4.

The Data Components involved: DataSet, XmlConnector, DataGrid, Label related technologies are: XML, MySQL purpose: Understand the data binding between Data Components

We will use an example of address List to gradually explain, look at the example first

The prototype of this article is in http://www.flash-db.com/tutorials/databind/ original PHP, but it will not, only change to JSP,     文 例 例 例 不 不 不 不Friends can see that article, of course, the database structure is the same, the program language does not matter.

[Beginnely in the following steps, first follow the steps, don't go through the reason, after doing it, then see each step explanation, plus your own understanding, I believe you can get it. ]

First prepare: Here you already have a JSP container, you can run JSP files normally. Built a folder in the web root directory: AddressList built a database called AddressList, then download DB.sql file, import mysql, Run, create a table you need. Finally it will be used. Create two XML files to store class names and classmates. Classes.xml:

?

?

?

MEMBER.XML

?

Ad@adf.com "rel =" nofollow "msn =" null "/>

?

Ad@adf.com "rel =" nofollow "msn =" null "/>

?

Ad@adf.com "rel =" nofollow "msn =" null "/>

You can also download classes.xml and member.xml to your addressList directory, we will use these two files first.

The body start, the list is awkward ~~

Preview the screenshot of the original file first, all steps below are made according to the following figure.

?

XmlConnector: 1) Drag an XMLConnector to the main scene, named Con1, Ctrl F3 Open Properties panel, in the Parameter panel: ??? URL: Classes.xml, Direction: Reveive keeps the CON1 selection status, Open Component Inspector  Select Result: XML, then click the down arrow in the upper right corner of the palette: "Import a schema from a sample xml file, select AddressList / Classes.xml in the pop-up box box?

[TIPS: This step is to establish links to XMLConnector and external data sources, and import the XML file into schema, generate a view of an XML file structure for the binding data]

2) Another arm an XMLConnector to the main scene, named Con2, URL: Classes.xml Direction: Reveive is like 1), introduce AddressList / Member.xml. [TIPS: 同]

DataSet: 3) Drag a DataSet to the main scene, named: Data1_DS, Component Inspector Binding, click " " to select DataProvider: Array in the pop-ups, then in the following property panel points Bound To column The right side of the small magnifying glass, select the XMLConnector left on the pop-up Bound to dialog,

Then choose Class: Array, OK in the right one column!

Keep DATA1_DS selection status, Components InspectorSchema, point the big number: Add a component property. Fill in the File Name column below: classname, other properties constant?

?

?

[TIPS: Here is the link between DataSet and XMLConnector, map XML external files to DataSet via XmlConnector, DataSet's function is very powerful, is not only a data container, or a filter, you can set you through DataSet What data is displayed, the added classname described above means filtering other properties, only outputting the classname property]

4) Drag a DataSet, named: Data2_DS, steps are 3), just this is Bound to XmlConnector,

Classmate: Array, and increase Name, QQ, MSN, Email, Adds five Component Property

[TIPS: The principle is above, the new five attributes are what you want to display in the DataGrid. The CID attribute like MEMBER.XML is not displayed in the Dataset, so it will not show it (but it still exists, can still be accessed)]

5) Drag again. . DataSet comes in (mainly it is too easy to use ) named: data3_ds, steps are 4), just add a Component Property: Name

[TIPS: 同, here we just want to display a member.xml name property in Member_GRD, so only one will be added]

DataGrid: 6) Now dragging DataGrid, dragging one to the main scene, named Class_GRD, place the left position, (like the example in the example), Component Inspector Binding, choose DataProvider: Array, Bound to Data1_ds Provider : Array; ????

[TIPS: This step is to connect DataSet with DataGrid and display the data in the DataSet to DataGrid]

7) Repeat 6) step, then drag a DataGrid, named MEMBER_GRD, put on the right side of Class_GRD, Component Inspector Binding dataProvider: array? Bound to Data3_DS DataProvider: Array

[TIPS: Show the contents of Data3_DS in Class_GRD]

Label8) Label components to the six main drag scene, named class_txt, name_txt, qq_txt, msn_txt, email_txt, address_txtclass_txt: Compoents InspectorBindingtext: String className data1_ds's bound to: String Property

Name_txt: Compoents Inspector Bindingtext: String Binds to the name: string property of Data2_DS: String property

QQ_txt: compoents inspector Bindingtext: String Binds to Data2_DS QQ: String Attribute

MSN_TXT: COMPOENTS INSPECTOR Bindingtext: String Binds to Data2_DS MSN: String Attribute

Email_txt: Compoents Inspector Bindingtext: String Binds to the email: string property of Data2_DS: String Attribute

Address_txt: Compoents Inspector Bindingtext: String ADDS: String Attribute [Tips: Several Label Components Here with Data2_Ds, Data1_Ds Newly added to Data1_DS, Data2_Ds to keep data When synchronization, Data1_DS, Data2_DS changes, can reflect in Label]

Button

9) Drag the four Button components to the main scene, Class_GRD below, named prev_btn, next_btn, Member_GRD, named MPREV_BTN, MNEXT_BTN.

Ok, go to this step, Ctrl Enter, test it, see class_grd and member_grd, and there are already content in the label, but they can't interact, let's let them join.

[TIPS: This is not much here, it is to control the next next next to DataGrid, the main function is implemented in AS.

SELECTEDINDEX10) Select Data2_DS, Component Inspector Binding, binding SELECTEDINDEX: Number to Member_GRD SELECTEDEX: Number, Direction is in. ???????

?

11) Keep DATA2_DS selection, bind selectedindex: Number to Data3_DS SELECTEDEX: Number

12) Select MEMBER_GRD, bind its selectedIndex: Number to Data3_DS SELECTEDEX: Number

13) Select Class_GRD, bind its selectedIndex: Number to Data1_DS SELECTEDEX: Number

. The first entry, then the DataSet's data pointer will point to the first line of data, point the second, the pointer refers to the second line of data (the pointer is only a Lenovo, with assistant solution)]

Ok, this way, you can realize the left column with the synchronization of the right column, um. . That is to say, you click on the entry of the left column, and the content on the right is also changed, just like you see the example.

Below, we should write some AS, don't worry, very simple.

ActionScript14) Write on the first frame: system.usecodepage = true; (if your content is Chinese, it is best to write this sentence) Con1.trigger (); con2.trigger (); // These two sentences XMLConnector Will not load XML file var display = new object (); // Customize a portable

/ / Trigger when the DISPLAY object is added to the CellPress method, which is triggered when the DataSet? Internal data pointer changes, Cellpress is triggered when DataGrid's cell is clicked. DISPLAY.CELLPRESS = Function (EVT ) {// Get the selectedIndex value of the selected entry, is an integer? Var nr: Number = evt.target.selectedIndIndex; // passed the class.xml ID attribute to Member.jsp, according to the ID value by Member.jsp Dynamics Generate the contents of MEMBER.XML. ? con2.url = "member.jsp? CID =" DATA1_DS.ITEMS [NR] .ID; // Re-load MEMBER.XML file? Con2.trigger ();} // Adds ONPRESS events for four NAV Button, To change the internal data pointer of DataSet prev_btn.onpress = next_btn.onpress = mprev_btn.onpress = mnext_btn.onpress = function (evt) {? If (this._name == "prev_btn") {this._parent.data1_ds.previous () }? if (this._name == "next_btn") {this._parent.data1_ds.next ()}? if (this._name == "mprev_btn") {this._parent.data3_ds.previous ()}? IF ( THIS._NAME == "MNEXT_BTN") {this._parent.data3_ds.next ()}}

// add the corresponding event to the relevant DataGrid and DataSet ("Cellpress", Display); Data1_Ds.AddeventListener ("Iteratorscrolled", DISPLAY;

15) The following is the code <% @ page import = "java.sql. *"%> <%? String cid = request.getParameter ("CID"); "org.gjt.mm" ? .mysql.Driver ".) newInstance () ;? Connection conn = DriverManager.getConnection (" jdbc: mysql: // localhost: 3306 / addrsslist user = YourName & password = YourPassword ") ;? Statement stmt = conn.createStatement (); ResultSet RS = Stmt.executeQuery ("SELECT * from mail where cid =" CID);? Out.println ("

"); out.println ("

"); while (rs.next ()) {?? // out.println (rs.getstring (" name ")); ?? Out.println ("

");

?

?

Out.println ("

");

%>

[TIPS: JSP content is not explained, it will be easy to understand. According to con2.url = "met.jsp? CID =" data1_ds.items [nr] .id; this sentence passed the CID value to determine which data is obtained from the database] Ok, it is over, CTRL ENTER tries that is it working properly as the beginning? If you don't work properly, take some time to check it. Do you have a strict to every step, or compare a good source code, where is it different. These things don't have much effect on it, do more, at least three times, and the second time, I have done my own understanding, rather than still in accordance with the tutorial.

?