15 Replies Latest reply on Jan 17, 2008 4:21 AM by ChiefRocka00

    TileList not refreshing

    ChiefRocka00 Level 1
      I have a TileList that uses an itemRenderer. I also have a setInterval function that calls my HTTPService and repopulates and arrayCollection. I am not seeing any updates in my TileList when the backend data gets updated. Anybody know how I can fix this? Here is my application code:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="vertical"
      initialize="init()"
      creationComplete="initApp()">

      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.managers.CursorManager;
      import mx.rpc.events.ResultEvent;

      [Bindable] private var gridInfo:ArrayCollection;
      [Bindable] public var urlPath:String = " http://www.someURL.com/";
      [Bindable] public var urlGetSquares:String = urlPath + "getData.php" + "?dummy=" + Math.random();

      private function init():void {
      Application.application.enabled = false;
      CursorManager.setBusyCursor();
      }

      private function initApp():void {
      setInterval(do_output,10000);
      }

      private function do_output() {
      getSquaresData.send();
      }
      private function processSquaresDataResult(event:ResultEvent):void {
      if ( event.result.results != null ) {
      if ( event.result.results.cellValues is ArrayCollection) {
      gridInfo = ArrayCollection(event.result.results.cellValues);
      } else {
      gridInfo = new ArrayCollection;
      gridInfo.addItem(event.result.results.cellValues);
      }
      }
      Application.application.enabled = true;
      CursorManager.removeBusyCursor();

      }
      ]]>
      </mx:Script>

      <mx:HTTPService id="getSquaresData"
      url="{urlGetSquares}"
      useProxy="false"
      method="POST"
      result="processSquaresDataResult(event)">
      </mx:HTTPService>

      <mx:TileList dataProvider="{gridInfo}"
      paddingTop="0"
      paddingBottom="0"
      height="400"
      width="800"
      itemRenderer="SquaresTile"
      rowHeight="36"
      columnWidth="77"
      id="squares"
      rollOverColor="#ffffff"
      selectionColor="#ffffff"
      borderColor="#000000"
      borderStyle="inset"
      borderThickness="1" />

      </mx:Application>

        • 1. Re: TileList not refreshing
          peterent Level 2
          The problem is that you are replacing the reference has been bound in the MXML tag. If you had added or altered the original ArrayCollection you'd have been OK. I'm assuming that you get the first update which sets the binding watch (not 100% accurrate but good for this discussion). Then you wholesale replace it.

          You could probably do a binding like this:

          <mx:Tile dataProvider="{getSquaresData.lastResult}" ... >

          then each call to get more data will show the correct values each time.
          • 2. Re: TileList not refreshing
            Tigomark Level 1
            I am having the same issue.

            <mx:HTTPService id="tempXML" resultFormat="e4x" result="onResult(event)" url="https://{customer.text}.mysite.net/interface.php?action=showopen&amp;operation=showa ssets&amp;format=xml&amp;opstatus=crit&amp;username={username.text}&amp;password={password .text}" />

            <mx:TileList dataProvider="{_xlcMyListData}"
            width="344" backgroundColor="#000000" color="#ff0000" fontSize="27" borderColor="#000000" columnWidth="300" rowHeight="50" themeColor="#808080" fontWeight="bold" allowMultipleSelection="true" id="TileList1" height="0" y="202" x="178"/>

            <mx:Script>
            <![CDATA[


            import mx.rpc.Events.ResultEvent;
            import mx.collections.XMLListCollection;

            [Bindable]
            private var _xlcMyListData:XMLListCollection;


            private function onResult(Event:ResultEvent):void {
            var xmlResult:XML = XML(event.result);
            var xlMyListData:XMLList = xmlResult.myListData;
            _xlcMyListData = new XMLListCollection(xlMyListData);
            trace(_xlcMyListData.toXMLString());


            }

            ]]>
            </mx:Script>

            I've tried the dataProvider="{tempXML.lastResult.asset.fleet }" and when I first start the app I see nothing but then if I hit refresh I get

            [Object, object]

            as a response. I can look in firebug and see that I am getting the proper data.
            • 3. Re: TileList not refreshing
              peterent Level 2
              Where is your itemRenderer for the TileList? I believe the TileList, as with all of the other lists, expects by default all of the items in the dataProvider to have a property called "label". If you don't, then you need to use the labelField property of the TileList to specify it.

              For example, if your XML for each item is <fleet label="Apples" > then you need to set labelField="@label" since you want to see the label attribute. If each item where an ActionScript Object like {label:"Apples"} then you wouldn't need anything because "label" is the default value for labelField.

              If you have something more complex to show, which is typical of TileList, then you need an itemRenderer (or at least a labelFunction).
              • 4. TileList not refreshing
                Tigomark Level 1
                Ok so I have added the labelField
                labelField="@fleet"

                Still nothing. However I'm not sure what you (or other people have also mentioned this) mean when you say itemRenderer. I have looked on the Adobe docs and have not found how you would use this in a tile list.

                Oh and all I am trying to do is see a list of assets. No pictures or any thing else so it should be pretty straight forward - However I can't seem to get it to work.
                • 5. Re: TileList not refreshing
                  peterent Level 2
                  When you bound your dataProvider to this: tempXML.lastResult.asset.fleet and see [Object object] it means that you have a collection of items but the list doesn't know how to present it. When you set the labelField to @fleet the list takes that to mean that each item is an XML node with fleet="something" as an attribute. Is that the case?

                  An itemRenderer is a component used to present a record, or even a single item, of a collection in a list. For example, suppose your data represents CDs. Each record might have the artist's name, the CD title, and a URL to the cover artwork. An itemRenderer can be a component (which you write) that has an Image component for the artwork and a couple of Label components for the other information.

                  By default, the list controls use a Label (or something similar to it) as their itemRenderers and display just one field (identified by the labelField property of the list).
                  • 6. TileList not refreshing
                    Tigomark Level 1
                    When I do this the debugger returns

                    warning: unable to bind to property 'fleet' on class 'XML' (class is not an IEventDispatcher)

                    I have seen the examples that use the ItemRenders that way but I don't need anywhere near that. i just need to extract the fleet field and display it as text.
                    • 7. Re: TileList not refreshing
                      peterent Level 2
                      Please post a small sample of your data - EXACTLY what you are getting back from the server at the point the result event handler is called. In other words, what does event.result contain?
                      • 8. Re: TileList not refreshing
                        Tigomark Level 1
                        This is for one asset

                        <asset id="203">

                        <name></name>

                        <tag>55</tag>

                        <vin>WA34671987534</vin>

                        <fleet>Andre_Trailer 55</fleet>

                        <type id="1">TRAILER</type>

                        <subtype id="3">TRAILER</subtype>

                        <exsid></exsid>

                        <mileage>0</mileage>

                        <location>Andre_Units</location>

                        <mileoffset>0</mileoffset>

                        <radioaddress></radioaddress>

                        <mfg>Trailer Pro</mfg>

                        <inservice>04 Aug 2007</inservice>

                        <inspdate id="2804" type="DEMO1E-3.0.0">1200068488</inspdate>

                        <yardstat>

                        <yard></yard>

                        <stat timestamp="0">unknown</stat>

                        </yardstat>

                        <opstatus timestamp="1200068604">crit</opstatus>

                        <gps/>

                        <homeloi></homeloi>

                        </asset>
                        • 9. Re: TileList not refreshing
                          peterent Level 2
                          OK, so we have a sample of a single NODE of your data - not what is being received at the result event handler. If what you have in fact is a structure which contains multiple occurrences of those <asset> tags, then your dataProvider to the TileList could be something like:

                          private function onResult(Event:ResultEvent):void {
                          var xmlResult:XML = XML(event.result);
                          _xlcMyListData = new XMLListCollection(xmlResult..asset);
                          }

                          Notice the double dots? That means the result will be formed from every <asset> tag in your result. Since I don't know what the structure of xmlResult, I'm just assuming you want all of the <asset> tags.

                          Now the dataProvider has a <asset> for every record. Your labelField can now simple be "fleet" because fleet is one of the nodes.


                          }
                          • 10. Re: TileList not refreshing
                            Tigomark Level 1
                            <mx:HTTPService id="tempXML" resultFormat="e4x" result="onResult(event)" url="https://{customer.text}.mysite.net/interface.php?action=showopen&amp;operation=showa ssets&amp;format=xml&amp;opstatus=crit" />

                            <mx:TileList dataProvider="{_xlcMyListData}" labelField="fleet"
                            width="344" backgroundColor="#000000" color="#ff0000" fontSize="27" borderColor="#000000" columnWidth="300" rowHeight="50" themeColor="#808080" fontWeight="bold" allowMultipleSelection="true" id="TileList1" height="0" y="202" x="178"/>

                            <mx:Script>
                            <![CDATA[
                            //tempXML.lastResult.asset.fleet resultFormat="e4x" result="onResult(event)" creationComplete="tempXML.send();"
                            //&amp;username={username.text}&amp;password={password.text}
                            import mx.rpc.event.ResultEvent;
                            import mx.collections.XMLListCollection;

                            [Bindable]
                            private var _xlcMyListData:XMLListCollection;


                            private function onResult(Event:ResultEvent):void {
                            var xmlResult:XML = XML(event.result);
                            _xlcMyListData = new XMLListCollection(xmlResult..asset);
                            }

                            ]]>
                            </mx:Script>

                            Going to that makes a lot more sense because it seems to access the main issue which is to see something from the node. However

                            var xmlResult:XML = XML(event.result);

                            Throws an error saying

                            1120: Access of undefined property event.

                            I would think that both the call in the service and

                            import mx.rpc.event.ResultEvent;

                            would take care of that
                            • 11. Re: TileList not refreshing
                              peterent Level 2
                              I didn't see the capitalization before:

                              private function onResult(Event:ResultEvent):void {
                              var xmlResult:XML = XML(event.result);
                              _xlcMyListData = new XMLListCollection(xmlResult..asset);
                              }

                              Your argument is Event and not event - just a matter of convention that variables begin with lower-case letters and I didn't spot the difference.
                              • 12. Re: TileList not refreshing
                                Tigomark Level 1
                                That is perfect -------- THANK YOU SOOOOOOO MUCH. It is always the little things that get you.
                                • 13. Re: TileList not refreshing
                                  ChiefRocka00 Level 1
                                  So I am getting the TileList to refresh every second via the setInterval calling my HTTPService. now I stumbled upon my next hurdle. I am populating the TileList with a custom itemRenderer and there is conditional logic to change the background color of the tile. However, when my data is updated via the setInterval the background color does not change along with it. How can I have the function called to set the background color when the value of the data changes for each tile?
                                  • 14. Re: TileList not refreshing
                                    atta707 Level 2
                                    You need to to do this by overriding the set data(object) method on the renderer. Have you overridden this method?

                                    some renederer code would be helpful here.

                                    ATTA
                                    • 15. Re: TileList not refreshing
                                      ChiefRocka00 Level 1
                                      Here is my custom item renderer:

                                      <?xml version="1.0"?>
                                      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init();">
                                      <mx:Style>
                                      .mySquare { backgroundColor: yellow; }
                                      .availSquare { backgroundColor: white; }
                                      .takenSquare { backgroundColor: gray; }
                                      </mx:Style>
                                      <mx:Script>
                                      <![CDATA[

                                      import flash.events.Event;
                                      import mx.controls.Alert;
                                      import mx.collections.*;
                                      import mx.core.IFlexDisplayObject;
                                      import mx.managers.PopUpManager;

                                      override public function set data(value:Object):void {
                                      if ( value != null ) {
                                      super.data = value;
                                      }
                                      }

                                      public function init():void {
                                      if ( data.Taken != "Y" ) {
                                      theBox.styleName = "availSquare";
                                      } else if ( lblOwnerName.text == "Tedd L" ) {
                                      theBox.styleName = "mySquare";
                                      } else {
                                      theBox.styleName = "takenSquare";
                                      }
                                      }

                                      public function cellClick(event:Event):void {
                                      var ownerText:String = lblOwnerName.text;
                                      if ( ownerText.substr(0,3) == "BUY" ) {
                                      confirmSquareSelection(data.Cell);
                                      }
                                      }

                                      private function confirmSquareSelection(squareId:int):void {
                                      var confirmPopUp:IFlexDisplayObject = PopUpManager.createPopUp (this, ConfirmWindow, true);
                                      ConfirmWindow( confirmPopUp ).squareId = squareId;
                                      PopUpManager.centerPopUp( confirmPopUp );
                                      }
                                      ]]>
                                      </mx:Script>

                                      <mx:VBox width="100%"
                                      id="theBox"
                                      height="100%"
                                      horizontalAlign="center"
                                      borderColor="#000000"
                                      borderStyle="solid"
                                      borderThickness="1"
                                      styleName="availSquare"
                                      verticalGap="0"
                                      cacheAsBitmap="true">

                                      <mx:Spacer height="8"/>
                                      <mx:Label id="lblOwnerName"
                                      text="{data.Owner}"
                                      click="cellClick(event)"
                                      textAlign="center"
                                      width="100%"
                                      height="100%"
                                      verticalCenter="0"/>
                                      </mx:VBox>

                                      </mx:Canvas>