Bild Kürschner einen Button in Flex 4

Ich versuche die Haut ein button mit Bilder.

Den folgenden code für flex 3, aber ich brauche das äquivalent in flex 4-code.
Nicht mit Haut Klasse.

.muteVolumeButton 
{
  upSkin: Embed(source='images/sound-mute.gif');   
  overSkin:Embed(source='images/sound-hover.gif');   
  downSkin: Embed(source='images/sound-on.gif');   
  disabledSkin: Embed(source='images/sound-mute.gif');
}

Poste bitte die flex-4-code.

InformationsquelleAutor naveen | 2010-09-17

  1. 8

    Muss ich sagen, dass Kürschner in der Spark-Rahmen ist ein bisschen anders von Halo Weg.

    Die beste Beschreibung ist hier. Und die beste und einfachste Möglichkeit, um Ihr problem zu lösen.
    Hier ist der code:

    Komponenten.ImageButton.als

    package components  
{  
 import spark.components.Button;  

 [Style(name="imageSkin",type="*")]  
 [Style(name="imageSkinDisabled",type="*")]  
 [Style(name="imageSkinDown",type="*")]  
 [Style(name="imageSkinOver",type="*")]  

 public class ImageButton extends Button  
 {  
  public function ImageButton()  
  {  
   super();  
  }  
 }  
}

    Skript:

    [Embed('assets/images/btnGoUp.png')]  
[Bindable]  
public var btnGo:Class;  

[Embed('assets/images/btnGoOver.png')]  
[Bindable]  
public var btnGoOver:Class;  

[Embed('assets/images/btnGoDisabled.png')]  
[Bindable]  
public var btnGoDisabled:Class;

    MXML-Teil:

    <components:ImageButton buttonMode="true"  
   imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}"  
   imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}"  
   skinClass="assets.skins.ImageButtonSkin"/>

    In allen anderen Fällen kann man immer Haut die Staaten via CSS.

    1. Sollten Sie immer Ihre Haut: @namespace s "library://ns.adobe.com/flex/spark";
    2. Können Sie die access-Komponente Staaten: s|Button:down
    3. Erweitern Sie Ihre Haut, mit Bild, und überschreiben Sie es per CSS, aber es wird nicht eine core-Komponente.

    Hier sind einige nützliche links:

    http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/

    http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/

    http://opensource.adobe.com/wiki/display/flexsdk/CSS+Namespaces+Support

    http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.html

    vielen Dank für die Informationen.Aber warum die von adobe entfernt in flex4 der einfachste flex 3 Bild skinning button über css.Die Schwierigkeit, das ich mich vor enthäutet mehrere buttons mit unterschiedlichen Bildern.
    flexibler Art und Weise in der spark-Rahmen, verlängern Sie einfach die Schaltfläche mit Bild, und dann installieren Sie es via CSS. wie blog.flexexamples.com/2010/03/24/...
    +1 Eugene für eine gute Antwort. Ja, Sie müssen dies tun, durch skins, aber die gute Nachricht ist, dass Sie erstellen einen skin einmal und verwenden Sie es für jede Taste, danach ist die Einstellung der Bilder in CSS genau wie Sie zu tun pflegten, die in Flex 3.

    InformationsquelleAutor Eugene

  2. 2

    In der Haut öffnen Sie ein script-tag und Sie:

            [Embed(source="assets/images/button-up.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "2", scaleGridBottom = "3")]
        [Bindable]
        public var upImg:Class; 


        [Embed(source="assets/images/button-over.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "4", scaleGridBottom = "5")]
        [Bindable]
        public var overImg:Class;

        [Embed(source="assets/images/button-disabled-skin.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "2", scaleGridBottom = "3")]
        [Bindable]
        public var disabledImg:Class;

        [Embed(source="assets/images/button-over.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "4", scaleGridBottom = "5")]
        [Bindable]
        public var downImg:Class;

    löschen Sie alle Standard-füllt und stattdessen:

    <s:BitmapImage source="{upImg}"
               source.over="{overImg}"
               source.down="{downImg}"
               source.disabled="{disabledImg}"
               width="100%"/>

    Und voila'

    InformationsquelleAutor Costin Aldea

Schreibe einen Kommentar