What is the better solution?

Question

Hello,
I am pretty new to Flex / Flash Builder and am getting stuck with the following
I have a database with say 2 tables: One with the list of items available and one table with the list chosen for specific projects
The design view I intend to use are 2 datagrids side by side and a couple of buttons to add/delete an item from the projects.
I also have a combobox to select the project for which I want to add/delete items. This combo box will filter all records with the chosen project name.
The code I did based on local data (not server connection) is attached below.
So far so good.
Now, I want to replace the local data hold in ArrayCollections with data from a MySQL database.
There my problem starts. In all tutorials about Flashbuilder, the databases are shwoing data directly in datagrids while I want to do this detour going thru local arraycollections (for instances to filetr data for the selected project or to render data differently)
I am stuck.
Can somebody give me the precious hint to progress further
BR
Peter Hirt
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
[Bindable]
public var projects:ArrayCollection = new ArrayCollection([
{label:"Spear2340", data:1},
{label:"Lille", data:2},
{label:"AP9600", data:3},
{label:"Arnie", data:4},
{label:"Neuron", data:5},
{label:"Cannes", data:6} ]);
[Bindable]
private var usedIP:ArrayCollection = new ArrayCollection([
{project:"Spear2340", IP:"USB2 PHY", cost:"180000"},
{project:"Lille", IP:"DDR PHY", cost:"180000"},
{project:"AP9600", IP:"DDR PHY", cost:"180000"},
{project:"Arnie", IP:"Ethernet Controller", cost:"180000"},
{project:"Arnie", IP: "USB2 Host Controller", cost:"180000"},
{project:"Neuron", IP:"USB2 PHY", cost:"180000"},
{project:"Neuron", IP:"USB2 Host Controller", cost:"180000"},
{project:"Cannes", IP:"USB3 PHY", cost:"180000"} ]);
[Bindable]
private var selectedName:String = "Arnie";
[Bindable]
private var ipCatalog:ArrayCollection = new ArrayCollection([
{IP:"USB2 PHY", technology:"40lp", cost:"180000"},
{IP:"USB2 Host Controller", technology:"na", cost:"64000"},
{IP:"USB3 PHY", technology:"40lp", cost:"270000"},
{IP:"Ethernet Controller", technology:"na", cost:"38000"},
{IP:"SATA Host Controller", technology:"40lp", cost:"60000"},
public function handleProjectSelected(event:IndexChangeEvent):void
selectedName = DropDownListProjects.selectedItem.label;
// filter against the project name
usedIP.filterFunction = filterProject;
usedIP.refresh();
sumUpColumn();
totalProjectPrice.visible = true;
private function filterProject(item:Object):Boolean
return item["project"].match(new RegExp(selectedName, 'i'))
protected function addBtn_clickHandler(event:MouseEvent):void
usedIP.addItem(ipCatalogDG.selectedItem);
var currentlySelectedItem : Object = ipCatalogDG.selectedItem;
currentlySelectedItem.project =  DropDownListProjects.selectedItem.label;
usedIP.itemUpdated(currentlySelectedItem);
usedIP.refresh();
sumUpColumn();
protected function deleteBtn_clickHandler(event:MouseEvent):void
usedIP.removeItemAt(usedIPDG.selectedIndex);
sumUpColumn();
protected function usedIPDG_clickHandler(event:MouseEvent):void
if (usedIPDG.selectedIndex !=-1) {
deleteBtn.enabled = true;
addBtn.enabled = false;
protected function ipCatalogDG_clickHandler(event:MouseEvent):void
if (ipCatalogDG.selectedIndex !=-1) {
addBtn.enabled = true;
deleteBtn.enabled = false;
// determine the price per project
[Bindable]
private var totalPrice:Number = 0.0;
private function sumUpColumn():void
var i:uint
totalPrice = 0.0;
for(i=0; i<usedIP.length; i++) {
totalPrice += (usedIP.getItemAt(i).cost);
]]>
</fx:Script>
<fx:Declarations>
<mx:CurrencyFormatter id="usdFormatter" precision="0" currencySymbol="$"
  decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"
  useThousandsSeparator="true" alignSymbol="left"/>
</fx:Declarations>
<s:Panel title="Project dropdownlist checking for filtering"
width="100%" height="100%">
<s:VGroup width="100%" height="100%" left="120" top="5">
<mx:HBox>
<s:DropDownList id="DropDownListProjects"
width="200"
dataProvider="{projects}"
labelField="label"
prompt="Select Project"
change="handleProjectSelected(event)" textAlign="left"/>
</mx:HBox>
<mx:HBox verticalAlign="middle">
<mx:DataGrid id="ipCatalogDG" dataProvider="{ipCatalog}" width="400" click="ipCatalogDG_clickHandler(event)"/>
<mx:VBox horizontalAlign="center">
<s:Button id="addBtn"
  label="Add to Project"
  click="addBtn_clickHandler(event)"
   width="130"
   enabled="false"/>
<s:Button id="deleteBtn"
  label="Delete from Project"
  click="deleteBtn_clickHandler(event)"
   width="130"
   enabled="false"/>
</mx:VBox>
<mx:DataGrid id="usedIPDG" dataProvider="{usedIP}" width="400" click="usedIPDG_clickHandler(event)"/>
</mx:HBox>
<s:Label id="totalProjectPrice"
text="The total price for this Project is : {usdFormatter.format(totalPrice)}"
visible="false"/>
</s:VGroup>
</s:Panel>
</s:Application>

Answer 1

Many thanks for this hint
Actually I went thru this video series already but probably forgot about it.
Now the training shows the methods for
HTTPService
RemoteObject
WebService
they have a slightly different result handler compared to the PHP method
I think, as I am using PHP, I am getting back generic objects (tried out on the "test server data"), so I would conclude I have to write something to the direction of
protected function xyze_resultHandler(event:ResultEvent):void
employees = event.result as ArrayCollection;
with employees being the arrayCollection that I will use then for filtering and interfacing with the datagrid thru binding
Is this correct?
sorry to bother you with my little knowledge level so far on flex
Peter