ONLamp.com
oreilly.comSafari Books Online.Conferences.

advertisement


Administering MySQL Using Flex
Pages: 1, 2, 3

Getting the Database List

The first step in fleshing out the code of this Flex application is to populate the combo box of databases at the top of the form after the application loads. The code for this is shown in Listing 3.

Listing 3. flexmysql2.mxml

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
initialize="onInitialize()"> 
<mx:Script> 
<![CDATA[ 
import mx.collections.ArrayCollection; 

private static const SERVICE_BASE:String = "http://localhost/sql/req.php"; 

public function onInitialize():void 
{ 
    myservice.url = SERVICE_BASE; 
    myservice.send( null ); 
} 
public function onResult(event:Event):void 
{ 
    selectedDatabase.dataProvider = myservice.lastResult..database.*; 
} 
]]> 
</mx:Script> 
<mx:HTTPService id="myservice" result="onResult(event)" resultFormat="e4x"> 
</mx:HTTPService> 
<mx:VBox horizontalAlign="left"> 
<mx:HBox> 
    <mx:Label text="Database:" /> 
    <mx:ComboBox id="selectedDatabase" width="381" height="21"> 
    </mx:ComboBox> 
</mx:HBox> 
<mx:HBox> 
    <mx:Label text="Table:" /> 
    <mx:ComboBox id="selectedTable" width="381" height="21"> 
    </mx:ComboBox> 
</mx:HBox> 
<mx:DataGrid id="dg1" width="452"> 
</mx:DataGrid> 
</mx:VBox> 
</mx:Application>

I've left out some of the code that's the same as the previous example to reduce the size of the code fragment. The big addition is the <mx:HTTPService> tag, which creates an HTTP Service Flex object that will communicate with the server. This service object is called by the onInitialize method, which is called when the Flex application starts up.

The onInitialize method sets the URL for the service, and then starts the request. When the request completes, the onResult method is called. That onResult method sets the dataProvider on the combo box to the results returned from the web server.

What's really, really cool about this is this section:

myservice.lastResult..database.*

Have a look at that. If you haven't seen E4X in action before, let me tell you a little about it. The myservice.lastResult variable is actually an XML document. The '..' syntax is the equivalent of the XPath '//' syntax. It means "give me any tag of this name;" in this case, "give me any database tag." The star means any child of the database tag. And because there is only one child of the database tag, the literal text of the name of the database, this code means "give me the names of each of the databases from the XML document." How cool is that?

This E4X extension to ActionScript is why people rave about how easy it is for Flex to talk to XML data sources. No other language I know of makes it as easy to query XML documents.

So with my E4X rant out of the way, I can run this application in my browser and see the result shown in Figure 2.

figure 2
Figure 2. The database combo box filled with the database names

When I click on the combo, it drops down and you can see the list of databases I have on my machine. Yeah, I have a lot. Almost every article about PHP, Flex, Rails, or whatever uses a database. So, I have lots and lots of databases.

Building the Table Viewing Code

The final step in building this example Flex application is to handle populating the tables' drop-down menus and showing the data from the selected table in the data grid. The complete code for the example is shown in Listing 4.

Listing 4. flexmysql.mxml

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
initialize="onInitialize()"> 
<mx:Script> 
<![CDATA[ 
import mx.collections.ArrayCollection; 

private static const SERVICE_BASE:String = "http://localhost/sql/req.php"; 

private var loadingDatabases:Boolean = true; 
private var loadingTables:Boolean = false; 

public function onInitialize():void 
{ 
    loadingDatabases = true; 
    myservice.url = SERVICE_BASE; 
    myservice.send( null ); 
} 
public function onResult(event:Event):void 
{ 
    if ( loadingDatabases ) 
    { 
        loadingDatabases = false; 
        selectedDatabase.dataProvider = myservice.lastResult..database.*; 
        onSelectDatabase(); 
    } 
    else if ( loadingTables ) 
    { 
        loadingTables = false; 
        var tables:Array = new Array(); 
        for each ( var tablRecord:XML in myservice.lastResult..record ) 
        { 
            for each( var tablCol:XML in tablRecord.* ) 
                tables.push( tablCol..*.toString() ); 
        } 
        selectedTable.dataProvider = tables; 

        onSelectTable(); 
    } 
    else 
    { 
        var records:Array = new Array(); 
        for each ( var record:XML in myservice.lastResult..record ) 
        { 
            var outRecord:Array = new Array(); 
            for each( var column:XML in record.* ) 
                outRecord[ column.name() ] = column..*.toString(); 
            records.push( outRecord ); 
        } 
        var data:ArrayCollection = new ArrayCollection( records ); 
        dg1.dataProvider = data; 
    } 
} 
public function onSelectDatabase():void 
{ 
    loadingDatabases = false; 
    loadingTables = true; 

    var url:String = SERVICE_BASE; 
    url += "?mode=getTables&db="+selectedDatabase.selectedLabel; 
    myservice.url = url; 
    myservice.send(null); 

} 
public function onSelectTable():void
{ 

    var url:String = SERVICE_BASE; 
    url += "?mode=getData&db="+selectedDatabase.selectedLabel; 
    url += "&table="+selectedTable.selectedLabel; 
    myservice.url = url; 
    myservice.send(null); 
} 
]]> 
</mx:Script> 
<mx:HTTPService id="myservice" result="onResult(event)" resultFormat="e4x"> 
</mx:HTTPService> 
<mx:VBox horizontalAlign="left"> 
<mx:HBox> 
    <mx:Label text="Database:" /> 
    <mx:ComboBox id="selectedDatabase" width="381" height="21" 
        change="onSelectDatabase()"> 
    </mx:ComboBox> 
</mx:HBox> 
<mx:HBox> 
    <mx:Label text="Table:" /> 
    <mx:ComboBox id="selectedTable" width="381" height="21" 
        change="onSelectTable()"> 
    </mx:ComboBox> 
</mx:HBox> 
<mx:DataGrid id="dg1" width="452"> 
</mx:DataGrid> 
</mx:VBox> 
</mx:Application>

The big change here is the addition of the code in onSelectDatabase() to get the list of tables, then to populate it in onResult(), and the addition of the onSelectTable(), which retrieves the data from the table and sets the data grid in the onResult() handler.

Pages: 1, 2, 3

Next Pagearrow





Sponsored by: