一、项目的创建

一、首先,建立一个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}">