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

系统 1801 0
<!--新Google 468x15 横链接单元开始--> <script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 横链接单元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468x15 横链接单元结束-->

<!-- Feedsky FEED发布代码开始 --> 欢迎使用RSS订阅本Blog <!-- FEED自动发现标记开始 --> <link title="RSS 2.0" type="application/rss+xml" href="http://feed.feedsky.com/softwave" rel="alternate"> <!-- FEED自动发现标记结束 --> Blog 订阅

使用Flex 3编写一个简单的在线测试程序。源代码下载在文章最末尾部分。
关键技术:
  1. Flex Builder 3开发环境的使用
  2. 简单的Flex 3 组件
  3. 简单的Action Script 3语言程序段
  4. 对XML的读取
完成效果如以下两图:




首先要安装Flex Builder 3开发环境,这里不再赘述,不会的朋友请参看我的另一篇文章 《Flex Builder 3 正版注册码及破解版方法》
这段小程序作为一个第一次接触Flex的初学者是非常合适的,因为它包含了常用的功能,而又不涉及与后台server的交互。下面看看它的工作流程:
  1. 用户进入前台(浏览器),Flash Player将后台XML文件中的题目通过循环读取出来,显示在界面上。
  2. 用户选择答案完毕后,点击“测一测”按钮,由Action Script 3语言汇总用户的得分。
  3. Action Script 3语言将得分进行选择分支判断,并在文本域中显示正确结果。
下面是关键代码:
  1. <? xml version = "1.0" encoding = "utf-8" ?>
  2. <!--
  3. #authorXiaoLee@http://blog.csdn.net/softwave
  4. #versionalpha
  5. -- >
  6. < mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" creationComplete = "catalogService.send()" >
  7. < mx:Script >
  8. <![CDATA[
  9. publicfunctioncreateListener():void{
  10. bt.addEventListener(MouseEvent.CLICK,yesorno);
  11. }
  12. publicfunctionyesorno():void{
  13. varcount:Number=0;

  14. for(vari:Number=0;i<myredio.length;i++){
  15. if(myredio[i].selected==true){
  16. count++;
  17. }
  18. }
  19. if(count>=0&&count<=6){
  20. myresult.text="你的得分是:"+count.toString()+"/n"+"6分以下:普通人。你的生活很大众,很正常,也相对稳定。其实不妨试试在周末做两天宅女,让每天都精细保养的皮肤得到放松,同时也放松自觉的身心。";
  21. }elseif(count>=7&&count<=12){
  22. myresult.text="你的得分是:"+count.toString()+"/n"+"7-12分:50%宅女。你一进极具“御宅”潜质,目前你乐于在宅女和正常人的状态间变换,如何迅速从宅女的状态转换到光鲜见人,是你需要掌握的功课。";
  23. }elseif(count>12&&count<=18){
  24. myresult.text="你的得分是:"+count.toString()+"/n"+"12-18分:80%宅女。没错,宅女就是你!喜欢作宅女,其实是尊重自己内心的一种表现,但不要忘记,也要善待自己的外表。";
  25. }elseif(count>18){
  26. myresult.text="你的得分是:"+count.toString()+"/n"+"18分以上:100%宅女。虽说做一个宅女也没有什么不好,但出于对容貌的考虑,还是建议你不要过于孤僻和懒散,要做就要做一个时尚宅女,好好善待自己。";
  27. }
  28. }
  29. ]]>
  30. </ mx:Script >
  31. < mx:HTTPService id = "catalogService" url = "ask.xml" resultFormat = "e4x" />
  32. < mx:XMLListCollection id = "mytest" source = "{catalogService.lastResult.question}" />
  33. < mx:Panel x = "69.5" y = "44" width = "581" height = "700" layout = "absolute" title = "测测你是不是宅女" fontSize = "12" >

  34. < mx:Repeater id = "i" dataProvider = "{mytest}" startingIndex = "0" >
  35. < mx:CheckBox id = "myredio" label = "{i.currentItem.QuestionID+'.'+i.currentItem.QuestionName}" fontSize = "12" x = "10" y = "{i.currentIndex*20}" />
  36. </ mx:Repeater >
  37. < mx:Button x = "248" y = "624" label = "测一测" id = "bt" click = "yesorno()" />
  38. < mx:TextArea id = "myresult" x = "69" y = "505" height = "111" width = "423" />
  39. </ mx:Panel >
  40. </ 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代码——
  1. < mx:Repeater id = "rep2" dataProvider = "{part.ComponentList}" >
  2. < mx:CheckBox
  3. id = "cb3"
  4. label = "{rep2.currentItem.ComponentId+'['+rep2.currentItem.ComponentCharge+']'}"
  5. data = "{rep2.currentItem}"
  6. click = "CheckBoxChangeHandel()"
  7. />
  8. </ mx:Repeater >
对应AS代码——
  1. for (vari:Number=0;i<cb3.length;i++)
  2. {
  3. if (cb3[i].selected)
  4. {
  5. items.addItem(cb3[i].data as Component);
  6. }
  7. }
这里面要注意的是,在flex中循环出来的同一id的控件是个数组。更具体用法及示例请见另一篇文章 《Flex Builder教程及Flex中repeater循环用法示例》

本例中的另一个重要组成部分是XML文件格式的题库。下面给出代码片段:
  1. <? xml version = "1.0" encoding = "UTF-8" ?>
  2. < Ask >
  3. < question >
  4. < QuestionName > 不管额头有多高,在家里一定把头发随意夹起。 </ QuestionName >
  5. < QuestionID > 1 </ QuestionID >
  6. < QuestionAnswer > Y </ QuestionAnswer >
  7. </ question >
  8. < question >
  9. < QuestionName > 爱穿宽松的运动弹性布料,整体不搭也无所谓。 </ QuestionName >
  10. < QuestionID > 2 </ QuestionID >
  11. < QuestionAnswer > Y </ QuestionAnswer >
  12. </ question >
  13. < question >
  14. < QuestionName > 假日既不化妆也不穿胸罩,半年没上美容院。 </ QuestionName >
  15. < QuestionID > 3 </ QuestionID >
  16. < QuestionAnswer > Y </ QuestionAnswer >
  17. </ question >
  18. </ Ask >
使用XML的好处就是程序发布后,可以继续对xml文件进行修改,而不用重新编译发布程序文件。
简单的在线测试可以作为一个入门,希望它能让朋友们领略Flex的一丝神奇。深入探究下去,会发现Flex更加强大奇妙的地方。
源代码我已发布到了CSDN的资源库, 点击这里可以去下载 (需要CSDN的帐号哦,没有的先注册吧)。
本文系 小李专栏 原创作品,转载请注明出处: 小李专栏http://blog.csdn.net/softwave

<!--Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--Google 468*60横幅广告结束--><!--新Google 468*60横幅广告开始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 创建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468*60横幅广告结束-->

<!-- Google Reader shared发布代码开始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=GRC_p%28%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D%29%3Bnew%20GRC"></script><!-- Google Reader shared发布代码结束 -->

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论