Browse » Home » Flash Builer 4 » Flash Builder 4 教學 : 初探系列其之四.千里之行始於足下,硬是不說哈囉

Flash Builder 4 教學 : 初探系列其之四.千里之行始於足下,硬是不說哈囉

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

一般而言應該是見樹先見林,你總是先得對樹林的外觀有所認識才會走近才會見到樹沒錯吧,一般程式介紹幾乎
很快就會提到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/>

則是宣告了這個控制橫Bar採用基本型的佈局.

再來解釋 5,6,7 行

<s:controlBarContent> 
    <s:Button label="Flex Grocer"/>
</s:controlBarContent>

這一行程式,則是宣告了控制橫Bar裏的content(內容要放些什麼),當然它也是成對出現的指令,重點中間這一行

<s:Button label="Flex Grocer"/>

這是在控制橫bar裏放置了一個按鍵,看到這裏動手吧.
將這六行加進去. 你問我要加在那裏? 看底下的範例吧.

<?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>