Flex Gumbo FXG offers new APIs to work with vertical and horizontal scrollers. There are two components: FxVScrollBar and FxHScrollBar, which extends the FxScrollBar class. You can use Flash Catalyst to generate a custom scrollers easily or create the skin on your own. Once the code is completed it’s not clear what you need to do with the code or how to attach it to FXG components, since there are no examples in the live docs available yet, I decided to put a post on my blog.

Four properties are available to set the scroller to a FXG component;

1. Minimum - Min value for the scroller.
2. Maximum - Max value for the scroller.
3. Value - Current position of the scroller, which must be within the min and max values and needs to be attached to some component.
4. Viewport size - number of items in the range that can displayed at a time.

Use the FxVScrollBar.value property to attach to a group component as shown below;

	<Group id="group" width="320" height="1500">
		..
		..
	</Group>

	<FxVScrollBar id="pageScrollbar"
		includeIn="SomeState"
skinClass="com.elad.mobilevideo.view.components.PageScrollbar"
		height="100%"
		value="@{group.verticalScrollPosition}"
		maximum="{group.height}"
		/>

Notice that I used the “includeIn” property to include the scroller component in “SomeState” state. Also note that the skin points to a custom component PageScrollBar.mxml, which contains the skin that holds both the scroll bar and scroll thumb components, take a look;

<Skin xmlns="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt"
	 height="100%" xmlns:th="http://ns.adobe.com/thermo/2009">

	<transitions>
		<Transition fromState="normal" toState="disabled"/>
		<Transition fromState="disabled" toState="normal"/>
	</transitions>

	<states>
		<State name="normal" th:color="0xcc0000"/>
		<State name="disabled" th:color="0x0081cc"/>
	</states>

	<Metadata>[HostComponent("mx.components.FxVScrollBar")]</Metadata>
	<FxButton left="0" top="0" skinClass="com.elad.mobilevideo.view.components.ScrollTrack" id="track"/>
	<FxButton left="1" top="1" skinClass="com.elad.mobilevideo.view.components.ScrollThumb" id="thumb"/>
</Skin>

ScrollThumb.mxml component:

<Skin xmlns="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" resizeMode="scale">

	<transitions>
		<Transition fromState="up" toState="over"/>
		<Transition fromState="up" toState="down"/>
		<Transition fromState="up" toState="disabled"/>
		<Transition fromState="over" toState="up"/>
		<Transition fromState="over" toState="down"/>
		<Transition fromState="over" toState="disabled"/>
		<Transition fromState="down" toState="up"/>
		<Transition fromState="down" toState="over"/>
		<Transition fromState="down" toState="disabled"/>
		<Transition fromState="disabled" toState="up"/>
		<Transition fromState="disabled" toState="over"/>
		<Transition fromState="disabled" toState="down"/>
	</transitions>

	<states>
		<State name="up"/>
		<State name="over"/>
		<State name="down"/>
		<State name="disabled"/>
	</states>

	<Metadata>[HostComponent("mx.components.FxButton")]</Metadata>
	<BitmapGraphic source="@Embed('assets/SearchVideo/thumb.png')"
		d:userLabel="thumb"
		left="0" top="0"/>

</Skin>

ScrollTrack.mxml component:

<Skin xmlns="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" resizeMode="scale">

	<transitions>
		<Transition fromState="up" toState="over"/>
		<Transition fromState="up" toState="down"/>
		<Transition fromState="up" toState="disabled"/>
		<Transition fromState="over" toState="up"/>
		<Transition fromState="over" toState="down"/>
		<Transition fromState="over" toState="disabled"/>
		<Transition fromState="down" toState="up"/>
		<Transition fromState="down" toState="over"/>
		<Transition fromState="down" toState="disabled"/>
		<Transition fromState="disabled" toState="up"/>
		<Transition fromState="disabled" toState="over"/>
		<Transition fromState="disabled" toState="down"/>
	</transitions>

	<states>
		<State name="up"/>
		<State name="over"/>
		<State name="down"/>
		<State name="disabled"/>
	</states>

	<Metadata>[HostComponent("mx.components.FxButton")]</Metadata>
	<BitmapGraphic source="@Embed('assets/SearchVideo/slider.png')"
		resizeMode="scale" d:userLabel="slider"
		left="0" top="0"/>

</Skin>

I didn’t implement the “Transition” components but feel free to play around with these components to create interesting custom scrollers.