9 Replies Latest reply on Aug 4, 2009 9:57 AM by Gregory Lafrance

    displaying data from an array & looping

    dmfsantacruz

      I have made a lot of progress since starting this project thanks tons of help from this forum.

      I got my data into my calculations and I have created a new array with the calculated data. I was using a repeater with the dataprovider as my arraycollection. Now that I am using a simple array, what is the best way to display each element from that array in the flex layout?

      I also need to loop through all of the objects in the array collection, do the calculations and repeat the layout for each object.

       

      thanks!!

       

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

      <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1920" height="1080"

      creationComplete="init();" borderColor="#797979" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#636363, #9A9A9A]" color="#F3F3F3">

       

      <mx:Script>

      <![CDATA[

      import mx.controls.Text;

      import mx.controls.Label;

      import mx.collections.ArrayCollection;

      import mx.rpc.events.ResultEvent;

      import mx.utils.ObjectUtil;

      import flash.display.Shape;

      import flash.utils.Timer

      import flash.events.TimerEvent

      import flash.display.Sprite

      import flash.geom.Rectangle

       

       

      private function init():void

      {

      inventoryService.send();

      dbTimer();

       

      }

       

      [Bindable]

      private var omArray:ArrayCollection

      private function resultHandler(event:ResultEvent):void

      {

      omArray = event.result.response.data.row;

      performCalc();

      }

       

       

      private function dbTimer():void

      {

      var mTimer:Timer=new Timer(10000)

      mTimer.addEventListener(TimerEvent.TIMER,Comple);

      mTimer.start();

      }

       

      private function Comple(e:TimerEvent):void

      {

      inventoryService.send();

       

      }

      private function performCalc():Array

      {

      var omMachineRecord:Object = omArray.getItemAt(2);

      if (omMachineRecord.om_status == 1) {

      trace("omStack.selectedIndex = 1");

      }

      else {

      omStack.selectedIndex = 0

      }

      if (omMachineRecord.os_status == 1) {

      trace("osStack.selectedIndex = 1");

      }

      else {

      osStack.selectedIndex = 0

      }

      var retRID:Number = omMachineRecord.recycler_id;

      var retLocation:String = omMachineRecord.location;

      var retTotal:Number = omMachineRecord.total;

      var coinGPercent:int = (omMachineRecord.coin_G/omMachineRecord.coin_G_MAX)*100

      var coinEPercent:int = (omMachineRecord.coin_E/omMachineRecord.coin_E_MAX)*100

      var coinDPercent:int = (omMachineRecord.coin_D/omMachineRecord.coin_D_MAX)*100

      var coinCPercent:int = (omMachineRecord.coin_C/omMachineRecord.coin_C_MAX)*100

      var coinBPercent:int = (omMachineRecord.coin_B/omMachineRecord.coin_B_MAX)*100

      var coinAPercent:int = (omMachineRecord.coin_A/omMachineRecord.coin_A_MAX)*100

      var billDPercent:int = (omMachineRecord.bill_D/omMachineRecord.bill_D_MAX)*100

      var billCPercent:int = (omMachineRecord.bill_C/omMachineRecord.bill_C_MAX)*100

      var billBPercent:int = (omMachineRecord.bill_B/omMachineRecord.bill_B_MAX)*100

      var billFPercent:int = (omMachineRecord.bill_F/omMachineRecord.bill_F_MAX)*100

      var retArray:Array = new Array(retRID,retLocation,coinGPercent,coinEPercent,coinDPercent,coinCPercent,coinBPercent ,coinAPercent,billDPercent,billCPercent,billBPercent,billFPercent,retTotal);

      trace(retArray);

      return retArray

      }

       

      ]]>

      </mx:Script>

       

      <mx:HTTPService id="inventoryService"

      url="http://localhost/OMRON-debug/RCM_INVENTORY.php?method=FindAll"

      result="resultHandler(event)"/>

       

      <mx:VBox width="1900" height="1060" x="10" y="10" borderColor="#7F8081">

      <mx:ToggleButtonBar dataProvider="{mainStack}"/>

      <mx:ViewStack id="mainStack" width="100%" height="100%">

      <mx:HBox label="OVERVIEW" width="100%" height="100%">

      <mx:Tile width="100%" height="100%">

      <mx:Repeater id="omRepeater" dataProvider="{performCalc(p)}">

      <mx:VBox width="262" height="353" borderStyle="solid" borderColor="#B7BABC">

      <mx:VBox width="100%">

      <mx:HBox width="100%">

      <mx:Text textAlign="left" text="Machine:{omRepeater.getChildAt(0)}" fontWeight="bold" fontSize="16"/>

      <mx:ViewStack id="omStack" textAlign="right">

      <mx:VBox width="80" height="25" backgroundColor="#FF0000">

      <mx:Text text="OMRON SW" fontWeight="bold" color="#000000"/>

      </mx:VBox>

      <mx:VBox width="80" height="25" backgroundColor="#00FF00">

      <mx:Text text="OMRON SW" color="#000000" fontWeight="bold"/>

      </mx:VBox>

      </mx:ViewStack>

      </mx:HBox>

      <mx:HBox>

      <mx:Text text="Location:{omRepeater.currentItem.retLocation}" fontWeight="bold" fontSize="12"/>

      <mx:ViewStack id="osStack">

      <mx:VBox width="80" height="25" backgroundColor="#FF0000">

      <mx:Text text="SYSTEM SW" color="#000000" fontWeight="bold"/>

      </mx:VBox>

      <mx:VBox width="80" height="25" backgroundColor="#00FF00">

      <mx:Text text="SYSTEM SW" color="#000000" fontWeight="bold"/>

      </mx:VBox>

      </mx:ViewStack>

      </mx:HBox>

      </mx:VBox>

       

       

      <mx:HBox>

       

      <mx:VBox width="125" height="100%">

      <mx:Text text="COINS" fontWeight="bold" color="#FEF500" textAlign="center"/>

      <mx:Text text="1¢:{omRepeater.currentItem.coinGPercent}" textAlign="center"/>

      <mx:Text text="5¢:{omRepeater.currentItem.coinEPercent}" textAlign="center"/>

      <mx:Text text="10¢:{omRepeater.currentItem.coinDPercent}" textAlign="center"/>

      <mx:Text text="25¢:{omRepeater.currentItem.coinCPercent}" textAlign="center"/>

      <mx:Text text="50¢:{omRepeater.currentItem.coinBPercent}" textAlign="center"/>

      <mx:Text text="$1:{omRepeater.currentItem.coinAPercent}" textAlign="center"/>

      </mx:VBox>

      <mx:VBox width="125" height="100%">

      <mx:Text text="BILLS" fontWeight="bold" color="#FEF500"/>

      <mx:Text text="$1:{omRepeater.currentItem.billDPercent}"/>

      <mx:Text text="$5:{omRepeater.currentItem.billCPercent}"/>

      <mx:Text text="$10:{omRepeater.currentItem.billBPercent}"/>

      <mx:Text text="MULT:{omRepeater.currentItem.billFPercent}"/>

      <mx:Text text="MULT:"/>

      <mx:Canvas id="multCanvas" width="77" height="12" backgroundColor="#0179E8">

      </mx:Canvas>

      </mx:VBox>

      </mx:HBox>

       

      <mx:HBox>

      <mx:Text text="Total: ${omRepeater.currentItem.rettotal}" textAlign="center" fontWeight="bold" fontSize="16" color="#E0EE00"/>

      <mx:Label id="lbltime"/>

      </mx:HBox>

       

       

       

      </mx:VBox>

      </mx:Repeater>

      </mx:Tile>

       

      </mx:HBox>

      <mx:HBox label="RAW DATA">

       

      </mx:HBox>

      <mx:HBox label="SETTINGS">

       

      </mx:HBox>

      </mx:ViewStack>

      </mx:VBox>

      </mx:WindowedApplication>

        • 1. Re: displaying data from an array & looping
          dmfsantacruz Level 1

          hey all,

           

          still stuck on how to display this new array in the flex layout. With the arraycollection the getcurrentitem method worked fine, but at this point I have no idea. Then I need for the repeater to still run for the length of the arraycollection

          • 2. Re: displaying data from an array & looping
            dmfsantacruz Level 1

            Hi everyone!

             

            I have been working on this same problem for a few weeks now with no solution yet. It is the last step for getting this first project completed. Any push in the right direction would be GREATLY appreciated.

            • 3. Re: displaying data from an array & looping
              Gregory Lafrance Level 6

              Can you please state again what problem you are currently trying to solve?

               

              Also, please post updated code if necessary, and when you do so, please first boil it down to as small a piece of code as possible, while still being fully functional in terms of displaying the problem or challenge you are trying to address.

               

              Finally, when you post this code, how is it not working for you? Are you getting an error, if so, what is the error and if possible on what line?

               

              With this kind of due dilligence on your part, an answer will come quite quickly, I suspect.

               

              If this post answered your question or helped, please mark it as such.

              • 4. Re: displaying data from an array & looping
                dmfsantacruz Level 1

                Thanks for the reply Greg,

                 

                Ill be more specific...

                 

                1. I had an original arraycollection (omArray) that is being populated by a mysql database. I had to do some calculations with that data so then I can display the calculated data in the flex design. I have successfully calculated the data for 1 record:

                var omMachineRecord:Object = omArray.getItemAt(2);

                and done the calculations for that record. I then needed a way to display the newly calculated results in the flex layout. I created a new array with the results (retArray)....this is pretty much where I am stuck. I have a repeater that originally referenced the omArray arraycollection. I have no idea how to display the retArray data, and I dont know how to loop through the records above so I can repeat the layout for each record in omArray.

                 

                2. This is the code for doing the calculations from omArray...notice that for getItemAt() I have a 2 in there just as a test record. I need this number to loop through all of the records in omArray.

                 

                private function performCalc():Array

                {

                var omMachineRecord:Object = omArray.getItemAt(2);

                if (omMachineRecord.om_status == 1) {

                trace("omStack.selectedIndex = 1");

                }

                else {

                omStack.selectedIndex = 0

                }

                if (omMachineRecord.os_status == 1) {

                trace("osStack.selectedIndex = 1");

                }

                else {

                osStack.selectedIndex = 0

                }

                var retRID:Number = omMachineRecord.recycler_id;

                var retLocation:String = omMachineRecord.location;

                var retTotal:Number = omMachineRecord.total;

                var coinGPercent:int = (omMachineRecord.coin_G/omMachineRecord.coin_G_MAX)*100

                var coinEPercent:int = (omMachineRecord.coin_E/omMachineRecord.coin_E_MAX)*100

                var coinDPercent:int = (omMachineRecord.coin_D/omMachineRecord.coin_D_MAX)*100

                var coinCPercent:int = (omMachineRecord.coin_C/omMachineRecord.coin_C_MAX)*100

                var coinBPercent:int = (omMachineRecord.coin_B/omMachineRecord.coin_B_MAX)*100

                var coinAPercent:int = (omMachineRecord.coin_A/omMachineRecord.coin_A_MAX)*100

                var billDPercent:int = (omMachineRecord.bill_D/omMachineRecord.bill_D_MAX)*100

                var billCPercent:int = (omMachineRecord.bill_C/omMachineRecord.bill_C_MAX)*100

                var billBPercent:int = (omMachineRecord.bill_B/omMachineRecord.bill_B_MAX)*100

                var billFPercent:int = (omMachineRecord.bill_F/omMachineRecord.bill_F_MAX)*100

                var retArray:Array = new Array(retRID,retLocation,coinGPercent,coinEPercent,coinDPercent,coinCPercent,co inBPercent,coinAPercent,billDPercent,billCPercent,billBPercent,billFPercent,retT otal);

                trace(retArray);

                return retArray

                }

                 

                2b. One previous forum post mentioned putting the function in as the dataprovider for the repeater, but it doesnt seem to be working. I also dont know how to loop the function for each record, as mentioned above.

                <mx:Repeater id="omRepeater" dataProvider="{performCalc()}">

                <mx:Text textAlign="left" text="Machine:{omRepeater.getChildAt(0)}"

                 

                 

                3. I am not receiving any errors, it is just giving me a blank layout because I assume the array isnt structured the way that the repeater wants it. Im a fresh noob here so Im struggling along at each step...

                • 5. Re: displaying data from an array & looping
                  Gregory Lafrance Level 6

                  Thanks for the details. I think you need to simply how you approach this issue. Let's put aside for now that you are doing any calculations. Lets just display some numbers from an ArrayCollection in the UI.

                   

                  This sample code shows how to use a repeater with an ArrayCollection as the dataprovider. You shouldn't be calling methods in your repeater dataprovider assignment. All calculations should be completed before the repeater needs the data. Do those calculationsin an initialize event handler.

                   

                  If this post answers your question or helps, please mark it as such.

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    creationComplete="init();">
                    <mx:Script>
                      <![CDATA[
                        import mx.collections.ArrayCollection;
                       
                        [Bindable] private var ac:ArrayCollection = new ArrayCollection([
                          1, 2, 3, 4, 5, 6     
                        ]);
                      ]]>
                    </mx:Script>
                    <mx:Repeater id="omRepeater" dataProvider="{ac}">
                      <mx:Text textAlign="left" text="Machine:{omRepeater.currentItem}"/>    
                    </mx:Repeater>
                  </mx:Application>

                  • 6. Re: displaying data from an array & looping
                    dmfsantacruz Level 1

                    Thank you Greg,

                     

                    My original script did display data arraycollection as the dataprovider and it worked great! It was when I got into the business of doing the calculations and displaying the results that I have encountered these issues.

                     

                     

                    Cheers,

                    -Brian

                    • 7. Re: displaying data from an array & looping
                      Gregory Lafrance Level 6

                      As I mentioned, perform the calculations either on the server before the data is returned, or else in the result handler that is bringing in the data. How is the data coming into the app, HTTPService?

                      • 8. Re: displaying data from an array & looping
                        dmfsantacruz Level 1

                        HTTPservice

                        PHP connector to a mysql DB.

                         

                        Right now I am using MAMP, but the end goal is to launch it as an AIR app on a linux box with apache and mysql.

                         

                        how would i perform calculations in the resulthandler?

                        • 9. Re: displaying data from an array & looping
                          Gregory Lafrance Level 6

                          Here would be the flow in general terms:

                           

                          1) Get the data from the HTTPService result event "result" property and put in an ArrayCollection, XMLListCollection, etc.

                           

                          2) Loop through the collection and perform the calculations, either putting the result in another collection or else changing the data in the original collection.

                           

                          I think you mentioned you had calculations working, so you should be all set to put that in the result handler after you get the data.

                           

                          If this post answered your question or helped, please mark it as such.

                          1 person found this helpful