1 Reply Latest reply on Apr 25, 2009 2:29 PM by Flex harUI

    change in image postion in List Based component

    Sankar Kethineni

      Hi Friends,

              Am using the Tile-List control and it has a itemRenderer to
      display the image and name of a person which comes from database as
      array of object (actually am getting the photos from the facebook as
      array of objects).And also am overriding the set data() and get data()
      functions. I have function called checkImage() for image component on
      creation complete event and it checks for image, if image is there
      then display otherwise display a dummy image. On top of image am
      displaying a check box on mouseOver of image to select it and the
      selected image will be displayed at the bottom of the component

                  For the first time every thing looks fine and now the
      problem is when i scroll up and down there is a change in the image
      positions.I noticed the same problem even before overriding the set
      data() and get data().If i set the source for image directly in the
      mxml itself then i couldn't see change in image position when i scroll
      up and down but i can't display the dummy image if the image is not
      coming from the database object as shown below.

               <mx:Image  id="fbImg" toolTip="{_data.name}"
      source="{_data.facebookPicSquare}"/>

             can any one help me to resolve this problem?

      Here is the code.............................

                     Component code
                  ------------------------------------

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
      height="100%" >

              <mx:Script>
                       <![CDATA[
                               import mx.collections.ArrayCollection;
                               [Bindable] public var fbFriends:ArrayCollection;

                              private function getFriends():void {
                                       // code to call the remote object method to get the frnds
                               }

                              //Other function to handle the result
                       ]]>
               </mx:Script>

              <mx:TileList id="fbFrndsList" width="100%" height="100%"
                               dataProvider="{fbFriends}" backgroundColor="white"
                               itemRenderer="frndsRenderer horizontalScrollPolicy="off"
                               verticalScrollPolicy="auto" rollOverColor="white"
                               columnWidth="60" rowHeight="60" creationComplete="getFriends()" /


      </mx:Box>

                    IremRenderer code
      -----------------------------------------------

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
      height="100%">

              <mx:Canvas id="canvas" rollOver="showOrHideChkBox(true)"
      rollOut="showOrHideChkBox(false)">
                       <mx:Image  id="fbImg" toolTip="{_data.name}"
      creationComplete="checkImage()"/>
                       <mx:CheckBox id="chkBox" visible="false"
                               toolTip="{_data.name}" click="getFBFriends()"/>
               </mx:Canvas>

              <mx:Script>
                       <![CDATA[
                               [Bindable] public var _data:Object = null;

                              override public function set data(value:Object):void {
                                       if (value != null) {
                                               _data = value;
                                               //checkImage(); // i tried to call this method here rather than
      calling
                                                   //on creation complete but i got run-time error saying that
      can't access a property
                                       }
                               }

                              override public function get data():Object {
                                       return _data;
                               }

                              private function checkImage():void {
                                       if (_data) {
                                               if (_data.facebookPicSquare == null || _data.facebookPicSquare ==
      "") {
                                                       fbImg.source = 'resources/images/todo/dummyPerson.gif';
                                               }
                                               else {
                                                       fbImg.source = _data.facebookPicSquare;
                                               }
                                       }
                               }

                              private function showOrHideChkBox(chkStatus:Boolean):void {
                                       chkBox.visible = chkStatus;
                                       if (chkBox.selected)
                                               chkBox.visible = true;
                               }

                              private function getFBFriends():void {
                                       // get the selected frnds and push it into array and display
                               }

                      ]]>
               </mx:Script>
      </mx:VBox>