3 Replies Latest reply on Nov 11, 2011 2:39 AM by Brezhnev29

    Flex Mobile: Access parent view variable within itemrenderer component

    VivD Level 1

      I have multiple images in a list and I want to display 4 of them at a time on the screen with in a tiled layout with each image's width= 50% of screen width and height = 50% screen height.

       

      I have been able to do that with the code below.

       

      <s:List id="list1" width="100%" height="100%">

       

                          <s:ArrayCollection>

                                    <fx:Object id="img1" img_url="assets/1-1.png" title="Image 1"/>

                                    <fx:Object id="img2" img_url="assets/1-2.png" title="Image 2"/>

                                    <fx:Object id="img3" img_url="assets/2-1.png" title="Image 3"/>

                                    <fx:Object id="img4" img_url="assets/2-2.png" title="Image 4"/>

                          </s:ArrayCollection>

       

                          <s:layout>

                                    <s:TileLayout

                                                                    columnAlign="justifyUsingWidth" horizontalAlign="center" verticalAlign="middle"

                                                                    paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"

                                                                    horizontalGap="0" verticalGap="0"

                                                                    />

                          </s:layout>

                          <s:itemRenderer>

                                    <fx:Component>

                                              <s:ItemRenderer>

                                                        <s:Group width="160" height="240">

                                                                  <s:BitmapImage source="{data.img_url}" scaleMode="stretch" smooth="true"

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

                                                                  <s:Label text="{data.title}" left="0" bottom="0" width="100%" />

                                                        </s:Group>

                                              </s:ItemRenderer>

                                    </fx:Component>

                          </s:itemRenderer>

                </s:List>

       

      However, I don't want to hard code the width and height values.

      I am able to obtain the accurate screen height and width in the viewAcivate event of the View as shown below.

       

      protected function view1_viewActivateHandler(event:ViewNavigatorEvent):void

                                    {

                                              ScreenWidth = screen.width;

                                              ScreenHeight = screen.height;

                                    }

       

      How do I apply those values to the Group width/height properties in the itemrenderer?

       

      Something like...

       

      <s:ItemRenderer>

                                                        <s:Group width="{ScreenWidth/2}" height="{ScreenHeight/2}">

                                                                  <s:BitmapImage source="{data.img_url}" scaleMode="stretch" smooth="true"

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

                                                                  <s:Label text="{data.title}" left="0" bottom="0" width="100%" />

                                                        </s:Group>

                                              </s:ItemRenderer>

        • 2. Re: Flex Mobile: Access parent view variable within itemrenderer component
          VivD Level 1

          Thanks. That worked.

           

          One additional question. In my code above I keep getting the following warning. Not able to find out how to get rid of it.

           

          warning: unable to bind to property 'img_url' on class 'Object' (class is not an IEventDispatcher)

          warning: unable to bind to property 'title' on class 'Object' (class is not an IEventDispatcher)

          • 3. Re: Flex Mobile: Access parent view variable within itemrenderer component
            Brezhnev29

            Hi VivD,

             

            Use this method, remove the warning message.

             

             

            <s:List id="list1" width="100%" height="100%">

             

                                <s:ArrayCollection>

                                          <fx:Object id="img1" img_url="assets/1-1.png" title="Image 1"/>

                                          <fx:Object id="img2" img_url="assets/1-2.png" title="Image 2"/>

                                          <fx:Object id="img3" img_url="assets/2-1.png" title="Image 3"/>

                                          <fx:Object id="img4" img_url="assets/2-2.png" title="Image 4"/>

                                </s:ArrayCollection>

             

                                <s:layout>

                                          <s:TileLayout

                                                                          columnAlign="justifyUsingWidth" horizontalAlign="center" verticalAlign="middle"

                                                                          paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"

                                                                          horizontalGap="0" verticalGap="0"

                                                                          />

                                </s:layout>

                                <s:itemRenderer>

                                          <fx:Component>

                                                    <s:ItemRenderer>

                                                              <s:Group width="160" height="240">

                                                                       

                                               <fx:Script>

                                                    <![CDATA[

                                                         override public function set data(value:Object):void {

                                                          lbl.text = value.title; img.source= value.img_url;

                                                        }

                                                    ]]>

                                                </fx:Script>

                                                                        <s:BitmapImage id="img" scaleMode="stretch" smooth="true"

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

                                                                        <s:Label  id="lbl" left="0" bottom="0" width="100%" />

                                                              </s:Group>

                                                    </s:ItemRenderer>

                                          </fx:Component>

                                </s:itemRenderer>

                      </s:List>