Flex Examples » scrollTipFunction http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Formatting scroll tips on a ComboBox control in Flex http://blog.flexexamples.com/2008/07/01/formatting-scroll-tips-on-a-combobox-control-in-flex/ http://blog.flexexamples.com/2008/07/01/formatting-scroll-tips-on-a-combobox-control-in-flex/#comments Wed, 02 Jul 2008 06:56:54 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/01/formatting-scroll-tips-on-a-combobox-control-in-flex/ In a previous example, “Displaying scroll tips on a ComboBox control in Flex”, we saw you can toggle scroll tips on a Flex ComboBox control’s dropdown menu by setting the showScrollTips and dropdown properties.

The following example shows you how you can format the scroll tip on a Flex ComboBox control by setting the [...]]]> In a previous example, “Displaying scroll tips on a ComboBox control in Flex”, we saw you can toggle scroll tips on a Flex ComboBox control’s dropdown menu by setting the showScrollTips and dropdown properties.

The following example shows you how you can format the scroll tip on a Flex ComboBox control by setting the scrollTipFunction property on the ComboBox control’s dropdown property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/01/formatting-scroll-tips-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;

            private function comboBox_open(evt:DropdownEvent):void {
                comboBox.dropdown.showScrollTips = checkBox.selected;
                comboBox.dropdown.scrollTipFunction = comboBox_dropdown_scrollTipFunc;
            }

            private function comboBox_dropdown_scrollTipFunc(dir:String, pos:uint):String {
                return pos + " of " + comboBox.dropdown.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showScrollTips:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            open="comboBox_open(event);" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/07/01/formatting-scroll-tips-on-a-combobox-control-in-flex/feed/ 5 Displaying scroll tips in a List control in Flex http://blog.flexexamples.com/2008/03/28/displaying-scroll-tips-in-a-list-control-in-flex/ http://blog.flexexamples.com/2008/03/28/displaying-scroll-tips-in-a-list-control-in-flex/#comments Sat, 29 Mar 2008 02:42:26 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/28/displaying-scroll-tips-in-a-list-control-in-flex/ The following example shows how you can display scroll tips in a Flex List control by setting the showScrollTips property. You can also customize the scroll tip text by setting a custom scroll tip function using the scrollTipFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/28/displaying-scroll-tips-in-a-list-control-in-flex/ --> [...]]]> The following example shows how you can display scroll tips in a Flex List control by setting the showScrollTips property. You can also customize the scroll tip text by setting a custom scroll tip function using the scrollTipFunction property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/28/displaying-scroll-tips-in-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.scrollClasses.ScrollBarDirection;
            import mx.utils.StringUtil;

            private function list_scrollTipFunc(dir:String, pos:Number):String {
                var pct:Number = pos / list.maxVerticalScrollPosition;
                return StringUtil.substitute("{0} / {1} ({2}%)",
                        pos, // current
                        list.maxVerticalScrollPosition, // max
                        numberFormatter.format(pct * 100) // percent
                    );
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" precision="0" />

    <mx:Array id="arr">
        <mx:Object label="Accordion" />
        <mx:Object label="ApplicationControlBar" />
        <mx:Object label="Box" />
        <mx:Object label="Canvas" />
        <mx:Object label="ControlBar" />
        <mx:Object label="DividedBox" />
        <mx:Object label="Form" />
        <mx:Object label="FormHeading" />
        <mx:Object label="FormItem" />
        <mx:Object label="Grid" />
        <mx:Object label="HBox" />
        <mx:Object label="HDividedBox" />
        <mx:Object label="Panel" />
        <mx:Object label="TabNavigator" />
        <mx:Object label="Tile" />
        <mx:Object label="TitleWindow" />
        <mx:Object label="VBox" />
        <mx:Object label="VDividedBox" />
        <mx:Object label="ViewStack" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="showScrollTips:"
                labelPlacement="left"
                selected="true" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            rowCount="6"
            showScrollTips="{checkBox.selected}"
            scrollTipFunction="list_scrollTipFunc"
            verticalScrollPolicy="on" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/28/displaying-scroll-tips-in-a-list-control-in-flex/feed/ 5 Creating a custom scroll tip function on a Flex TextArea control http://blog.flexexamples.com/2007/11/21/creating-a-custom-scroll-tip-function-on-a-flex-textarea-control/ http://blog.flexexamples.com/2007/11/21/creating-a-custom-scroll-tip-function-on-a-flex-textarea-control/#comments Thu, 22 Nov 2007 06:23:41 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/21/creating-a-custom-scroll-tip-function-on-a-flex-textarea-control/ The following example shows how you can create a custom scroll tip function for a TextArea control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/21/creating-a-custom-scroll-tip-function-on-a-flex-textarea-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function textArea_scrollTipFunc(direction:String, position:Number):String { var str:String; switch (direction) { case "horizontal": str [...]]]> The following example shows how you can create a custom scroll tip function for a TextArea control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/21/creating-a-custom-scroll-tip-function-on-a-flex-textarea-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function textArea_scrollTipFunc(direction:String, position:Number):String {
                var str:String;
                switch (direction) {
                    case "horizontal":
                        str = position + "/" + textArea.maxHorizontalScrollPosition;
                        break;
                    case "vertical":
                        str = position + "/" + textArea.maxVerticalScrollPosition;
                        break;
                }
                return str;
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showScrollTips:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}" wordWrap="false"
            showScrollTips="{checkBox.selected}"
            scrollTipFunction="textArea_scrollTipFunc"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/21/creating-a-custom-scroll-tip-function-on-a-flex-textarea-control/feed/ 1