3 Replies Latest reply on Feb 7, 2011 4:07 AM by mbskels

    Handling HSlider Change event in parent

    mbskels

      Hi,

       

      I am trying to handle events on a custom navigator component that I have built in the parent container. Works fine except for the change event on a spark HSlider.

       

      I can trap the change event on the navigator component itself but not on the parent. According to the docs the change event bubbles.

       

      Simplified code below. Would appreciate if someone can tell me where I am going wrong.

       

      Thanks

       

      <?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"
                      xmlns:local="*"
                      xmlns:components="components.*"
                      creationComplete="initHandlers()">
          <fx:Script>
              <![CDATA[
                  import mx.controls.Alert;
                  import flash.events.Event;
                 
                  private function initHandlers():void
                  {
                      addEventListener(MouseEvent.CLICK, nav_clickHandler);
                      addEventListener(Event.CHANGE, nav_changeHandler);
                  }
                 
                  private function nav_clickHandler(evt:Event):void
                  {
                      Alert.show("Mouse Click from "+evt.target.id);
                  }
                 
                  private function nav_changeHandler(evt:Event):void
                  {
                      Alert.show("Change in "+evt.target.id);
                  }
                 
                 
              ]]>
          </fx:Script>
         
          <s:Panel id="lessonContainer"
                   width="100%" height="100%"
                   cornerRadius="5"
                   title="Lesson">
              <s:TextArea x="177" y="19" editable="false" text="screen 1: This Text Always Appears"/>
              <components:contentNav id="lessonNavigator"
                                     horizontalCenter="0" bottom="10"
                                     />
             
          </s:Panel>
         
      </s:Application>

       

      Navigator component starts below

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:BorderContainer     xmlns:fx="http://ns.adobe.com/mxml/2009"
                           xmlns:s="library://ns.adobe.com/flex/spark"
                           xmlns:mx="library://ns.adobe.com/flex/mx"
                           width="400" height="130">

       

          <fx:Script>
              <![CDATA[
                 
                  import mx.controls.Alert;

       

              ]]>
          </fx:Script>

       


          <s:Group width="100%" height="100%">
              <s:layout>
                  <s:VerticalLayout horizontalAlign="center" gap="20" paddingTop="20" verticalAlign="middle"/>
              </s:layout>
         
              <s:HSlider id="screenTracker"
                  minimum="1" stepSize="1" value="1"
                  showDataTip="true"
                  liveDragging="true"
              />
              <s:HGroup width="100%" height="100%"
                  horizontalAlign="center"
                  gap="20">
                  <s:Button id="previousScreen" label="Previous"/>
                  <s:Button id="nextScreen" label="Next"/>
              </s:HGroup>
          </s:Group>
      </s:BorderContainer>