0 Replies Latest reply on Sep 21, 2008 6:52 AM by Jan_Dahlberg

    Button skin blink / icon jump

    Jan_Dahlberg
      I have a problem with my buttons. I have two skins for the background and an icon for each button. The two skins are to tell which button that are "active", much like tabs. So when I click button 1, the last clicked button and button 1 will both change skins showing that button 1 now are "active". However the button I click gets a mysterious behaviour and I have worked my way to two different, both unsatisfactory, results.

      1. The skin changes during load of the specific viewstack-child. During that load the icon and the label disappears. The last active button changes skin as a charm and the icon and the label remains intact, looks good. When the content of the ViewStack finishes loading both the icon and the label reappear where they should be.

      2. The skin changes and the label disappears. The icon is still showing but in the upper left corner of the button. The last active button changes skin and looks great. When the load finishes the icon returns to the center of the button and the label reappears.

      Has anyone seen anything like this? I found anoher post regarding the same issue but I found no answers that helped me. Always the button I click, changing skin on other buttons seems to be no problem.

      http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1387255&highlight_key=y&keyword1=button


      I paste the code to give an example from the first behaviour, two buttons:
      -------------------------------------------------------------------------------------

      public function onReports(event : Event) : void{
      if(this.currentState != REPORT_STATE){
      this.currentState = REPORT_STATE;
      new MenuEvent(MenuEvent.REPORT).dispatch();
      }
      }

      public function onCmdb(event : Event) : void{
      if(this.currentState != CMDB_STATE){
      this.currentState = CMDB_STATE;
      new MenuEvent(MenuEvent.CMDB).dispatch();
      }
      }

      -------------------------------------------------------------------------------------

      <mx:states>
      <mx:State name="{REPORT_STATE}">
      <mx:SetProperty name="styleName" value="selectedStateB" target="{reportsCommand}"/>
      <mx:SetProperty name="styleName" value="unSelectedStateC" target="{cmdbCommand}"/>
      </mx:State>
      <mx:State name="{CMDB_STATE}">
      <mx:SetProperty name="styleName" value="unSelectedStateB" target="{reportsCommand}"/>
      <mx:SetProperty name="styleName" value="selectedStateC" target="{cmdbCommand}"/>
      </mx:State>
      </mx:states>

      <mx:Button id="reportsCommand"
      label="Reports"
      labelPlacement="bottom"
      click="onReports(event)"
      styleName="unSelectedStateB"/>

      <mx:Button id="cmdbCommand"
      label="CMDB"
      labelPlacement="bottom"
      click="onCmdb(event)"
      styleName="selectedStateC"/>

      -------------------------------------------------------------------------------------

      The css looks like this:

      .unSelectedStateB{
      upSkin:Embed(source='/resources/bottomToolbarMainTab_up.png');
      downSkin:Embed(source='/resources/bottomToolbarMainTab_up.png');
      overSkin:Embed(source='/resources/bottomToolbarMainTab_up.png');
      selectedDownSkin:Embed(source='/resources/bottomToolbarMainTab_up.png');
      selectedUpSkin:Embed(source='/resources/bottomToolbarMainTab_up.png');
      selectedOverSkin:Embed(source='/resources/bottomToolbarMainTab_up.png');
      disabledSkin:Embed(source='/resources/bottomToolbarMainTab_up.png');
      downIcon: Embed(source='/resources/reports-28.png');
      icon: Embed(source='/resources/reports-28.png');
      height: 52;
      backgroundImage: Embed(source='/resources/bottomToolbarMainTab_up.png');
      }

      -------------------------------------------------------------------------------------

      Help appreciated!

      Best Regards!
      JD