Payday Loans Online Payday Loans Online

Todd Rothe : UI/UX Developer

it's pronounced rowth-ee

By 2g1c2 girls 1 cup

Flex 3 to Flex 4 Migration Chronicles: II

Error: Cannot resolve attribute ‘horizontalScrollPolicy’ for component type spark.components.BorderContainer.

Goal: Match the existing Flex 3 implementation (and design comps) which displays an image inside a scrollable container.

Flex 3 code:
< mx:Canvas width="400" height="325">
< mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
< /mx:Canvas>

Attempt 1: Add the image inside a Group and set the clipAndEnableScrolling=’true’
< s:Group width="400" height="325" clipAndEnableScrolling="true">
< mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
< /s:Group>

Resut 1: No love. The Image gets clipped but no scrollbars appear.

Attempt 2: Add a parent Scroller to the existing Group and remove clipAndEnableScrolling
< s:Scroller>
< s:Group width="400" height="325">
< mx:Image source="@Embed('assets/images/fieldUnderRoseSky.jpg')"/>
< /s:Group>
< /s:Scroller>

Result 2: Success! The Flex 4 separation of form from function, logic from layout, allows us to add scrolling functionality when we need it through the Scroller component/tag. In Flex 3 we were always setting horizontalScrollPolicy=’off’ and verticalScrollPolicy=’off’, 99 times out of 100 anyway. Well no more!
*note: Scroller automatically sets clipAndEnableScrolling to true for its children.

For more comprehensive coverage of Scroller check out the Scroller Funtional and Design Spec or Adobe’s Introduction to viewports and scrolling in Flex 4 by Hans Muller.


No Responses to “Flex 3 to Flex 4 Migration Chronicles: II” (post new)


Leave a Reply

You must be logged in to post a comment.