4 Replies Latest reply on May 18, 2010 2:32 PM by chaky\

    Flex 4 Button Skinning Problem ?!??!

    chaky\ Level 1

      I have problem with simple button skinning. I made skin for button that only consists of one image and set source.up="path/to/image" and source.over="path/to/image" but when i roll over button images don't switch and button keeps blinking. Whay is that? I don't see any logical explanation.

       

      This is my button skin code:

       

      <?xml version="1.0" encoding="utf-8"?>
      
      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   alpha.disabled="0.5"
                  >
          
          <!-- host component -->
          <fx:Metadata>
              <![CDATA[ 
                  [HostComponent("spark.components.Button")]
              ]]>
          </fx:Metadata>
          
          <!-- states -->
          <s:states>
              <s:State name="up" />
              <s:State name="over" />
              <s:State name="down" />
              <s:State name="disabled" />
          </s:states>
        
          <mx:Image source.over="images/minimizeOver.png"  
                    source.up="images/minimizeNormal.png"
                        />
      </s:SparkSkin>
      
      

       

      And this is my application file:

      <?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"
                     width="100%" 
                     height="100%"
                     xmlns:Window="utilityClasses.Window.*">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          
          <s:layout>
              <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
          </s:layout>
          
      <s:Button skinClass="Skins.ButtonSkin" />
      </s:Application>
      

       

       

      Why is this button blinking and not showing over image when i over it with mouse.

        • 1. Re: Flex 4 Button Skinning Problem ?!??!
          chaky\ Level 1

          I found soultion but i don't quite understand why is this necessary. This is button skin code that is working properly:

           

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       alpha.disabled="0.5"
                      >
              
              <!-- host component -->
              <fx:Metadata>
                  <![CDATA[ 
                      [HostComponent("spark.components.Button")]
                  ]]>
              </fx:Metadata>
              
              <fx:Script>
                  <![CDATA[
                      
                      [Bindable]
                      [Embed(source="images/minimizeNormal.png")]
                      private var minimizeNormal:Class;
                      
                      [Bindable]
                      [Embed(source="images/minimizeOver.png")]
                      private var minimizeOver:Class;
                      
                  ]]>
              </fx:Script>
              <!-- states -->
              <s:states>
                  <s:State name="up"  />
                  <s:State name="over" />
                  <s:State name="down" />
                  <s:State name="disabled" />
              </s:states>
            
              <mx:Image source="{minimizeNormal}"
                        source.over="{minimizeOver}"    
                        
                        />
          </s:SparkSkin>
          
          

           

           

          Why is necessary to embed imagesin order for over image to appear properly and button stop blinking.

          • 2. Re: Flex 4 Button Skinning Problem ?!??!
            Flex harUI Adobe Employee

            Because non-embedded images are loaded asynchronously and therefore aren't

            around when the button is measured.

            1 person found this helpful
            • 3. Re: Flex 4 Button Skinning Problem ?!??!
              chaky\ Level 1

              Thanks for the reply man. I really like this new skinning features in flex 4. They should made it from the begining like this. Now it's really easy to make components mixing mxml and actionscript. But look at what problem i have now. This time is with button changing skin when component change state.


              So i have one component that extends TitleWindow. And i declare skin to that component as follows:

               

              <utilityClasses:DesktopWindow title="Ovo je naslov prozora" 
                                            skinClass="Skins.DesktopWindowSkins.DesktopWindowSkin"
                                            width="350"
                                            height="450"
                                            currentState="normal"
                                            titleBarIcon="{titleIcon}"
                                            >
                  <s:Button label="Test Button" />
                  <s:Button label="Test Button 2" />
                  
              </utilityClasses:DesktopWindow>

               

               

              So DesktopWindow component is my custom component that extends TitleWindow and have DesktopWindowSkin applied to it.

              Inside that skin i have defined states like this:

               

              <s:states>
                      <s:State name="normal" />
                      <s:State name="maximized" />
                      <s:State name="minimized"  />
                      <s:State name="hidden"  />
                      <s:State name="inactive" stateGroups="inactiveGroup" />
                      <s:State name="disabled" />
                      <s:State name="normalWithControlBar" stateGroups="withControls" />
                      <s:State name="inactiveWithControlBar" stateGroups="withControls, inactiveGroup" />
                      <s:State name="disabledWithControlBar" stateGroups="withControls" />
                  </s:states>
              
              

               

               

              and inside that skin i have button that is coded like this:

               

              <s:Button id="maximizeRestoreButton" skinClass.normal="Skins.DesktopWindowSkins.DesktopWindowButtonSkins.MaximizeButtonSkin"
                                                   skinClass.maximized="Skins.DesktopWindowSkins.DesktopWindowButtonSkins.RestoreButtonSkin"
                                            />

               

              but when DesktopWindow component changes its state to maximized  "maximizeRestoreButton" doesn't change its skin to "RestoreButtonSkin"

              i can only see normal skin. Also is there any special way of changing component state. When "maximizeRestoreButton" is clicked i set components state like this:

               

              setCurrentState('maximized');

               

              I really have no idea why is this happening. Help Please

              • 4. Re: Flex 4 Button Skinning Problem ?!??!
                chaky\ Level 1

                I found the solution again myself. You have to override

                 

                override protected function getCurrentSkinState():String {
                                return currentState;
                            }


                in other to work. The currentState is current state of component and if you want component to change its skin
                when component's state is change you have to invalidateSkinState() and when you call invalidateSkinState()
                method it sets currentSkinState to whatever getCurrentSkinState returns.In this example when we override
                method getCurrentSkinState() we set it to return component state.

                 

                 

                Check out this two links for more detail information:

                 

                http://opensource.adobe.com/wiki/display/flexsdk/Spark+Skinning

                 

                http://saturnboy.com/2009/09/flex4-component-states-skin-states/