反應快的讀者似乎會抱怨,呃.. 你好像連第一行程式都還沒開始教! 的確沒錯我是一行都還沒開始解說
一般而言應該是見樹先見林,你總是先得對樹林的外觀有所認識才會走近才會見到樹沒錯吧,一般程式介紹幾乎
很快就會提到Say Hello的範例程式,我倒不急著介紹因為我認為其意義不大,以FLEX來說,了解了程式的基本架構就要開始疊床架屋了,也就是可以開始動手寫更為複雜的程式了
這也不是揠苗助長,實際上的原因是讀者您真的是個人才,您真的好有才因此我決定給您施行精英教育
那麼還是先做個比喻好了,假設您在烹調手上拿者菜刀對各式的食材做料理,當然因應你要做的菜色及針對食材的特性有的要切丁,有的要切絲,有的要切塊,如此這般那樣的來進行料理對吧, 但無論怎麼地切好分類好的食材一個一個拿來看,大概不會有人想立刻吃下去(例如生的,未調味的,未經烹煮的. 那麼最後也會因食譜建議的料理方式將各式食材組合起來再爆香大火快炒並調味吧?
看到這裏,轉過頭來FLEX程式設計 一般食材被料理成各式形狀就像是FLEX 程式裏各式容器的功用,有的是橫條狀,有的是四方型,還有更多不同功用及類型的容器. 您必需把它們適當的組合起來,就像料理一道菜一樣
在介紹諸多容器的特性之前,我先讓你看看一段程式,這段程式很簡短只有六行
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarContent>
- <s:Button label="Flex Grocer"/>
- </s:controlBarContent>
先解釋前三行
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarLayout>
- </s:controlBarLayout>
- <s:BasicLayout/>
再來解釋 5,6,7 行
- <s:controlBarContent>
- <s:Button label="Flex Grocer"/>
- </s:controlBarContent>
- <s:Button label="Flex Grocer"/>
將這六行加進去. 你問我要加在那裏? 看底下的範例吧.
- <?xml version="1.0" encoding="utf-8"?>
- <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">
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
- <s:controlBarLayout>
- <s:BasicLayout/>
- </s:controlBarLayout>
- <s:controlBarContent>
- <s:Button label="Flex Grocer"/>
- </s:controlBarContent>
- </s:Application>
再來請到你的瀏覽器去看一下,這是您的第一隻程式,由於剛起步您也只寫了六行程式,所以只能看到一個控制橫bar,跟控製橫bar裏的一個按鍵,當然按下去不會有任何作用(因為也還沒有相對應的處理程式),而這隻程式可是一個不折不扣的flash 技術為主的應用程式,它是一個swf檔
Flash Builder 4 教學 : 初探系列其之五
程式寫作之道在於明白其真實意義,即使任何微不足道的程式,也是有其嚴謹的定義必需遵循
電腦科技的文明來自沒有人性的設計,在冰冷的程式碼裡展現您的心血與苦心.
完善的程式是一連串正確無誤的運算所產生的必然結果,這也意謂著一個程式師很嚴謹的一丁點的錯誤都不能犯,在程式裡打錯一個字,或未正確區分大小寫都會導致不可預期的錯誤,日本有句俗諺 "油斷一秒 怪我一生"(因為一時的疏忽而導致終身的遺憾 .切記!
步驟1: 參考下圖的畫面,我將一一解釋各行的用意
完整的程式列表於下: 以方便對照底下的說明
- <?xml version="1.0" encoding="utf-8"?>
- <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">
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
- </s:Application>
先看第一行
這一行很簡短的,只是指明了這個XML檔案要使用UTF-8 的編碼(這種編碼方式適用於雙字組的中日韓等語系
- <?xml version="1.0" encoding="utf-8"?>
再來看2,3,4行
- <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">
這幾行是用來告訴FlashBuilder 使用了那些XML的命名空間,命名空間的意謂者用來宣告FLASH Builder 去那兒取得這些類別庫,及提供類別的參照好提供程式使用
這兒列出了三個命名空間
1. xmlns:fx 這一個是提供Flex 的語言標籤
2.xmlns:s 是提供了spark 組件的類別庫標籤
3.xmlns:mx 則是提供了mx組件的類別庫標籤,在這兒同時提供了minWidth="955" minHeight="600" 設定了應用程式最小的寬度及最小的高度
除了第三個xmlns:mx 命名空間需設定後面尾隨的參數, 一般前面那個只要有宣告就行
程式的內容通常是包含在上段的命名空間s:Application ... 一直到 底下的應用程式結束標籤前.
- </s:Application>
好像漏了中間的這幾行,這第5,6,7 行的程式是用來放置.非視覺元件的. 日後會慢慢明白視覺元件與非視覺元件的差異
- <fx:Declarations>
- <!-- Place non-visual elements (e.g., services, value objects) here -->
- </fx:Declarations>
看到這裡對上述的程式應該大概知道做什麼用途了,附註一點多利用維基百科,有關不懂的術語在那幾乎可以找到全部詳盡的解說
接下來請看 Flash Builder 4初探系列其之三
在完成了Flash Builder 4.0 的預設安裝後,接下來試著來建立第一個程式專案吧
剛啟動完成,沒有例外的話會看到底下光禿禿的Flash Builder 4.0 的畫面
底下的圖片說明了.如何新建一個專案,再來請按圖操課試著建立新的專案
接下來在這畫面停一下,這是未設定程式名稱/專案路徑名稱時的樣子
為了便利日的探討,請按下圖設置,當然你也可以改變名稱或專案的儲存路徑
請養成習慣,一般而言嚴謹的程式設計是英文大小寫有別的,所以請一字不差的輸入吧免得發生不必要的錯誤
步驟5: 按預設值不任何更動,點擊next 進行下一步
步驟6: 按預設值不任何更動,點擊Finish 進行下一步
步驟7:當你正確無誤看到底下的程式畫面時,恭喜你已經可已經走上程式設計的不歸路了
接下來請看下一篇 :Flash Builder 4 初探系列其之二
訂閱：
文章 (Atom)
