Flex4 + vieeele Buttons anlegen?

[Nico B.]

Hola,

folgende Situation:
Habe ca. 5-6 Icons die ich als Buttons in meine Applikation einbauen will. Ergo, brauche ich für alle Over/activ states.

Jetzt ist meine Frage: Geht das mit Flex4 auch einfacher, als jetzt 5-6 neue Dateien anzulegen, die son Ding repräsentieren?
Kommt mir nämlich extrem umständlich vor

[Omega Psi]

Verstehe ich nicht ganz.

Einige der "Flaws" der aktuellen Skins sind fehlende Styles und Properties. In unserem aktuellen Projekt haben wir einfach die Skins die wir brauchten sehr generisch neu gebaut.

-> nur eine Skin

[Nico B.]

Naja ich bräuchte dann ja jeweils X Skinklassen, die dann beim up, down, click das jeweilige png angeben.

Irgendwie muss ich die ja alle durchlaufen? (Pro Icon sind es 3 png's für die unterschiedlichen States - soll ja vernünftig aussehen)

Später hätte ich dann ja:

CloseButton.skin - startButton.skin usw... Das erscheint mir irgendwie komisch - vielleicht habe ich da aber auch nur nen Denfehler.

[Omega Psi]

Das kannst du doch stylen.

Deine Skin bekommt 4 Zustände (up, down...). Zudem die Stile: upIcon, downIcon... dann kannst du zum Beispiel in der Skin sagen:

<mx:Image souce.up="{UP_ICON}" />

In der CSS Datei machst du dann nur so was wie

.cancel
{
  upIcon: Embed("cancelUpIcon.png");
}

Durch das überschreiben der styleChanged Methode kommst du dann sauber an die Referenzen der eingebetteten Bilder.

[Nico B.]

Danke schonmal für Deine Antwort.

Ich glaube ich stecke irgendwo in einer Denk-lücke..


Das wäre jetzt mal beispielhaft mein Skinn, den ich per "skinClass" der Buttoninstanz geben würde.

<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomButton" 
        xmlns="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    
    <s:states>
        <s:State name="disabled" />
        <s:State name="up" />
        <s:State name="down" />
        <s:State name="over" />                        
    </s:states>
    
    <Metadata>
        [HostComponent("spark.components.Button")]
    </Metadata> 
    
    
    
    <mx:Image
        source.up       = "assets/icons/AppIcons/google.png"
        source.down         = "assets/icons/AppIcons/youtube.png"
        source.over         = "assets/icons/AppIcons/feed.png"
        >
    </mx:Image>
</s:Skin> 

Wozu brauch ich jetzt noch eine .css? Bzw. Der Button flackert die Ganze Zeit, also scheint das mit dem Image so nicht zu funtkionieren.


Grüße, Nico
(Bin mit dem Skinnen in flex4 noch nicht wirklich warm :/ )

[Omega Psi]

Ein kleines Beispiel. Die Datei in Icons.fx umbenennen.

[Nico B.]

Ola,

danke für das Beispiel! Scheint eine coole ("richtige") Lösung zu sein, die man aber so leider gar nicht im Internet findet. :/


Also, dange

[Omega Psi]

Nein, im Netz findest du das weniger. Entweder werden Einträge eh nur kopiert oder halt einfach nur sehr zielgerichtet programmiert.

Aber zudem musst du Spark auch nicht verwenden. Ganz wie du magst.

[Omega Psi]

Und was heisst hier... es scheint

Production ready ist der Code aber nicht, aber ein gutes Beispiel, das denke ich schon.