1 Reply Latest reply on Jun 18, 2010 1:01 PM by rtalton

    A mxml-based custom component question: Event not triggered/heard initially?

    Novian Level 1

      Hi,

       

      I've been away from Flex for a few months e.g. need to get back to my fundamentals. So here's my situation:

       

      I have a mxml-based component e.g. a simple menu system with linkbuttons. This component sits in my main application. The funny thing is when I publish the app, the menu system doesn't seem to initially hear events (e.g. click). Only when I interact with another separate component e.g. a gallery, does the menu then hear events. I'm clearly missing something fundamental, any idea as to what?

       

      Thanks.

       

      Novian

       

      Here's the code if it will help:

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="144" height="272" initialize="init()">

      <mx:states>

      <mx:State name="Main Menu">

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="3" label="New Products" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_1" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="22" label="Apparel" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_2" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="40" label="Print" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_3" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="58" label="Fonts" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_4" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="76" label="Dwell" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_5" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="94" label="Miscellaneous" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_6" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="112" label="typo News" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_7" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="0" y="130" label="About Us" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" textAlign="left" id="btn_8" click="gotoState(event)"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Apparel_new" basedOn="Main Menu">

      <mx:SetProperty name="height" value="280"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="32" source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="15" y="40" label="Apparel_Men" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" id="apparel_men_btn0" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="15" y="58" label="Apparel_Women" fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal" color="#999999" id="apparel_women_btn0" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:AddChild position="lastChild">

      <mx:LinkButton x="15" y="76" label="Accessories"  fontFamily="HelveticaRoundedtypo-DemiBold" fontWeight="normal"  color="#999999" id="apparel_accessories_btn0" click="gotoState(event)"/>

      </mx:AddChild>

      <mx:SetProperty target="{btn_5}" name="y" value="130"/>

      <mx:SetProperty target="{btn_3}" name="y" value="94"/>

      <mx:SetProperty target="{btn_4}" name="y" value="112"/>

      <mx:SetProperty target="{btn_6}" name="y" value="148"/>

      <mx:SetProperty target="{btn_7}" name="y" value="166"/>

      <mx:SetProperty target="{btn_8}" name="y" value="184"/>

      <mx:SetStyle target="{btn_2}" name="color" value="#333333"/>

      </mx:State>

      <mx:State name="Apparel_Men_new" basedOn="Apparel_new">

      <mx:SetStyle target="{apparel_men_btn0}" name="color" value="#333333"/>

      <mx:AddChild position="lastChild">

      <mx:Image left="0" top="41" source="@Embed('../assets/arrow_grey_right.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Apparel_Women_new" basedOn="Apparel_new">

      <mx:SetStyle target="{apparel_women_btn0}" name="color" value="#333333"/>

      <mx:AddChild position="lastChild">

      <mx:Image left="0" top="59" source="@Embed('../assets/arrow_grey_right.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Accessories_new" basedOn="Apparel_new">

      <mx:SetStyle target="{apparel_accessories_btn0}" name="color" value="#333333"/>

      <mx:AddChild position="lastChild">

      <mx:Image left="0" top="77" source="@Embed('../assets/arrow_grey_right.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Print_new" basedOn="Main Menu">

      <mx:SetStyle target="{btn_3}" name="color" value="#333333"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="50" source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Fonts_new" basedOn="Main Menu">

      <mx:SetStyle target="{btn_4}" name="color" value="#333333"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="67" source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Dwell_new" basedOn="Main Menu">

      <mx:SetStyle target="{btn_5}" name="color" value="#333333"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="85" source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Miscellaneous_new" basedOn="Main Menu">

      <mx:SetStyle target="{btn_6}" name="color" value="#333333"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="104" source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="typo News_new" basedOn="Main Menu">

      <mx:SetStyle target="{btn_7}" name="color" value="#333333"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="122" source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="About Us_new" basedOn="Main Menu">

      <mx:SetStyle target="{btn_8}" name="color" value="#333333"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="140" source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      </mx:State>

      <mx:State name="Products_new" basedOn="Main Menu">

      <mx:SetStyle target="{btn_1}" name="color" value="#333333"/>

      <mx:AddChild position="firstChild">

      <mx:Image left="0" top="13"  source="@Embed('../assets/selected_bkgd.png')"/>

      </mx:AddChild>

      </mx:State>

      </mx:states>

      <mx:Script>

      <![CDATA[

      import flash.events.Event;

      import mx.controls.Alert;

      import mx.core.Application;

       

      private function init():void

      {currentState = "Main Menu";

      //Alert.show("Init! Selection is "+selection);

      }

       

      private function gotoState(event:Event):void

      {

      if(parentApplication.sizeDropDown.currentState == 'down'||parentApplication.colourDropDown.currentState == 'down'){

      parentApplication.sizeDropDown.currentState = 'up';

      parentApplication.colourDropDown.currentState = 'up';

      }

      var selection:String = event.target.label;

       

      if(selection == "Fonts"){

      mx.core.Application.application.currentState = "special_product_details";

      }else{

      mx.core.Application.application.currentState = "generic_product_gallery";

      }

       

      if(selection == "New Products"){

      currentState = "Products_new";

      }else{

      currentState = selection+"_new";

      }

      var submenuName:String;

      if(selection == "New Products"){

      selection = "Products";

      submenuName = "_New";

      parentApplication.loadProductGallery(parentApplication.newProductGallery);

      }else if(selection == "Apparel"){

      submenuName = "";

      }else if(selection == "Apparel_Men"){

      submenuName = "_Men";

      selection = "Apparel";

      parentApplication.loadProductGallery(parentApplication.apparelMenGallery);

      }else if(selection == "Apparel_Women"){

      submenuName = "_Women";

      selection = "Apparel";

      }else if(selection == "Accessories"){

      submenuName = "_Accessories";

      selection = "Apparel";

      }else if(selection == "Print"){

      submenuName = "_Design";

      parentApplication.loadProductGallery(parentApplication.printGallery);

      }else if(selection == "Dwell"){

      submenuName = "_Design";

      parentApplication.loadProductGallery(parentApplication.dwellGallery);

      }else if(selection == "Fonts"){

      submenuName = "_Typo";

      parentApplication.loadProductGallery(parentApplication.fontsGallery);

      }else if(selection == "Miscellaneous"){

      submenuName = "_";

      parentApplication.loadProductGallery(parentApplication.miscGallery);

      }else if(selection == "typo News"){

      submenuName = "_News";

      selection = "typo";

      parentApplication.currentState = "typo News";

      }else if(selection == "About Us"){

      submenuName = "_typo store";

      selection = "About";

      parentApplication.currentState = "about us";

      }

      mx.core.Application.application.bread_crumb_lb.text = selection;

      mx.core.Application.application.bread_crumb_sub_lb.text = submenuName;

       

      if(selection == "Main Menu"){

      parentApplication.featured_viewer_component.currentState = 'Featured Viewer';

      parentApplication.product_details_abstract_viewer.currentState = 'Invisible State';

      parentApplication.customer_service_block.visible = true;

      parentApplication.productNameRollOver = "";

      parentApplication.in_stock_status = "";

      }

      mx.core.Application.application.positionBreadCrumb();

      //Load the section Featured Viewer. Therefore need cfc to get the featured, then loadPhoto.

      mx.core.Application.application.getFeaturedSection();

      }

       

       

      private function gotoGallery(event:Event):void

      {

      var selection:String = event.target.label;

      if(selection == "T-shirts"){

      parentApplication.featured_viewer_component.currentState = "Product Gallery";

      parentApplication.loadProductGallery();

      }

      }

      public function loadSectionFeatured(section:String):void

      {

      //Go to appropriate currentState

      var selection:String = section;

      currentState = selection;

      mx.core.Application.application.bread_crumb_lb.text = selection+"_";

      //main_menu_btn.visible = true;

      if(selection == "Main Menu"){

      //main_menu_btn.visible = false;

      }

      mx.core.Application.application.getFeaturedSection();

      }

       

      ]]>

      </mx:Script>

      <mx:Image source="@Embed('../assets/main_menu_bkgd.png')" id="main_menu_bkgd" left="0" top="0"/>

      </mx:Canvas>