2011年6月30日

Flex Builder 自定義assist按鍵

在最新的FlexBuilder4.5中,我們終於可以自己定義快速assist的方法,自訂方法如下面圖片說明





虛擬化(Virtualization)的意義

首先先說明個情況,假設有個List表單,一次最多顯示10筆記錄,假設我們現在有100筆資料,那麼我們該為那100筆資料都建立可視介面或是只建立10筆呢?

這答案是很明顯的,既然其他的資料是不可視的那何必去顯示降低效率呢!!

虛擬化(Virtualization)的意義也就是如此,它只建立使用者看的到的視覺物件,當我們使用滾軸看不到的物件將被移除給新的將被看到的物件,這樣的機制使得我們的系統更有效率。

實際上使用虛擬化的方式,只需要將版面配置元件的useVirtualLayout設為true就可以啟動了

<s:layout>
    <s:VerticalLayout useVirtualLayout="true"/>
</s:layout>

DataGroup 與 List

DataGroup類別與list類別一樣都是使用在多筆資訊顯示的目的,它們兩者都可以透過資料提供者(dataProvider)來做資料的綁定,但它們也有些許的不同,像是List可以管理清單中被點擊的部分,透過API得知誰被點選了。

簡單的DataProvider使用方法
<s:List x="10"
        y="10"
        dataProvider="{this.dp}"
        labelField="name"
        itemRenderer="NavigationItem">
</s:List>

我們觀看上面有幾個部分必須說明的 :
首先是dataProvider部分,在這個例子中我們綁定的對象dp它是一個ArrayCollection類別,我們在一開始對它進行初始化的工作,然後使用資料綁定的方式將它綁定到List元件上,初始化的方式如下 :
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        private var dp:ArrayCollection;

        private function initDataSource():void
        {
            var array:Array=new Array();

            var o1:Object=new Object();
            o1.name="String1";
            o1.address="Address1"

            var o2:Object=new Object();
            o2.name="String2";
            o2.address="Address2"

            var o3:Object=new Object();
            o3.name="String3";
            o3.address="Address3"

            array.push(o1);
            array.push(o2);
            array.push(o3);

            dp=new ArrayCollection(array);
        }
    ]]>
</fx:Script>

在來是labelField的部分,這個屬性用來指定我們的List將要顯示綁定資料的哪個屬性,例如我們指定labelFieldname,那麼最後在List顯示的將會是Object.name屬性。

也許大家會有個疑問,那假設要顯示多種資訊怎麼辦,是的!!有這個問題存在,因此Flex在這個部分還提供了另一個方式來指定顯示的屬性,它叫做labelFunction,透過自定義的函式我們可以自己定義將要顯示的格式,例如 :
<s:List x="130"
        y="10"
        dataProvider="{this.dp}"
        labelFunction="mutiview">
</s:List>
protected function mutiview(item:Object):String
{
    return item.name + " " + item.address;
}

在來是itemRenderer的屬性,有時候我們可能不想要內建的樣式(Label)來顯示我們List中的資料,因此Flex提供了一個更厲害的機制(Android自定義xml方式雷同),我們可以使用自己定義好的格式將資料綁定到相對應的元件上,這個用來處理要怎麼樣顯示List元件就叫做ItemRenderer,以本例為例子,我們實作了一個名為NavigationItemItemRenderer,然後List就會依這個格式顯示我們的資訊。

NavigationItem.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center"/>
    </s:layout>

    <s:Image width="93"
             height="31"
             scaleMode="stretch"
             source="assets/195283_100000398385599_2595823_n.jpg"/>
    <s:Label text="{this.data.name}"/>
</s:ItemRenderer>


大致上ListDataGroup基本的使用方式為上面所講的這樣囉!!

2011年6月28日

指定為可連結[Bindable]的實際意義

1.當我們使用[Bindable]或是{}作為資料連結時,我們應該了解這是Flex自動幫我們產生對應的程式2.碼
3.資料的連結其實就是事件在背後的傳送與監聽而已
當某個物件產生變化(必須為事件發送器)時,就應該發出事件通知。

通常FlexUI元件都是事件發送器,但並非所有的類別都為事件發送器(event dispather),例如我們自定義的類別,假設有個類別如下

package
{
    public class Person
    {
        public function Person()
        {
            private var name:String;
            private var address:String;
        }
    }
}

在這個情況下,Person類別就不是一個事件發送者,那要如何將它設定為可發送事件的類別呢? 方法很簡單,只要讓Person類裏頭出現[Bindable]標籤,這樣Person在編譯期間,Flex編譯器就會使之成為事件發送器。

package
{
    [Bindable]
    public class Person
    {
        public function Person()
        {
            private var name:String;
            private var address:String;
        }
    }
}

何謂存值物件(Values Object)?

在Flex中實施MVC介紹

待補

2011年6月27日

甚麼是IList

A collection of items organized in an ordinal fashion. Provides access and manipulation methods based on index.
An IList may be a view onto data that has been retrieved from a remote location. When writing for a collection that may be remote, it is important to handle the case where data may not yet be available, which is indicated by the ItemPendingError.

The ICollectionView is an alternative to the IList.

像是ArrayCollection , ArrayList都有實現IList的介面。

遠端資料連接XML/Object?

不管在HT WS RM 回傳的資料預設為Object但我們也可以將它轉換成xml格式(E4X),其中Object格式我們可以將它轉型為資料綁定用的類別,例如ArrayCollectionArrayList,但我們也可以將它轉換成XML格式來做資料綁定,XML格式彈性不高,因此我們可以使用E4X表示式來使XML得到最佳的優化,使得XML更加的迅速、強大。

那到底要使用哪一種呢!!?
其實兩種分別用在不同的場合,各有他們的優缺點,解決不同的問題...

E4X的基本使用方法

ActionScript3.0中,以ECMAScript for XML(E4X)形式提供了原生性的XML支援功能。本篇將會介紹E4X的強大搜尋功能,首先我們必須了解XMLXMLList的差別。

XML
XMLList
<catalog>
    <category name="vegetables1">
</category>
    <category name="vegetables2">
</category>
</catalog>
<category name="vegetables1">
</category>
<category name="vegetables2">
</category>


首先查看上圖,XML具有很強的規則性,每個XML格式必須只能有一個根節點(root),但在XMLList中就沒有這個規定,它可以容許多個根節點,因此我們可以說這個XMLList的長度(length)2

為什麼要介紹這個呢!? 那是因為在E4X中我們所要操控的就是XMLList,當然XML格式也是一種XMLListCASE



首先假設我們目標xml文件如下表顯示 :
<?xml version="1.0" encoding="UTF-8"?>
<catalog>
    <category name="vegetables">
        <product name="lettuce"
                 cost="1.95">
            <unit>bag</unit>
            <desc>Cleaned and bagged</desc>
        </product>
        <product name="carrots"
                 cost="2.95">
            <unit>pound</unit>
            <desc>Baby carrots, cleaned and peeled</desc>
        </product>
    </category>
    <category name="fruit">
        <product name="apples"
                 cost="1.95">
            <unit>each</unit>
            <desc>Sweet Fuji</desc>
        </product>
        <berries>
            <product name="raspberries"
                     cost="3.95">
                <unit>pint</unit>
                <desc>Firm and fresh</desc>
            </product>
            <product name="strawberries"
                     cost="2.95">
                <unit>pint</unit>
                <desc>Deep red and juicy</desc>
            </product>
        </berries>
    </category>
</catalog>


在E4X中我們使用點運算子(.)來操作,這點與我們熟悉的(物件.屬性)操作方式雷同。
以下是一些E4X使用的例子。


一些簡單的查詢表達式 :
表達式
結果
category.product
<product name="lettuce"
         cost="1.95">
    <unit>bag</unit>
    <desc>Cleaned and bagged</desc>
</product>
<product name="carrots"
         cost="2.95">
    <unit>pound</unit>
    <desc>Baby carrots, cleaned and peeled</desc>
</product>
<product name="apples"
         cost="1.95">
    <unit>each</unit>
    <desc>Sweet Fuji</desc>
</product>
category.berries.product
<product name="raspberries"
         cost="3.95">
    <unit>pint</unit>
    <desc>Firm and fresh</desc>
</product>
<product name="strawberries"
         cost="2.95">
    <unit>pint</unit>
    <desc>Deep red and juicy</desc>
</product>


比較複雜的查詢 :
條件搜尋,其中@表示搜尋的目標為屬性
category.berries.product.(@cost=="3.95")
<product name="raspberries"
         cost="3.95">
    <unit>pint</unit>
    <desc>Firm and fresh</desc>
</product>


條件搜尋,對子節點進行比對搜尋
category.product.(unit=="bag")
<product name="lettuce" cost="1.95">
  <unit>bag</unit>
  <desc>Cleaned and bagged</desc>
</product>


介紹的這些方法已經可以用在很多的場合囉!!
如果有更好的知識,請觀看的人不吝賜教 :D

ShareThis