28
Dec
08

Toggling data tips on the HSlider control in Flex

The following example shows how you can toggle data tips on the Flex HSlider control by setting the Boolean showDataTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ -->
<mx:Application name="HSlider_showDataTip_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

    <mx:HSlider id="slider"
            showDataTip="{checkBox.selected}"
            liveDragging="true" />

</mx:Application>

View source is enabled in the following example.

You can also set the showDataTip property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/12/28/toggling-data-tips-on-the-hslider-control-in-flex/ -->
<mx:Application name="HSlider_showDataTip_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                slider.showDataTip = checkBox.selected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="showDataTip:">
                <mx:CheckBox id="checkBox"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HSlider id="slider"
            showDataTip="{checkBox.selected}"
            liveDragging="true" />

</mx:Application>

5 Responses to “Toggling data tips on the HSlider control in Flex”


  1. 1 Anonymous Jan 24th, 2009 at 12:17 am

    Is there a way to make the data tip be always visible?

  2. 2 Rhoby Feb 26th, 2009 at 5:52 am

    I would like the answer to this question please…

  3. 3 Peter deHaan Feb 26th, 2009 at 8:13 am

    Sorry, I don’t know the answer. Try asking on FlexCoders.

    Peter

  4. 4 Rhoby Feb 26th, 2009 at 8:52 am

    Thank you for responding and for your site Peter…

  5. 5 Peter deHaan Feb 26th, 2009 at 9:08 am

    Rhoby,

    My pleasure. Let me know if you find an answer. I can try and update the entry above, or make a new example.

    Peter

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed