動(dòng)態(tài)按鈕
動(dòng)態(tài)按鈕的的概念就是在鼠標(biāo)懸停、鼠標(biāo)點(diǎn)擊、鼠標(biāo)離開(kāi)控件時(shí)，組件呈現(xiàn)不同的外觀，這三種不同的外觀可以通過(guò)背景位圖圖片，背景 SWF 文件實(shí)現(xiàn)。
位圖實(shí)現(xiàn)
位圖實(shí)現(xiàn)是將二進(jìn)制圖像文件作為控件背景，這里使用 Flex 的 Button 控件作為例子，通過(guò)定義 Button 的 upSkin、overSkin 以及 downSkin 樣式分別設(shè)置鼠標(biāo)離開(kāi) Button 時(shí)、鼠標(biāo)懸停 Button 上方時(shí)以及鼠標(biāo)點(diǎn)擊 Button 時(shí)的皮膚，皮膚制作則使用 Embed 標(biāo)簽加載圖片，使之成為 Class 對(duì)象，通過(guò) Button 的 setStyle 方法將 Class 對(duì)象作為皮膚設(shè)置進(jìn)去，清單 1 展示了其中設(shè)置 upSkin 的方法 .downSkin 和 overSkin 的設(shè)置方法相同。
清單 1. Button 控件設(shè)置 upSkin
var btn:Button= … ;
[Embed(source="images/up.jpg",
scaleGridTop="26",
scaleGridBottom="64",
scaleGridLeft="30",
scaleGridRight="106")]
private var upSkin:Class;
btn.setStyle("upSkin",upSkin);
|
清單 1 中，Embed 標(biāo)簽內(nèi)的 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 屬性涉及到一種 Web 技術(shù)，名為九宮格的縮放技術(shù)，為了解釋該技術(shù)，請(qǐng)先看圖 1.
圖 1. 九宮格原理圖 
注：原圖是
，5 * 5 方格圖，每個(gè)方格 4 個(gè)像素，上圖是被放大后的效果
圖 1 在四條紅線的位置把圖片塊成了 9 塊，四個(gè)角，四條邊和中間一塊，在縮放的時(shí)候，四個(gè)角始終不變，兩條橫向邊只縮放寬度，高度不變，兩條縱向的邊只縮放高度，寬度不變，中間一塊寬和高同時(shí)縮放，這就是九宮格縮放的原理。這種技術(shù)一般是在使用圖片做控件的皮膚時(shí)使用，很多控件的皮膚樣式，在四個(gè)角的為位置是圓的或不規(guī)則的，所以使用這種縮放技術(shù)可以保證控件與圖片的大小不一致的時(shí)候，圖片看起來(lái)并不變形。
了解了九宮格技術(shù)再看 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 四個(gè)屬性，它們分別代表圖 1 中四條紅色切割線的位置，scaleGridTop 代表橫向頂部的切割線距離圖像頂部的像素距離；scaleGridBottom 代表橫向底部的切割線距離圖像頂部的像素距離；scaleGridLeft 代表縱向左部的切割線距離圖像左部的像素距離；scaleGridRight 代表縱向右部的切割線距離圖像左部的像素距離。
通過(guò)上述技術(shù)和方法的使用，具體實(shí)例效果展示如圖 2. 從左至右分別是 upSkin、downSkin、overSkin 的效果。
圖 2. 位圖實(shí)現(xiàn)效果展示圖 
SWF 文件實(shí)現(xiàn)
SWF 文件實(shí)現(xiàn)就是用 SWF 文件中具體的某一幀（MoiveClip）作為控件皮膚，修改 位圖實(shí)現(xiàn)部分的 Embed 標(biāo)簽，構(gòu)建的新的示例，如清單 2.
清單 2. 使用 SWF 具體某幀作為皮膚
<mx:Style>
Button{
up-skin:Embed(source="images/bg.swf",symbol="btnUP");
over-skin:Embed(source="images/bg.swf",symbol="btnOVER");
down-skin:Embed(source="images/bg.swf",symbol="btnDOWN");
}
</mx:Style>
<mx:Button id="btn" label="Hello World" width="100" height="60"/>
|
上面代碼 Embed 中的 source 指向了一個(gè) SWF 文件，沒(méi)有與九宮格相關(guān)的布局屬性，出現(xiàn)了新的屬性：symbol，它是 SWF 文件中某一幀的標(biāo)識(shí)符，意思是使用指定的幀作為皮膚。清單 2 的效果如圖 3. 從左至右分別是 upSkin、downSkin、overSkin 的效果。
圖 3. SWF 實(shí)現(xiàn)效果展示圖 
這種特殊的 SWF 文件需要用到 Flash 開(kāi)發(fā)工具，具體的開(kāi)發(fā)方法讀者可以查閱相關(guān)的 Flash 資料。
冒泡信息提示框
冒泡信息提示框是自定義的 ToolTip，傳統(tǒng)的 Flex ToolTip 效果如圖 4 所示。
圖 4. 傳統(tǒng) ToolTip 
可以看到效果還是比較簡(jiǎn)陋的，為了增強(qiáng)用戶體驗(yàn)，文章實(shí)現(xiàn)了新的 ToolTip 讓其擁有冒泡效果，效果展示如圖 5.
圖 5. 冒泡 ToolTip 
冒泡 ToolTip 的思想是新建名為 BubbleToolTip 的類，繼承于 Canvas，實(shí)現(xiàn) IToolTip 接口，IToolTip 是自定義 ToolTip 必須實(shí)現(xiàn)的接口。重寫(xiě) BubbleToolTip 的 updateDisplayList 方法，目的是重新繪畫(huà) BubbleToolTip 的皮膚，皮膚的繪制依賴 BubbleToolTip 內(nèi)部的 Graphics 對(duì)象，通過(guò) this.graphics 語(yǔ)句可以獲得該 Graphics 對(duì)象的引用，調(diào)用 Graphics 對(duì)象的 drawRoundRect 方法繪制冒泡的圓形，提示的具體內(nèi)容則使用子對(duì)象 Canvas 存放。清單 3 是 BubbleToolTip 的 updateDisplayList 方法代碼。
清單 3. BubbleToolTip 的 updateDisplayList 方法
override protected function updateDisplayList(
unscaledWidth:Number, unscaledHeight:Number ) : void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );
this.graphics.clear();
this.graphics.beginFill( getStyle('backgroundColor'), 1 );
this.graphics.lineStyle(2, getStyle('borderColor'), 1);
this.graphics.drawRoundRect(0, 35, 6, 6, 24, 24);
this.graphics.endFill();
this.graphics.beginFill( getStyle('backgroundColor'), 1 );
this.graphics.lineStyle(2, getStyle('borderColor'), 1);
this.graphics.drawRoundRect(10, 25, 15, 15, 24, 24);
this.graphics.endFill();
}
|
清單 3 的作用是繪畫(huà)圖 5 中黑色的兩個(gè)圓圈，顯示 Hello 信息的則是使用 Canvas 組件，該 Canvas 是在主 MXML 文件中定義，代碼如清單 4 所示。
清單 4. 使用 BubbleToolTip 的 MXML 文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:component="component.*" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script><![CDATA[
import mx.events.ToolTipEvent;
import component.BubbleToolTip;
private function createCustomTip(title:String,event:ToolTipEvent):void {
var bt:BubbleToolTip = new BubbleToolTip();
bt.text=title;
content.text = title;
bt.addChild(ppp);
ppp.visible=true;
event.toolTip = bt;
}
private function positionTip(event:ToolTipEvent):void{
event.toolTip.x=event.currentTarget.x + event.currentTarget.width + 10;
event.toolTip.y=event.currentTarget.y;
}
]]></mx:Script>
<mx:Button id="b1"
label="Hello world" x="60" y="60"
toolTip=" "
toolTipCreate="createCustomTip('Hello World',event)"
toolTipShow="positionTip(event)"
/>
<mx:Canvas id="ppp" visible="false" width="50" height="40" cornerRadius="15"
borderColor="#000000" x="35" y="0" borderStyle="solid" borderThickness="2">
<mx:Text id= "content" text="xixi" x="4.5" y="5" width="40" height="23.5">
</mx:Text>
</mx:Canvas>
</mx:Application>
|
清單 4 中定義了存放信息的 Canvas ,id 為 ppp，首先設(shè)置 ppp 的 visible 為 false，不可見(jiàn)，在顯示 ToolTip 的時(shí)候?qū)?ppp 加到 BubbleToolTip 中，并且設(shè)置 ppp 為可見(jiàn)。設(shè)置 event.tooltip 為指定的 BubbleToolTip 對(duì)象。在 createCutomTip 方法中設(shè)置新的 ToolTip，在 positionTip 方法中定義 tooltip 的顯示位置。
為了形象的表現(xiàn)出重寫(xiě) updateDisplayList 方法前后的 BubbleToolTip 的對(duì)比，圖 5顯示的是重寫(xiě)后彈出的信息提示框，圖 6 是不重寫(xiě) updateDisplayList 的信息提示框，從兩張圖片可以看出重寫(xiě)后發(fā)生的變化。
圖 6. 不重寫(xiě) updateDisplayList 方法的 BubbleToolTip
可以看到子對(duì)象的 Canvas 前后不變，因?yàn)椴](méi)有重寫(xiě)它的 updateDisplayList，而重寫(xiě) BubbleToolTip 的 updateDisplayList 方法后邊框變成了兩個(gè)冒泡。注意 BubbleToolTip 對(duì)象實(shí)際上也是一個(gè) Canvas。
網(wǎng)格背景
網(wǎng)格背景在一些 Flex 流程編輯器中可以看到，畫(huà)布的網(wǎng)格背景不僅可以增強(qiáng)用戶體驗(yàn)，對(duì)于流程編輯中的流程節(jié)點(diǎn)的對(duì)齊也有很大的幫助。
網(wǎng)格背景的容器使用畫(huà)布 Canvas 對(duì)象，使用 CSS 重新定義容器的皮膚。定義新皮膚的 CSS 代碼如清單 5.
清單 5. CSS 定義新皮膚 Canvas
{
borderSkin: ClassReference("skins.GridSkin");
}
|
skins.GridSkin 是一個(gè) Flex 類，繼承于 ProgrammaticSkin，ProgrammaticSkin 類代表編程式的皮膚定義，重寫(xiě)它的 updateDisplayList 方法可以設(shè)置新的皮膚，這和直接重寫(xiě) Canvas 的 updateDisplayList 方法效果上是一致的，本文重在講解新的定義方法，因此使用 CSS 定義。清單 6 顯示網(wǎng)格定義的代碼。
清單 6. ProgrammaticSkin 的 updateDisplayList 實(shí)現(xiàn)代碼
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
var g:Graphics = this.graphics;
g.clear();
g.beginFill(0x000000, 0);
g.drawRect(0, 0, unscaledWidth, unscaledHeight);
g.endFill();
g.lineStyle(1, 0x000000, 0.1);
var squareSize:Number = 15;
var numRows:Number = unscaledHeight / squareSize;
var numCols:Number = unscaledWidth / squareSize;
for(var row:Number = 0; row< numRows; row++) {
g.moveTo(0, row * squareSize);
g.lineTo(unscaledWidth, row * squareSize);
}
for(var col:Number = 0; col< numCols; col++) {
g.moveTo(col * squareSize, 0);
g.lineTo(col * squareSize, unscaledHeight);
}
}
|
清單 6 中的 unscaledWidth 和 unscaledHeight 代表了 Canvas 畫(huà)布實(shí)際的寬和高，畫(huà)布內(nèi)的 Graphics 對(duì)象默認(rèn)的繪畫(huà)原點(diǎn)是畫(huà)布左上角（0,0）點(diǎn)。代碼 drawRect(0, 0, unscaledWidth, unscaledHeight) 用于繪畫(huà)整個(gè)畫(huà)布的邊框，lineStyle(1, 0x000000, 0.1) 設(shè)置將要畫(huà)的線的樣式，黑色、透明度 0.1、粗細(xì) 1，squareSize 定義網(wǎng)格的大小（網(wǎng)格為正方形）。通過(guò) unscaledHeight / squareSize 和 unscaledWidth / squareSize 獲得畫(huà)布允許的行數(shù)和列數(shù)，moveTo 移動(dòng)繪畫(huà)原點(diǎn)，lineTo 表示從原點(diǎn)到目標(biāo)點(diǎn)畫(huà)線。For 循環(huán)代表每畫(huà)一行（列），原點(diǎn)向下（右）移動(dòng) squareSize 的距離，再?gòu)脑c(diǎn)平行畫(huà)直線到畫(huà)布右邊緣（底邊緣）。那么網(wǎng)格效果就出來(lái)了 . 效果如圖 7 所示 .
圖 7. 網(wǎng)格背景效果 
圖像圓角
圖像圓角是 Web2.0 重要的標(biāo)志，如果你用過(guò) CSS 進(jìn)行圓角的開(kāi)發(fā)，那么不管在開(kāi)發(fā)過(guò)程中或者處理瀏覽器兼容問(wèn)題時(shí)一定會(huì)大喊痛苦。然而在 Flex 中，圖像圓角變的非常簡(jiǎn)單，使用 Mask 技術(shù)就可以輕松得實(shí)現(xiàn)。這種技術(shù)的直觀感覺(jué)是將某一控件 A 覆蓋在另一控件 B 之上，而 B 顯示的部分則是被 A 遮蓋的部分。如果 A 具有透明度，那么 B 也會(huì)有透明度。例子代碼如清單 7. 所示。
清單 7. 圖像圓角組件
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:filters="flash.filters.*"
width="100%" height="100%" >
<mx:Image source="assets/ygy.jpg" x="10" y="10" mask="{maskCanvas}">
<mx:filters>
<filters:DropShadowFilter />
</mx:filters>
</mx:Image>
<mx:Canvas x="81" y="62" width="344" height="274" backgroundColor="#ff0000"
id="maskCanvas" cornerRadius="15" borderStyle="solid"/>
</mx:Canvas>
|
清單 7 中圖像圓角組件實(shí)際上是一個(gè) Canvas，該組件內(nèi)顯示的是一個(gè) Image（A），該 Image 指定 mask 為 maskCanvas，也就是一個(gè) id 為 maskCanvas 的 Canvas（B），代碼的意思是使用 B 遮蓋 A，那么 B 的樣式?jīng)Q定了 A 顯示的樣式，B 的樣式中重要的是 backgroundColor 和 cornerRadius，backgroundColor 設(shè)置成紅色，并不透明，cornerRadius 設(shè)置 B 的圓角（注意，Image 沒(méi)有這個(gè)屬性），那么使用深色的 B 遮蓋 A，A 將顯示被 B 遮蓋的部分，也就是顯示了圖像的圓角，效果如圖 8。
圖 8. 圖像圓角效果 
該效果使用的原圖像如圖 9 所示。這是一張方形的圖像。
圖 9. 原圖像
從清單 7 的 Design 視圖可以看出 A 和 B 的遮蓋結(jié)果，效果如圖 10。
圖 10. Design 視圖 
原圖像主要內(nèi)容被紅色背景的 Canvas 遮蓋，四個(gè)角沒(méi)被遮蓋因此運(yùn)行時(shí)則不被顯示。運(yùn)行后效果就會(huì)如圖 8 所示了。