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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.                xmlns:s="library://ns.adobe.com/flex/spark"
  4.                xmlns:mx="library://ns.adobe.com/flex/mx" >
  5.     <fx:Declarations>
  6.         <!-- Place non-visual elements (e.g., services, value objects) here -->
  7.     </fx:Declarations>
  8.     <s:controlBarLayout>
  9.         <s:BasicLayout/>
  10.     </s:controlBarLayout>
  11.    
  12.     <s:controlBarContent>
  13.         <s:Button id="btnCheckOut" y="10" label="Checkout"  right="10"/>
  14.         <s:Button id="btnCartView" y="10" label="View Cart"  right="90"/>
  15.         <s:Button label="Flex" x="5" y="5"/>
  16.     </s:controlBarContent>
  17.     <s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>  
  18.     <s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">
  19.         <s:layout>
  20.             <s:HorizontalLayout/>
  21.         </s:layout>
  22.         <s:Group width="100%" height="150" id="products">
  23.             <s:layout>
  24.                 <s:VerticalLayout/>
  25.             </s:layout>
  26.             <s:Label text="Milk" id="prodName"/>
  27.             <s:Label text="$1.99" id="Price"/>
  28.             <s:Button label="AddToCart" id="add"/>
  29.         </s:Group>
  30.         <s:Group id="cartGroup" height="100%">
  31.             <s:layout>
  32.                 <s:VerticalLayout/>
  33.             </s:layout>
  34.             <s:Label text=" Your Cart Total: $"/>
  35.             <s:Button label="ViewCart"/>
  36.         </s:Group>
  37.     </s:Group>
  38. </s:Application>

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


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

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

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

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

Copyright 2010 Yita電腦調校日誌
Lunax Free Premium Blogger™ template by Introblogger