flex 4.5-einfach spark-button-skinning

Jemand vermisst die alte, einfache Methode für das skinning einem einfachen Knopf?

<mx:Button x="10" y="10" label=""
           upSkin="@Embed('imgs/mainButton_std.png')"
           overSkin="@Embed('imgs/mainButton_over.png')"
           downSkin="@Embed('imgs/mainButton_over.png')"
           disabledSkin="@Embed('imgs/mainButton_std.png')"
           creationComplete="mainButtonHitArea()"
           width="75" height="75" id="menuButton" enabled="true"/>
//mainButtonHitArea() : Is a generic function that generates the hit area

Das problem im habend ist, dass diese Methode zum erstellen einer einfachen Schaltfläche mit der Haut ist ein Auslaufmodell : es wird nicht mehr unterstützt in flex 4.5-mobile-Projekte.

Also die Frage: gibt es eine einfache Möglichkeit, um diese, mit spark-buttons (das ist wohl der neue Weg zu gehen). So einfach wie möglich.

Im Grunde brauche ich nur eine Taste mit 2 Bildern : unten/über & bis. Und ich will, dass der code so einfach wie möglich : mit Dem neuen skinning-Methoden, scheint wirklich ein Weg zu viel Zeilen für etwas, das verwendet werden, um so einfach wie im Beispiel oben.

InformationsquelleAutor PicoCreator | 2011-06-25

12

Können Sie erstellen eine Haut, d.h. (wie MyButtonSkin.mxml):
```
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="MyButtonSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>    
    <s:BitmapImage source.disabled="@Embed('assets/image1.png')" 
                source.down="@Embed('assets/image2.png')" 
                source.up="@Embed('assets/image3.png')" 
                source.over="@Embed('assets/image4.png')" />
</s:SparkSkin>
```
Dann können Sie zuweisen, dass die Haut an einigen Taste:
```
<s:Button skinClass="MyButtonSkin"/>
```
>.< ich war hopping für eine einfachere Lösung, aber, leider... Aber ich mag das, wenn es wirklich keine andere Antwort.
Ich erinnere mich, dass Sie das gleiche Gefühl von ärger, wenn ich konnte nicht einfach Bilder zuweisen die Schaltfläche Staaten. OTOH, mit skinning öffnet die Tür zu mehr mächtig. Was ich geschrieben ist natürlich nur ein bare-down Haut.
vereinbart ist, dass es wirklich offene Türen, vor allem animierte Schaltflächen. oder diejenigen, die wirklich Brauch... einfach Nur genervt, dass es ist ein viel größerer Aufwand, wenn es ist nicht nötig, aber =(
Overhead? Tatsächlich ist der Aufwand, dieser ist kleiner als der in der mx-Taste. Sie haben sich daran zu erinnern, dass Sie jetzt in einer separaten Datei, die wiederverwendet werden können, wie Sie wollen und nicht müssen laden keine extras. Von dort aus, die Sie gerade benötigen, um die Haut auf jede Schaltfläche, die Sie das Bild einfügen möchten. Macht sehr guten Gebrauch von Wiederverwendbarkeit, anstatt Sie zu kopieren, dass Haut-code alle über dem Platz, das wäre ärgerlich, um zu aktualisieren, wenn Sie jemals benötigt, um.

InformationsquelleAutor

Hier ist ein einfaches Bild-Taste, die ist eher allgemein:

ImageButtonSkin.mxml

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <fx:Metadata>
        [HostComponent("com.instantdelay.flex.commons.ImageSkinnableButton")]
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage id="image"
                   source.up="{getStyle('upImage')}"
                   source.down="{getStyle('downImage')}"
                   source.over="{getStyle('overImage')}"
                   source.disabled="{getStyle('disabledImage')}"
                   />
</s:SparkButtonSkin>

ImageSkinnableButton.als

[Style(name="upImage", inherit="no", type="Class")]
[Style(name="downImage", inherit="no", type="Class")]
[Style(name="overImage", inherit="no", type="Class")]
[Style(name="disabledImage", inherit="no", type="Class")]
public class ImageSkinnableButton extends Button
{
    public function ImageSkinnableButton()
    {
        super();
        setStyle("skinClass", ImageButtonSkin);
    }
}

Dann können Sie die Bilder als Formatvorlagen auf die Schaltfläche, entweder in CSS (bevorzugt) oder in mxml:

<commons:ImageSkinnableButton
    upImage="@Embed('imgs/mainButton_std.png')"
    overImage="@Embed('imgs/mainButton_over.png')"
    downImage="@Embed('imgs/mainButton_over.png')"
    disabledImage="@Embed('imgs/mainButton_std.png')" />

Ja, letztlich müssen Sie erstellen Sie so etwas wie dies, wenn Sie haben die Haut mehr als eine Taste.
Wie kann ich ein symbol aus einer swc-lib als up/over/down/disabledImage ? Welchen container sollte ich verwenden, in ImageButtonSkin (Sie sind mit s:BitmapImage) ?
Dies war ein-wir-damit-mich-!

InformationsquelleAutor takteek

Können Sie auch definieren ein ButtonImageSkin für die Standard Funke.Komponenten.Button-Komponente, zum Beispiel in der imageskins Paket:

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage source="{getStyle('backgroundImage')}"/>
</s:SparkButtonSkin>

Einfach definieren Sie einen Stil auf der Haut Klasse selbst, und binden die Quelle des Bildes. Jetzt können Sie Steuern die tatsächlichen Bilder mit CSS pseudo-Selektoren:

@namespace imageskins "imageskins.*";
s|Button {
    skinClass: ClassReference("imageskins.ButtonImageSkin");    
}
imageskins|ButtonImageSkin:up {
    backgroundImage: Embed(source="assets/images/button-up.png");
}
imageskins|ButtonImageSkin:down {
    backgroundImage: Embed(source="assets/images/button-down.png");
}
imageskins|ButtonImageSkin:over {
    backgroundImage: Embed(source="assets/images/button-over.png");
}
imageskins|ButtonImageSkin:disabled {
    backgroundImage: Embed(source="assets/images/button-disabled.png");
}

Diesem Weg erhalten Sie das Ergebnis mit flexibler CSS-basierte Regeln. Ich landete eine Reihe von Bild-basierten Spark-skins für verschiedene Flex-Komponenten: FXG ist viel mächtiger, aber manchmal arbeiten mit scale9 Bilder ist einfach der Schnellste Weg, das gewünschte Ergebnis zu erhalten.

Seite Hinweis: wenn Sie Ihre Haut-Klassen und Ihre CSS-Datei (mit beliebigem Namen) in einen Flex-Bibliothek-Projekt, und kompilieren Sie die client-Projekt mit dem -Thema option, Flex automatisch das CSS.. nützlich bei der Erstellung einer Reihe von Haut-zusammen mit der CSS, assoziieren Sie mit Ihren host-Komponenten.

InformationsquelleAutor Cosma Colanicchia

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.