一、項目的創建

一、首先,建立一個FLEX PROJECT,應用服務器選擇J2EE。

二、選擇new進行應用服務器的配置,FLEX WAR FILE選擇下載的ds-console.war文件 

三、點擊"完成",建立好后的項目如下所示:

其中flex_src是Flex的源文件目錄,src即是我們所熟悉的Java源文件目錄.

四、為項目添加WEB支持以便能直接進行部署。

OK,最后完成后項目如下:

五、Output folder URL設置，在默認情況下，會打開http://localhost:8080/BFOrder/這個路徑，但是我們編譯的文件在bin目錄下，所以需要將其修改成http://localhost:8080/BFOrder/bin，這樣就可以了。

直接運行項目，或者運行BFOrder.mxml，如果出現如下界面，表示你的項目已經成功搭建好了。

二、自定義設計區域大小

自定義一個設計區域大小，寬度為1012，高度為600，這樣在1024*768分辨率下會有最好的顯示效果。
   

一共添加七個，分別如下。一共添加七個，分別如下。

首頁

餐店簡介

美食分類

訂餐指南

會員中心

訂單查詢

我要建議

步驟四：設置LinkBar的數據源。

<mx:LinkBar x="175" y="47" dataProvider="{viewstack1}">        </mx:LinkBar>

步驟五：為所有的面板添加標題。

<mx:LinkBar x="175" y="47" dataProvider="{viewstack1}">        </mx:LinkBar>        <mx:ViewStack x="112" y="92" id="viewstack1" width="200" height="200">               <mx:Panel label="首頁" width="100%" height="100%" title="首頁">               </mx:Panel>               <mx:Panel label="餐店簡介" width="100%" height="100%" title="餐店簡介">               </mx:Panel>               <mx:Panel label="美食分類" width="100%" height="100%" title="美食分類">               </mx:Panel>               <mx:Panel label="訂餐指南" width="100%" height="100%" title="訂餐指南">               </mx:Panel>               <mx:Panel label="會員中心" width="100%" height="100%" title="會員中心">               </mx:Panel>               <mx:Panel label="訂單查詢" width="100%" height="100%" title="訂單查詢">               </mx:Panel>               <mx:Panel label="我要建議" width="100%" height="100%" title="我要建議">               </mx:Panel>        </mx:ViewStack>

步驟六：調整位置和大小。

<mx:LinkBar color="#FFFFFF" fontWeight="bold" x="600" dataProvider="{viewstack1}">        </mx:LinkBar>        <mx:ViewStack id="viewstack1" x="257" y="123" width="699" height="440">               <mx:Panel label="首頁" width="100%" height="100%" title="首頁">               </mx:Panel>               <mx:Panel label="餐店簡介" width="100%" height="100%" title="餐店簡介">               </mx:Panel>               <mx:Panel label="美食分類" width="100%" height="100%" title="美食分類">               </mx:Panel>               <mx:Panel label="訂餐指南" width="100%" height="100%" title="訂餐指南">               </mx:Panel>               <mx:Panel label="會員中心" width="100%" height="100%" title="會員中心">               </mx:Panel>               <mx:Panel label="訂單查詢" width="100%" height="100%" title="訂單查詢">               </mx:Panel>               <mx:Panel label="我要建議" width="100%" height="100%" title="我要建議">               </mx:Panel>        </mx:ViewStack>

四、創建公告欄

步驟1：創建公告面板。

<mx:Panel x="10" y="61" width="250" height="140" layout="absolute" title="最新公告">        </mx:Panel>

步驟2：創建一個DataGrid。

<mx:Panel x="10" y="61" width="250" height="140" layout="absolute" title="最新公告">               <mx:DataGrid x="0" y="0" width="230" rowCount="2" height="100">                      <mx:columns>                             <mx:DataGridColumn headerText="公告標題" dataField="noticetitle"/>                             <mx:DataGridColumn headerText="發布時間" dataField="publishDate"/>                      </mx:columns>               </mx:DataGrid>        </mx:Panel>

步驟3：添加測試數據。

<mx:XMLList id="notices">        <notice>            <noticetitle>本店開張了</noticetitle>            <publishDate>2010-3-1</publishDate>        </notice>        <notice>            <noticetitle>本店開張了</noticetitle>            <publishDate>2010-3-2</publishDate>        </notice>        <notice>            <noticetitle>本店開張了</noticetitle>            <publishDate>2010-3-3</publishDate>        </notice>        <notice>            <noticetitle>本店開張了</noticetitle>            <publishDate>2010-3-4</publishDate>        </notice>        <notice>            <noticetitle>本店開張了</noticetitle>            <publishDate>2010-3-5</publishDate>        </notice>     </mx:XMLList>

設置DataGrid的數據源。

<mx:DataGrid x="0" y="0" width="230" rowCount="2" height="100" dataProvider="{notices}">