flex4自定義面板詳解

2021-08-31 02:58:47 字數 2145 閱讀 1467

在flex4新增加了乙個包:spark.skins,這個包裡面只有乙個類:sparkskin,而我們(非美工的程式設計師)通過這個class來實現任意自定義控制項的樣式。

通過上述關係可以得出如下的結論:

1、sparkskin是乙個group型別的容器。(它繼承與group)

2、是全部spark類的基礎類,也就說全部的mx.spark的視覺化控制項的外觀全部都是sparkskin的子類)

注意skin,這個類是sparkskin的父類,同時skin繼承與group。

skin:

是sparkskin的父類,例如buttonbarskin就是skin的子類,如果想要自定義這部分元件的樣式,則需要使用skin。

sparkskin:

是全部spark類的基礎類,也就說全部的mx.spark的視覺化控制項的外觀全部都是sparkskin的子類。

綜上所述,用sparkskin和skin都可達到同樣的效果。

在flex4中,我們只需要將這個button的樣式繼承與sparkskin或者skin,然後在其中加入一些想要的內容即可,請看以下**:

<?xml version="1.0" encoding="utf-8"?>

[hostcomponent("spark.components.button")]

我們可以用以下幾個方式將這個樣式應用:

1、button

2、mybutton.setstyle( "skinclass", class(cn.xuedi.selfbutton));

3、其中skinclass也是flex4裡面新增加的乙個類,其作用就是設定當前這個元件的skin。

以上**解釋:

1、含義:

如果要自定義控制項樣式,必須要要繼承sparkskin或者skin。

2、[hostcomponent("spark.components.button")]>

含義:我們要修改的是spark.components.button的外形,flex4新增了乙個matadata tag:hostcomponent

同時,metadata也由原來的mx:變成了現在的fx,因為命名空間發生了改變。

3、含義:

定義了button的四種狀態:up、down、over、disabled。這是flex4新增的一種功能,用state來描述狀態。

在flex3的情況下,只能描述ui的不同狀態,而在flex4中,又賦予了state描述控制項狀態的功能。

4、含義:

畫乙個圓形(橢圓形)的圖形,而ellipse也是flex4新增乙個包:spark.primitives裡面的乙個類。

spark.primitives裡面定義了一些圖形,例如:ellipse、rect、path、line等類。同樣根據這些類名就可以得出是做什麼用的。

5、含義:

設定填充的方式(solidcolor)填充顏色值ffff00的顏色,color.over是指滑鼠移動上去後的顏色,color.down是滑鼠按下時候的顏色。

引申一下,還有color.up、color.display,通過這些值就可以描述四種狀態時的顏色。

注意:solidcolor外層必須要有否則會出現錯誤。fill是填充的意思。

6、含義:

設定邊線的顏色(solidcolorstroke)當然也可以設定諸如:color.up、color.display、color.down、color.over的顏色。

同樣solidcolorstroke必須在stroke內部,而stroke的含義:設定邊框。

7、我們在重新看一下這些**的意義:

含義:定義乙個圓形(因為寬和高相等)然後填充乙個0xffff00的顏色,並且設定滑鼠移上、按下時的顏色值(color.over="#00ff00" color.down="#ff0000")

然後在定義乙個邊框,設定顏色為0x0c0d0d。

8、含義:

上面的**定義了button中可以顯示文字的部分。注意,id必須設定為labelelement,否則出錯。其他的樣式可以自行設定了。

主程式:

我們要注意的地方:skinclass,這也是flex4新增加的乙個類,專門用來設定當前**的properties,請注意skinclass只適用於spark包裡面的視覺化控制項。

以上就是通過繼承sparkskin、skin和skinclass的方式很簡單的實現自定義元件的**。

FLEX4實踐 自定義控制項面板

設計需求 1 對於介面上的textinput控制項,需要設定 必填 與 非必填 兩種狀態 2 對於 必填 狀態希望給與控制項特殊的顯示樣式 3 希望能簡化 不需要每次使用textinput控制項都要對其置樣式 方案1 將樣式控制寫入css檔案,通過style屬性控制textinput的顯示 方案2 ...

Flex4 自定義事件

1.方式一 通過繼承event類編寫flex4的自定義事件 下面我們來做乙個例子,實現這樣的功能 監控textinput的輸入,通過監控輸入的內容,觸發不同的自定義事件。我們先來寫這個自定義事件 actionscript類test43event.cs packagedemo importflash....

Flex4自定義事件

1 自定義事件 2 自定義帶引數的事件 剛到公司上班沒多久,事情不是太多。打醬油的成分佔據大多時間。閒著沒事學習下flex。在這之前沒有接觸過flex。在理解上面多有拙劣之處。重在交流,總結。還望看到的各位高手能夠給予指點。剛做了乙個自定義事件,對於我們初學flex的並且沒有人交流的還是有點難度的。...