ria之家--RIA三部曲：jquery、ext、flex » 达达达人

FLEX中的VIEW STATES

达达达人 — Sun, 30 May 2010 05:53:58 +0000

FLEX中视图改变有很多种形式，可以跳转页面，也可以通过添加state控制，在当前页面进行控制。这里介绍mx:states（对应到as中试States 类）的使用。具体的使用在示例代码中介绍，本例是一个登陆/注册界面的转换，下面看代码：

xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:states>
<mx:State name="Register">
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:target>
<mx:FormItem id="confirm" label="Confirm:">
<mx:TextInput/>
mx:FormItem>
mx:target>
mx:AddChild>
<mx:SetProperty target="{loginPanel}" name="title" value="Register"/>
<mx:SetProperty target="{loginButton}" name="label" value="Register"/>
<mx:SetStyle target="{loginButton}"
name="color" value="blue"/>
<mx:RemoveChild target="{registerLink}"/>>
<mx:AddChild relativeTo="{spacer1}" position="before">
<mx:target>
<mx:LinkButton id="loginLink" label="Return to Login" click="currentState=''"/>
mx:target>
mx:AddChild>
mx:State>
mx:states>
<mx:Panel title="Login" id="loginPanel"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Click the 'Need to Register?' link to change state. Click the 'Return to Login' link to return to the base state."/>
<mx:Form id="loginForm" >
<mx:FormItem label="Username:">
<mx:TextInput/>
mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput/>
mx:FormItem>
mx:Form>
<mx:ControlBar>
<mx:LinkButton id="registerLink" label="Need to Register?"
click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="Login" id="loginButton"/>
mx:ControlBar>
mx:Panel>
mx:Application>

详细说一下mx:AddChild 有六个属性其中id不说了

relativeTo：相对于其添加子项的对象；
target：要添加的子级；
position：显示列表中子项的位置，随 relativeTo 属性指定的对象而变化。有效值为 “before”、”after”、”firstChild” 和 “lastChild”。默认值为“lastChild”。
creationPolicy：该子级的创建策略。该属性确定 targetFactory 将在何时创建该子级的实例。仅当指定 targetFactory 属性时，Flex 才使用该属性。以下是有效值：
值意义
auto （默认）在第一次需要实例时创建实例。
all 在应用程序启动时创建实例。
none 不自动创建实例。必须调用 createInstance() 方法来创建该实例。
默认值为 “auto”.
targetFactory:创建子级的 factory。可以指定以下任一项目：
1实现 IDeferredInstance 接口并创建一个或多个子实例的 factory 类。
2Flex 组件（即任何为 UIComponent 类的子类的类），如 Button 控件。如果使用 Flex 组件，Flex 编译器会自动将该组件包装到 factory 类中。
如果设置了该属性，子级将在由 creationPolicy 属性确定的时间实例化。
如果设置了 target 属性，则不要设置该属性。该属性是 AddChild 类默认属性。设置该属性并将 creationPolicy 设置为“all”等同于设置 target 属性。

FLEX中的图片擦拭效果

达达达人 — Sat, 29 May 2010 11:24:43 +0000

这里列出flex中图片的擦拭效果的例子，擦拭效果即橡皮擦效果，共分为四个方向，擦拭效果同时适用于text和titleWindow

xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
/*左擦除*/
<mx:WipeLeft id="wipeLeftOut" duration="1000"/>
<mx:WipeLeft id="wipeLeftIn" duration="1000"/>
/*下擦除*/
<mx:WipeDown id="wipeDownOut" duration="1000"/>
<mx:WipeDown id="wipeDownIn" duration="1000"/>
/*右擦除*/
<mx:WipeRight id="wipeRightOut" duration="1000"/>
<mx:WipeRight id="wipeRightIn" duration="1000"/>
/*上擦除*/
<mx:WipeUp id="wipeUpOut" duration="1000"/>
<mx:WipeUp id="wipeUpIn" duration="1000"/>
<mx:Panel title="WipeLeft Effect Example" width="95%" height="95%"
paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5" verticalAlign="middle">
<mx:Text width="100%" color="blue"
text="Use the WipeLeft effect to show or hide the image."/>
<mx:HDividedBox width="100%">
<mx:Image source="@Embed(source='assets/Kraid.png')"
visible="{cb1.selected}"
hideEffect="{wipeDownOut}" showEffect="{wipeDownIn}"/>
<mx:Image source="@Embed(source='assets/Kraid.png')"
visible="{cb1.selected}"
hideEffect="{wipeLeftOut}" showEffect="{wipeLeftIn}"/>
<mx:Image source="@Embed(source='assets/Kraid.png')"
visible="{cb1.selected}"
hideEffect="{wipeRightOut}" showEffect="{wipeRightIn}"/>
<mx:Image source="@Embed(source='assets/Kraid.png')"
visible="{cb1.selected}"
hideEffect="{wipeUpOut}" showEffect="{wipeUpIn}"/>
mx:HDividedBox>
<mx:CheckBox id="cb1" label="visible" selected="true"/>
mx:Panel>
mx:Application>

点此下载

Alert.show()使用方式

达达达人 — Sat, 19 Dec 2009 11:12:02 +0000

import mx.controls.Alert;

import mx.events.CloseEvent;

// Event handler function uses a static method to show

// a pop-up window with the title, message, and requested buttons.

private function clickHandler(event:Event):void {

Alert.show("Do you want to save your changes?", "Save Changes", 3, this, alertClickHandler);

}

// Event handler function for displaying the selected Alert button.

private function alertClickHandler(event:CloseEvent):void {

if (event.detail==Alert.YES)

status.text="You answered Yes";

else

status.text="You answered No";

}

// Event handler function changes the default Button labels and sets the

// Button widths. If you later use an Alert with the default Buttons,

// you must reset these values.

private function secondClickHandler(event:Event):void {

Alert.buttonWidth = 100;

Alert.yesLabel = "Magenta";

Alert.noLabel = "Blue";

Alert.cancelLabel = "Green";

Alert.show("Select a color:","Color Selection",1|2|8,this);

// Set the labels back to normal:

Alert.yesLabel = "Yes";

Alert.noLabel = "No";

}

]]>

text=”Click the button below to display a simple Alert window.”/>

text=”Click the button below to display an Alert window and capture the button pressed by the user.”/>

text=”Click the button below to display an Alert window that uses custom Button labels.”/>

第一个alert

Alert.show(message,title);// 首参数为要弹出的对话框的内容，第二个参数为要弹出对话框的标题

第二个Alert

Alert.show(“Do you want to save your changes?”, “Save Changes”, 3, this, alertClickHandler); 首参数为要弹出的对话框的内容；第二个参数为要弹出对话框的标题；第三个参数指定可显示的button（可显示的button共四个分别为Alert.YES，Alert.NO ，Alert.OK，Alert.CANCEL 他们的二进制值分别为1，2，4，8），也可以显示多个button，最多可显示四个，以安位或的型式相连：Alert.YES|Alert.NO |Alert.OK|Alert.CANCEL，或者取她们相或之后的二进制数，比如本例中取了Alert.YES与Alert.NO相或后的二进制数，默认值为Alert.OK；第四个参数为Alert组件的父组件；第五个参数为button的单击响应事件或者称为Alert组件的关闭响应事件，默认值为null即无任何操作

第三个alert

Alert.show(“Select a color:”,”Color Selection”,1|2|8,this);可以更改Alert弹出对话框中button的label值，在alert组件中定义了每个button的label属性，例如：Alert.yesLabel，Alert.noLabel

，通过指定他们的值就可以更改对应button的label值，在本例中1|2|8指的是显示yes，no，cancel三个button

这三个Alert.show()是同一个方法，只是每个在用的时候省略了不同的参数，这个根据不同的需求来定

flex导出excel(jsp)

达达达人 — Sun, 13 Dec 2009 13:56:48 +0000

最近新学的后台为jsp的导出excel文件的实例，感觉比jfreechart插件方便很多，现将源码贴上

mxml文件：

http://www.adobe.com/2006/mxml“
layout=”vertical”
initialize=”myService.send()”
fontSize=”12″ viewSourceURL=”srcview/index.html”>

–>

      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);
   }

        ]]>

  showBusyCursor=”true”
  url=”data/student.xml”
  result=”myAC = event.result.item.student”
  fault=”faultHandler(event)”/>
  dataProvider=”{myAC}” >

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+= ‘

’;

//Set the tableheader data (retrieves information from the datagrid header
for(var i:int = 0;i   colors = dg.getStyle(“themeColor”);

  if(dg.columns[i].headerText != undefined) {
   str+=””;
  } else {
   str+= “”;
  }
}
str += “”;
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   str+=””;

  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 += “”;

    } else {
     //Our dataprovider contains the real data
     //We need the column information (dataField)
     //to specify which key to use.
     str += “”;
    }
   }
  }
  str += “”;
}
str+=”

”+dg.columns[i].headerText+”	”+dg.columns[i].dataField+”
”+dg.columns[k].labelFunction(dg.dataProvider.getItemAt(j),dg.columns[k].dataField)+”	”+dg.dataProvider.getItemAt(j)[dg.columns[k].dataField]+”

”;

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文件：

以上是源码，本人只是引用学习，著作权归作者所有，后期本人会在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的导出报表
%>