![]() |
一篇翻譯的文章,來(lái)自 The Kiwi Project ,這種方法很有用,但是唯一的問(wèn)題就是,在加載皮膚的過(guò)程中,用戶等待的問(wèn)題。如果皮膚文件比較大,沒(méi)有加載上來(lái)之前,程序可以說(shuō)是無(wú)反應(yīng)的,這樣需要我們以某種方式提醒用戶當(dāng)前程序的工作。 文中需要的資源文件列在下面: 皮膚模板 wrapper swf 例子 源碼 實(shí)時(shí)加載 Flex 皮膚 目前,有很多關(guān)于如何在你的 Flex 程序中繪制皮膚的資源。 概述:Flex 支持兩種繪制皮膚的方法:貼圖和編程。貼圖皮膚是在Flash、Photoshop、Firework等軟件中創(chuàng)建皮膚資源圖像,然后將他們導(dǎo)入(embed)到 Flex 程序中;編程皮膚是建立一個(gè)通過(guò)程序定義一個(gè)控件皮膚的 ActionScript 類。你可能猜到,貼圖皮膚比較簡(jiǎn)單,編程皮膚可以實(shí)現(xiàn)更加豐富的效果。 這兩個(gè)方法都有一個(gè)共同的缺點(diǎn)是,皮膚資源(對(duì)于貼圖來(lái)說(shuō)是 SWF/PNG/GIF 等文件,對(duì)于編程來(lái)說(shuō)是那個(gè) AS 類)必須在程序編譯時(shí)就被包括。怎么改進(jìn)呢?在這篇文章中我將演示一個(gè)如何實(shí)時(shí)加載貼圖皮膚的巧妙方法。 為了使這個(gè)例子盡可能的簡(jiǎn)單,我僅建立一個(gè)只有一個(gè)按鈕的 Flex 程序,這個(gè)按鈕的皮膚是動(dòng)態(tài)添加的。本程序?qū)?shí)時(shí)取得一個(gè)皮膚 SWF 文件,加載皮膚,然后把它們應(yīng)用到按鈕上。 第一步:為皮膚資源建立一個(gè)外殼 SWF 目的,有了這個(gè)外殼 SWF,我的 Flex 程序就可以實(shí)時(shí)加載皮膚中適當(dāng)?shù)馁Y源 package { import flash.display.Sprite; public class Wrapper extends Sprite { [Embed(source="flex_skins.swf",symbol="RadioButton_upIcon")] public var rbUpSkin: Class; [Embed(source="flex_skins.swf",symbol="RadioButton_downIcon")] public var rbDownSkin: Class; [Embed(source="flex_skins.swf",symbol="RadioButton_disabledIcon")] public var rbDisabledSkin: Class; [Embed(source="flex_skins.swf",symbol="RadioButton_overIcon")] public var rbOverSkin: Class; } } 譯者注:上面代碼需要用 mxmlc 編譯,不用使用 Flex Builder 去建項(xiàng)目。 第二步:將這個(gè)外殼 SWF 放到服務(wù)器上 Flex 程序需要從某個(gè)地方加載皮膚呀。 第三步:在 Flex 程序中使用 Loader 加載外殼 SWF 我建了一個(gè)比較實(shí)用的類 ClassLoader 來(lái)加載 SWF 文件,并且將其轉(zhuǎn)化為類。以下是一些關(guān)鍵行: loader = new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler); loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler); ... request = new URLRequest(swfLib); var context:LoaderContext = new LoaderContext(); context.applicationDomain = new ApplicationDomain(ApplicationDomain.currentDomain); loader.load(request, context); 第四步:從加載的 SWF 中生成類,然后實(shí)例化 var wrapperClass:Class = loader.contentLoaderInfo.applicationDomain.getDefinition(className) as Class; var wrapper:Object = new wrapperClass(); 第五步:利用 setStyle 應(yīng)用皮膚 這個(gè)很簡(jiǎn)單了。 StyleManager.getStyleDeclaration("Button").setStyle("upSkin", wrapper.rbUpSkin); StyleManager.getStyleDeclaration("Button").setStyle("downSkin", wrapper.rbDownSkin); StyleManager.getStyleDeclaration("Button").setStyle("disabledSkin", wrapper.rbDisabledSkin); StyleManager.getStyleDeclaration("Button").setStyle("overSkin", wrapper.rbOverSkin); 第六步:運(yùn)行程序 那么為什么要這么做呢?動(dòng)態(tài)的皮膚提供給你一個(gè)難以置信而格外有力的功能:你可以讓你的用戶在你的程序上使用他們自己的皮膚。想象一下一個(gè)像 Winamp 的 Flex Mp3 播放器。開(kāi)發(fā)人員并不需要為程序建立一個(gè)皮膚庫(kù),任何人都可以發(fā)布一個(gè) UI 通過(guò)設(shè)置皮膚 SWF (可能在一個(gè)配置窗口中)讓用戶選擇任一在社區(qū)中提供的皮膚。同樣重要的,開(kāi)發(fā)者也有能力來(lái)控制哪個(gè)皮膚可以被替換,哪個(gè)皮膚只能使用原來(lái)的皮膚(僅僅對(duì)相應(yīng)的控件調(diào)用 setStyle 即可)。最后,將皮膚放到程序的外面,可以有效的保持程序的體積不會(huì)太大,肯定要比包含皮膚時(shí)要小 |
聯(lián)系客服