Pertanyaan flex 4: nilai css khusus


adakah cara untuk membuat nilai css khusus untuk komponen dan membuatnya tersedia untuk kelas kulit yang digunakan komponen itu? misalnya, jika saya mendefinisikan ini dalam file css:

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

apakah ada cara untuk membuatnya myCustomValue tersedia di PanelSkin ?


5
2017-11-05 17:35


asal


Jawaban:


Bahkan tanpa metadata [Style] di kelas komponen, tampaknya Anda dapat mengatur properti CSS dan mereka akan tersedia di kulit. Sebagai ujian, saya membuat kulit kustom dan melampirkannya ke SkinnableComponent, dan kemudian mengatur properti 'khusus-warna' melalui CSS. Di kulit, saya terikat ke "{getStyle ('specialColor')", dan ia mengambil nilai properti yang saya tetapkan.

Semua yang Anda mungkin berkorban dengan menghilangkan metadata adalah pelengkapan otomatis pada CSS.

Kode pengujian saya:

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>

5
2017-11-20 09:38



Anda harus menggunakan metadata [Style], berikut info lebih lanjut tentang ini: Tag metadata gaya


1
2017-11-05 22:25



Anda harus menentukan Anda meng-host kelas komponen dalam file skin mxml. [HostComponent ("your.component.class")]

Setelah ini, Anda akan bisa mendapatkan gaya yang ditentukan dalam file css dengan menggunakan hostComponent.getStyle ("myCustomValue")


0
2017-11-23 12:22