Flex Examples

In a previous example, “Paging through an FxHScrollBar in Flex Gumbo”, we saw how you could change the horizontal scroll position a single page up or page down in a Flex Gumbo FxHScrollBar component by using the page() method.

The following example shows how you can change the horizontal scroll position a single line up or line down in a Flex Gumbo FxHScrollBar component by using the step() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/18/stepping-through-an-fxhscrollbar-in-flex-gumbo/ -->
<FxApplication name="FxHScrollBar_step_test"
        xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <VGroup horizontalCenter="0" verticalCenter="0">
        <FxHScrollBar id="hScrollBar" width="100%" />
        <Label text="value = {hScrollBar.value}" />
        <HGroup>
            <FxButton id="stepUpButton"
                    label="step up"
                    autoRepeat="true"
                    buttonDown="hScrollBar.step(false);" />
            <FxButton id="stepDownButton"
                    label="step down"
                    autoRepeat="true"
                    buttonDown="hScrollBar.step(true);" />
        </HGroup>
    </VGroup>

</FxApplication>

View source is enabled in the following example.