Archive for October, 2011

Flex 4.5 Mobile Paged/Stepper List

Thursday, October 13th, 2011

This mobile component converts a regular Flex mobile Horizontal List into a stepped/paged list.

It uses a custom skin for the list and a custom skin for the list’s scrollbar. The previous and next buttons are seperate from the list, and trigger the custom scrollbar’s changeValueByPage() function to move up and down the list. The two lists are use double binding as a visual aid for demo purposes, and I have used the lists ensureIndexIsVisible() function to ensure the selected index is always visible (now that’s intuitive function naming Mr. Adobe).

The paged list also employs the gestureSwipe event, but this cant be seen on the online demo. Thanks to Steven from Flexponential for his brilliant post that I based this component on. If you see any ways to improve it, please let me know.

Note: the demo runs just as it would on a mobile phone, as I have embedded mobilecomponents.swc and imported the mobile theme (see prev post to see how this is achieved).

Click the image below to view the mobile demo online! (right click for View Source)

Mobile Paged/Stepper Horizontal List (click to run demo)