flex 3学习小结1
flex 3 学习小结1
1 登陆+验证码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:states>
<!--新建“index”State-->
<mx:State name="index">
<!--移除“登录框”-->
<mx:RemoveChild target="{panel1}"/>
<!--添加新的组件-->
<mx:AddChild position="lastChild">
<mx:Label x="231" y="174" text="欢迎来到主页" fontFamily="Georgia" fontSize="20" />
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function initApp():void
{
//显示校验码
lblCheckCode.text=GenerateCheckCode();
}
private function loginHandle():void
{
//空的情况
if(txtUsername.text==""||txtPassword.text=="")
{
Alert.show("请输入完整数据!");
}
else
{
//合法用户
if
(txtUsername.text=="Administrator"&&txtPassword.text=="123456"&&txtCheckCode.text.toLocaleLowerCase()
==lblCheckCode.text.toLowerCase())
{
currentState="index";
}
//登录失败
else
{
//校验码错误
if(txtCheckCode.text.toLowerCase()!=lblCheckCode.text.toLowerCase())
{
Alert.show("校验码错误!");
//重新生成校验码
lblCheckCode.text=GenerateCheckCode();
}
//用户名或密码错误
else
Alert.show("用户名或密码错误!");
}
}
}
private function resetHandle():void
{
txtUsername.text="";
txtPassword.text="";
txtCheckCode.text="";
}
//生成随机码
private function GenerateCheckCode():String
{
//初始化
var ran:Number;
var number:Number;
var code:String;
var checkCode:String ="";
//生成四位随机数
for(var i:int=0; i<4; i++)
{
//Math.random生成数为类似为0.1234
ran=Math.random();
number =Math.round(ran*10000);
//如果是2的倍数生成一个数字
if(number % 2 == 0)
//"0"的ASCII码是48
code = String.fromCharCode(48+(number % 10));
//生成一个字母
else
//"A"的ASCII码为65
code = String.fromCharCode(65+(number % 26)) ;
checkCode += code;
}
return checkCode;
}
]]>
</mx:Script>
<mx:Panel x="108" y="71" width="349" height="257" layout="absolute" title="用户登录" fontFamily="Georgia"
fontSize="12" id="panel1">
<!-- "用户名"标签 -->
<mx:Label x="41.5" y="33" text="用户名"/>
<!-- "密码"标签 -->
<mx:Label x="42.5" y="81" text="密码"/>
<!-- "用户名"输入框 -->
<mx:TextInput x="94.5" y="33" id="txtUsername"/>
<!-- "密码"输入框 -->
<mx:TextInput x="95.5" y="81" id="txtPassword" displayAsPassword="true"/>
<!-- "登录"按钮 -->
<mx:Button x="82.5" y="159" label="登录" id="btnLogin" click="loginHandle()"/>
<!-- "重置"按钮 -->
<mx:Button x="181.5" y="159" label="重置" id="btnReset" click="resetHandle()"/>
<!-- "校验码"标签 -->
<mx:Label x="165.5" y="125" id="lblCheckCode" width="42.5" color="#377CD0"/>
<mx:LinkButton x="216" y="123" label="看不清楚?" id="linkbtnReGenerate"
click="lblCheckCode.text=GenerateCheckCode();" fontFamily="Georgia" fontSize="11"/>
<mx:Label x="39.5" y="123" text="校验码"/>
<!-- "校验码"输入框 -->
<mx:TextInput x="96.5" y="121" id="txtCheckCode" width="61" maxChars="4"/>
</mx:Panel>
</mx:Application>
注意,flex 3里,没新窗口的概念,因此有象flash中的state状态的概念,因此在状态面板中可以新建状态state即可,
比如这里建立了index的状态,写下登陆后的主页.并且用
currentState="index";去跳转了.
2 菜单导航
基本的:
<mx:MenuBar id="myMenuBar" labelField="@id" showRoot="false" width="293" horizontalCenter="0" y="24"
change="menuClickHandle(event)">
<mx:XMLList> <!-- XMLList标签表示以xml形式存储数据 -->
<menuitem id="Menu1" > <!-- 菜单项，以关系来表示菜单项与子菜单项 -->
<menuitem id="SubMenu1" type="radio" groupName="one"/>
<menuitem id="SubMenu2" type="radio" groupName="one"/>
</menuitem>
<menuitem id="Menu2" />
<menuitem id="Menu3" />
<menuitem id="Menu4" >
<menuitem id="SubMenu3" type="radio" groupName="two"/>
<menuitem id="SubMenu4" type="radio" groupName="two"
selected="true"/>
<menuitem id="SubMenu5" type="radio" groupName="two"/>
</menuitem>
</mx:XMLList>
还可以切换状态,根据菜单的事件
import mx.events.MenuEvent; //引用MenuEvent类
private function menuClickHandle(e:MenuEvent):void
{
if(e.label=="SubMenu1") //单击
“SubMenu1”时切换至“index1”
currentState="index1";
else if(e.label=="SubMenu2") //单击“SubMenu2”时
切换至“index2”
currentState="index2";
else if(e.label=="SubMenu3") //单击“SubMenu3”时
切换至“index3”
currentState="index3";
else if(e.label=="SubMenu4") //单击“SubMenu4”时
切换至“index4”
currentState="index4";
else if(e.label=="SubMenu5") //单击“SubMenu5”时
切换至“index5”
currentState="index5";
}
3 状态效果改变,比如
<mx:transitions>
<mx:Transition id="myTransition1" fromState="*" toState="index1">
<mx:Parallel target="{myVBox1}">
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel>
</mx:Transition>
....
</mx:tranmsitions>
4 柱型图实例
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script><![CDATA[
import mx.collections.ArrayCollection; //引用数组类
[Bindable]
//定义数据集，数据集的内容为每月的收支情况
public var finance:ArrayCollection = new ArrayCollection([
{Month:"一月", In:2000, Out:1500},
{Month:"二月", In:1000, Out:200},
{Month:"三月", In:1500, Out:200},
{Month:"四月", In:3500, Out:1000},
{Month:"五月", In:500, Out:800},
{Month:"六月", In:4500, Out:600},
{Month:"七月", In:2500, Out:500},
{Month:"八月", In:1570, Out:300},
{Month:"九月", In:1000, Out:450},
{Month:"十月", In:1500, Out:400},
{Month:"十一月", In:1700, Out:2500},
{Month:"十二月", In:1800, Out:1500},
]);
]]></mx:Script>
<mx:Panel title="柱状图实例"> <!--Panel容器，标题为“柱状图实例”-->
<!--柱状图组件，也称直方图-->
<mx:ColumnChart id="myChart" dataProvider="{finance}" >
<!--定义横坐标，绑定到“finance”数据集中的“Month”上-->
<mx:horizontalAxis>
<mx:CategoryAxis
dataProvider="{finance}"
categoryField="Month"
title="(月份)"
/>
</mx:horizontalAxis>
<mx:series> <!--数据以柱的形式表示-->
<!--x轴为月份，y轴表示收入-->
<mx:ColumnSeries
xField="Month"
yField="In"
displayName="收入"
/>
<!--x轴为月份，y轴表示支出-->
<mx:ColumnSeries
xField="Month"
yField="Out"
displayName="支出"
/>
</mx:series>
</mx:ColumnChart>
<!--Legend组件绑定柱状图中的数据名-->
<mx:Legend dataProvider="{myChart}"/>
</mx:Panel>
</mx:Application>
其中 <mx:ColumnChart id="myChart" dataProvider="{finance}" >定义数据源.
5 一个air的程序,就是本地的flash程序,读本地机器上的文件
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import flash.filesystem.File; //引用File类
]]>
</mx:Script>
<mx:Panel width="800" height="600">
<mx:VBox>
<mx:HBox>
<!--添加“FileSystemComboBox”组件，用以显示和选择文件目录-->
<mx:FileSystemComboBox id="filecmb" directory="{filedg.directory}"
directoryChange="filedg.directory=filecmb.directory;"/>
<!--添加“Button”组件，单击按钮实现“后退”功能-->
<mx:Button id="btnBack" label="后退" click="filedg.directory=filedg.directory.parent"/>
</mx:HBox>
<!--添加“FileSystemDataGrid”组件，用以显示文件列表-->
<mx:FileSystemDataGrid id="filedg" width="100%" height="400" directory="{new File('c:/')}"/>
</mx:VBox>
</mx:Panel>
</mx:WindowedApplication>
6 actionscript 3调用javascript
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface; //引用ExternalInterface类
public function invokeJavaScript():void
{
//调用JavaScript中的“returnTheName”函数
lblResult.text=ExternalInterface.call("returnTheName",txtName.text);
}
]]>
</mx:Script>
<mx:Panel width="245" height="130" title="ActionScript调用JavaScript">
<mx:TextInput id="txtName" text="[请输入名字]"/>
<mx:Button id="btnConnect" label="确定" click="invokeJavaScript()" x="229" y="204"/>
<mx:Label id="lblResult" text="test" x="205" y="99" width="150" height="80"/>
</mx:Panel>
</mx:Application>
javascript
javascript调用actionscript
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import flash.external.ExternalInterface; //引用ExternelInterface类
//add函数计算从1加到100，并返回结果
public function add():int
{
var i:int;
var sum:int=0;
for(i=1;i<=100;i++)
{
sum+=i;
}
return sum;
}
public function initApp():void
{
//声明函数名
ExternalInterface.addCallback("addTo100",add);
}
]]>
</mx:Script>
</mx:Application>
在HTML页中调用javascript时
<button onclick="addMethod()">xxx</button>
function addMethod()
{
var s=JavscriptCallActionScript.addtTo100();
..
}
}