ria之家--RIA三部曲：jquery、ext、flex » flex实例 http://www.36ria.com RIA三部曲：jquery、ext、flex Wed, 08 Feb 2012 12:19:26 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 FLEX中的图片擦拭效果 http://www.36ria.com/2284 http://www.36ria.com/2284#comments Sat, 29 May 2010 11:24:43 +0000 达达达人 http://www.36ria.com/?p=2284
    这里列出flex中图片的擦拭效果的例子，擦拭效果即橡皮擦效果，共分为四个方向，擦拭效果同时适用于text和titleWindow
  1. <?xml version="1.0"?>
  2. <!-- Simple example to demonstrate the WipeLeft effect. -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  4. /*左擦除*/
  5.     <mx:WipeLeft id="wipeLeftOut" duration="1000"/>
  6.     <mx:WipeLeft id="wipeLeftIn" duration="1000"/>
  7. /*下擦除*/
  8.     <mx:WipeDown id="wipeDownOut" duration="1000"/>
  9.     <mx:WipeDown id="wipeDownIn" duration="1000"/>
  10. /*右擦除*/
  11.      <mx:WipeRight id="wipeRightOut" duration="1000"/>
  12.     <mx:WipeRight id="wipeRightIn" duration="1000"/>
  13. /*上擦除*/
  14.     <mx:WipeUp id="wipeUpOut" duration="1000"/>
  15.     <mx:WipeUp id="wipeUpIn" duration="1000"/>
  16.     <mx:Panel title="WipeLeft Effect Example" width="95%" height="95%" 
  17.         paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5" verticalAlign="middle">
  18.  
  19.         <mx:Text width="100%" color="blue" 
  20.             text="Use the WipeLeft effect to show or hide the image."/>
  21.         <mx:HDividedBox width="100%">
  22.             <mx:Image source="@Embed(source='assets/Kraid.png')" 
  23.                    visible="{cb1.selected}"
  24.                    hideEffect="{wipeDownOut}" showEffect="{wipeDownIn}"/>
  25.             <mx:Image source="@Embed(source='assets/Kraid.png')" 
  26.                 visible="{cb1.selected}"
  27.                 hideEffect="{wipeLeftOut}" showEffect="{wipeLeftIn}"/>
  28.                 <mx:Image source="@Embed(source='assets/Kraid.png')" 
  29.             visible="{cb1.selected}"
  30.             hideEffect="{wipeRightOut}" showEffect="{wipeRightIn}"/>
  31.             <mx:Image source="@Embed(source='assets/Kraid.png')" 
  32.             visible="{cb1.selected}"
  33.             hideEffect="{wipeUpOut}" showEffect="{wipeUpIn}"/>
  34.         </mx:HDividedBox>
  35.            
  36.         <mx:CheckBox id="cb1" label="visible" selected="true"/>
  37.     </mx:Panel>
  38. </mx:Application>
]]> http://www.36ria.com/2284/feed 3 关于在Flex与ASP.NET中后台数据交互问题 http://www.36ria.com/2266 http://www.36ria.com/2266#comments Thu, 27 May 2010 12:55:46 +0000 满地捡菊花 http://www.36ria.com/?p=2266 在Flex与后台数据交互过程中.一般都是使用以下两个控件：

1、mx:WebService

2、mx:HTTPService

这用于与各种不同语言环境开发提供的远程服务端数据源（如WebService）进行数据交互通信显得更加容易.

 

首先看看如下代码块：

  1. <mx:WebService id="dataService"
  2. wsdl="<a href="http://localhost/FlashFlex/DataWebService.asmx?wsdl">http://localhost/FlashFlex/DataWebService.asmx?wsdl</a>" useProxy="false">
  3. <mx:operation name="HelloWorld"  result="onSuccess(event)" fault="onFault(event)" />
  4. <mx:operation name="GetBook" fault="onFault(event)"  result="onObjectSuccess(event)" />
  5. </mx:WebService>

wsdl属性指定到要访问的WebService的wsdl地址既可，其中定义了两个操作标签(<mx:operation>)，分别对应于WebService中定义的WebMethod方法。result属性标记访问WebService方法成功后的处理函数；fault则相反，指定于访问失败的处理函数。以上两个<mx:operation>对应于WebService的WebMethod方法如下：

  1. /// <summary>
  2. /// 返回字符串
  3. /// </summary>
  4. /// <returns></returns>
  5.      [WebMethod]
  6.     public string HelloWorld()
  7.     {
  8.        return “Hello World”;
  9. }

如上便是WebService方法定义和在Flex的客户端(mxml)通过<mx:WebService>标签来访问WebService的完整流程，下面我们来看看在Flex的客户端怎么去调用WebService所定义的方法：

  1. <mx:Script>
  2.      <![CDATA[
  3.          import mx.controls.Alert;
  4.         import mx.rpc.events.FaultEvent;
  5.         import mx.rpc.events.ResultEvent;
  6.  
  7.         /**
  8.          * 向WebService发起请求--调用HelloWorld方法，dataService为<mx:WebService>的id
  9.           * */
  10.         internal function onRequest():void
  11.         {
  12.              dataService.HelloWorld();
  13.         }
  14.  
  15.         /**
  16.           * 请求成功处理返回结果
  17.           * */
  18.         internal function onSuccess(evt:ResultEvent):void
  19.          {
  20.             Alert.show(evt.result.toString());
  21.          }
  22.  
  23.  
  24.          /**
  25.           * 请求失败的处理函数
  26.           * */
  27.         internal function onFault(evt:FaultEvent):void
  28.         {
  29.             Alert.show("访问WebService失败!");
  30.         }
  31.      ]]>
  32. </mx:Script>
]]> http://www.36ria.com/2266/feed 0 flex导出excel(jsp) http://www.36ria.com/1121 http://www.36ria.com/1121#comments Sun, 13 Dec 2009 13:56:48 +0000 达达达人 http://www.36ria.cn/?p=1121 最近新学的后台为jsp的导出excel文件的实例，感觉比jfreechart插件方便很多，现将源码贴上

mxml文件：

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“
 layout=”vertical”
 initialize=”myService.send()”
 fontSize=”12″ viewSourceURL=”srcview/index.html”>
 <mx:Script source=”utils.as”/>
 <!–<mx:Style source=”DGtoExcel.css”/>–>
  

 <mx:Script>
  <![CDATA[
   import mx.events.ItemClickEvent;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.collections.ArrayCollection;
   
   [Bindable]
   private var myAC:ArrayCollection;

   private function faultHandler(event:FaultEvent):void
   {
    Alert.show(event.fault.faultString, event.fault.message);
   }
   
        ]]>
 </mx:Script>
 <mx:HTTPService id=”myService”
  showBusyCursor=”true”
  url=”data/student.xml”
  result=”myAC = event.result.item.student”
  fault=”faultHandler(event)”/>
 <mx:DataGrid id=”myDG” width=”100%” rowCount=”20″
  dataProvider=”{myAC}” >
  <mx:columns>
   <mx:DataGridColumn headerText=”学好” dataField=”studentID”/>
   <mx:DataGridColumn headerText=”姓名” dataField=”name”/>
   <mx:DataGridColumn headerText=”性别” dataField=”gender” width=”50″/>
   <mx:DataGridColumn headerText=”生日” dataField=”birthday” />
   <mx:DataGridColumn headerText=”班级” dataField=”className”/>
  </mx:columns>
 </mx:DataGrid>
 <mx:Button label=”导出为Excel” click=”loadDGInExcel(myDG,’http://localhost:8080/test/index.jsp’);” />
</mx:Application>

as文件：

private function convertDGToHTMLTable(dg:DataGrid):String {
 //Set default values
 var font:String = dg.getStyle(‘fontFamily’);
 var size:String = dg.getStyle(‘fontSize’);
 var str:String = ”;
 var colors:String = ”;
 var style:String = ‘style=”font-family:’+font+’;font-size:’+size+’pt;”‘;    
 var hcolor:Array;
 
 //Retrieve the headercolor
 if(dg.getStyle(“headerColor”) != undefined) {
  hcolor = [dg.getStyle("headerColor")];
 } else {
  hcolor = dg.getStyle(“headerColors”);
 }    
 
 //Set the htmltabel based upon knowlegde from the datagrid
 str+= ‘<table width=”‘+dg.width+’” border=”1″><thead><tr width=”‘+dg.width+’” style=”background-color:#’ +Number((hcolor[0])).toString(16)+’”>’;
 
 //Set the tableheader data (retrieves information from the datagrid header    
 for(var i:int = 0;i<dg.columns.length;i++) {
  colors = dg.getStyle(“themeColor”);
   
  if(dg.columns[i].headerText != undefined) {
   str+=”<th “+style+”>”+dg.columns[i].headerText+”</th>”;
  } else {
   str+= “<th “+style+”>”+dg.columns[i].dataField+”</th>”;
  }
 }
 str += “</tr></thead><tbody>”;
 colors = dg.getStyle(“alternatingItemColors”);
 
 //Loop through the records in the dataprovider and
 //insert the column information into the table
 for(var j:int =0;j<dg.dataProvider.length;j++) {     
  str+=”<tr width=\”"+Math.ceil(dg.width)+”\”>”;
   
  for(var k:int=0; k < dg.columns.length; k++) {
   
   //Do we still have a valid item?      
   if(dg.dataProvider.getItemAt(j) != undefined && dg.dataProvider.getItemAt(j) != null) {
    
    //Check to see if the user specified a labelfunction which we must
    //use instead of the dataField
    if(dg.columns[k].labelFunction != undefined) {
     str += “<td width=\”"+Math.ceil(dg.columns[k].width)+”\” “+style+”>”+dg.columns[k].labelFunction(dg.dataProvider.getItemAt(j),dg.columns[k].dataField)+”</td>”;
     
    } else {
     //Our dataprovider contains the real data
     //We need the column information (dataField)
     //to specify which key to use.
     str += “<td width=\”"+Math.ceil(dg.columns[k].width)+”\” “+style+”>”+dg.dataProvider.getItemAt(j)[dg.columns[k].dataField]+”</td>”;
    }
   }
  }
  str += “</tr>”;
 }
 str+=”</tbody></table>”;

 return str;
}

/**
 * Load a specific datagrid into Excel
 * This method passes the htmltable string to an backend script which then
 * offers the excel download to the user.
 * The reason for not using a copy to clipboard and then javascript to
 * insert it into Excel is that this mostly will fail because of the user
 * setup (Webbrowser configuration).
 *
 * @params: dg Datagrid The Datagrid that will be loaded into Excel
 * @params: url String The location of the excel export file
 */
private function loadDGInExcel(dg:DataGrid,url:String):void {

 //Pass the htmltable in a variable so that it can be delivered
 //to the backend script
 var variables:URLVariables = new URLVariables();
 variables.htmltable = convertDGToHTMLTable(dg);
 
 //Setup a new request and make sure that we are
 //sending the data through a post
 var u:URLRequest = new URLRequest(url);
 u.data = variables; //Pass the variables
 u.method = URLRequestMethod.POST; //Don’t forget that we need to send as POST
 
 //Navigate to the script
 //We can use _self here, since the script will through a filedownload header
 //which results in offering a download to the user (and still remaining in you Flex app.)
    navigateToURL(u,”_self”);
}      

xml文件：

<?xml version=”1.0″ encoding=”UTF-8″?>
<item>
 <student studentID=”S1-200501″ name=”张琦” gender=”0″ birthday=”1986-03-12″ className=”软件一班” />
 <student studentID=”S1-200502″ name=”张杰” gender=”1″ birthday=”1986-03-12″ className=”软件一班” />
 <student studentID=”S1-200503″ name=”陈磊” gender=”1″ birthday=”1985-03-06″ className=”软件一班” />
 <student studentID=”S1-200504″ name=”杨龙武” gender=”1″ birthday=”1985-07-15″ className=”软件一班” />
 <student studentID=”S1-200505″ name=”王雪纯” gender=”0″ birthday=”1986-09-09″ className=”软件一班” />
 <student studentID=”S1-200507″ name=”杨耀宇” gender=”1″ birthday=”1986-05-09″ className=”软件一班” />
 <student studentID=”S1-200509″ name=”王孝益” gender=”1″ birthday=”1985-02-07″ className=”软件一班” />
 <student studentID=”S1-200510″ name=”王瑛” gender=”0″ birthday=”1985-04-08″ className=”软件一班” />
 <student studentID=”S1-200511″ name=”张强” gender=”1″ birthday=”1985-02-06″ className=”软件一班” />
 <student studentID=”S1-200512″ name=”刘伟” gender=”1″ birthday=”1986-12-06″ className=”软件一班” />
 <student studentID=”S1-200513″ name=”周婷” gender=”0″ birthday=”1984-04-09″ className=”软件一班” />
 <student studentID=”S1-200514″ name=”刘明月” gender=”0″ birthday=”1986-05-04″ className=”软件一班” />
 <student studentID=”S1-200515″ name=”张颖捷” gender=”0″ birthday=”1985-06-05″ className=”软件一班” />
 <student studentID=”S1-200516″ name=”王晓双” gender=”0″ birthday=”1986-07-05″ className=”软件一班” />
 <student studentID=”S1-200517″ name=”李婷” gender=”0″ birthday=”1985-08-06″ className=”软件一班” />
 <student studentID=”S2-200501″ name=”张俊” gender=”1″ birthday=”1985-09-16″ className=”软件二班” />
 <student studentID=”S2-200502″ name=”李柯” gender=”1″ birthday=”1985-06-18″ className=”软件二班” />
 <student studentID=”S2-200503″ name=”张弛” gender=”1″ birthday=”1985-12-24″ className=”软件二班” />
 <student studentID=”S2-200504″ name=”李杰” gender=”1″ birthday=”1984-10-20″ className=”软件二班” />
 <student studentID=”S2-200505″ name=”李小维” gender=”0″ birthday=”1986-08-08″ className=”软件二班” />
 <student studentID=”S2-200506″ name=”李玲” gender=”0″ birthday=”1986-06-28″ className=”软件二班” />
 <student studentID=”S2-200507″ name=”刘军杰” gender=”1″ birthday=”1984-12-10″ className=”软件二班” />
 <student studentID=”S2-200508″ name=”李志军” gender=”1″ birthday=”1985-03-08″ className=”软件二班” />
 <student studentID=”S2-200509″ name=”李林” gender=”1″ birthday=”1985-07-20″ className=”软件二班” />
 <student studentID=”S2-200510″ name=”赵媛” gender=”0″ birthday=”1986-07-12″ className=”软件二班” />
 <student studentID=”S2-200511″ name=”赵莎莎” gender=”0″ birthday=”1986-08-16″ className=”软件二班” />
 <student studentID=”S2-200512″ name=”赵楠楠” gender=”0″ birthday=”1986-05-08″ className=”软件二班” />
 <student studentID=”S2-200513″ name=”赵嘉琦” gender=”0″ birthday=”1986-05-08″ className=”软件二班” />
 <student studentID=”S2-200514″ name=”孙博” gender=”1″ birthday=”1985-07-02″ className=”软件二班” />
 <student studentID=”S2-200515″ name=”孙旭超” gender=”1″ birthday=”1985-04-02″ className=”软件二班” />
 <student studentID=”W1-200501″ name=”谭壮” gender=”1″ birthday=”1985-12-30″ className=”网络一班” />
 <student studentID=”W1-200502″ name=”周婷” gender=”0″ birthday=”1986-06-14″ className=”网络一班” />
 <student studentID=”W1-200503″ name=”林丽” gender=”0″ birthday=”1985-08-12″ className=”网络一班” />
 <student studentID=”W1-200504″ name=”卢迪” gender=”0″ birthday=”1986-12-02″ className=”网络一班” />
 <student studentID=”W1-200505″ name=”梁家荣” gender=”1″ birthday=”1985-07-02″ className=”网络一班” />
 <student studentID=”W1-200506″ name=”陈兴盛” gender=”1″ birthday=”1984-03-19″ className=”网络一班” />
 <student studentID=”W1-200507″ name=”张强” gender=”1″ birthday=”1984-04-18″ className=”网络一班” />
 <student studentID=”W1-200508″ name=”刘军” gender=”1″ birthday=”1986-12-11″ className=”网络一班” />
 <student studentID=”W1-200509″ name=”周坚” gender=”1″ birthday=”1984-12-17″ className=”网络一班” />
 <student studentID=”W1-200510″ name=”张顺” gender=”1″ birthday=”1984-05-18″ className=”网络一班” />
 <student studentID=”W1-200511″ name=”刘若水” gender=”0″ birthday=”1985-07-09″ className=”网络一班” />
 <student studentID=”W1-200512″ name=”张力” gender=”1″ birthday=”1984-09-16″ className=”网络一班” />
 <student studentID=”W1-200513″ name=”陈睿” gender=”0″ birthday=”1985-10-12″ className=”网络一班” />
 <student studentID=”W1-200514″ name=”孔蔼” gender=”0″ birthday=”1985-12-15″ className=”网络一班” />
 <student studentID=”W1-200515″ name=”韩轩” gender=”1″ birthday=”1985-11-03″ className=”网络一班” />
 <student studentID=”W1-200516″ name=”李清” gender=”0″ birthday=”1986-05-25″ className=”网络一班” />
 <student studentID=”W1-200517″ name=”王良” gender=”1″ birthday=”1985-04-24″ className=”网络一班” />
 <student studentID=”W1-200518″ name=”陈诚” gender=”1″ birthday=”1985-07-15″ className=”网络一班” />
 <student studentID=”W1-200519″ name=”王洋” gender=”0″ birthday=”1984-06-10″ className=”网络一班” />
 <student studentID=”W1-200521″ name=”张扬” gender=”1″ birthday=”1985-06-02″ className=”网络一班” />
 <student studentID=”W2-200501″ name=”刘容” gender=”0″ birthday=”1985-12-31″ className=”网络二班” />
 <student studentID=”W2-200503″ name=”李杰” gender=”1″ birthday=”1985-07-08″ className=”网络二班” />
 <student studentID=”W2-200504″ name=”张义” gender=”1″ birthday=”1985-08-14″ className=”网络二班” />
 <student studentID=”W2-200505″ name=”李慧” gender=”0″ birthday=”1985-04-08″ className=”网络二班” />
 <student studentID=”W2-200506″ name=”张俊生” gender=”1″ birthday=”1986-06-19″ className=”网络二班” />
 <student studentID=”W2-200507″ name=”李从文” gender=”1″ birthday=”1985-08-16″ className=”网络二班” />
 <student studentID=”W2-200508″ name=”张恒” gender=”1″ birthday=”1985-06-20″ className=”网络二班” />
 <student studentID=”W2-200509″ name=”陈明” gender=”0″ birthday=”1984-04-11″ className=”网络二班” />
 <student studentID=”W2-200510″ name=”周勤” gender=”0″ birthday=”1985-08-20″ className=”网络二班” />
 <student studentID=”W2-200511″ name=”郭英” gender=”0″ birthday=”1985-02-02″ className=”网络二班” />
 <student studentID=”W2-200512″ name=”李明” gender=”1″ birthday=”1984-04-09″ className=”网络二班” />
 <student studentID=”W2-200513″ name=”叶文娟” gender=”0″ birthday=”1985-08-03″ className=”网络二班” />
 <student studentID=”W2-200514″ name=”李思思” gender=”0″ birthday=”1986-12-15″ className=”网络二班” />
 <student studentID=”W2-200515″ name=”周雄” gender=”1″ birthday=”1985-07-02″ className=”网络二班” />
 <student studentID=”W2-200516″ name=”梁帅” gender=”1″ birthday=”1986-12-09″ className=”网络二班” />
 <student studentID=”W2-200518″ name=”梁琪” gender=”0″ birthday=”1986-12-14″ className=”网络二班” />
 <student studentID=”W2-200519″ name=”王维” gender=”1″ birthday=”1985-05-20″ className=”网络二班” />
 <student studentID=”W2-200520″ name=”陈功” gender=”1″ birthday=”1984-11-01″ className=”网络二班” />
 <student studentID=”W2-200521″ name=”李静” gender=”0″ birthday=”1986-12-14″ className=”网络二班” />
 <student studentID=”W2-200522″ name=”李盈盈” gender=”0″ birthday=”1984-02-12″ className=”网络二班” />
</item>

 

以上是源码，本人只是引用学习，著作权归作者所有，后期本人会在as部分加上注释，纯属个人理解，有不对的地方还请高手纠正

jsp文件：

<%@ page language=”java” import=”java.util.*” pageEncoding=”utf-8″%>
<%@page contentType=”application/msexcel;charset=utf-8″ %>

<%
request.setCharacterEncoding(“utf-8″);
response.setHeader(“Content-disposition”,”attachment;filename=test.xls”);//contentType=”application/vnd.ms-excel” 在浏览器中打开
String str=request.getParameter(“htmltable”);//htmltable是flex里传过来的参数
System.out.println(str);
out.print(str);
//flex的编码格式为utf-8
//用于flex的导出报表
%>

]]> http://www.36ria.com/1121/feed 0 给DataGrid添加一个静态分页组件 http://www.36ria.com/872 http://www.36ria.com/872#comments Mon, 30 Nov 2009 06:47:29 +0000 明河共影 http://www.36ria.cn/?p=872 之前已经发了好几篇演示flex的DataGrid强大特性的文章，今天发篇教程，给DataGrid添加个静态分页组件。网上关于给DataGrid添加动态分页的教程好多。这里的静态分页是指数据已经全部派发完毕，客服端进行的分页。
这个类是我自己写的，难免会有bug，也有不完善的地方，先放出，以后慢慢改善。

先来看演示：


源代码下载：

点此下载

说明下文档结构：

libs：分页类所在文件夹

images：分页组件所用到的按钮图片

DataGrid7.mxml：主程序入口

主程序代码说明：

（沿用之前所用的DataGrid示例，重复部分不再贴出，详见源代码）

  1. internal function completeHandler(evt:ResultEvent):void{
  2.                 sourceArrCollection = evt.result.rss.channel.item;
  3.                 GridPage = new Page(sourceArrCollection,currentPage,perPage);
  4.                 GridPage.pageBar.width = 526;
  5.                 GridPage.pageBar.height = 32;
  6.                 grid_vessel.addChild(GridPage.pageBar);
  7.                
  8.             }

这是数据加载后执行的回调函数。
GridPage = new Page(sourceArrCollection,currentPage,perPage);实例化分页组件。
接受三个参数：

  • sourceArrCollection : 数据源（为ArrayCollection实例）
  • currentPage：所要显示的当前页，默认为1
  • perPage：每页的记录数，默认为10

grid_vessel.addChild(GridPage.pageBar);
pageBar这个属性值是GridPage生成的分页容器，为HBox实例。

分页类代码：

  1. package libs
  2. {
  3.     import flash.events.MouseEvent;
  4.    
  5.     import mx.collections.ArrayCollection;
  6.     import mx.containers.HBox;
  7.     import mx.controls.Image;
  8.     import mx.controls.LinkButton;
  9.     import mx.controls.NumericStepper;
  10.     import mx.controls.Text;
  11.    
  12.     public class Page
  13.     {
  14.         //数据源
  15.         [Bindable] public var sourceArrCollection:ArrayCollection;
  16.         //每页条目数
  17.         [Bindable] public var perPage:uint;
  18.         //当前页码
  19.         [Bindable] public var currentPage:uint;
  20.         //总页数
  21.         [Bindable] public var totalPages:uint;
  22.         //总记录数
  23.         [Bindable] public var totalItems:uint;
  24.         //当前页的数据储存器
  25.         [Bindable] public var currentPageCollection:ArrayCollection;
  26.         [Bindable] public var icons:ArrayCollection;
  27.         public var pageBar:HBox;
  28.         public var btns:Object = {};
  29.         public var text:Text;
  30.                
  31.         private var _dataCollection:ArrayCollection;
  32.         private var _start:uint = 0;
  33.         private var _end:uint = 0;
  34.         private var _btnIcons:Array = ['images/first.gif','images/prev.gif','images/next.gif','images/last.gif'];       
  35.         private var _btnDisableIcons:Array = ['images/first_disabled.gif','images/prev_disabled.gif','images/next_disabled.gif','images/last_disabled.gif'];   
  36.        
  37.         public function Page(sourceArrCollection:ArrayCollection = null,currentPage:uint = 1,perPage:uint = 10):void
  38.         {
  39.             this.sourceArrCollection = sourceArrCollection;
  40.             this.currentPage = currentPage;
  41.             this.perPage = perPage;
  42.             this.totalItems = this.sourceArrCollection.length;
  43.             this.totalPages = Math.ceil(this.totalItems / this.perPage);
  44.             icons = new ArrayCollection(this._btnIcons);
  45.             this._create();
  46.             this.getData(currentPage);
  47.             this.btns.next.addEventListener(MouseEvent.CLICK,nextHandler);
  48.             this.btns.prev.addEventListener(MouseEvent.CLICK,prevHandler);
  49.             this.btns.first.addEventListener(MouseEvent.CLICK,firstHandler);
  50.             this.btns.last.addEventListener(MouseEvent.CLICK,lastHandler);
  51.             this.btns.jump.addEventListener(MouseEvent.CLICK,jumpHandler);
  52.             var _that:* = this;
  53.             function nextHandler():void{
  54.                 if(_that.btns.next.source != _that._btnDisableIcons[2]) _that.next();
  55.             }
  56.             function prevHandler():void{
  57.                 if(_that.btns.prev.source != _that._btnDisableIcons[1]) _that.prev();
  58.             }
  59.             function firstHandler():void{
  60.                 if(_that.btns.first.source != _that._btnDisableIcons[0]) _that.goToFirst();
  61.             }
  62.             function lastHandler():void{
  63.                 if(_that.btns.last.source != _that._btnDisableIcons[3]) _that.goToLast();
  64.             }
  65.             function jumpHandler():void{
  66.                 var _num:uint = _that.btns.PageNum.value;
  67.                 _that.getData(_num);
  68.             }                                                
  69.         }
  70.         /**
  71.          * 获取指定页的数据储存器
  72.          * @param pageNum {uint} 指定页
  73.          * @return {ArrayCollection}
  74.          * 
  75.          */
  76.         public function getData(pageNum:uint):ArrayCollection{
  77.             if(this.sourceArrCollection != null && this.totalItems > 0){
  78.                     this.currentPageCollection = new ArrayCollection();
  79.                     this._end = pageNum * this.perPage;
  80.                     this._start = this._end - this.perPage;
  81.                     if(pageNum == this.totalPages) this._end = this.totalItems;
  82.                     this.currentPage = pageNum;
  83.                     this._setBtnEnabled();
  84.                     this.text.text = "第"+this.currentPage+"页/共"+this.totalPages+"页"+this.totalItems+"条记录";
  85.                     for(var i:int=this._start;i<this._end;i++){
  86.                         this.currentPageCollection.addItem(this.sourceArrCollection.getItemAt(i));
  87.                     }
  88.                     return this.currentPageCollection;               
  89.             }
  90.             return null;
  91.         }
  92.         /**
  93.          * 下一页
  94.          */
  95.         public function next():void{
  96.             if(this.currentPage < this.totalPages){
  97.                 this.currentPage ++;
  98.                 this.getData(this.currentPage);           
  99.             }
  100.                
  101.         }
  102.         /**
  103.          * 上一页
  104.          */       
  105.         public function prev():void{
  106.             if(this.currentPage >1){
  107.                 this.currentPage --;
  108.                 this.getData(this.currentPage);               
  109.             }       
  110.         }
  111.         /**
  112.          * 前往第一页
  113.          */       
  114.         public function goToFirst():void{
  115.             this.currentPage = 1;
  116.             this.getData(this.currentPage);
  117.         }
  118.         /**
  119.          * 前往最后一页
  120.          */       
  121.         public function goToLast():void{
  122.             this.currentPage = this.totalPages;
  123.             this.getData(this.currentPage);
  124.         }
  125.         /**
  126.          * 获取总页数
  127.          */       
  128.         public function getTotalPages():int{
  129.             return this.totalPages;
  130.         }
  131.         /**
  132.          * 获取记录总数
  133.          */       
  134.         public function getTotalItems():int{
  135.             return this.totalItems;
  136.         }
  137.         /**
  138.          * 设置分页工具条的enabled
  139.          */       
  140.         private function _setBtnEnabled():void{
  141.             if(this.currentPage == 1){
  142.                 this.btns.first.source = this._btnDisableIcons[0];
  143.                 this.btns.prev.source = this._btnDisableIcons[1];
  144.             }
  145.             else if(this.currentPage == this.totalPages){
  146.                 this.btns.next.source = this._btnDisableIcons[2];
  147.                 this.btns.last.source = this._btnDisableIcons[3];
  148.             }
  149.             else{
  150.                 this.btns.first.source = this._btnIcons[0];
  151.                 this.btns.prev.source = this._btnIcons[1];
  152.                 this.btns.next.source = this._btnIcons[2];
  153.                 this.btns.last.source = this._btnIcons[3];               
  154.             }
  155.            
  156.         }
  157.         /**
  158.          * 创建分页工具条
  159.          */       
  160.         private function _create():void{
  161.             this.pageBar = new HBox();
  162.             this.pageBar.styleName = "pageBar";
  163.             this. _createBtns();
  164.             this.pageBar.addChild(this.btns.PageNum);
  165.             this.pageBar.addChild(this.btns.jump);           
  166.             this.pageBar.addChild(this.btns.first);
  167.             this.pageBar.addChild(this.btns.prev);
  168.             this.pageBar.addChild(this.btns.next);
  169.             this.pageBar.addChild(this.btns.last);
  170.             this.text = new Text();
  171.             this.pageBar.addChild(this.text);
  172.         }
  173.         private function _createBtn(source:String):Image{
  174.             var btn:Image = new Image();
  175.             btn.source = source;
  176.             btn.width = 16;
  177.             btn.height = 16;
  178.             btn.styleName = "pageBarBtn";
  179.            
  180.             btn.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
  181.             function mouseOverHandler(evt:MouseEvent):void{
  182.                 //btn.setStyle("borderStyle","solid");
  183.                
  184.             }
  185.             return btn;
  186.         }
  187.         private function _createBtns():void{
  188.             this.btns.first = this._createBtn(this._btnIcons[0]);
  189.             this.btns.prev = this._createBtn(this._btnIcons[1]);
  190.             this.btns.next = this._createBtn(this._btnIcons[2]);
  191.             this.btns.last = this._createBtn(this._btnIcons[3]);
  192.             var _NumericStepper:NumericStepper = new NumericStepper();
  193.             _NumericStepper.stepSize = 1;
  194.             _NumericStepper.minimum = 1;
  195.             _NumericStepper.maximum = this.totalPages;
  196.             this.btns.PageNum = _NumericStepper;
  197.             var _jump:LinkButton = new LinkButton();
  198.             _jump.label = "跳转";
  199.             this.btns.jump = _jump;
  200.            
  201.            
  202.         }
  203.        
  204.  
  205.     }
  206. }
]]> http://www.36ria.com/872/feed 1 使用itemRenderer自定义List元素 http://www.36ria.com/807 http://www.36ria.com/807#comments Mon, 23 Nov 2009 11:58:58 +0000 明河共影 http://www.36ria.cn/?p=807

效果说明：利用flex的itemRenderer渲染器，自定义List的每条内容，这里加上不同图标。
（由于有用到子组件和图标，这里放出源代码下载）

点此下载

来看源代码：

主程序

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="veiw.*">   
  3.     <mx:Style>
  4.         Application{
  5.             fontSize:12px;
  6.         }       
  7.     </mx:Style>
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.events.ListEvent;
  11.             import veiw.ListItem;
  12.             import mx.collections.ArrayCollection;
  13.             [Bindable]
  14.             private var db:ArrayCollection = new ArrayCollection([{id:1,name:'jquery教程'},
  15.                                     {id:2,name:'ext教程'},
  16.                                     {id:3,name:'flex教程'},
  17.                                     {id:4,name:'php教程'}]);                                                                                       
  18.         ]]>
  19.     </mx:Script>
  20.     <mx:List id="listTest" itemRenderer="veiw.ListItem" dataProvider="{db}" width="200"/>
  21. </mx:Application>

沿用之前发布的List文章的例子。

关键是增加了itemRenderer这个属性。

关键来看渲染器子组件的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="50" verticalAlign="middle">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             [Bindable]
  6.             private var imageClass:Class;
  7.               
  8.                [Embed(source="assets/jquery.png")]
  9.                private var jqueryIcon:Class;
  10.                [Embed(source="assets/ext.jpg")]
  11.                private var extIcon:Class;
  12.                [Embed(source="assets/flex.jpg")]
  13.                private var flexIcon:Class;
  14.                [Embed(source="assets/php.jpg")]
  15.                private var phpIcon:Class;                                                
  16.             private var typeToImageHash:Object = {1:jqueryIcon, 2:extIcon,
  17.             3:flexIcon, 4:phpIcon};   
  18.            
  19.             override public function set data(value:Object):void{
  20.                 imageClass = typeToImageHash[value.id];
  21.                 nameText.text = value.name;
  22.             }       
  23.            
  24.         ]]>
  25.     </mx:Script>
  26.     <mx:Image source="{imageClass}" />
  27.     <mx:Text id="nameText" />
  28. </mx:HBox>

这里有必要提下Embed这个元标签，这个元标签的作用是将图片、视屏等嵌入到flash。
根据嵌入位置的不同，语法也各不同：
1、[ Embed (parameter1, paramater2, ...)] 元数据标签
这主要在AS文件中，或MXML文件中的 标签中使用。
2、@ Embed (parameter1, paramater2, …) 指令
这主要在MXML标签中使用。
3、 Embed (parameter1, paramater2, …) 指令
这主要在 样式表中使用。根据情况的不同嵌入资源 Embed 的返回类型可以是Class或String。

例子所用的是第一种方式，嵌入图标并赋值给一个变量。

  1. override public function set data(value:Object):void{
  2.                 imageClass = typeToImageHash[value.id];
  3.                 nameText.text = value.name;
  4.             }

这里覆盖读写数据的方法。

]]> http://www.36ria.com/807/feed 0 使List组件改变数据时带有动画 http://www.36ria.com/759 http://www.36ria.com/759#comments Thu, 19 Nov 2009 06:59:12 +0000 明河共影 http://www.36ria.cn/?p=759

效果说明：当点击添加元素的时候，就会向List添加一条数据，而添加的过程带有渐隐动画。

源代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Style>
  4.         Application{
  5.             fontSize:12px;
  6.         }
  7.     </mx:Style>
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.collections.ArrayCollection;
  11.             [Bindable]
  12.             private var db:ArrayCollection = new ArrayCollection([{id:'1',name:'jquery教程'},
  13.                                     {id:'2',name:'ext教程'},
  14.                                     {id:'3',name:'flex教程'}]);
  15.             private function addItem():void{
  16.                 db.addItem({id:'4',name:'php教程'});
  17.             }                       
  18.         ]]>
  19.     </mx:Script>
  20.     <mx:DefaultListEffect color="0xccccff" fadeOutDuration="2000" id="glow" />
  21.     <mx:List width="200" itemsChangeEffect="{glow}" dataProvider="{db}" editable="true" labelField="name"  x="10" y="40"/>
  22.     <mx:Button click="addItem()" label="添加个元素"  x="20" y="10"/>
  23.     
  24. </mx:Application>

关键知识点说明：

List 组件中有个itemsChangeEffect属性，当数据改变的时候会触发改变特效（dataProvider请使用collection）。
这里使用的特效效果为DefaultListEffect。

]]> http://www.36ria.com/759/feed 0 创建可编辑的list 组件 http://www.36ria.com/741 http://www.36ria.com/741#comments Wed, 18 Nov 2009 07:13:58 +0000 明河共影 http://www.36ria.cn/?p=741 listexample

源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Style>
  4.         Application{
  5.             fontSize:12px;
  6.         }
  7.     </mx:Style>
  8.     <mx:Script>
  9.         <![CDATA[
  10.             [Bindable]
  11.             private var db:Array = [{id:'1',name:'jquery教程'},
  12.                                     {id:'2',name:'ext教程'},
  13.                                     {id:'3',name:'flex教程'}];
  14.             private function editEnd(event:Event):void{
  15.                     trace(list.selectedItem.id+''+list.selectedItem.name);               
  16.             }
  17.             private function setEditor():void{
  18.                 list.editedItemPosition = {columnIndex:0,rowIndex:1};
  19.             }
  20.         ]]>
  21.     </mx:Script>
  22.     <mx:Button label="设置编辑" click="setEditor()" />
  23.     <mx:List width="200" selectedIndex="1" id="list" selectionColor="#CCCCFF" labelField="name" dataProvider="{db}"
  24.          editable="true" itemEditBegin="trace(list.editedItemPosition)" itemEditEnd="editEnd(event)" editorXOffset="5" editorYOffset="2"  x="0" y="30"/>
  25. </mx:Application>

关键点说明：

将list 组件的editable 属性设置为true 并侦听itemEditBegin 和itemEditEnd 属性，或通过包含columnIndex 和rowIndex 属性的对象来设置editedItemPosition。

]]> http://www.36ria.com/741/feed 0 自定义DataGrid排序图标 http://www.36ria.com/725 http://www.36ria.com/725#comments Tue, 17 Nov 2009 06:26:11 +0000 明河共影 http://www.36ria.cn/?p=725 datagrid4

先来看演示：

关于DataGrid的文章已经发布好几篇了，由于此示例很简单。就只沿用第一个实例的代码。

源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
  3.     <mx:Style>
  4.         Application{fontSize:12;}
  5.     </mx:Style>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.rpc.events.FaultEvent;
  9.             import mx.collections.ArrayCollection;
  10.             import mx.rpc.events.ResultEvent;
  11.             [Bindable]
  12.             private var homesForSale:ArrayCollection;
  13.             private function initApp():void{
  14.                 this.srv.send();
  15.             }
  16.             internal function completeHandler(evt:ResultEvent):void{
  17.                 grid.dataProvider = evt.result.rss.channel.item;
  18.             }   
  19.             internal function errorHandler(evt:FaultEvent):void{
  20.                 trace("error:"+evt.fault);
  21.             }   
  22.         ]]>
  23.     </mx:Script>
  24.     <mx:HTTPService id="srv" url="http://www.people.com.com/rss/world.xml" result="completeHandler(event)" showBusyCursor="true" fault="errorHandler(event)" />
  25.     <mx:DataGrid id="grid" width="500" height="400" sortArrowSkin="@Embed('images/down.png')" rowCount="10">
  26.         <mx:columns>
  27.             <mx:DataGridColumn headerText="标题" dataField="title" />
  28.             <mx:DataGridColumn headerText="链接" dataField="link" />
  29.             <mx:DataGridColumn headerText="发布日期" dataField="pubDate" />
  30.         </mx:columns>
  31.     </mx:DataGrid>
  32.  
  33. </mx:Application>

想要修改排序图标关键是一个属性：sortArrowSkin=”@Embed(‘images/down.png’)”

]]> http://www.36ria.com/725/feed 0 PopUpButton弹出树形菜单 http://www.36ria.com/722 http://www.36ria.com/722#comments Tue, 17 Nov 2009 06:08:19 +0000 明河共影 http://www.36ria.cn/?p=722 先来看演示：


当用户点击PopUpButton时，弹出一个树形菜单，点击菜单项，弹出个包含该项信息的窗口。

来看下源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Style>
  4.         Application{
  5.             fontSize:12px;
  6.         }
  7.         Tree {
  8.             textAlign: left;
  9.             fontWeight: normal;
  10.         }
  11.     </mx:Style>
  12.     <mx:Script>
  13.         <![CDATA[
  14.             private var selectedNode:XML;
  15.             import mx.controls.Alert;
  16.             private function treeChanged(evt:Event):void{
  17.                 selectedNode = Tree(evt.target).selectedItem as XML;
  18.                
  19.                 Alert.show("你选择的是："+selectedNode.@label,"提示消息",Alert.YES,this);
  20.             }
  21.         ]]>
  22.     </mx:Script>
  23.     <mx:XMLList id="treeXml">
  24.         <folder label="菜单">
  25.             <folder label="jquery">
  26.                 <folder label="jquery插件" />
  27.                 <folder label="jquery教程" />
  28.             </folder>
  29.             <folder label="flex">
  30.                 <folder label="flex实例" />
  31.                 <folder label="flex教程" />
  32.             </folder>
  33.             <folder label="ext">
  34.                 <folder label="ext实例" />
  35.                 <folder label="ext教程" />
  36.             </folder>                                   
  37.         </folder>
  38.     </mx:XMLList>
  39.     <mx:PopUpButton label="请选择">
  40.         <mx:popUp>
  41.             <mx:Tree id="tree" dataProvider="{treeXml}" labelField="@label" showRoot="false" width="200" change="treeChanged(event)" />
  42.         </mx:popUp>
  43.     </mx:PopUpButton>
  44. </mx:Application>
]]> http://www.36ria.com/722/feed 0 创建个带半透明菜单的PopUpButton http://www.36ria.com/681 http://www.36ria.com/681#comments Mon, 09 Nov 2009 06:22:05 +0000 明河共影 http://www.36ria.cn/?p=681 先来看效果：

代码比较简单：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white">
  3.     <mx:Style>
  4.         Application{
  5.             fontSize:12px;
  6.         }   
  7.         PopUpButton {
  8.             popUpStyleName: myCustomPopUpStyleName;
  9.         }
  10.         .myCustomPopUpStyleName {
  11.             fontWeight: normal;
  12.             textAlign: left;
  13.             backgroundAlpha: 0.4;
  14.             backgroundColor: white;
  15.             borderStyle: solid;
  16.         }
  17.     </mx:Style>
  18.  
  19.     <mx:Script>
  20.         <![CDATA[
  21.             import mx.controls.Menu;
  22.             private var menu:Menu;
  23.             private function init():void {
  24.                 menu = new Menu();
  25.                 menu.labelField = "@label";
  26.                 menu.dataProvider = xmlList;
  27.                 popUpButton.popUp = menu;
  28.                 menu.width = popUpButton.width;
  29.             }
  30.         ]]>
  31.     </mx:Script>
  32.  
  33.     <mx:XMLList id="xmlList">
  34.         <node label="添加" />
  35.         <node label="删除" />
  36.         <node label="修改" />
  37.         <node label="重置" />
  38.     </mx:XMLList>
  39.  
  40.     <mx:PopUpButton id="popUpButton" label="请选择操作" openAlways="true" creationComplete="init();"  textAlign="left" y="10" x="36"/>
  41.  
  42.     <mx:VBox backgroundColor="#989995" width="400" height="200"  x="24" y="42"/>
  43.  
  44. </mx:Application>
]]> http://www.36ria.com/681/feed 1 使用itemRenderer给DataGrid添加复选框-DataGrid系列示例 http://www.36ria.com/675 http://www.36ria.com/675#comments Fri, 06 Nov 2009 09:11:03 +0000 明河共影 http://www.36ria.cn/?p=675 先来看演示：

当用户点击DataGrid内的复选框时。在DataGrid下面出现单条记录的信息。

由于此示例需要包含自定义子组件和自定义事件，所以提供源代码下载而不再贴出全部代码。

点此下载

关键知识点说明：

  1. itemRenderer的用法，itemRenderer是flex的DataGrid强大的精髓，正是由于此属性的存在，才有可能随心所欲的控制DataGrid的数据
  2. 创建自定义事件，并予以派发

先来看复选框子组件(view文件夹下)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="24">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import event.DataGridEvent;
  6.             private function select():void{
  7.                 this.parentApplication.dispatchEvent(new DataGridEvent(data,check.selected));
  8.             }
  9.         ]]>
  10.     </mx:Script>
  11.     <mx:CheckBox id="check" x="0" y="0" change="select()"  />
  12. </mx:Canvas>

CheckBox定义个change事件，在复选框的值被改变的时候，向父容器（DataGrid）派发自定义事件。

先来看自定义事件(event文件夹下)

  1. package event
  2. {
  3.     import flash.events.Event;
  4.     public class DataGridEvent extends Event
  5.     {
  6.         public var isSelect:Boolean;
  7.         public var o:Object;
  8.         public function DataGridEvent(_o:Object,_isSelect:Boolean):void
  9.         {
  10.             o = _o;
  11.             isSelect = _isSelect;
  12.             super("selectRow");
  13.         }
  14.  
  15.     }
  16. }

自定义事件必须继承于Event。此事件接受二个参数，_o为该行数据，_isSelect复选框的值。
指的一提的是super(“selectRow”);这句非常关键。此句的意思是调用父类的构造函数，并将事件类型传递出去。

先来看主程序：

  1. <mx:DataGridColumn headerText="选择" itemRenderer="view.CheckBox" width="40" />

调用子组件

  1. addEventListener("selectRow",selectHandler);
  1. private function selectHandler(evt:event.DataGridEvent):void{
  2.                  if(evt.isSelect){
  3.                      title_label.text = "标题："+evt.o.title;
  4.                      link_label.text = "链接："+evt.o.link;
  5.                      pubDate_label.text = "发表日期："+evt.o.pubDate;
  6.                  }else{
  7.                      title_label.text = "";
  8.                      link_label.text = "";
  9.                      pubDate_label.text = "";                    
  10.                  }
  11.              }

监听自定义事件。

]]> http://www.36ria.com/675/feed 1 格式化DataGrid内的数据-DataGrid系列示例 http://www.36ria.com/669 http://www.36ria.com/669#comments Thu, 05 Nov 2009 08:39:22 +0000 明河共影 http://www.36ria.cn/?p=669 先来看个演示：

看上去与上一篇使用HTTPService加载DataGrid数据源-DataGrid系列示例     没什么区别。注意留意里面的数据。所有的标题在长度大于12的情况下都被截取。日期被格式化为XXXX年XX月XX日。

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
  3.     <mx:Style>
  4.         Application{fontSize:12;}
  5.     </mx:Style>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.controls.dataGridClasses.DataGridColumn;
  9.             import mx.rpc.events.FaultEvent;
  10.             import mx.collections.ArrayCollection;
  11.             import mx.rpc.events.ResultEvent;
  12.             [Bindable]
  13.             private var homesForSale:ArrayCollection;
  14.             private const MAXLEN:int = 10;
  15.             private function initApp():void{
  16.                 this.srv.send();
  17.             }
  18.             internal function completeHandler(evt:ResultEvent):void{
  19.                 grid.dataProvider = evt.result.rss.channel.item;
  20.             }   
  21.             internal function errorHandler(evt:FaultEvent):void{
  22.                 trace("error:"+evt.fault);
  23.             }
  24.              private function formatDate(item:Object,column:DataGridColumn):String{
  25.                 if (item[column.dataField] == null) {
  26.                  return "-";
  27.                 }
  28.                 return FD.format(item[column.dataField]);
  29.                }
  30.              private function formatTitle(item:Object,column:DataGridColumn):String{
  31.                  var str:String = item[column.dataField];
  32.                  var len:Number = item[column.dataField].length;
  33.                  if(len > MAXLEN){
  34.                      return str.substr(0,MAXLEN)+'......';
  35.                  }
  36.                  return str;
  37.              }
  38.         ]]>
  39.     </mx:Script>
  40.     <mx:HTTPService id="srv" url="http://www.people.com.com/rss/world.xml" result="completeHandler(event)" showBusyCursor="true" fault="errorHandler(event)" />
  41.     <mx:DateFormatter id="FD" formatString="YYYY年MM月DD日" />
  42.     <mx:DataGrid id="grid" width="500" height="400" >
  43.         <mx:columns>
  44.             <mx:DataGridColumn headerText="标题" dataField="title" labelFunction="formatTitle" />
  45.             <mx:DataGridColumn headerText="链接" dataField="link" />
  46.             <mx:DataGridColumn headerText="发布日期" dataField="pubDate" labelFunction="formatDate" />
  47.         </mx:columns>
  48.     </mx:DataGrid>
  49.  
  50. </mx:Application>

在上一篇的代码上加了些新的内容。来看其关键点。

  1. 想要格式化DataGridColumn中的数据，必须用到labelFunction属性。其值为函数名（不包含()）
  2. DateFormatter的用法，在flex中有几个专门用于格式化数据的组件，而这个日期格式化是最经常用到的。

来看关键AS代码

  1. private const MAXLEN:int = 10;
  2.              private function formatTitle(item:Object,column:DataGridColumn):String{
  3.                  var str:String = item[column.dataField];
  4.                  var len:Number = item[column.dataField].length;
  5.                  if(len > MAXLEN){
  6.                      return str.substr(0,MAXLEN)+'......';
  7.                  }
  8.                  return str;
  9.              }

定义个MAXLEN的常量：最大字符串数目。
formatTitle有二个参数，想要获取数据item[column.dataField]即可。值得一提的回调函数必须有返回值。

  1. private function formatDate(item:Object,column:DataGridColumn):String{
  2.                 if (item[column.dataField] == null) {
  3.                  return "-";
  4.                 }
  5.                 return FD.format(item[column.dataField]);
  6.                }

这是格式化日期的回调函数。返回的是经过DateFormatter格式化输出的字符串。

]]> http://www.36ria.com/669/feed 2 使用HTTPService加载DataGrid数据源-DataGrid系列示例 http://www.36ria.com/663 http://www.36ria.com/663#comments Tue, 03 Nov 2009 08:28:38 +0000 明河共影 http://www.36ria.cn/?p=663 接下来这段时间，开始研究flex的DataGrid的组件。此组件实在太强大，是有事非常常用的组件。示例中DataGrid的数据源来自人民网的新闻rss。

先来看演示：

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
  3.     <mx:Style>
  4.         Application{fontSize:12;}
  5.     </mx:Style>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.rpc.events.FaultEvent;
  9.             import mx.collections.ArrayCollection;
  10.             import mx.rpc.events.ResultEvent;
  11.             [Bindable]
  12.             private var homesForSale:ArrayCollection;
  13.             private function initApp():void{
  14.                 this.srv.send();
  15.             }
  16.             internal function completeHandler(evt:ResultEvent):void{
  17.                 grid.dataProvider = evt.result.rss.channel.item;
  18.             }   
  19.             internal function errorHandler(evt:FaultEvent):void{
  20.                 trace("error:"+evt.fault);
  21.             }   
  22.         ]]>
  23.     </mx:Script>
  24.     <mx:HTTPService id="srv" url="http://www.people.com.com/rss/world.xml" result="completeHandler(event)" showBusyCursor="true" fault="errorHandler(event)" />
  25.     <mx:DataGrid id="grid" width="500" height="400" >
  26.         <mx:columns>
  27.             <mx:DataGridColumn headerText="标题" dataField="title" />
  28.             <mx:DataGridColumn headerText="链接" dataField="link" />
  29.             <mx:DataGridColumn headerText="发布日期" dataField="pubDate" />
  30.         </mx:columns>
  31.     </mx:DataGrid>
  32.  
  33. </mx:Application>

关键知识点说明:

  1. HTTPService的用法。此组件是向后台请求数据的关键。send()方法会向后台自动请求数据。result属性值十个回调函数。当在加载完成后运行。
  2. DataGrid的创建。columns是必不可少的头部。

来看关键的AS代码

  1. internal function completeHandler(evt:ResultEvent):void{
  2.                 grid.dataProvider = evt.result.rss.channel.item;
  3.             }

此函数再数据加载完毕后运行（返回的是xml数据）。
grid.dataProvider = evt.result.rss.channel.item;指定DataGrid的数据源。指向xml对象中所有item标签。

数据是加载成功的，但还无法完全满足需求。比如数据格式、分页等等。下次示例奉上。

]]> http://www.36ria.com/663/feed 4 使用HSlider组件动态改变容器大小 http://www.36ria.com/648 http://www.36ria.com/648#comments Fri, 30 Oct 2009 12:19:00 +0000 明河共影 http://www.36ria.cn/?p=648 先来看演示：

当用户改变滑动条的值时，容器的宽度随着动态变化。

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3. <mx:Script>
  4.     <![CDATA[
  5.         [Bindable]
  6.         private var scale:Number = 1;
  7.         private function doResize(n:Number):Number{
  8.             zoom.zoomWidthTo = n;
  9.             zoom.play();
  10.             return box.scaleX;
  11.         }
  12.     ]]>
  13. </mx:Script>
  14.     <mx:Zoom id="zoom" originX="0" originY="0" target="{box}" />
  15.     <mx:Canvas id="box" x="10" y="52" scaleX="{doResize(scale)}" backgroundColor="#ffffff" width="200" height="200" >
  16.     </mx:Canvas>
  17.     <mx:HSlider id="slider" x="26" y="26" change="scale = slider.value" minimum="0" maximum="1" />
  18. </mx:Application>

关键知识点说明

  1. flex强大的数据绑定技术，想在组件中绑定as变量，请在此变量前加上[Bindable]元标签
  2. Zoom动画的使用，Zoom为放缩效果，注意与Resize效果类似，但实际上是有很大区别的。Zoom缩放的是比例，而Resize改变大小。
  3. 在使用函数绑定的时候，函数里面务必要有返回值
]]> http://www.36ria.com/648/feed 0 flex中ArrayCollection用法举例 http://www.36ria.com/630 http://www.36ria.com/630#comments Wed, 28 Oct 2009 07:14:56 +0000 明河共影 http://www.36ria.cn/?p=630 先来看演示：

说明：这里使用MenuBar组件，MenuBar的数据源是一个ArrayCollection。用户试着修改表单中的索引值和label值，点击编辑按钮后修改ArrayCollection数据，MenuBar的显示数据也随之改变。这就是ArrayCollection的便利神奇之处。

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="inttApp(event)">
  3.     <mx:Style>
  4.         Application{fontSize:12px;}
  5.     </mx:Style>
  6.     <mx:MenuBar id="menu" dataProvider="{menu_dp}" width="400" />
  7.     <mx:Form x="10" y="63">
  8.         <mx:FormHeading label="菜单编辑" />
  9.         <mx:FormItem label="一级菜单索引">
  10.             <mx:TextInput id="menuIdx" restrict="0-9" text="0" />
  11.         </mx:FormItem>
  12.         <mx:FormItem label="二级菜单索引">
  13.             <mx:TextInput id="subMenuIdx" restrict="0-9" text="0" />
  14.         </mx:FormItem>
  15.         <mx:FormItem label="该索引值的菜单项的文本">
  16.             <mx:TextInput id="label_ti"/>
  17.         </mx:FormItem>   
  18.         <mx:FormItem>
  19.             <mx:Button label="编辑" click="editMenu()"/>
  20.         </mx:FormItem>                   
  21.     </mx:Form>
  22. </mx:Application>
  1. <mx:Script>
  2.         <![CDATA[
  3.             import mx.collections.ArrayCollection;
  4.             import mx.events.FlexEvent;
  5.             [Bindable]
  6.             private var menu_dp:ArrayCollection;
  7.             private function inttApp(evt:FlexEvent):void{
  8.                 var temp:Array = new Array();
  9.                 var subNodes:ArrayCollection = new ArrayCollection([
  10.                     {label:"New"},{label:"Open"},
  11.                     {label:"Close",enabled:false}
  12.                 ])
  13.                 temp.push({label:'文件',children:subNodes});
  14.                 temp.push({label:"编辑"});
  15.                 subNodes = new ArrayCollection( [
  16.                     {label:"50%", type:"radio", groupName:"one"},
  17.                     {label:"100%", type:"radio",groupName:"one",selected:true},
  18.                     {label:"150%",type:"radio",groupName:"one"}
  19.                 ]);
  20.                 temp.push({label:"视图大小",children:subNodes});
  21.                 menu_dp = new ArrayCollection(temp);
  22.             }
  23.            
  24.             private function editMenu():void{
  25.                 var itemToEdit:Object;
  26.                 try {
  27.                     itemToEdit = menu_dp.getItemAt(int(menuIdx.text));
  28.                     if(subMenuIdx.text) {
  29.                         itemToEdit = itemToEdit.children.getItemAt(int(subMenuIdx.text));
  30.                     }
  31.                     itemToEdit.label = label_ti.text;
  32.                     menu_dp.itemUpdated(itemToEdit);
  33.                 }
  34.                 catch(ex:Error){
  35.                
  36.                 }               
  37.             }
  38.         ]]>
  39.     </mx:Script>
]]> http://www.36ria.com/630/feed 0 flex中Alert对话框组件用法 http://www.36ria.com/614 http://www.36ria.com/614#comments Tue, 27 Oct 2009 06:52:31 +0000 明河共影 http://www.36ria.cn/?p=614 先来看演示：

这个例子展示了使用Alert对话框组件基本方法show。

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
  3.     <mx:Style>
  4.         Application{fontSize:12px;}
  5.     </mx:Style>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.controls.Alert;
  9.             import flash.events.MouseEvent;
  10.             import mx.events.CloseEvent;
  11.             internal function initApp():void{
  12.                 btn.addEventListener(MouseEvent.CLICK,handler);
  13.             }
  14.             internal function handler(evt:MouseEvent):void{
  15.                 Alert.show("这是一个对话框","提示消息",Alert.YES | Alert.NO | Alert.OK | Alert.CANCEL,this,onAlertClose);
  16.             }
  17.             internal function onAlertClose(evt:CloseEvent):void{
  18.                 switch (evt.detail){
  19.                     case Alert.OK :
  20.                         status.text = '你单击的是OK'
  21.                     break;
  22.                     case Alert.CANCEL :
  23.                         status.text = '你单击的是CANCEL'
  24.                     break;
  25.                     case Alert.YES :
  26.                         status.text = '你单击的是YES'
  27.                     break;
  28.                     case Alert.NO :
  29.                         status.text = '你单击的是NO'
  30.                     break;                                                           
  31.                        
  32.                 }
  33.             }
  34.         ]]>
  35.     </mx:Script>
  36.     <mx:Button id="btn" x="10" y="38" label="点击这里" width="100" />
  37.     <mx:Label id="status" x="10" y="10" text="" width="105" />
  38. </mx:Application>

关键知识点说明：

  1. Alert.show()函数的用法
  2. Alert.show()中第五个参数为关闭时候调用的回调函数CloseEvent（留意回调函数中的detail时间属性）

简要说明下Alert.show()函数中的参数含义：

  1. 第1个参数：对话框显示的内容
  2. 第2个参数：对话框显示的标题
  3. 第3个参数：对话框显示的按钮(OK、CANCEL、YES、NO)
  4. 第4个参数：对话框居中的参照对象，一般为this
  5. 第5个参数：关闭时候调用的回调函数
  6. 第6个参数：对话框中出现的图标
]]> http://www.36ria.com/614/feed 0 flex中创建一个可即时编辑的Label http://www.36ria.com/611 http://www.36ria.com/611#comments Mon, 26 Oct 2009 06:35:09 +0000 明河共影 http://www.36ria.cn/?p=611 先来看演示：

当用户点击“值为：”后面的区域时，就会弹出一个输入框，输入完毕后按回车，输入框转变为含编辑后的值。

来看下源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" currentState="display">
  3.     <mx:Style>
  4.         Application{fontSize:12px;}
  5.     </mx:Style>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             [Bindable]
  9.             private var value:String;
  10.             private function changeState(event:Event = null):void{
  11.                 if(this.currentState == "display"){
  12.                     currentState = "edit";
  13.                 }else{
  14.                     value = editInput.text;
  15.                     currentState = "display";
  16.                 }
  17.             }
  18.         ]]>
  19.     </mx:Script>
  20.     <mx:states>
  21.         <mx:State id="display" name="display">
  22.             <mx:AddChild>
  23.                 <mx:Label text="{value}" id="text" x="{editValue.x + editValue.width}" minHeight="20" minWidth="100" click="changeState()" />
  24.             </mx:AddChild>
  25.         </mx:State>
  26.         <mx:State id="edit" name="edit">
  27.             <mx:AddChild>
  28.                 <mx:TextInput id="editInput"  x="{editValue.x + editValue.width}" text="{value}"
  29.                   minHeight="20" minWidth="100" enter="changeState()"  />
  30.             </mx:AddChild>
  31.         </mx:State>
  32.     </mx:states>
  33.     <mx:Label text="值为：" id="editValue" />
  34. </mx:Application>

关键知识点说说明：

  1. State状态的利用，状态是flex提供的非常便利的类，通过不同状态的切换添加多种视觉的方法。
  2. 回车键按下事件enter
  3. 关键属性：currentState

例子中采用两种状态:显示状态和编辑状态。显示状态保留了显示文本值的Label，编辑状态保留了允许用户编辑值的TextInput 组件。

]]> http://www.36ria.com/611/feed 0 将TextInput 绑定TextArea的值 http://www.36ria.com/608 http://www.36ria.com/608#comments Sat, 24 Oct 2009 02:22:17 +0000 明河共影 http://www.36ria.cn/?p=608 先来看演示：

当用户在文本框进行输入时，文本域的值也会改变，而且高度也会变化。通过这个实例你可以了解到flex的方便的绑定机制。

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.  
  4.     <mx:TextInput id="input" width="200" />
  5.     <mx:TextArea text="{input.text}" width="200" id="area" backgroundAlpha="0" 
  6.         height="{(Math.round(input.text.length/40)+1)*20}" wordWrap="true"  y="30"/>
  7.    
  8. </mx:Application>

非常简单的代码，关键来看TextArea 。
有二个属性的值与TextInput的text属性（文本长度）绑定。分别是text和height。

]]> http://www.36ria.com/608/feed 0 创建一个具有文字提示的TextInput http://www.36ria.com/595 http://www.36ria.com/595#comments Thu, 22 Oct 2009 06:18:23 +0000 明河共影 http://www.36ria.cn/?p=595 先来看下演示，体验下其效果。

实际上这并不算完整的自动完成的功能，但提供flex实现输入框自动完成功能的核心。我们来看下其源代码。

完整源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             [Bindable]
  6.             private var allWords:Array = ["apple", "boy", "cat","milk", "orange", "pepper", "recipe", "truck"];
  7.             private var regexp:RegExp;
  8.             private function checkInput():void{
  9.                 var tmp:Array = allWords.filter(filter);
  10.                 input.text = tmp[0];
  11.             }
  12.             private function filter(element:*,index:int,arr:Array):Boolean{
  13.                 regexp = new RegExp(input.text);
  14.                 return (regexp.test(element as String));
  15.             }
  16.         ]]>
  17.     </mx:Script>   
  18. <mx:Canvas  width="400" height="300">
  19.     <mx:TextInput id="input" change="checkInput()"  x="120" y="100"/>
  20. </mx:Canvas>
  21. </mx:Application>

关键要点说明:

  1. 使用TextInput 组建的change 事件监听用户输入
  2. 使用数组的filter过滤函数
  3. 使用正则表达式测试词典里是否有何用户输入的内容相匹配的单词

来看其关键代码：

checkInput()

  1. private function checkInput():void{
  2.                 var tmp:Array = allWords.filter(filter);
  3.                 input.text = tmp[0];
  4.             }

这里最关键的是建立个临时数组tmp来获取经过过滤后的数组，将值写入输入框。filter（）中的filter未过滤回调函数。

filter

  1. private function filter(element:*,index:int,arr:Array):Boolean{
  2.                 regexp = new RegExp(input.text);
  3.                 return (regexp.test(element as String));
  4.             }

使用正则来匹配单词数组与输入框的值。

]]> http://www.36ria.com/595/feed 1 使用ColorPicker 控制容器背景颜色 http://www.36ria.com/564 http://www.36ria.com/564#comments Fri, 16 Oct 2009 09:21:56 +0000 明河共影 http://www.36ria.cn/?p=564 先来看下面的示例：

来看源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="veiw.*">   
  3.     <mx:Canvas id="cnv" width="450" height="450" backgroundColor="#eeaeaea">
  4.         <mx:ColorPicker id="pckr" right="10" top="10" change="setColor(event)"/>
  5.     </mx:Canvas>
  6.     <mx:Script>
  7.     <![CDATA[
  8.     import mx.events.ColorPickerEvent;
  9.     private function setColor(evt:ColorPickerEvent):void
  10.     {
  11.     cnv.setStyle("backgroundColor",evt.color); }
  12.     ]]>
  13.     </mx:Script>
  14.  
  15.  
  16.  
  17. </mx:Application>

很简单的结构，使用ColorPicker 的change事件来设定Canvas的背景颜色。
setStyle方法用于设置容器样式。

]]> http://www.36ria.com/564/feed 0 flex中使用HSlider滑动条组件控制PopUpButton http://www.36ria.com/550 http://www.36ria.com/550#comments Mon, 12 Oct 2009 04:56:55 +0000 明河共影 http://www.36ria.cn/?p=550 这个示例演示如何使用HSlider来控制PopUpButton的圆角程度。
来看演示：http://www.36ria.com/flex/HSlider.swf

来看其代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="top"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Style>
  9.         Application{
  10.             fontSize:12px;
  11.         }
  12.         PopUpButton {
  13.             popUpStyleName: myCustomPopUpStyleName;
  14.         }
  15.  
  16.         .myCustomPopUpStyleName {
  17.             fontWeight: normal;
  18.             textAlign: left;
  19.             leftIconGap: 0;
  20.         }
  21.     </mx:Style>
  22.  
  23.     <mx:Script>
  24.         <![CDATA[
  25.             import mx.controls.Menu;
  26.  
  27.             private function init():void {
  28.                 var menu:Menu = new Menu();
  29.                 menu.dataProvider = arr;
  30.                 popUpButton.popUp = menu;
  31.             }
  32.  
  33.             private function resizePopUp():void {
  34.                 popUpButton.popUp.width = popUpButton.width;
  35.             }
  36.         ]]>
  37.     </mx:Script>
  38.  
  39.     <mx:Array id="arr">
  40.         <mx:Object label="Alert" />
  41.         <mx:Object label="Button" />
  42.         <mx:Object label="ButtonBar" />
  43.         <mx:Object type="separator" />
  44.         <mx:Object label="CheckBox" />
  45.         <mx:Object label="ColorPicker" />
  46.         <mx:Object label="ComboBox" />
  47.     </mx:Array>
  48.     <mx:PopUpButton id="popUpButton"
  49.             label="请选择一个元素"
  50.             cornerRadius="{slider.value}"
  51.             arrowButtonWidth="{popUpButton.height}"
  52.             openAlways="true"
  53.             initialize="init();"
  54.             creationComplete="resizePopUp();" />
  55.  
  56.     <mx:ApplicationControlBar dock="true">
  57.         <mx:Form styleName="plain">
  58.             <mx:FormItem label="这是个滑动条:">
  59.                 <mx:HSlider id="slider"
  60.                         minimum="0"
  61.                         maximum="{popUpButton.height / 2}"
  62.                         value="0"
  63.                         liveDragging="true"
  64.                         snapInterval="1"
  65.                         tickInterval="1" />
  66.             </mx:FormItem>
  67.         </mx:Form>
  68.     </mx:ApplicationControlBar>
  69.  
  70. </mx:Application>

说明下其关键参数

  1. <mx:PopUpButton id="popUpButton"
  2.             label="请选择一个元素"
  3.             cornerRadius="{slider.value}"
  4.             arrowButtonWidth="{popUpButton.height}"
  5.             openAlways="true"
  6.             initialize="init();"
  7.             creationComplete="resizePopUp();" />

cornerRadius=”{slider.value}”这个属性的值与滑动条的值相绑定。
虽然这个功能实际意义不大，但举一反三的话，flex组件与组件之间的调用方式便可知一二了

]]> http://www.36ria.com/550/feed 0 flex中设置TextInput默认选择特定数量的文字 http://www.36ria.com/548 http://www.36ria.com/548#comments Mon, 12 Oct 2009 03:38:11 +0000 明河共影 http://www.36ria.cn/?p=548 标题有点拗口，先来看下效果就知道了。

仔细观察下输入框，就会发现，默认文本中有部分的文字被选择，而选中的文字是索引值为5-9的字。这是如何实现的呢，来看下其代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="TextInput_getTextField_alwaysShowSelection_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.core.UITextField;
  11.             import mx.controls.TextInput;
  12.  
  13.             private function init(evt:Event):void {
  14.                 var ti:TextInput = evt.currentTarget as TextInput;
  15.                 var tf:UITextField = ti.mx_internal::getTextField();
  16.                 tf.alwaysShowSelection = true;
  17.             }
  18.         ]]>
  19.     </mx:Script>
  20.  
  21.     <mx:TextInput id="textInput"
  22.             text="你好，这里是个文本框！"
  23.             selectionBeginIndex="4" selectionEndIndex="9"
  24.             initialize="init(event);" />
  25.     <mx:Button label="Submit" />
  26.  
  27. </mx:Application>

关键是 selectionBeginIndex=”4″ selectionEndIndex=”9″这二个属性，
selectionBeginIndex为起始位置，4开始，实际上选中的文字为5开始；
selectionEndIndex为结束位置

]]> http://www.36ria.com/548/feed 0 flex中DateField日期选择控件使用实例 http://www.36ria.com/603 http://www.36ria.com/603#comments Wed, 23 Sep 2009 06:56:47 +0000 明河共影 http://www.36ria.cn/?p=603 先来看下面的演示：计算开始时间与结束时间得出天数。

来看其完整的源代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Style>
  4.         Application{fontSize:12px;}
  5.     </mx:Style>
  6.     <mx:Script>
  7.         <![CDATA[
  8.             import mx.events.CalendarLayoutChangeEvent;
  9.             private static const MILLISECONDS:int = 1000;
  10.             private static const SECONDS:int = 60;
  11.             private static const MINUTES:int = 60;
  12.             private static const HOURS:int = 24;
  13.             private function update(evt:CalendarLayoutChangeEvent):void{
  14.                 try{
  15.                     var diff:Number = endDate.selectedDate.getTime() - startDate.selectedDate.getTime();
  16.                     var days:int = int(diff/(MILLISECONDS*SECONDS*MINUTES*HOURS));
  17.                     display.text = days.toString();
  18.                 }catch(ex:Error){
  19.                    
  20.                 }
  21.             }
  22.         ]]>
  23.     </mx:Script>
  24.     <mx:Form>
  25.         <mx:FormHeading label="获取天数" />
  26.         <mx:FormItem label="开始时间">
  27.             <mx:DateField id="startDate" change="update(event)"  width="150"/>
  28.         </mx:FormItem>
  29.         <mx:FormItem label="结束时间">
  30.             <mx:DateField id="endDate" change="update(event)"  width="150"/>
  31.         </mx:FormItem>   
  32.         <mx:FormItem label="天数">
  33.         <mx:Label id="display"/>
  34.         </mx:FormItem>           
  35.     </mx:Form>
  36. </mx:Application>

关键点说明：

  1. 引入DateField控件，使用change事件
  2. 获取二个DateField的值（是时间戳哦）

关键as代码说明：

  1. private function update(evt:CalendarLayoutChangeEvent):void{
  2.                 try{
  3.                     var diff:Number = endDate.selectedDate.getTime() - startDate.selectedDate.getTime();
  4.                     var days:int = int(diff/(MILLISECONDS*SECONDS*MINUTES*HOURS));
  5.                     display.text = days.toString();
  6.                 }catch(ex:Error){
  7.                    
  8.                 }
  9.             }

要获取时间戳，使用getTime的方法，diff为结束时间-开始时间后值，再将diff转成天，最后输出

]]> http://www.36ria.com/603/feed 0