很早之前就听说Flex Builder3的新版本FlashBuilder4的事情,由于没有出正式版所以一直没有下载来试用下,昨天听同说已经出了正式版所以下载拿用了一下.总体使用感觉还可以,IDE的速度明显比Flex builder3有所提高,不过提供的控件发生了变化,所以对应MXML名称空间也发生了改变有点不太适应.有些旧的控件已经在IDE的工具栏里找不到了，不过可以手动编写MXML里得到提示。代码的布局说实话没有Flex Builder3好，行距太紧凑看到眼累…不多说了下面用FlashBuilder4做个简单的应用。
需要完成的功能：
一个简单的客户查询，当选择客户里查看他相关的订单和订单明细。所涉及的业务逻辑有三个。
定义相关业务逻辑方法:
public class Services
{
public IList<Entities.Customers> CustomerList(string companyname)
{
Expression exp = new Expression();
if (!string.IsNullOrEmpty(companyname))
exp &= Entities.Customers.companyName.Match(companyname);
return exp.List<Entities.Customers>();
}
public IList<Entities.Orders> OrderList(string customerid)
{
return (Entities.Orders.customerID == customerid).List<Entities.Orders>();
}
public IList<Entities.OrderDetails> DetailList(int orderid)
{
return (Entities.OrderDetails.orderID == orderid).List<Entities.OrderDetails>();
}
}
下面定义对应AS的调用类：
import Core.Utility;
import Core.ActionBase;
/**
* Action Script调用方法生成工具1.2 生成时间:2010-3-26 17:42:59
*/
public dynamic class Services_CustomerList extends ActionBase
{
public var companyname:Object;
}
import Core.Utility;
import Core.ActionBase;
/**
* Action Script调用方法生成工具1.2 生成时间:2010-3-26 18:44:06
*/
public dynamic class Services_OrderList extends ActionBase
{
public var customerid:Object;
}
import Core.Utility;
import Core.ActionBase;
/**
* Action Script调用方法生成工具1.2 生成时间:2010-3-27 9:04:26
*/
public dynamic class Services_DetailList extends ActionBase
{
public var orderid:Object;
}
逻辑代码准备好后，就开始写界面了。对于FlashBuilder4编写UI提供什么快速度的方式我没有研究，还是使用最原始的方式直接手动编写MXML的方式(感觉熟悉后这样比鼠标拖来拖去要快)…..
先实现左边的客户信息查询：
代码
<s:Panel width="379" height="100%" title="客户">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:BorderContainer width="100%" height="50" backgroundColor="#F4F4F4">
<s:TextInput x="8" y="12" text="@{mCustomerList.companyname}" width="199"/>
<s:Button x="213" y="12" label="查询">
<s:click>
<![CDATA[
mCustomerList.Execute();
]]>
</s:click>
</s:Button>
</s:BorderContainer>
<mx:List id="lstcustomer" dataProvider="{mCustomerList.Result.Data.Customers}" borderVisible="false" width="100%" height="100%">
<mx:itemRenderer>
<fx:Component>
<mx:VBox horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Form verticalGap="1">
<mx:FormItem label="ID:">
<s:Label text="{data.CustomerID}"/>
</mx:FormItem>
<mx:FormItem label="Company:">
<s:Label text="{data.CompanyName}"/>
</mx:FormItem>
<mx:FormItem label="Phone:">
<s:Label text="{data.Phone}"/>
</mx:FormItem>
<mx:FormItem label="City">
<s:Label text="{data.Country}({data.Region})-{data.City}"/>
</mx:FormItem>
<mx:FormItem label="Address:">
<s:Label text="{data.Address}"/>
</mx:FormItem>
</mx:Form>
<mx:HRule height="1" width="100%"/>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
<mx:change>
<![CDATA[
mOrderList.customerid = lstcustomer.selectedItem.CustomerID;
mOrderList.Execute();
]]>
</mx:change>
</mx:List>
</s:Panel>
在FlashBuilder 4里提供一个不错的功能就是控件值修改同步到对象成员中的功能，绑定的定义也很简单在原来的基础上加个@标识就是了："@{mCustomerList.companyname}。在FlashBuilder 4提供的List控件对提供数据有要求必须是IList，XMLList对象无法绑定，只有用Flex3所提供的List控件了。在List的change事件中调用了OrderList查询来获取订单信息。
接下来看订单查询的UI输出描述:
代码
<mx:List dataProvider="{mOrderList.Result.Data.Orders}" width="100%" height="100%" borderStyle="none">
<mx:itemRenderer>
<fx:Component>
<mx:VBox verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:Grid verticalGap="20" borderStyle="outset" borderColor="#D5D5D5" width="100%" paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5" verticalAlign="top">
<mx:GridRow verticalAlign="middle">
<mx:GridItem verticalAlign="bottom">
<s:Label text="Employee:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem verticalAlign="bottom">
<s:Label text="{data.EmployeeName}"/>
</mx:GridItem>
<mx:GridItem>
<mx:PopUpButton label="Details" click="event.target.open()">
<mx:popUp>
<mx:DataGrid dataProvider="{mDetailList.Result.Data.OrderDetails}" dropShadowVisible="true" borderVisible="true" borderColor="#969696" borderStyle="outset" height="100%">
<mx:columns>
<mx:DataGridColumn dataField="ProductName"/>
<mx:DataGridColumn dataField="UnitPrice"/>
<mx:DataGridColumn dataField="Quantity"/>
<mx:DataGridColumn dataField="Discount"/>
</mx:columns>
</mx:DataGrid>
</mx:popUp>
</mx:PopUpButton>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow verticalAlign="middle">
<mx:GridItem>
<s:Label text="OrderDate:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.OrderDate}"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="RequiredDate:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.RequiredDate}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow verticalAlign="middle">
<mx:GridItem>
<s:Label text="ShippedDate:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShippedDate}"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="ShipVia:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShipVia}"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="Freight:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.Freight}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow verticalAlign="middle">
<mx:GridItem>
<s:Label text="ShipName:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShipName}"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="ShipCountry:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShipCountry}"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="ShipRegion:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShipRegion}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow verticalAlign="middle">
<mx:GridItem>
<s:Label text="ShipCity:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShipCity}"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="ShipPostalCode:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShipPostalCode}"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="ShipAddress:" fontWeight="bold" fontStyle="italic"/>
</mx:GridItem>
<mx:GridItem>
<s:Label text="{data.ShipAddress}"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:creationComplete>
<![CDATA[
if(data !=null)
{
mDetailList.orderid = data.OrderID;
mDetailList.Execute();
}
]]>
</mx:creationComplete>
<fx:Script>
<![CDATA[
import Api.Services_DetailList;
private var mDetailList:Services_DetailList = new Services_DetailList();
]]>
</fx:Script>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:List>
总的来说FlashBuilder4在编写应用的时候和Flex3没有多的差异，如果本身对Flex3熟悉的朋友那马上转用FlashBuilder4应该不存在问题。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。