自定義事件並且加入監聽

有時候我們需要自己定義一個事件然後讓我們程式去監聽，這時候我們可以使用下面的方式完成。

步驟一 : 在mxml中加上Metadata標籤，並且在裏頭宣告我們的事件名稱以及事件繼承的類別。

<fx:Metadata>      [Event(name="Clicked", type="flash.events.Event")] </fx:Metadata>

步驟二 : 在系統創建後，將我們的事件加入監聽

protected function application1_creationCompleteHandler(event:FlexEvent):void {     this.addEventListener("Clicked",eventHandler); }

步驟三 : 觸發事件

protected function index_clickHandler(event:MouseEvent):void {     dispatchEvent(new Event("Clicked")); }

物件完成呼叫的函式 : creationComplete()

我們可以使用creationComplete來完成對象程序創建完成後要做的事情

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:mx="library://ns.adobe.com/flex/mx"                minWidth="955" minHeight="600"                creationComplete="application1_creationCompleteHandler(event)" >

protected function application1_creationCompleteHandler(event:FlexEvent):void { }

可以使用trace()函式來做為追蹤(debug)輸出

Scroller 官方原文件說明(待翻譯)

The Scroller component displays a single scrollable component, called a viewport, and horizontal and vertical scroll bars. The viewport must implement the IViewport interface. Its skin must be a derivative of the Group class.

The Spark Group, DataGroup, and RichEditableText components implement the IViewport interface and can be used as the children of the Scroller control, as the following example shows:

<s:Scroller width="100" height="100">         <s:Group>             <mx:Image width="300" height="400"                       source="@Embed(source='assets/logo.jpg')"/>         </s:Group>            </s:Scroller>

The size of the Image control is set larger than that of its parent Group container. By default, the child extends past the boundaries of the parent container. Rather than allow the child to extend past the boundaries of the parent container, the Scroller specifies to clip the child to the boundaries and display scroll bars.

Not all Spark containers implement the IViewPort interface. Therefore, those containers, such as the BorderContainer and SkinnableContainer containers, cannot be used as the direct child of the Scroller component. However, all Spark containers can have a Scroller component as a child component. For example, to use scroll bars on a child of the Spark BorderContainer, wrap the child in a Scroller component.

To make the entire BorderContainer scrollable, wrap it in a Group container. Then, make the Group container the child of the Scroller component, For skinnable Spark containers that do not implement the IViewport interface, you can also create a custom skin for the container that includes the Scroller component.

The IViewport interface defines a viewport for the components that implement it. A viewport is a rectangular subset of the area of a container that you want to display, rather than displaying the entire container. The scroll bars control the viewport's horizontalScrollPosition and verticalScrollPosition properties. scroll bars make it possible to view the area defined by the viewport's contentWidth and contentHeight properties.

You can combine scroll bars with explicit settings for the container's viewport. The viewport settings determine the initial position of the viewport, and then you can use the scroll bars to move it, as the following example shows:

<s:Scroller width="100" height="100">         <s:Group         horizontalScrollPosition="50" verticalScrollPosition="50" >             <mx:Image width="300" height="400"                       source="@Embed(source='assets/logo.jpg')"/>         </s:Group>                     </s:Scroller>

The scroll bars are displayed according to the vertical and horizontal scroll bar policy, which can be auto, on, or off. The auto policy means that the scroll bar will be visible and included in the layout when the viewport's content is larger than the viewport itself.

The Scroller skin layout cannot be changed. It is unconditionally set to a private layout implementation that handles the scroll policies. Scroller skins can only provide replacement scroll bars. To gain more control over the layout of a viewport and its scroll bars, instead of using Scroller, just add them to a Group and use the scroll bar viewport property to link them together.

The Scroller control has the following default characteristics:

Characteristic	Description
Default size	0
Minimum size	0
Maximum size	10000 pixels wide and 10000 pixels high
Default skin class	spark.skins.spark.ScrollerSkin

Flex 在布局上加入滾軸(scroll)

前面的例子中介紹了Flex的布局的四大種模式，但是大家一定有發現，當我們的視圖超出了介面就看不到了，一定很多人疑問為什麼沒有出現滾軸(scroll)，這是因為在flex中預設是不使用滾軸的，因此我們必須自己加上去。

使用方法很間單，在我們的<s:Group>外面再加入一層Scroller元件就可以了(這點跟android中的滾軸一樣)，要注意的是我們必須指定該滾軸的寬與高，否則還是會出現一樣的情況。

<s:Scroller width="300" height="250">     <s:Group>         <s:layout>             <s:TileLayout/>         </s:layout>     </s:Group> </s:Scroller>

PopupWindow使用EditText鍵盤無法響應解決辦法

PopupWindow是一個非常好用的東西，它可以跳出我們的排版以類似對話框的方式顯示我們的UI，但是如果在PopupWindow放進EditText來做為輸入的對話視窗時，會出現一個問題，點擊但不顯示原本因該出現的鍵盤，為什麼呢?

原因 : PopupWindow內的EditText無法取得焦點(focus)
解決辦法 : 在顯示調用setFocusable(true)，並且調用popup window的更新方法。

PopupWindow.setFocusable(true);

PopupWindow.update();

Flex 四個布局類別

在flex中有四種Layout可以來使用分別為BasicLayout、HorizontalLayout、TileLayout、VerticalLayout。

BasicLayout	是默認情況下的，它是用x,y值來決定元件的位置。
HorizontalLayout	是水平的，在這裏面的元件會以水平排放來放置，而HorizontalLayout Height取決於內容物中最高值。
VerticalLayout	是水平的，在這裏面的元件會以垂直排放來放置，而VerticalLayoutHeight取決於內容物中最高值。
TileLayout	是這之中比較複雜的，我也還沒了解，類似於表格有col及row值。

如果要為整個應用程式配置layout屬性，首先必須到Application標籤中加入

<s:layout>         <s:BasicLayout/>     </s:layout>

加入後整個應用程式就會以這個方式作為排版方式，先來看看效果圖

Vectical

Horizontial

BaseLayout

但是有時候我們必須要使永多種Layou來做排版時怎麼半?

這個時候就必須使用Group標籤

使用Group標籤將元件包含並加入該區塊要使用的Layout

<s:Group>         <s:layout>             <s:TileLayout/>         </s:layout>          <components:EmployeeDisplay //你要顯示的原件 </s:Group>

完成

趕快來看看圖片吧!!

使用多重Layout完成!!

Flex Training ex1_04 HTTPService 動態資料綁定

在練習三的時候我們的資料來源是使用當下的Input來決定，但是有時候資料的來源可能是動態的在更動，所以在練習四主要是使用動態綁定的方式來做為資料來源:
資料來源為網路上的XML檔案，我們使用DropList裡面的dataProvider屬性為其綁定。

步驟一 : 在Declarations中宣告我們的HttpService並且指定服務的id以及服務位址

<fx:Declarations>         <s:HTTPService id="employeeService" url="http://adobetes.com/f45iaw100/remoteData/employees.xml" />     </fx:Declarations>

步驟二 : 使用該服務的send()方法得到HTTP響應，注意必須在creationComplete

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:mx="library://ns.adobe.com/flex/mx"                minWidth="955" minHeight="850"                creationComplete="employeeService.send()"                >

步驟三 : 綁定資料到DropList，注意，因為回傳資料型態有名稱、電話等等..所以要指定它的欄位為lastName。

<s:DropDownList id="dropDownList" dataProvider="{employeeService.lastResult.employees.employee}" labelField="lastName" />

完成!!  運行瀏覽器看看結果吧

關於這篇所用到的類別額外學習

<s:HTTPService>

You use the <mx:HTTPService> tag to represent an HTTPService object in an MXML file. When you call the HTTPService object's send() method, it makes an HTTP request to the specified URL, and an HTTP response is returned. Optionally, you can pass parameters to the specified URL. When you do not go through the server-based proxy service, you can use only HTTP GET or POST methods. However, when you set the useProxy property to true and you use the server-based proxy service, you can also use the HTTP HEAD, OPTIONS, TRACE, and DELETE methods.

mx.core.UIComponent.creationComplete

Dispatched when the component has finished its construction, property processing, measuring, layout, and drawing. 
(意思就是當這個元件完成了它初始化的工作，並且可以顯示到畫面上)

DropDownListBase.dataProvider(value:IList):void

The data provider for this DataGroup. It must be an IList.

There are several IList implementations included in the Flex framework, including ArrayCollection, ArrayList, and XMLListCollection.

This property can be used as the source for data binding.

DropDownListBase.labelField(value:String):void

The name of the field in the data provider items to display as the label. If labelField is set to an empty string (""), no field will be considered on the data provider to represent label. The labelFunction property overrides this property.

Flex Training ex1_03 靜態資料綁定

題目技術 : 靜態資料綁定
題目要求 : 自動完成FirstName.LastName@yahoo.com.tw

步驟1 : 為FirstName.LastName設置id

<s:FormItem label="First Name:">             <s:TextInput width="196" id="firstName"/>         </s:FormItem>                 <s:FormItem label="Last Name:">             <s:TextInput width="196" id="lastName"/>         </s:FormItem>

步驟2 : 綁定資料到Email TextInput

<s:FormItem label="Email:">             <s:TextInput                width="196"           text="{firstName.text}.lastName.text}@yahoo.com.tw"             />         </s:FormItem>

需要注意的就是靜態綁定資料的方式為{} 大括弧包住要顯示資料的id然後其屬性text。

JSON - 使用GSON實作

今天在面試的時候，某前輩給我許多在專題上的建議，未來也希望以JSON作為傳輸的主要方式，因此使用了google所提供的GSON來做為JSON解析、反解析的主要方式。

首先甚麼是GSON呢?
Gson is a Java library that can be used to convert Java Objects into their JSON representation. It can also be used to convert a JSON string to an equivalent Java object. 
GSON是一個Java的庫，它用來轉換Java物件到JSON表示或是從JSON表示轉換成Java物件。


為什麼要使用GSON?
從google上面的說明可以得到GSON是可以達到Java泛型轉換的效果，這點在許多其他Lib是還沒有做到的。


今天練習了一個小小的demo，首先定義了一個Person類別，其中擁有了四個屬性分別為名字、密碼、年紀、地址，我們new出這個類別，並且使用toJson()方法就可以簡單的轉換成JSON格式囉。


-------------------------------------------------------------------------

    Person person = new Person();

       

    person.setUsername("ahow");

    person.setPassword("123");

    person.setAge(11);

    person.setAddress("taipei");

       

    Gson gson = new Gson();

    String result = gson.toJson(person);

        

-------------------------------------------------------------------------

Android 顯示超連結的方法

使用

Html類別裡面的formHtml()方法

static Spanned	fromHtml(String source) Returns displayable styled text from the provided HTML string.
static Spanned	fromHtml(String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler) Returns displayable styled text from the provided HTML string.