Flex 3編程入門級教程附代碼下載
系統
2037 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" rel="alternate"> <!-- FEED自動發現標記結束 -->
使用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"
?>
-
<!--
-
#authorXiaoLee@http://blog.csdn.net/softwave
-
#versionalpha
-
--
>
-
<
mx:Application
xmlns:mx
=
"http://www.adobe.com/2006/mxml"
layout
=
"absolute"
creationComplete
=
"catalogService.send()"
>
-
<
mx:Script
>
-
<![CDATA[
-
publicfunctioncreateListener():void{
-
bt.addEventListener(MouseEvent.CLICK,yesorno);
-
}
-
publicfunctionyesorno():void{
-
varcount:Number=0;
-
-
for(vari:Number=0;i<myredio.length;i++){
-
if(myredio[i].selected==true){
-
count++;
-
}
-
}
-
if(count>=0&&count<=6){
-
myresult.text="你的得分是:"+count.toString()+"/n"+"6分以下:普通人。你的生活很大眾,很正常,也相對穩定。其實不妨試試在周末做兩天宅女,讓每天都精細保養的皮膚得到放松,同時也放松自覺的身心。";
-
}elseif(count>=7&&count<=12){
-
myresult.text="你的得分是:"+count.toString()+"/n"+"7-12分:50%宅女。你一進極具“御宅”潛質,目前你樂于在宅女和正常人的狀態間變換,如何迅速從宅女的狀態轉換到光鮮見人,是你需要掌握的功課。";
-
}elseif(count>12&&count<=18){
-
myresult.text="你的得分是:"+count.toString()+"/n"+"12-18分:80%宅女。沒錯,宅女就是你!喜歡作宅女,其實是尊重自己內心的一種表現,但不要忘記,也要善待自己的外表。";
-
}elseif(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
(vari: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
<!--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&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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元