Flex で碁盤掲示板を作成 1

Posted: November 22nd, 2007 | No Comments »

Flex の勉強がてら、碁盤掲示板を作成してみようかと思います。
完成してから公開ということにするとなかなかできないので、作成手順を公開しながら作っていくことにします。
作成手順を公開といっても、ぶっちゃけ何もよくわかっていないので試行錯誤します。
レベル低いです。
生暖かく見守ってやってください。

今回はとりあえず大まかな枠組みを MXML で作ってみました。
コードは一番下。

FlexGoban1.swf

サーバサイドは抜きにして、掲示板部分はだいたい作りました。

書き込み部分は Repeater で、更新の時には DataProvider を再定義しているのですが、そうすると一回全部が消えてから更新されるようになってしまいます。
本当は差分だけ更新したいのですが・・・。
何かいい方法はないですかね？

次回は UIComponent を拡張して、碁盤コンポーネントを作ってみたいと思います。
その後は、碁盤コンポーネントの埋め込み、サーバサイドとの通信、見た目のブラッシュアップなどをやる予定です。

コード（MXML）

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:Script source="MainCode.as"/>
	<mx:Script>
		<![CDATA[
		import flash.events.MouseEvent;
		import mx.controls.Alert;
		import mx.validators.*;

		public var idNow:uint = 4;

		private function submitPost(evt:MouseEvent):void {
			var errorMsgs:Array = new Array();

			//必須項目をチェック
			if (postModel.name == "") {
				errorMsgs.push("名前を入力してください。");
			}
			if (postModel.title == "") {
				errorMsgs.push("タイトルを入力してください。");
			}
			if (postModel.message == "") {
				errorMsgs.push("メッセージを入力してください。");
			}

			//url,email をチェック（適当です。）
			if (/^(https?)(:\\/\\/[-_.!~*\'()a-zA-Z0-9;\\/?:\\@&#038;=+\\$,%#]+)$/.test(postModel.url) == false &#038;& postModel.url != "") {
				errorMsgs.push("正しいURLではありません。");
			}
			if (/^[_a-z0-9-]+(￥.[_a-z0-9-]+)*@[a-z0-9-]+([￥.][a-z0-9-]+)+$/i.test(postModel.email) == false &#038;& postModel.email) {
				errorMsgs.push("正しいメールアドレスではありません。");
			}

			//エラーをチェック。エラーがなければ追加。
			if (errorMsgs.length > 0) {
				Alert.show(errorMsgs.join("\\n"));
			} else {
				myPosts.splice(0, 0, {id:idNow, name:postModel.name, email:postModel.email, url:postModel.url, title:postModel.title, message:postModel.message});
				myRep.dataProvider = myPosts;
				idNow ++;
			}

		}

		private function clearForm(evt:MouseEvent):void {
			nameInput.text = urlInput.text = emailInput.text = titleInput.text = messageTextArea.text = "";
		}

		private function removePost(evt:MouseEvent):void {
			var rptr:* = evt.target.parent.parent.parent;
			var pnl:* = evt.target.parent.parent;
			myPosts.splice(rptr.getChildIndex(pnl) - 1, 1);
			myRep.dataProvider = myPosts;
		}

		[Bindable]
		public var myPosts:Array = [{id:3, name:"佐藤", email:"", url:"", title:"腹減った", message:"ラーメン食おうぜ。"},
									{id:2, name:"鈴木", email:"", url:"", title:"ビール", message:"安西先生、ビールが・・・飲みたいです。"},
									{id:1, name:"山田", email:"", url:"http://7to3.net/journal/", title:"テスト", message:"テストです。"}];
		]]>
	</mx:Script>

	<!-- Data -->

	<mx:Model id="postModel">
		<post>
			<id />
			<name>{nameInput.text}</name>
			<url>{urlInput.text}</url>
			<email>{emailInput.text}</email>

			<message>{messageTextArea.text}</message>
			<kifu />
		</post>
	</mx:Model>

	<!-- Validator -->
	<mx:EmailValidator id="emailVal" source="{emailInput}" property="text" />

	<!-- view -->
	<mx:HBox width="90%">
		<mx:Panel>
			<mx:Text text="ここに碁盤を置きます。" width="300" height="300" />
		</mx:Panel>

		<mx:VBox horizontalAlign="center" width="100%">
			<mx:Panel width="100%">
				<mx:Form id="postForm" defaultButton="{submitButton}">
					<mx:FormHeading label="書き込み"/>
					<mx:FormItem label="名前" required="true">
						<mx:TextInput id="nameInput" width="100%" />
					</mx:FormItem>
					<mx:FormItem label="メールアドレス">
						<mx:TextInput id="emailInput"/>
					</mx:FormItem>
					<mx:FormItem label="URL">
						<mx:TextInput id="urlInput"/>
					</mx:FormItem>
					<mx:FormItem label="タイトル" required="true">
						<mx:TextInput id="titleInput"/>
					</mx:FormItem>
					<mx:FormItem label="メッセージ" required="true">
						<mx:TextArea id="messageTextArea"/>
					</mx:FormItem>
					<mx:FormItem direction="horizontal">
						<mx:Button id="submitButton" label="書き込み" click="submitPost(event);"/>
						<mx:Button id="clearButton" label="クリア" click="clearForm(event);" />
					</mx:FormItem>
				</mx:Form>
			</mx:Panel>

			<mx:Repeater id="myRep" dataProvider="{myPosts}">
				<mx:Panel id="postPanel" width="100%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
					<mx:HBox width="100%">
						<mx:Label id="nameLabel" text="#{myRep.currentItem.id}"/>
						<mx:Text id="titleText" text="{myRep.currentItem.title}"/>
						<mx:Text id="nameText" text="{myRep.currentItem.name}"/>
						<mx:Text id="emailText" text="{myRep.currentItem.email}"/>
						<mx:Text id="urlText" text="{myRep.currentItem.url}"/>
						<mx:Button id="removeButton" label="remove" click="removePost(event);" />
					</mx:HBox>
					<mx:Text id="messageText" text="{myRep.currentItem.message}" />
				</mx:Panel>
			</mx:Repeater>
		</mx:VBox>
	</mx:HBox>
</mx:Application>

---