Flex 4: benutzerdefinierter CSS -Wert

Question

Gibt es eine Möglichkeit, einen benutzerdefinierten CSS -Wert für eine Komponente zu erstellen und der Hautklasse, die die Komponente verwendet, zur Verfügung zu stellen? Wenn ich beispielsweise dies in einer CSS -Datei definiere:

s|Panel{
  skinClass: ClassReference("PanelSkin");
  myCustomValue: #CCCCFF;
}

Gibt es eine Möglichkeit zu machen? myCustomValue erhältlich in der PanelSkin ?

Answer 1

Auch ohne [Stil-] Metadaten in der Komponentenklasse können Sie CSS -Eigenschaften festlegen und sie werden in der Haut erhältlich sein. Als Test habe ich eine benutzerdefinierte Haut erstellt und an SkinnableComponent angebracht und dann eine Eigenschaft 'Sonderfarbe' über CSS eingestellt. In der Haut habe ich an "{getStyle ('SpecialColor') gebunden, und es hat den von mir festgelegten Eigenschaftswert abgerufen.

Alles, was Sie vielleicht opfern, indem Sie die Metadaten weglassen, ist die Autoperation auf dem CSS.

Mein Testcode:

SkinTest.mxml:

<?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/halo" minWidth="1024" minHeight="768">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";

    s|SkinnableComponent {
        skin-class: ClassReference("skins.CustomSkin");
        special-color: blue;
    }
</fx:Style>

<s:SkinnableComponent width="300" height="300"/>
</s:Application>

CustomSkin.mxml:

<?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/halo" width="400" height="300">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:Rect left="0" top="0" right="0" bottom="0">
    <s:fill>
        <s:SolidColor color="{getStyle('specialColor')}"/>
    </s:fill>
</s:Rect>
</s:SparkSkin>

Answer 2

Sie müssen die [Stil-] Metadaten verwenden. Hier finden Sie weitere Informationen dazu: Stilmetadaten -Tag

Answer 3

Sie müssen Ihre Host -Komponentenklasse in der MXML -Hautdatei definieren. [HostComponent ("your.comPonent.class")]]]

Danach können Sie jeden Stil in der CSS -Datei definieren, indem Sie hostcomponent.getStyle ("mycustomValue") verwenden.