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控件对提供数据有要求必须是IListXMLList对象无法绑定,只有用Flex3所提供的List控件了。在Listchange事件中调用了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应该不存在问题。

下载完整代码

posted on 2010-03-27 10:35 henry 阅读(...) 评论(...) 编辑 收藏

导航

公告

统计