天天看點

Flex權威指南3學習筆記之一------界面知識(一)

  最近在學習flex,正在看《Flex 權威指南》,把一些重要的知識記錄下來,剛入門的可以看一下,高手就不用看了 呵呵

  一、容器的相關知識

  常見容器及布局規則 容器 規則 VBox 子元素垂直排列,每個子元素在前一個元素的下方 HBox 子元素水準排列,每個子元素在前一個元素的右側 Canvas 在制定的位置繪制子元素,(x,y)控制其坐标 Application 使用layout屬性,可以獲得類似前三種布局方式 Tile 将子元素排成一個或多個橫行或者豎行,每個Tile的單元格時相同的 Panel Box容器的子類,可以獲得VBox、HBox、Canvas的布局方式 ControlBar 停靠在Panel或者TileWindow的底部,可以有VBox和HBox布局,主要取決于direction屬性 Application-ControlBar 整個應用程式都能通路的元件,布局方式類似Control [b]二、[/b][b]布置電子商務應用程式 [/b]

  在《Flex 權威指南3》中,采取的是用可視化拖取的方式繪制界面,為了對這些界面元素有一個初步的了解,我們采用手寫代碼的方式,在真正的開發過程中,手寫的方式要比可視化操作适用的多。 1.打開EComm.mxml檔案

  2.在标簽内部,添加如下代碼 Flex"/> ApplicationControlBar的寬度和整個應用程式一緻,高度為90。另外,在Application 的最上邊,并且dock="true",這樣可以保證Application始終出現在應用程式的最上邊,不會随滾動條滾動而消失。 3.在中輸入以下代碼:

  Canvas可以充滿整個ApplicationControlBar中,它的子元件見通過坐标進行絕對固定。

  4.在Canvas中輸入以下的代碼 5.在ApplicationBar下邊輸入

  

  HBox中的元件會水準排列,目前隻有一個VBox還看不到效果;而VBox中的元件會垂直排列。

  6.在HBox 的下部輸入:

  

  用于顯示版權資訊的标簽,放在整個應用程式的右下角

  所有代碼如下所示:

   layout="absolute"> Flex"/>

  運作結果如下: