MySQL management in Flex (3) I omitted some code similar to trim to shorten the code segment length. The difference is that Tag, which creates an HTTP Service Flex object, which communicates with the server. This service object is called by the onInitialize method, which is called when the Flex application starts. The onInitialize method first sets the service URL and then initiates a request. After the request is complete, the onResult method is called. The onResult method sets the dataProvider of the combo box as the returned result of the web server.
TheMethodThe most valuable part is as follows:
myservice.lastResult..database.* |
Let's look at this statement. If you do not know the role of E4X before, I can explain it a bit. The myservice. lastResult variable is actually an XML document. The '..' syntax is equivalent to the XPath '//' syntax. It indicates "giving me any tag with this name", in this example, "giving me any database tag ". Asterisks indicate any sub-tags of database tags. Because the database tag has only one sub-tag, that is, the text part of the database name, this code indicates "giving me the name of each database in the XML document ". This function is really useful!
Because of the E4X extension of ActionScript, Flex can easily communicate with XML data sources. As far as I know, no other language can easily Query XML documents. Therefore, with the powerful E4X, you can run the application in the browser and get the result shown in 2.
|
: Database combo box that fills in the database name |
When you click the combo box, a drop-down list is displayed, showing the database list in the machine. Yes, there are many databases. Almost every article on PHP, Flex, Rails, or other technologies will use databases, so I have a lot of databases.
Code for creating a table view
The last step to create a demo Flex application is to add the drop-down menu of the table and display the data of the selected table in the data grid. The complete code for this example is shown in listing 4.
Listing 4: flexmysql. mxml
initialize="onInitialize()">
<BR>import mx.collections.ArrayCollection;<BR>private static const SERVICE_BASE:String = "http://localhost/sql/req.php";<BR>private var loadingDatabases:Boolean = true;<BR>private var loadingTables:Boolean = false;<BR>public function onInitialize():void<BR>{<BR>loadingDatabases = true;<BR>myservice.url = SERVICE_BASE;<BR>myservice.send( null );<BR>} public function onResult(event:Event):void<BR>{<BR>if ( loadingDatabases )<BR>{<BR>loadingDatabases = false;<BR>selectedDatabase.dataProvider = myservice.lastResult..database.*;<BR>onSelectDatabase();<BR>}<BR>else if ( loadingTables )<BR>{<BR>loadingTables = false;<BR>var tables:Array = new Array();<BR>for each ( var tablRecord:XML in myservice.lastResult..record )<BR>{<BR>for each( var tablCol:XML in tablRecord.* )<BR>tables.push( tablCol..*.toString() );<BR>}<BR>selectedTable.dataProvider = tables;<BR>onSelectTable();<BR>} else<BR>{<BR>var records:Array = new Array();<BR>for each ( var record:XML in myservice.lastResult..record )<BR>{<BR>var outRecord:Array = new Array();<BR>for each( var column:XML in record.* )<BR>outRecord[ column.name() ] = column..*.toString();<BR>records.push( outRecord );<BR>}<BR>var data:ArrayCollection = new ArrayCollection( records );<BR>dg1.dataProvider = data;<BR>}<BR>} public function onSelectDatabase():void<BR>{<BR>loadingDatabases = false;<BR>loadingTables = true;<BR>var url:String = SERVICE_BASE;<BR>url += "?mode=getTables&db="+selectedDatabase.selectedLabel;<BR>myservice.url = url;<BR>myservice.send(null);<BR>} public function onSelectTable():void<BR>{<BR>var url:String = SERVICE_BASE;<BR>url += "?mode=getData&db="+selectedDatabase.selectedLabel;<BR>url += "&table="+selectedTable.selectedLabel;<BR>myservice.url = url;<BR>myservice.send(null);<BR>}<BR>
change="onSelectDatabase()">
change="onSelectTable()">
|
One important modification is that the code of the onSelectDatabase () function is added to obtain the table list, input it to the onResult () function, and add the onSelectTable () function, this function can retrieve data in a table and set a data grid in the onResult () processor.