北縣好玩碧潭好美，活動投票系統頁面程式開發製作

首頁 > FLEX, 生活記事, 程式設計, 雜七雜八 > 北縣好玩碧潭好美，活動投票系統頁面程式開發製作

北縣好玩碧潭好美，活動投票系統頁面程式開發製作

2009年8月29日瀏覽次數 : 7,377

閱讀評論發表評論

話說，大概在 88 風災來的前一個禮拜，接到了一個很急很急的需求，希望在一個晚上製作完一個投票系統，因為業主希望在五個類別內可以任意投選 20 票，一般的投票應該都是用 PHP 製作，並且將所有的投票放在同一個頁面上，最後做一個 submit 的按鈕，類似下圖 EZPEER 的做法，不過為了節省開發時間就採用了 FLEX 來製作這個投票活動頁面，結果發生了一些意外 = = 另外花了不少時間，不過也了解一些東西。

其實這個案子蠻可憐的，因此我也要幫忙打一下廣告了，本來這個案子是七夕情人節要辦的，但是，好死不死兩個禮拜前發生了 88 風災，在全台灣一片哀悼之下，又有誰有心情去大肆舉辦七夕情人節活動呢 ? ( 不過我知道在淡水的漁人碼頭還是有舉敗七夕活動 ) 不過還好，這個活動延期了，北縣好玩碧潭好美的活動正式延期到 10/3 ( 六 ) PM 4:00 ~ PM 10:00 了，因此在台北的情侶們可不要錯過這個活動喔，活動內容應該還是類似的啦。

這邊提供活動網頁，大家也可以上網投票一下喔，聽業主說是有抽獎活動呢，因此我自己也投票耶 ^_^。

活動網址 : 詠愛碧潭 [ 北縣好玩碧潭好美 ] 10 / 3 (六) PM 4:00 ~ PM 10:00

好啦，廣告打完，先說明一下我們製作的並不包含活動網頁，僅其中的投票 SWF 檔案，這個案子因為製作的很急，因此應該有很多地方寫的不好，但是應該還有一些參考價值啦，其中有用到 Repeater 跟 ViewStack 的用法，算是延伸 http://blog.corausir.org/programing/ausir-1043 這篇的另外一種用法吧。

投票頁面 : http://friendlydog.com.tw/lovebitan/music.php

畫面截圖

以下是程式碼

mp3vote.mxml

^?View Code FLEX

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalScrollPolicy="off" fontSize="14" width="830" height="618" creationComplete="init()" xmlns:local="*" backgroundColor="white" backgroundAlpha="0" backgroundGradientAlphas="[0.0, 0.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
 
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Button;
 
			private var btn:Button;
 
			private var array:ArrayCollection = new ArrayCollection();
 
			private function init():void{
				this.array.addItem(this.btn1);	
				this.array.addItem(this.btn2);	
				this.array.addItem(this.btn3);	
				this.array.addItem(this.btn4);	
				this.array.addItem(this.btn5);
 
				this.btn = this.btn1;	
				this.btn.selected = true;
 
				this.remote.gettype1();
				this.remote.gettype2();
				this.remote.gettype3();
				this.remote.gettype4();
				this.remote.gettype5();
 
			}
 
 
 
			[Bindable]
			private var voteArray:ArrayCollection = new ArrayCollection();
 
 
			private function changeViewstack(event:MouseEvent):void{
 
 
				this.btn.selected = false;
				this.btn = event.currentTarget as Button;
 
				this.viewstack.selectedIndex = this.array.getItemIndex(this.btn);
 
				this.btn.selected = true ;
			}
 
			private function voteHandler(event:DataEvent):void{
 
				if(this.voteArray.length == 20){
					myVbox(event.currentTarget).setBtn();
 
					if(this.voteArray.getItemIndex(event.data)==-1){
						Alert.show("很抱歉，最多只能選 20 首歌喔","警告");
					}else{
						this.voteArray.removeItemAt(this.voteArray.getItemIndex(event.data));
					}
				}else{
					if(this.voteArray.getItemIndex(event.data)==-1){
						this.voteArray.addItem(event.data);
					}else{
						this.voteArray.removeItemAt(this.voteArray.getItemIndex(event.data));
					}
 
				}
 
				this.submit.enabled = true;
 
				if(this.voteArray.length == 0){
					this.submit.enabled = false ;
				}
 
 
 
			}
 
 
 
			private function faultHandler():void{
				Alert.show("系統錯誤，請稍後再試","警告");
			}
 
			private function submitHandler():void{
				var submit:submitPanel = new submitPanel();
				submit.array = this.voteArray;
				PopUpManager.addPopUp(submit,this,true);
			}
 
 
		]]>
	</mx:Script>
	<mx:HBox>
		<mx:Button id="btn1" buttonMode="true" label="英文情歌"  toggle="true" mouseOver="changeViewstack(event)"/>
		<mx:Button id="btn2" buttonMode="true" label="國語情歌"  toggle="true" mouseOver="changeViewstack(event)"/>
		<mx:Button id="btn3" buttonMode="true" label="國語合唱情歌"  toggle="true" mouseOver="changeViewstack(event)"/>
		<mx:Button id="btn4" buttonMode="true" label="台語情歌"  toggle="true" mouseOver="changeViewstack(event)"/>
		<mx:Button id="btn5" buttonMode="true" label="台語合唱情歌"  toggle="true" mouseOver="changeViewstack(event)"/>
		<mx:Label text="{this.voteArray.length} / 20" fontSize="16"/>
 
 
 
	</mx:HBox>
	<mx:VBox width="750" height="450">
		<mx:ViewStack id="viewstack" width="100%" height="100%">
			<mx:VBox label="英文情歌" verticalScrollPolicy="off" horizontalAlign="center">
				<mx:Tile id="tile1" width="705" height="100%" horizontalAlign="center">
					<mx:Repeater id="rp1" dataProvider="{this.remote.gettype1.lastResult}">
						<local:myVbox type="1" m_author="{rp1.currentItem.m_author}" m_id="{rp1.currentItem.m_id}" m_name="{rp1.currentItem.m_name}" vote="voteHandler(event)" m_count="{rp1.currentItem.m_count}"/>
					</mx:Repeater>
				</mx:Tile>
			</mx:VBox>
			<mx:VBox label="國語情歌" verticalScrollPolicy="off" horizontalAlign="center">
				<mx:Tile id="tile2" width="705" height="100%" horizontalAlign="center">
					<mx:Repeater id="rp2" dataProvider="{this.remote.gettype2.lastResult}">
						<local:myVbox type="2" m_author="{rp2.currentItem.m_author}" m_id="{rp2.currentItem.m_id}" m_name="{rp2.currentItem.m_name}" vote="voteHandler(event)" m_count="{rp2.currentItem.m_count}"/>
					</mx:Repeater>
				</mx:Tile>
			</mx:VBox>
			<mx:VBox label="國語合唱情歌" verticalScrollPolicy="off" horizontalAlign="center">
				<mx:Tile id="tile3" width="705" height="100%" horizontalAlign="center">
					<mx:Repeater id="rp3" dataProvider="{this.remote.gettype3.lastResult}">
						<local:myVbox type="3" m_author="{rp3.currentItem.m_author}" m_id="{rp3.currentItem.m_id}" m_name="{rp3.currentItem.m_name}" vote="voteHandler(event)" m_count="{rp3.currentItem.m_count}"/>
					</mx:Repeater>
				</mx:Tile>
			</mx:VBox>
			<mx:VBox label="台語情歌" verticalScrollPolicy="off" horizontalAlign="center">
				<mx:Tile id="tile4" width="705" height="100%" horizontalAlign="center">
					<mx:Repeater id="rp4" dataProvider="{this.remote.gettype4.lastResult}">
						<local:myVbox type="4" m_author="{rp4.currentItem.m_author}" m_id="{rp4.currentItem.m_id}" m_name="{rp4.currentItem.m_name}" vote="voteHandler(event)" m_count="{rp4.currentItem.m_count}"/>
					</mx:Repeater>
				</mx:Tile>
			</mx:VBox>
			<mx:VBox label="台語合唱情歌" verticalScrollPolicy="off" horizontalAlign="center">
				<mx:Tile id="tile5" width="705" height="100%" horizontalAlign="center">
					<mx:Repeater id="rp5" dataProvider="{this.remote.gettype5.lastResult}">
						<local:myVbox type="5" m_author="{rp5.currentItem.m_author}" m_id="{rp5.currentItem.m_id}" m_name="{rp5.currentItem.m_name}" vote="voteHandler(event)" m_count="{rp5.currentItem.m_count}"/>
					</mx:Repeater>
				</mx:Tile>
			</mx:VBox>
		</mx:ViewStack>
	</mx:VBox>
	<mx:Spacer height="20"/>
	<mx:Button id="submit" buttonMode="true" label="完成投票" enabled="false" click="submitHandler()" width="180" height="64" fontSize="20"/>
 
	<mx:RemoteObject id="remote" destination="amfphp" source="mp3vote.mp3vote" fault="faultHandler()">
	</mx:RemoteObject>
 
 
</mx:Application>

myVbox.mxml

^?View Code FLEX

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="340" height="90" borderStyle="inset" horizontalScrollPolicy="off" verticalScrollPolicy="off" verticalAlign="middle" borderColor="#C6CFD6" fontSize="13" creationComplete="init()">
	<mx:Metadata>
		[Event(name="vote",type="flash.events.DataEvent")]
	</mx:Metadata>
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import flash.net.navigateToURL;
			[Embed(source="checkbox.png")]
			[Bindable]
			private var aImage:Class;
 
			[Embed(source="checkbox_c.png")]
			[Bindable]
			private var bImage:Class;
 
			[Embed(source="audition.png")]
			[Bindable]
			private var cImage:Class;
 
 
 
			private function mouseOverHandler(event:MouseEvent):void{
				this.btn.setStyle("icon",bImage);
			}
			private function mouseOutHandler(event:MouseEvent):void{
 
				this.btn.setStyle("icon",aImage);
 
 
			}
 
			private function init():void{
				this.remote1.getCount(this.type);
 
				this.btn.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
				this.btn.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
			}
 
			private var selected:Boolean = false ;
 
			private function clickHandler(event:MouseEvent):void{
 
 
				if(this.btn.selected){
 
					btn.removeEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
					btn.removeEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
					btn.setStyle("icon",bImage);
 
				}else{
					btn.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
					btn.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
					btn.setStyle("icon",aImage);
				}
 
 
				var eventObj:DataEvent = new DataEvent("vote",false,false,this.m_id);
				dispatchEvent(eventObj);
 
 
			}
 
			public function setBtn():void{
 
					btn.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
					btn.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler);
					btn.setStyle("icon",aImage);
					btn.selected = false;
 
			}
 
			private function faultHandler():void{
				Alert.show("系統錯誤，請稍後再試","警告");
 
			}
 
			private function resultHandler(event:ResultEvent):void{
				var obj:Object = ArrayCollection(event.result).getItemAt(0);
				//this.total = obj.counter;
 
				this.total = Math.ceil((this.m_count/obj.counter)*100)
			}
 
			public var m_id:String;
			[Bindable]
			public var m_name:String;
			[Bindable]
			public var m_author:String;
			[Bindable]
			public var m_count:int = 0;
			[Bindable]
			public var type:int = 0;
 
			[Bindable]
			public var total:int = 0;
 
 
 
			private var url:URLRequest = new URLRequest("http://web.ezpeer.com/event/200908/lovebitan/");
		]]>
	</mx:Script>
	<mx:Button id="btn" buttonMode="true" width="50" height="70" icon="{aImage}" toggle="true" click="clickHandler(event)"/>
	<mx:VBox verticalGap="2" width="275">
		<mx:Label text="歌曲名稱 : {this.m_name}" width="271"/>
		<mx:Label text="歌手 : {this.m_author}"/>
		<mx:HBox width="100%">
			<mx:Label text="目前得票率 : {this.total} %" fontWeight="bold"/>
			<mx:Spacer width="100%"/>
			<mx:Button icon="{cImage}" buttonMode="true" click="navigateToURL(url,'_blank');"/>
 
		</mx:HBox>
 
	</mx:VBox>
		<mx:RemoteObject id="remote1" destination="amfphp" source="mp3vote.mp3vote" result="resultHandler(event)" fault="faultHandler()">
	</mx:RemoteObject>
 
</mx:HBox>

submitPanel.mxml

^?View Code FLEX

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" width="700" height="500" x="60" y="40" title="填寫個人資料">
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
 
			public var array:ArrayCollection ;
 
			private function clickHandler():void{
 
				if(this.my_name.text.length == 0 || this.my_id.text.length < 10 || this.rbg.selectedValue == null || this.phone.text.length == 0 || this.addr.text.length == 0 ||this.email.length == 0){
					Alert.show("你必須填寫所有項目後才可送出","警告");
				}else{
					var obj:Object = new Object();
 
					obj.vote = this.array;
					obj.u_name = this.my_name.text;
					obj.u_id = this.my_id.text;
					obj.u_sex = this.rbg.selectedValue;
					obj.u_phone = this.phone.text;
					obj.u_addr = this.addr.text;
					obj.u_mail = this.email.text;
					this.submit.enabled = false ;
					this.remote.vote(obj);
 
				}
 
 
			}
 
			private function resultHandler(event:ResultEvent):void{
				if(event.result == "ok"){
					Alert.show("投票完成，謝謝您的參與","完成");
					this.submit.enabled = false ;
					this.cancel.enabled = false ;
 
				}else{
					Alert.show("系統錯誤，請稍後再試","警告");
				}
			}
 
			private function faultHandler():void{
				Alert.show("系統錯誤，請稍後再試","警告");
			}
 
		]]>
	</mx:Script>
	<mx:VBox width="625" height="311">
		<mx:Form width="100%" height="100%">
			<mx:FormHeading label="請確實填寫各項資料"/>
			<mx:FormItem label="姓名" required="true">
				<mx:TextInput id="my_name" maxChars="10"/>
			</mx:FormItem>
			<mx:FormItem label="性別" required="true">
				<mx:RadioButtonGroup id="rbg"/>
				<mx:RadioButton label="男性" value="man" groupName="rbg"/>
				<mx:RadioButton label="女性" value="woman" groupName="rbg"/>
			</mx:FormItem>
			<mx:FormItem label="身份證字號" required="true">
				<mx:TextInput id="my_id" maxChars="10"/>
			</mx:FormItem>
			<mx:FormItem label="電話" required="true">
				<mx:TextInput id="phone" maxChars="11"/>
			</mx:FormItem>
			<mx:FormItem label="地址" required="true">
				<mx:TextInput id="addr" width="350" maxChars="255"/>
			</mx:FormItem>
			<mx:FormItem label="電子郵件" required="true">
				<mx:TextInput id="email" width="350" maxChars="255"/>
			</mx:FormItem>
		</mx:Form>
 
	</mx:VBox>
	<mx:HBox width="100%" horizontalAlign="center">
		<mx:Button id="submit" buttonMode="true" label="送出" width="65" height="65" fontSize="18" click="clickHandler()"/>
		<mx:Spacer width="20"/>
		<mx:Button id="cancel" buttonMode="true" label="取消" width="65" height="65" fontSize="18" click="{PopUpManager.removePopUp(this);}"/>
	</mx:HBox>
	<mx:RemoteObject id="remote" destination="amfphp" source="mp3vote.mp3vote" fault="faultHandler()" result="resultHandler(event)">
	</mx:RemoteObject>
</mx:Panel>

Random Posts

Loading…

:: 把這篇好文推到書籤網站與更多人分享吧 ::

評論 (14) Trackbacks (0) 發表評論 Trackback

組羊

2009年8月29日21:54 | #1

回覆 | 引用

哪個晚上真是難搞~~~
Ausir

2009年8月30日17:41 | #2

回覆 | 引用

真的是很氣人阿 >”<
梅干扣肉

2009年8月31日20:38 | #3

回覆 | 引用

呵呵～～
這麼堅持～～
改用php應該就可以早點溫床了～～
Ausir

2009年9月1日10:30 | #4

回覆 | 引用

這個不一樣啦

還是要練習 AJAX 阿~~XD
佳佳

2009年9月2日09:07 | #5

回覆 | 引用

寫的不錯
你很大方把程式碼跟大家分享呢
哈!!!!

真好
一直有案子接~~~
Ausir

2009年9月2日09:52 | #6

回覆 | 引用

@佳佳

放出來大家研究一下
也許有人有用到 ^^
拆組達人

2009年9月2日13:30 | #7

回覆 | 引用

為何Ausir你們至今還是沒有把自己大頭貼設定上去啊？
這也是一個個人品牌及宣傳不是嗎？
Ausir

2009年9月3日10:11 | #8

回覆 | 引用

@拆組達人

呵呵~~
我也是這樣想 QQ
昇

2009年10月29日02:16 | #9

回覆 | 引用

不知道大大是否可以把這個專案~連DEBUG壓縮寄給我呢
因為自己還是個新手~因為學校專題有需要~希望可以參考~想要慢慢研究~
再者網頁也掛了看不太到…
當然如果站長有商業或是版權顧慮的話就不用了~
可以的話就真的感謝大大了~如不行的話順帶把這個回覆刪掉吧
以便造成大大的不便~有打擾請見諒
Ausir

2009年10月31日10:02 | #10

回覆 | 引用

@昇

已經 MAIL 給你囉~~
^_^ 謝謝你的支持啦~
絹

2009年11月2日23:05 | #11

回覆 | 引用

大大你好，我點第一個圖後，發現有子母視窗的設計，這也是FLEX做的嗎?因為我想要在FLEX用子母視窗，可以教我怎麼用嗎?謝謝~
Ausir

2009年11月3日10:25 | #12

回覆 | 引用

@絹

那是 shadowbox 的特效功能
可以在我網頁裡找到喔 ^^
搜尋一下 shadowbox~~~
Owen

2010年1月6日11:31 | #13

回覆 | 引用

版大…人好好!!!
我是FLEX大新手~~
現在在爬文中
希望在你用心的文章中能學到東西^^
也感恩你為了後進所PO的心血結晶
未來也請多多指教啦
Ausir

2010年1月6日13:01 | #14

回覆 | 引用

@Owen

很高興又有人加入 RIA 的行列喔~
^_^