2 Replies Latest reply on Jul 18, 2011 7:16 AM by roestigraben

    What is the better solution?




      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



      Peter Hirt




      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"


         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">






      import mx.collections.ArrayCollection;

      import mx.events.FlexEvent;

      import spark.events.IndexChangeEvent;



      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} ]);



      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"} ]);



      private var selectedName:String = "Arnie";



      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;



      totalProjectPrice.visible = true;




      private function filterProject(item:Object):Boolean


      return item["project"].match(new RegExp(selectedName, 'i'))





      protected function addBtn_clickHandler(event:MouseEvent):void



      var currentlySelectedItem : Object = ipCatalogDG.selectedItem;

      currentlySelectedItem.project =  DropDownListProjects.selectedItem.label;







      protected function deleteBtn_clickHandler(event:MouseEvent):void







      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


      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);










      <mx:CurrencyFormatter id="usdFormatter" precision="0" currencySymbol="$"

        decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"

        useThousandsSeparator="true" alignSymbol="left"/>





      <s:Panel title="Project dropdownlist checking for filtering"

      width="100%" height="100%">

      <s:VGroup width="100%" height="100%" left="120" top="5">


      <s:DropDownList id="DropDownListProjects"




      prompt="Select Project"

      change="handleProjectSelected(event)" textAlign="left"/>



      <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"




      <s:Button id="deleteBtn"

        label="Delete from Project"





      <mx:DataGrid id="usedIPDG" dataProvider="{usedIP}" width="400" click="usedIPDG_clickHandler(event)"/>



      <s:Label id="totalProjectPrice"

      text="The total price for this Project is : {usdFormatter.format(totalPrice)}"






        • 1. Re: What is the better solution?
          kokorito Level 4

          you need to set up a server side script to send the data to flex

          try these tutorials, day 2 shows how to retrieve data, day 3 shows how to send




          hope it helps

          • 2. Re: What is the better solution?
            roestigraben Level 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






            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