Flex 3编程入门级教程附代码下载

欢迎使用RSS订阅本Blog title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate">

使用Flex 3编写一个简单的在线测试程序。源代码下载在文章最末尾部分。
关键技术：

Flex Builder 3开发环境的使用
简单的Flex 3 组件
简单的Action Script 3语言程序段
对XML的读取

完成效果如以下两图：

首先要安装Flex Builder 3开发环境，这里不再赘述，不会的朋友请参看我的另一篇文章《Flex Builder 3 正版注册码及破解版方法》。
这段小程序作为一个第一次接触Flex的初学者是非常合适的，因为它包含了常用的功能，而又不涉及与后台server的交互。下面看看它的工作流程：

用户进入前台(浏览器)，Flash Player将后台XML文件中的题目通过循环读取出来，显示在界面上。
用户选择答案完毕后，点击“测一测”按钮，由Action Script 3语言汇总用户的得分。
Action Script 3语言将得分进行选择分支判断，并在文本域中显示正确结果。

下面是关键代码：

<?xml version="1.0" encoding="utf-8"?>
<!--
# author XiaoLee@http://blog.csdn.net/softwave
# version alpha
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="catalogService.send()">
<mx:Script>
<![CDATA[
public function createListener():void{
bt.addEventListener(MouseEvent.CLICK,yesorno);
}
public function yesorno():void{
var count:Number=0;
for(var i:Number=0;i<myredio.length;i++){
if(myredio[i].selected==true){
count++;
}
}
if(count>=0&&count<=6){
myresult.text="你的得分是："+count.toString()+"/n"+"6分以下：普通人。你的生活很大众，很正常，也相对稳定。其实不妨试试在周末做两天宅女，让每天都精细保养的皮肤得到放松，同时也放松自觉的身心。";
}else if(count>=7&&count<=12){
myresult.text="你的得分是："+count.toString()+"/n"+"7-12分：50％宅女。你一进极具“御宅”潜质，目前你乐于在宅女和正常人的状态间变换，如何迅速从宅女的状态转换到光鲜见人，是你需要掌握的功课。";
}else if(count>12&&count<=18){
myresult.text="你的得分是："+count.toString()+"/n"+"12-18分：80％宅女。没错，宅女就是你！喜欢作宅女，其实是尊重自己内心的一种表现，但不要忘记，也要善待自己的外表。";
}else if(count>18){
myresult.text="你的得分是："+count.toString()+"/n"+"18分以上：100％宅女。虽说做一个宅女也没有什么不好，但出于对容貌的考虑，还是建议你不要过于孤僻和懒散，要做就要做一个时尚宅女，好好善待自己。";
}
}
]]>
</mx:Script>
<mx:HTTPService id="catalogService" url="ask.xml" resultFormat="e4x"/>
<mx:XMLListCollection id="mytest" source="{catalogService.lastResult.question}"/>
<mx:Panel x="69.5" y="44" width="581" height="700" layout="absolute" title="测测你是不是宅女" fontSize="12">
<mx:Repeater id="i" dataProvider="{mytest}" startingIndex="0">
<mx:CheckBox id="myredio" label="{i.currentItem.QuestionID+'.'+i.currentItem.QuestionName}" fontSize="12" x="10" y="{i.currentIndex*20}"/>
</mx:Repeater>
<mx:Button x="248" y="624" label="测一测" id="bt" click="yesorno()"/>
<mx:TextArea id="myresult" x="69" y="505" height="111" width="423"/>
</mx:Panel>
</mx:Application>

在上面的代码中：

第6行是对应用程序进行全局定义。creationComplete是在Flash Player绘制画布完成后调用方法。
第7～32行是在Flex的mxml文件中嵌入Action Script代码，需要<![CDATA[...code...]]>来引用。
第33、34行是通过HTTPService方式调用后台的XML格式的题库，具体用法和实例请见另一篇文章《Flex 3处理外部XML的两种方法》
第37～39行是通过mxml的循环标签<mx:Repeater>来循环绘制出控件<mx:CheckBox>(复选框)。

Flex中用repeater循环输出checkbox并在代码中遍历checkbox的方法，这里给出一个小例子，搞过编程的朋友一看就明白了：
mxml代码——

<mx:Repeater id="rep2" dataProvider="{part.ComponentList}">
<mx:CheckBox
id="cb3"
label="{rep2.currentItem.ComponentId + '[' +rep2.currentItem.ComponentCharge + ']' }"
data="{rep2.currentItem}"
click="CheckBoxChangeHandel()"
/>
</mx:Repeater>

对应AS代码——

for (var i:Number = 0; i < cb3.length; i++)
{
if (cb3[i].selected)
{
items.addItem(cb3[i].data as Component);
}
}

这里面要注意的是，在flex中循环出来的同一id的控件是个数组。更具体用法及示例请见另一篇文章《Flex Builder教程及Flex中repeater循环用法示例》。

本例中的另一个重要组成部分是XML文件格式的题库。下面给出代码片段：

<?xml version="1.0" encoding="UTF-8"?>
<Ask>
<question>
<QuestionName>不管额头有多高，在家里一定把头发随意夹起。</QuestionName>
<QuestionID>1</QuestionID>
<QuestionAnswer>Y</QuestionAnswer>
</question>
<question>
<QuestionName>爱穿宽松的运动弹性布料，整体不搭也无所谓。</QuestionName>
<QuestionID>2</QuestionID>
<QuestionAnswer>Y</QuestionAnswer>
</question>
<question>
<QuestionName>假日既不化妆也不穿胸罩，半年没上美容院。</QuestionName>
<QuestionID>3</QuestionID>
<QuestionAnswer>Y</QuestionAnswer>
</question>
</Ask>

使用XML的好处就是程序发布后，可以继续对xml文件进行修改，而不用重新编译发布程序文件。
简单的在线测试可以作为一个入门，希望它能让朋友们领略Flex的一丝神奇。深入探究下去，会发现Flex更加强大奇妙的地方。
源代码我已发布到了CSDN的资源库，点击这里可以去下载（需要CSDN的帐号哦，没有的先注册吧）。
本文系小李专栏原创作品，转载请注明出处：小李专栏 http://blog.csdn.net/softwave

Flex 3编程入门级教程附代码下载相关推荐

ASP.NET的MVC中使用Cookie做身份验证(附代码下载)
场景 ASP.NET的MVC中使用Session做身份验证(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1071 ...
Ionic+Angular实现中英国际化(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
Ionic+Angular+Express实现前后端交互使用HttpClient发送get请求数据并加载显示(附代码下载)
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
Dubbo与SpringBoot整合流程(从实例入手，附代码下载)
场景 Dubbo环境搭建-管理控制台dubbo-admin实现服务监控: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10362 ...
JPA中实现双向多对多的关联关系(附代码下载)
场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...
PyTorch 模型训练实用教程(附代码)
向AI转型的程序员都关注了这个号???????????? 机器学习AI算法工程公众号:datayx PyTorch 能在短时间内被众多研究人员和工程师接受并推崇是因为其有着诸多优点,如采用 Py ...
Gmsh剖三维网格教程附代码
文章目录前言一.程序代码二.程序结果 1. 带有点标号的结果图 2. 没有点标号的结果图三.总结前言前面写过三篇关于Gmsh的教程: 有限元剖网格之Gmsh安装与使用入门 Gmsh剖一维网 ...
uniapp获取手机号（详细教程附代码）
uniapp获取手机号(详细教程附代码) 一.获取code 二.通过code获取获取openId 和 session_key 三.让用户授权(同意后需要对数据解密) 个人小程序不能使用这个功能,必须是 ...
【目标检测】基于yolov3的血细胞检测和计数(无bug教程+附代码+数据集)
多的不说,少的不唠,先看检测效果图: 共检测三类:红细胞RBC.白细胞WBC.血小板Platelets Hello,大家好,我是augustqi.今天给大家带来的保姆级教程是:基于yolov3的血细胞 ...

Flex 3编程入门级教程附代码下载

Flex 3编程入门级教程附代码下载相关推荐

最新文章

热门文章