FlashBuilder4试用

         很早之前就听说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应该不存在问题。

下载完整代码