承 Flash Builder 4 教學其之六的教學,你應該可以完成如下圖畫面,若有困難通常是沒有弄清楚如何正確的選取你要進行排版的元件所致.

承上例,你會發現這張圖好像有點不那麼正規,若我們把中間這兩個按鍵移到右邊去,再把下面那個標籤移到右下角去是不是會美觀些?
好吧. 那麼動手作吧. 若你實在不知道怎麼讓這樣做出這樣的版面,那麼你參考底下的圖把程式輸入進去就可以了.

你可能會發現你把程式輸入進去後,也完成了執行是沒有問題的但是版面就是歪的. 沒錯! 本來我給的範例就是歪的.
這樣吧. 你先試著進入視計視圖(忽然我覺的翻譯成視圖有點怪怪的,以後我會統稱設計視野)好好的把玩一下試著把那兩個按鍵
拉到右邊去,而且要跟最左邊的按鍵一樣高度. 底下留一點空間看起來較美觀, 中間的標籤拉到右下角去.

在你把玩一番後,可能拖曳按鍵到定會是比較容易的事,可是那個標籤怎麼拖也拖不動簡直不動如山,那麼請仔細看一下底下的圖

仔細觀察這張圖的右邊,你明明如上圖所示滑鼠游標是停在要點選的標籤上面,可是右邊的屬性面版卻顯示你選中的元件是s:Group 容器.當然你會無法拖曳因為這就是之前提到的難以選取某些元件的問題.

其實這樣問題在爾後使用設計視野會經常碰到,解決的方法就是有效的利用大綱視野,請參考下圖



在大綱視野這張圖片,應該可以很清楚的看出各個容器,按鍵,標籤等的排列方式. 在設計視野時搭配左下角的OUTLINE(大綱視野)
你就能正確點選到你要修改或是拖曳的元件,這一點很重要你也會常常利用到此功能在設設UI排版時.

接下來我們回頭看那兩個不太上相的按鍵,如何利用條件限制式使其對齊.既然我們要仿效左邊的按鍵,那麼我們先來觀察一下左側的按鍵是怎麼設定的,那麼先點選左上的按鍵. 再把右側的功能視窗拉到最底下(因為條件限制式就在最底下) 參考一下下圖


注意看到這部份:


在屬性面版的右下角就是Constraints (這個就是條件限制式),先把它晾在一邊不理它,往上看是Size and Position 這是用來調整你所選取的元件的寬度及高度還有水平位置x 及 y 垂直位置. 你看到的左側這個按鍵Flex 是X:5 Y:5 ,你可以在設計視野試著單獨改變
其中一項的值來觀察它們的變化來了解這些設定值的作用,但是X 跟 Y 以外的值暫時讓它保持預設值(什麼數值都保留空白即是預設值)

那麼,你已經知道Y 是垂直位置,那麼也把其它兩個按鍵改為Y=5 看看, 看到執行結果了吧. 三個按鍵都是同一垂直位置了,美觀多了.
接下來解說條件限制式. 看到下圖的條件限制式應該有注意到在那個方框外有六個可以核選的方框吧.


你先選取Flex 這個按鍵,然後直接勾選上面那一排的最左則的勾選框,跟左側那一排的最上面的勾選框. 這作法就是把按鍵以左上的限制條件式來對齊. 你會發現這個設置跟之前的x:5 y:5 根本一樣嘛. 是沒錯, 只是一個是你用手動拖曳或透過程式視野來改動數值, 而這個卻是利用條件限制式來對齊



有一點要提醒你,你在條件限制式輸入的數值,記得要按一下ENTER,這樣它才會如實反映在設計視野中. 有一個重要的觀念要提示你那就是限制條件式的對齊方式並不是以水平位置或垂直位置中的其它元件來對齊.而是以父元素作為對齊的對象. 以這個例子來說這三個按鍵的父元素是誰? 看一下大網視野自然不言可喻

在之前的Flash Builder 4 教學 : 初探系列其之五 裏, 你已經定義了一個應用程序的一部分使用MXML版面佈置，但現在你將使用設計視圖中添加更多的元素，並設定其屬性。

附上之前練習的程式碼供您參考

那麼, 怎麼進入 Design View 設計視圖,請按照底下的圖片操作吧,按下Design View 的圖示.

按下Design View的圖示後,你會看到你所設計的應用程式的外觀.在這兒我們將會學習到為每一個元件設定它的屬性及相關的程式設定.

注意看到左下角的 Components 組件視圖,你可以從這兒拖曳你想要使用的組件,像是Button按鍵到你的應用程式去
也就是可以連一行程式都不用寫,只要再自行調整它的位置或設定它的程式行為,可以大大的節程式開發的時間

及左下角的 OUTLINE 大綱視圖,這兒可以很方便的檢視應用程式內各元件的排列

如果你所做的練習不同上面的範例,試著去熟用Design Mode 設計模式,讓它跟上面的範例一模一樣.

在Flash Builder 中,我們可以使用containers (容器)跟layout objects.(版面物件)來做幾乎是全部的版面排版,之前提到Flash Builder 可以輕鬆的用來為您的應用程式製做UI(使用者界面),也是因為它在這方面提供了便利又強大的功能.

在技術層面上，容器只是一種特殊類型的組件，它包含和Group 群組和其他項目。Group群組內包括的這些項目我們統稱為子元件，或者更明白地說，LayoutElements 版面元件（這僅僅是一個廣泛的術語元件如按鈕，複選框和等）和GraphicalElements 圖形元件如正方形，圓形等。雖然group 群組將它們收納在在一起，但它們不會知道
這些項目在螢幕上的位置或順序。

當您選擇一個容器來使用，你基本上要做的是設置他們精確的座標位置,然而容器最廣泛應用的功能是它能夠被
skinning殖皮或換膚(內地的翻譯是翻成:"蒙皮". 總之就像你把你的手機拿去做封膜一樣,容器的外觀是可以被改變成你想要的樣子。

skinning 植皮/換膚 是定義視覺外觀組件的處理步驟。在一個容器上，你能想到的外觀包括如背景，邊框，陰影，等等。一些Flex的容器可以植皮，這意味著你可以定義它們在屏幕上顯示的樣子。其他容器存在只是為了確保聚攏它們的子元件，他們自己沒有一個視覺外觀。也就是說不是所有容器都可以植皮,能夠植皮的條件是至少它們必需是一個視覺外觀組件.

容器的類別有下述幾種:

Group 群組容器: 在Flex 4 中最簡單的類別,一個群組可以用來包括子元件,但它們沒有自己的視覺外觀..

SkinnableContainer 可植皮/換膚的容器: 一個可以換膚的容器的功能等同Group群組並且能夠用來定義營幕 上的視覺外觀 .

BorderContainer 外框容器: 也是一種可植皮/換膚的容器,它可以用來將子元件包覆在框內 .

Panel 平面容器: 也是一種可植皮/換膚的容器,它有個邊框包覆,它可以有一個控制橫列(Control bar),可設置標題列及控制區域 .

Application 應用容器:也是一種可植皮/換膚的容器,它通常應用在你的應用程式的根本層,像是Panel容器,它也可以擁有控制橫列(Control Bar) .

NavigationContent 導引欄容器: 也是一種可植皮換膚的容器.通常用ViewStack來控制,稍後會再提及它

介紹到這裏,接下來要提的是 Layout Object版面物件.

版面物件是與容器一起運作的,用來決定如何容器群組內的子元件如何顯示在螢幕上,flex 4 提供了幾種
版面物件你可以自由應用它來定義你想要展示的版面.

底下介紹幾種版面物件的用途

BasicLayout: basic layout基本版面配置,用來做為絕對定位用,你必需為每一個版面元件定義x 跟 y 的座標 .

HorizontalLayout: horizontal layout 水平版面配置,水平排列每一個子元件一個緊接另一個橫向排列 .

VerticalLayout: vertical layout 垂直版面配置,垂直排列每一個子元件一個緊接一個縱向排列 .

TileLayout: tile layout瓦狀版面配置,可視需求任意排列子元件成水平或垂直布置

底下分別列出兩個範例: 請你解釋給我聽這樣版面配置是怎麼組成的?

範例1:

範列 2

Flash Builder 4 教學: 初探系列其之六

反應快的讀者似乎會抱怨,呃.. 你好像連第一行程式都還沒開始教! 的確沒錯我是一行都還沒開始解說

一般而言應該是見樹先見林,你總是先得對樹林的外觀有所認識才會走近才會見到樹沒錯吧,一般程式介紹幾乎
很快就會提到Say Hello的範例程式,我倒不急著介紹因為我認為其意義不大,以FLEX來說,了解了程式的基本架構就要開始疊床架屋了,也就是可以開始動手寫更為複雜的程式了

這也不是揠苗助長,實際上的原因是讀者您真的是個人才,您真的好有才因此我決定給您施行精英教育

那麼還是先做個比喻好了,假設您在烹調手上拿者菜刀對各式的食材做料理,當然因應你要做的菜色及針對食材的特性有的要切丁,有的要切絲,有的要切塊,如此這般那樣的來進行料理對吧, 但無論怎麼地切好分類好的食材一個一個拿來看,大概不會有人想立刻吃下去(例如生的,未調味的,未經烹煮的. 那麼最後也會因食譜建議的料理方式將各式食材組合起來再爆香大火快炒並調味吧?

看到這裏,轉過頭來FLEX程式設計 一般食材被料理成各式形狀就像是FLEX 程式裏各式容器的功用,有的是橫條狀,有的是四方型,還有更多不同功用及類型的容器. 您必需把它們適當的組合起來,就像料理一道菜一樣

在介紹諸多容器的特性之前,我先讓你看看一段程式,這段程式很簡短只有六行

先解釋前三行
第一行跟第三出現成對的標簽指令是你接觸到的一個容器的屬性設定一個控製橫欄的佈局,所謂成對出現就是這個標簽是始於
結束於
而你放置在中的則是宣告了這個控制橫Bar採用基本型的佈局.

再來解釋 5,6,7 行

這一行程式,則是宣告了控制橫Bar裏的content(內容要放些什麼),當然它也是成對出現的指令,重點中間這一行
這是在控制橫bar裏放置了一個按鍵,看到這裏動手吧.
將這六行加進去. 你問我要加在那裏? 看底下的範例吧.

接下來先把這繕打好的程式儲存起來,請按下圖操作
再來請試著運作這個程式

再來請到你的瀏覽器去看一下,這是您的第一隻程式,由於剛起步您也只寫了六行程式,所以只能看到一個控制橫bar,跟控製橫bar裏的一個按鍵,當然按下去不會有任何作用(因為也還沒有相對應的處理程式),而這隻程式可是一個不折不扣的flash 技術為主的應用程式,它是一個swf檔

Flash Builder 4 教學 : 初探系列其之五

程式寫作之道在於明白其真實意義,即使任何微不足道的程式,也是有其嚴謹的定義必需遵循

電腦科技的文明來自沒有人性的設計,在冰冷的程式碼裡展現您的心血與苦心.

完善的程式是一連串正確無誤的運算所產生的必然結果,這也意謂著一個程式師很嚴謹的一丁點的錯誤都不能犯,在程式裡打錯一個字,或未正確區分大小寫都會導致不可預期的錯誤,日本有句俗諺 "油斷一秒 怪我一生"(因為一時的疏忽而導致終身的遺憾 .切記!

步驟1: 參考下圖的畫面,我將一一解釋各行的用意

完整的程式列表於下: 以方便對照底下的說明

先看第一行

這一行很簡短的,只是指明了這個XML檔案要使用UTF-8 的編碼(這種編碼方式適用於雙字組的中日韓等語系

再來看2,3,4行

這幾行是用來告訴FlashBuilder 使用了那些XML的命名空間,命名空間的意謂者用來宣告FLASH Builder 去那兒取得這些類別庫,及提供類別的參照好提供程式使用

這兒列出了三個命名空間
1. xmlns:fx 這一個是提供Flex 的語言標籤
2.xmlns:s 是提供了spark 組件的類別庫標籤
3.xmlns:mx 則是提供了mx組件的類別庫標籤,在這兒同時提供了minWidth="955" minHeight="600" 設定了應用程式最小的寬度及最小的高度

除了第三個xmlns:mx 命名空間需設定後面尾隨的參數, 一般前面那個只要有宣告就行
程式的內容通常是包含在上段的命名空間s:Application ... 一直到 底下的應用程式結束標籤前.

好像漏了中間的這幾行,這第5,6,7 行的程式是用來放置.非視覺元件的. 日後會慢慢明白視覺元件與非視覺元件的差異

看到這裡對上述的程式應該大概知道做什麼用途了,附註一點多利用維基百科,有關不懂的術語在那幾乎可以找到全部詳盡的解說

接下來請看 Flash Builder 4初探系列其之三

在完成了Flash Builder 4.0 的預設安裝後,接下來試著來建立第一個程式專案吧

剛啟動完成,沒有例外的話會看到底下光禿禿的Flash Builder 4.0 的畫面

底下的圖片說明了.如何新建一個專案,再來請按圖操課試著建立新的專案

接下來在這畫面停一下,這是未設定程式名稱/專案路徑名稱時的樣子

為了便利日的探討,請按下圖設置,當然你也可以改變名稱或專案的儲存路徑

請養成習慣,一般而言嚴謹的程式設計是英文大小寫有別的,所以請一字不差的輸入吧免得發生不必要的錯誤

步驟5: 按預設值不任何更動,點擊next 進行下一步

步驟6: 按預設值不任何更動,點擊Finish 進行下一步

步驟7:當你正確無誤看到底下的程式畫面時,恭喜你已經可已經走上程式設計的不歸路了

接下來請看下一篇 :Flash Builder 4 初探系列其之二

在Flash Builder 4 編寫程式時,可以按下滑鼠右鍵如下圖,再執行Compare with 的子選項,再選擇LocalHistory 來對稍早之前撰寫的程式來進行比較

圖1-1


圖1-2

在Flash Builder 4 的選項中,可以設定 Local History 的選項

圖1-3

一般在儲存程式時,Flash Builder 會自動撿查程式有無錯誤,若是一些顯而易見的錯誤則會以紅色的x圖示來表示

如下圖所示
圖2-1


只要將滑鼠移至紅色錯誤圖示那兒懸停,就會出現程式錯誤的相關提示:

承上例,這是很簡單又顯而易見的錯誤卻也是初學者最常犯的錯誤,不外乎是拼錯字或是少打了標記結尾符號.
在Flash Builder 裡,大部份的MXML標籤指令都是成對出現的. 這點需留心注意

也可以在Flash Builder 4 左下角的Problems 查看錯誤發生的原因,搞清楚錯誤怎麼發生的也很重要



以上圖所示的錯誤訊息(Could not resolve to a component implementation. )
這個錯誤很容易明白,它是指程式無法找到 組件來執行. 仔細看一下其實也就是錯把 打成 罷了

有點必需注意! MXML 並不是每個標籤都是成對出現,也是可以簡化的 例如 就可以用簡單的標籤結束符號替換之.

Flash Builder 4 初探系列其之四