flex 4: benutzerdefinierter css-Wert

Question

Gibt es eine Möglichkeit, einen benutzerdefinierten CSS-Wert für eine Komponente zu erstellen und ihn der Skinklasse zur Verfügung zu stellen, die die Komponente verwendet? wenn ich dies in einer CSS-Datei zum Beispiel definieren:

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

ist es eine Möglichkeit, myCustomValue in den PanelSkin zu machen?

Answer 1

Auch ohne [Style] Metadaten auf der Komponentenklasse, es scheint, dass Sie CSS-Eigenschaften festlegen können, und sie werden in verfügbar sein die Haut. Als Test habe ich eine benutzerdefinierte Skin erstellt und an SkinnableComponent angehängt und dann über CSS eine Eigenschaft 'special-color' festgelegt. In der Skin habe ich an "{getStyle ('specialColor')" gebunden und den von mir festgelegten Eigenschaftswert abgerufen.

Alles, was Sie opfern könnten, wenn Sie die Metadaten weglassen, ist die automatische Vervollständigung des 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 haben die [Style] Metadaten zu verwenden, ist hier weitere Informationen zu diesem Thema: Style metadata tag

Answer 3

Sie müssen Sie Komponentenklasse in der MXML-Skin-Datei definieren Host. [hostcomponent ("your.component.class")]

Danach, werden Sie in der Lage sein, jede Art in der CSS-Datei definiert auszukommen hostComponent.getStyle mit ("myCustomValue")