Archive for the ‘Actionscript’ Category

HFCD: 快速Flex編譯器

Friday, July 2nd, 2010

HFCD( Hell Fire Compiler Daemon ) 是由 Clement Wong(http://stopcoding.wordpress.com/)開發的,他原本是Flex SDK team的一員負責compiler的種種(難怪XD)。
如果你也常維護比較大的Flex專案,我想會很需要節省每次重新compile的時間的,實際測試過之後,比官方編譯器大約快了一倍(個人感覺啦)。安裝的方法如下:

  1. 到:
    http://bytecode-workshop.com/#section=downloads
  2. 下載: 3.5/4.0 的安裝檔
  3. 安裝, 設定eclipse home(例: C:\Program Files\Adobe\Adobe Flash Builder 4 Plug-in\eclipse-host-distro), sdk home, workspace dir 要正確
  4. 啟動HFCD daemon
  5. 打開FlashBuilder
  6. 到你的專案properties, 變更 compiler 為 HFCD 3.5/4.0
  7. 完成

Google Chrome 與 Adobe Flash Player 攜手合作

Friday, April 2nd, 2010

原文連結:
Chrome Blog

Adobe Flash Blog

簡單來說,Chrome目前會做三件事:

  • Chrome 會自動下載最新版本Flash Player ,不用分開安裝
  • Chrome 會自動更新最新版本Flash Player ,不用自己手動更新
  • Chrome 會擴大Flash Player 對瀏覽器的控制範圍

Google、Adobe、Mozilla 正再製作下一帶的瀏覽器外掛API,使Flash Player之間的互動更加密切,不用ExternalAPI去控制Javascript和HTML DOM 了。

update:
下載Google chrome dev 版本後,要記得加上啟動參數:

-enable-internal-flash

然後啟動chrome會看到:

這樣應該就行了 :)

利用GroupingCollection幫你分組

Friday, March 26th, 2010

有些時候我們有一堆資料物件, 需要根據物件的某個屬性值作分類, 最直接的方法就是跑個迴圈,如:

var hash:Object = {};
for each( var obj:Object in objectList )
{
//檢查obj的屬性值
if( obj.name in hash )
hash[obj.name].addItem( obj );
else
hash[obj.name] = new ArrayCollcetion([obj]);
}

//結果就是根據 obj.name 值分類好的hashmap

但我們可以利用Flex的GroupingCollection幫我們作這個工作, 而且過程封裝的更好:

var groupingCollection:GroupingCollection();
var gping:Grouping = new Grouping();
var field:GroupingField = new GroupingField("你要分群組的屬性名稱");
//給予要群組的屬性, 可有多個GroupingField,
//會依序群組, 非常類似SQL::GROUP BY
gping.fields = [ field ];

groupingCollection.grouping = gping; //設定Grouping
groupingCollection.source = 原始資料 (通常是ArrayCollection);
groupingCollection.refresh(); //叫GroupingCollection開始工作

//重要的來了, 呼叫getRoot()取得GroupingCollection幫我們分群好的資料:
//結果通常是一個新的ArrayCollection, 裡面有多個Object ,
//每個 Object 有一個children屬性, 包了分組好的物件(原物件)
//Object本身有個預設的GroupLabel屬性,是根據你的資料內容的群組名稱
var result:Object = groupingCollection.getRoot();

預設的GroupLabel屬性名可以透過: Grouping#label 改成你想要的屬性名稱。
或許你會覺得這哪裡好,比一開始的還要複雜很多,其實他的威力不只是分群,還可以幫你分群作加總、求最大/最小值/平均值的功能呢,利用 SummaryRow 就可以輕鬆作到喔!

var summaryRow:SummaryRow = new SummaryRow();
var smryField:SummaryField = new SummaryField("price","SUM"); //price ==> 要處理的屬性名稱
summaryRow.fields = [smryField];
var groupField:GroupingField = new GroupingField( "name" );
groupField.summaries = [ summarRow ] ;
...參考上方

上述結果是一個根據物件的”name”屬性分組,並且根據物件的”price”屬性作加總的GroupingCollection。同樣地利用getRoot();取得結果,可以看到新建立出來的Object#children除了有分群好的物件之外,還多出了SummaryObject,裡面就是幫我們算好的值。

補充:

自訂群組結點的標籤產生方式:

GroupingField#groupingFunction :
自訂group object#label的方法,在label不是單單靠某屬性值就能解決的情況,特別好用。 ex: 想作出一個group#lable = vo.name + vo.lastName + vo.id
signature:

groupingFunction(item:Object, field:GroupField):String

特別注意的: 當你覆寫了這個方法同時,記得也要覆寫 GroupingField#compareFunction,因為GroupingCollection建立GroupingCollectionView的時候會先對原始內容(來源ListCollectionView)排序,再產生Grouping(這樣效能比較好)。因此假設你的compareFunction並沒有寫好,那麼你會常常看到同一個群組結點標籤出現在不同的群組結點上。如果你不想用compareFunction,那麼,至少GroupingField#name的值對排序要有意義。

自訂群組結點物件內容:

GroupingField#groupingFunction :

產生group object的方法,當你不想要用預設的groupobject + label的方法,可用此方法自訂一Grouping Object的結構。
signature: myGroupObjectFunction(label:String):Object

Embeded font

Saturday, December 19th, 2009

常用的Embeded font 寫法,從Adobe手冊抄來的:
重點是: 用同一個Font Family Name 但是Embed不同的Font Face, 這樣可處理大部分的字型問題,不然,常常會有字形粗體時跑回Arial, Tahoma 的情況。

@font-face {
        src:url("../assets/MyriadWebPro.ttf");
        fontFamily: myFont;
        advancedAntiAliasing: true;
     }

     @font-face {
        /* Note the different filename for boldface. */
        src:url("../assets/MyriadWebPro-Bold.ttf");
        fontFamily: myFont; /* Notice that this is the same alias. */
        fontWeight: bold;
        advancedAntiAliasing: true;
     }

     @font-face {
        /* Note the different filename for italic face. */
        src:url("../assets/MyriadWebPro-Italic.ttf");
        fontFamily: myFont; /* Notice that this is the same alias. */
        fontStyle: italic;
        advancedAntiAliasing: true;
     }

see:
http://livedocs.adobe.com/flex/3/html/help.html?content=fonts_04.html#133099

[Embed(systemFont='Myriad Web Pro',
        fontStyle='italic',
        fontName='myItalicFont',
        mimeType='application/x-font',
        advancedAntiAliasing='true'
     )]
     private var font2:Class;

好用的Flash Builder 快速鍵( hotkey )

Friday, November 13th, 2009

這也是從Adobe TV的MAX2009 session 聽來的,完整版請到adobe.tv看。

  • Ctrl+3 : 顯示快速command列表, 可以type-and-search執行所有的eclipse command
  • Ctrl + I : 自動縮排的妙用: 由別的文字檔貼過來的文字,全選後按下此快速鍵會自動排列。文字游標(I-Beam)移到任何地方按下此快速鍵,自動移到應該要去的地方,省得你按一堆tab和space
  • Ctrl+Shift+T:是open type, 這個大家都知道,但是奧妙在type-search的地方,可以打camel case string 作為搜尋;甚至可以用wildcard search. 舉例來說,想打開AdvancedDataGrid, 不用打Adv…去找,可打ADG就好( AdvancedDataGrid )。用wildcard search: 打 *skin 會列出所有 XXXskin相關的classes
  • Code assist : Alt+. (預設) 可以重複按,會自動filter分類,本來是顯示所有的屬性,每一次會顯示各類別: property, style, event

用Google Analytics 分析Flex應用程式

Tuesday, November 10th, 2009

Google 真的太威了…

安裝說明:
http://code.google.com/apis/analytics/docs/tracking/flashTrackingSetupFlex.html#getTheLibrary
取得library:
http://code.google.com/p/gaforflash/

注意:
GA tracking 的結果,不是及時的!
測試不是能夠直接看到結果的,必須等待幾個小時再到Google Analytics網站看報告。

你也在寫Flex嗎? 那你可能要特別注意…

Tuesday, November 10th, 2009

本篇文章來自MAX2009的session:
How Not to code FLEX

演講者主要說明何謂壞程式碼(bad code),但也說壞程式碼不一定不好,只要你確定能盡快回來改正他。那何謂壞程式碼?

  • Container 元件的誤用:Container元件諸如Box, Canvas, Tile等等,他們的原本目的都是: 排列裡面的子元件。因此只要你不是拿來排版或甚至沒有給予它任何的子元件,就違背原本用意了。
    例子:

    <mx:TextInput/>
    <mx:VBox backgroundImage="blah.png" borderStyle="solid"/> <!-- 你看, 沒有小孩的容器元件-->
  • ListBase 元件的誤用: List, TileList, DataGrid 都是用來針對列表物件的選取、排序、renderer回收而生,因此,當你想要製作的元件並不需要這些功能,就不該採用List來處理。
  • local model binding: 避免直接將值給UI元件,盡量用local model binding來處理。(按:此方法還可避免元件初始化延遲所帶來的問題)
    ex:

    <mx:script>

      //這樣是不好的
      function test():void
      {
         myLabel.text = "hello";
      }

    </mx:script>
    <mx:Label id="myLabel"/>
    <mx:Script>
    //用local model binding.
    [Bindable]
    private var helloText:String = "hello";
    </mx:Script>
    <mx:Label id="myLabel" text="{helloText}"/>
  • 別把local view event 交由非常上層的元件處理。(按:這裡必須搭配cairngorm microframework 來解釋 )
    元件與元件之間的訊息傳遞,如果能在local就解決,便盡量不要拋到上層的command-frontcontroller 去處理然後又繞回來”原本的元件”。以後維護會很辛苦。
  • 不適當的容器元件使用方法:
    如果你發現你的容器元件裡面只有一個子元件(child),那可能有問題。
  • Two dots and you are out.
    兩個參照你就出局囉!

    如果你的程式碼需要進入非常多的子元件,那就有問題了。如下:

    var hey:String = myBox.thisBox.thatBox.rightLabel.text;

    這是一個本質上的問題,應該要封裝這些子元件,若其他元件需要存取裡面的值,應該要透過Event(帶資料出來) 來幫你。

  • 自以為的聰明寫法並不好。
    這種情況會發生在複雜的binding寫法,像是:

    <mx:Button id="btn" enabled="{ isCheck &amp;&amp; ( firstBtn.enabled &amp; !secondBtn.enabled) &amp;&amp; (thirdBtn.enabled|| feelGood) }"/>

    應該要用function 去處理這些binding 邏輯:

    <mx:Script>
    private function getEnabled( a:Boolea , b:Boolea , c:Boolean , d:Boolean , e:Boolean ):Boolean
    {
    //邏輯應該在這裡描述啦:
    return a && (b&&!c) &&(d||e);
    }
    </mx:Script>
    <mx:Button id="btn" enabled="{ getEnabled(isCheck,firstBtn.enabled,secondBtn.enabled,thirdBtn.enabled,feeGood) }"/>

Adobe 官方推出拼字檢查元件( Squiggly ) for Flash/Flex

Thursday, September 24th, 2009

念法:
Squiggly [ˈskwigli] DJ [ˈskwɪglɪ] KK

下載:
http://labs.adobe.com/downloads/squiggly.html
Demo:
http://labs.adobe.com/technologies/squiggly/demo/

使用: Flex Unit Test Framework

Friday, September 11th, 2009

因應 XP 開發手法的趨勢,Adobe也推出FlexUnit: Unit test framework。但我個人覺得,Flex主要是關連到UI的,而UI的測試,光靠FlexUnit不夠的,用人測最直接。然而,通常你找不到那個人。

下載地點:Adobe open source project: Flex unit

何謂Unit Test? 簡單地來說:就每個Method當成一個unit(單位),測試之。在XP的開發過程中,是測試導向開發,什麼是”測試導向”? 就是:每次要寫新功能的時候,不是先寫功能的運作方法,而是先寫『測試該功能的程式』,換言之,我們要以”通過測試”為方向,去開發新功能的程式。因此,我們的開發流程往往是: 先寫空白的功能程式,譬如一個空的方法: getSomeResult(),然後先寫測試碼(test case),像是: testGetSomeResult() 然後寫上我們”預期的”測試結果,立刻跑一次test runner,當然,不會過關,立刻回頭撰寫getSomeResult()內容,讓它正確通過test case,那麼getSomeResult()即開發完成 。(見下方的步驟)

這樣的好處,除了確保開發出來的功能可以通過測試;往後的重構(refactor)或是需求變更,都可以再次把unit test 列出來跑一次,確保原來的功能沒有毀掉。
使用步驟:

  1. 建立TestRunner
  2. 寫TestCase/TestSuite並加入TestRunner
  3. 跑TestRunner
  4. 看結果,修改原始碼,回到(2)

例子:

//這是要被測試的class method

public class MyApp
{
      public function getSomeResult( input:Number ):Number
      {
           //這裡放入真正的邏輯...
           return input/10;
       }
}
//這是測試code( Test Case 不會用在真的主程式裡 ) : MyTestCase.as
private var classToTestRef:MyApp;
public function testGetSomeResult():void
{
     classToTestRef = new MyApp();
       /*assertEquals : 意思是兩個參數的值結果應該要一樣,
    如果不一樣test 就失敗(fail),你會在TestRunner看到
      底下這個例子會過!
       */

     assertEquals(  100 , classToTestRef.getSomeResult( 1000 ) );
      //這個不會過
     assertEquals(  2, classToTestRef.getSomeResult( 1000 ) );
      //還有許多assertXXX可以用,請見官方文件
}

特別要強調的是,針對Event處理的測試要怎麼寫? 因為Event發出的時間往往有時間差,並不即時。FlexUnit體貼地加上了一個addAsync() 的方法,幫助我們測試event listeners。寫法如下:

addAsync( eventListener:Function/*放置assertion的listener*/ , timeout:int /*過了多少時間(ms)就算失敗?*/);
public function testVeryComplexCalulation():void
{
    //用addAsync() 把test case 延遲檢查:
    instanceToTest.addEventListener( Event.COMPLETE ,
    addAsync( onComplete , 1000 /*設定:1秒沒發生就算測試失敗*/) );  
    instanceToTest.run();
}

//在 event listener 裡面才寫 assertions:
private function onComplete( event:Event ):void
{
   assertNotNull( instanceToTest.result );
}

Event, EventDispatcher, Listener

Thursday, August 13th, 2009

這三者的關係,可以用一個情境來解釋:
總機先生,電話機,通話內容。

總機先生是 Listener
電話是 EventDispatcher
通話內容是 Event

通話內容必須透過電話傳達出去,出去之後就由總機先生立刻接聽;此外,一通電話內容可以讓無限個總機接聽(想像把電話機設定成擴音模式)。這個模式的作用在於,讓總機先生在『適當的時間』,做『適當的事』,比如說,一接到找老闆的電話,就要先問:『您是哪位?』此時『一接到電話』就是Event 透過EventDispatcher 發出來了,又正好總機監聽著電話狀態,所以總機立刻根據電話內容(event),做了特定的事情(問:您是哪位?)。再舉個例子,像是接到愛慕的A氏,就回答:『哈囉你好嗎?』 這兩種回達都是一個Listener ,根據不同的事件,定義不同的listener。

Listener 在 AS3.0 的世界,規定要寫成:

function functionName( event:Event ):void

要監聽某個電話就要寫成:
myPhone.addEventListener( eventType , myListener );
其中eventType是個字串,代表事件的類別(老闆打的還是同事打的),myListener 就是呼應的動作。要特別強調的是,在AS的世界裡,當一個Event被dispatch出來之後,對應的listener幾乎『沒有時差』就發動,因此我們常遇到UIComponent繪製畫面不如預期,這時可在listener之中利用 callLater 來針對UIComponent操作,利用callLater的延遲是比較正統的作法。