Search code examples
actionscript-3apache-flexflex4flash-builderflex-spark

Obtaining a HGroup subcomponent that it is in view of a Scroller container Adobe Flex 4.5


I have setup a Scroller container around an HGroup of labels. The Scroller is setup to only display a single label at a time. What I am trying to do is determine which label is in view of the Scroller when a button is clicked. I have scoured the reference material on Scrollers and HGroups, but cannot formulate a programmatic strategy to determine what element of the group is in view.

Scroller Code for reference:

<local:Scroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
                    bottom="356" depth="2"> 
    <s:HGroup id="imageGroup" gap="0" width="100%" height="100%"> 
        <s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
                 text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
        <s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
                 text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
        <s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
                 text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
    </s:HGroup> 
</local:Scroller>

Eventually these Labels will be images, but using labels for proof of concept currently.

Any help would be greatly appreciated, and thank you for reading.

EDIT: So after implementing an approach with lastIndexInView, I keep getting "TypeError: Error #1009: Cannot access a property or method of a null object reference." on the line "vehicleID.text = Label(lObj).text;". Below is the code involved:

Function:

        protected function idSelect_clickHandler(event:MouseEvent):void
        {
            var hLay:HorizontalLayout = imageGroup.layout as HorizontalLayout;
            var lIndex:int = hLay.lastIndexInView;
            var lObj:Object = imageGroup.getElementAt(lIndex);

            vehicleID.text = Label(lObj).text;

            currentState="selectedState";
        }

Components:

<local:SnapScroller id="imageViewer" includeIn="startState" left="411" right="411" top="241"
                    bottom="356" depth="2"> 
    <s:HGroup id="imageGroup" gap="0" width="100%" height="100%"> 
        <s:Label id="vin1337" width="201" height="104" color="white" fontSize="30"
                 text="Vehicle ID:1337" textAlign="center" verticalAlign="middle"/>
        <s:Label id="vin2567" width="199" height="104" color="white" fontSize="30"
                 text="Vehicle ID:2567" textAlign="center" verticalAlign="middle"/>
        <s:Label id="vin9456" width="199" height="104" color="white" fontSize="30"
                 text="Vehicle ID:9456" textAlign="center" verticalAlign="middle"/>
    </s:HGroup> 
</local:SnapScroller>

<s:Button id="idSelect" includeIn="startState" x="367" y="608" width="290" height="67"
          label="Select" click="idSelect_clickHandler(event)" color="#00008F" fontSize="24"/>

<s:Label id="vehicleID" includeIn="selectedState" x="425" y="453" color="#00008F" fontSize="24"
         text="Vehicle ID: ____"/>

Solution

  • I think this should answer your question http://blog.flexexamples.com/2009/10/31/determining-how-much-of-an-item-is-visible-in-a-scrolling-vgroup-container-in-flex-4/

    basically the layout has firstIndexInView and lastIndexInView property which will tell you which items are visible.