Spark 面板入門

2021-05-01 20:00:56 字數 3170 閱讀 3780

spark **是 flex 4 中的乙個新特性。spark.skins 包包含在 spark 命名空間中,並且已在adobe 的 flex 4 livedocs 中說明:「自定義 spark **為 mxml 檔案,定義組成 spark 元件**的邏輯、圖形元素和其他物件」。那麼這對於您意味著什麼呢?我希望這篇文章能為您解答這個問題。

請注意:本示例是使用 flex 4 sdk 構建版本(nightly build)4.0.0.8702 開發的,可在此處找到該版本。

我曾經想過在示例中為乙個類似於 spark dropdownlist 的元件新增**,後來決定使用乙個容易理解的元件,所以我選擇了 spark 按鈕。這個按鈕非常簡單,使用起來很容易上手,但它仍然是互動式的,我們可以看到使用者互動的結果。了解這一點之後,我們開始動手製作。

需要做的第一件事是建立乙個基於 spark.components.supportclasses.skin 的新 mxml 元件,將其命名為 mybuttonskin。我在我的 com.fincanon.skins 包中建立了這個元件,顯然您也可以在合適的包中建立它。另外,出於個人愛好,我刪除了預設的 400x300 的尺寸。我們將把 layout 選項設定保留為預設值 spark.layouts.basiclayout。

新 mxml 元件

生成的**「shell」簡單地建立了 ff:、s: 和 mx: 命名空間,並且將布局設定為 basiclayout。關於這些命名空間的更多資訊,請在 adobe developer connection 上閱讀文章 flex 3 與 flex 4 beta 之間的差異。新的 spark ** shell:

現在我們有了乙個空 shell,我們需要填充它,分別使用 標記和 標記定義主機元件和狀態。當定義主機元件時,可以從**中訪問該主機元件中包含的公開屬性和樣式。因為我們要在此處為乙個按鈕新增**,所以您應該不會奇怪,主機元件也需要是乙個按鈕(您可能已經猜到了)。定義主機元件和**狀態:

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

現在,我們開始向**新增一些可視元素。如果按鈕具有投影是不是比較美觀呢?如果投影能夠根據當前狀態改變是不是更好呢?我們將更改 over 狀態中的 alpha、distance、blurx 和 blury 值,同時將 down 狀態中的整個投影更改為內部陰影。從以下**可以看出,可以更改每個狀態的屬性,只需將狀態名稱新增到所關注的屬性中即可。例如,所有狀態的投影的 alpha 屬性都設定為 0.5。但是,通過新增 alpha.over="0.3",我們可以更改單個狀態的屬性。

新增投影:

接下來,填充**的背景。我將使用帶有細微圓角的漸變綠色背景,但是您可以隨意使用任何樣式的背景。為了建立背景,我們將使用包含乙個 spark fill 和乙個 halo lineargradient 的 spark rect 元件。我們混合並匹配 mx: 命名空間(halo)與 s: 命名空間(spark)。為什麼這樣做呢?因為我們可以這樣做。

為背景使用乙個 spark rect:

我們快速檢視一下背景**。首先可以看到左側、右側、頂部和底部樣式都設定為 0。這告訴背景 rect,它需要拉伸到按鈕的所有 4 邊。rect 中接下來是 radiusx 和 radiusy(您可能已經知道這兩項就是以前的 cornerradius)。我在此處將它們都設定為 5,但是在此示例末尾,我將展示對它們的兩種不同操作方法。

rect 內部是 spark fill,spark fill 中包含 halo lineargradient。為了使顏色按我們希望的方向漸變,我們將 rotation 屬性設定為 90(預設值為 0,表示從左到右漸變)。lineargradient 內部是 entries 屬性,它是乙個 gradiententry 類陣列。gradiententry 的 color 屬性是將在 lineargradient 中的該點設定的顏色;ratio 屬性是乙個百分比(從 0.0 到 0.1),表示漸變到此顏色的起始百分比。您將注意到,我們更改了中間的 gradiententry 的 over 狀態中的 ratio(ratio.over="0.25"),對陰影的 alpha 屬性也進行過這樣的操作。

最後,我們新增按鈕的標籤。這一步非常簡單,因為我們所需做的只是使用乙個 spark ******text 控制項並設定兩個屬性和樣式。在此示例中真正需要修改的地方是 id,它必須為 "labeldisplay",因為這是 spark button 在嘗試定位其標籤時將要查詢的名稱。本例中使用的其他屬性和樣式用於設定標籤的顏色和位置,以及標籤的邊框。要使加寬或增高按鈕,可以更改左側、右側、頂部和底部樣式。

新增標籤:

現在,要為應用程式中的按鈕新增**,只需將該按鈕的 skinclass 指向自定義**即可。定義按鈕的 skinclass:

最後,我們看一下所有**,以及生成的按鈕(位於**下方)。

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

新增了**的新按鈕:

現在快速對 radiusx 和 radiusy 執行以下操作(如前面所述)。首先,看一下將它們都設定為負數時會發生什麼:將 radiusx 和 radiusy 更改為 -10

負 radiusx 和 radiusy 值:

接下來,將 radiusx 設定為正數,將 radiusy 設定為負數:

正 radiusx 值和負 radiusy 值:

最後,交換一下,也就是將 radiusx 設定為負數,將 radiusy 設定為正數:

負 radiusx 值和正 radiusy 值:

這篇文章到此就結束了。您可以隨意使用 flex 4 中各種不同的 spark **。不斷試驗並從中獲得樂趣,最終您會得到期望的結果。我打算寫一篇關於向**新增漸變顏色的後續文章,您同時也可以在 adobe livedocs 中找到它。

Spark入門系列

讀完spark官方文件後,在研究別人的原始碼以及spark的原始碼之前進行一番入門學習,這個系列不錯。spark系列 除此之外,databricks也是乙個非常不錯的 上面可以使用免費的spark集群進行 提交與測試,在youtube以及spark大會中都有其發布教程以及spark應用部署的相關細節...

Spark 入門詳解

redis資料持久化什麼作用?將記憶體中的資料寫入到硬碟中,進行永久儲存 防止資料丟失!rdd資料持久化什麼作用?1 對多次使用的rdd進行快取,快取到記憶體,當後續頻繁使用時直接在記憶體中讀取快取的資料,不需要重新計算。2 將rdd結果寫入硬碟 容錯機制 當rdd丟失資料時,或依賴的rdd丟失資料...

Spark入門 常用Spark監控Tab

最近用spark做任務,中間來回配置集群環境,檢視配置後的效果,以及監測程式執行過程中的執行進度等,需要頻繁檢視webui的幾個tab。各個tab功能不一,從不同方面顯示了spark的各方面效能引數和執行進度。特意記錄一下,方便以後用得到的時候能夠快速回顧知識點。第乙個tab是在配置好hadoop之...