Text is not displayed when Spark s:HSlieder is used (mx:HSlider versus s:HSlider)

I have in my app two sliders: one is mx:HSlider and the other one Spark s:Hslider. There is a small script to assign text to slider value. The following is with mx:HSlider representing the text:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            private var txtvalue:int = 0;
            protected function Focal_changeHandler(event:SliderEvent):void
            {
                txtvalue = Focal.value;
                if(txtvalue == 0)
                    Slider_txt.text = "Low";
                if(txtvalue == 1)
                    Slider_txt.text = "Middle";
                if(txtvalue == 2)
                    Slider_txt.text = "High";

            }
        ]]>
    </fx:Script>


    <mx:HSlider id="Focal" x="402" y="285" maximum="2" minimum="0" value="0.01" buttonMode="true" enabled="true" snapInterval="1" tickInterval="1" allowTrackClick="true" liveDragging="true" change="Focal_changeHandler(event)"/>
    <s:HSlider id="Temp" x="402" y="355" width="160"  minimum="0" maximum="2" stepSize="1" value="0" liveDragging="true"/>
    <s:Label id="Slider_txt" x="405" y="248" text= "(Slider_txt.txt)" fontSize="17"/>
</s:Application>

This will show the text "Low" right after page is loaded.

The following rendition uses Spark s:HSlider to represent the text encoded in the script. This version with Spark component does not show the text "Low" right after page is loaded:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            private var txtvalue:int = 0;
            protected function Focal_changeHandler(event:Event):void
            {
                txtvalue = Focal.value;
                if(txtvalue == 0)
                    Slider_txt.text = "Low";
                if(txtvalue == 1)
                    Slider_txt.text = "Middle";
                if(txtvalue == 2)
                    Slider_txt.text = "High";

            }
        ]]>
    </fx:Script>



    <s:HSlider id="Focal" x="402" y="355" width="160"  minimum="0" maximum="2" buttonMode="true" enabled="true" stepSize="1" value="0.01" liveDragging="true" change="Focal_changeHandler(event)"/>
    <s:Label id="Slider_txt" x="398" y="250" text= "(Slider_txt.txt)" fontSize="17"/>
</s:Application>

Any help would be very much appreciated. Thank you.

Answers


The spark Slider will not fire a change event when the value is set programmatically. So you'd need to set the text once your view is ready (note the onComplete() in the Application MXML):

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955"
               minHeight="600"
               creationComplete="onComplete()">

private function onComplete():void
{
     updateSliderText();
}

private function updateSliderText():void
{
    txtvalue = Focal.value;
    if (txtvalue == 0)
        Slider_txt.text = "Low";
    if (txtvalue == 1)
        Slider_txt.text = "Middle";
    if (txtvalue == 2)
        Slider_txt.text = "High";
}

Need Your Help

Can I get the classes generated using T4 Templates to inherit from the same class

t4

I'm writing a small console app to generate some scaffolding code using the TextTemplatingFilePreprocessor.

PHP - Update and set multiple variables with different WHERE

php mysql where

Need to update different values with different WHERE.