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

    What is the better solution?

    roestigraben

      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>

        • 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

           

          http://www.adobe.com/devnet/flex/videotraining.html

           

          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

             

            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