はじめてのFlash Builder 4 ～ 文字列変換ツールに挑戦

はじめにやること

まずは本を買う。
これが一番手っ取り早いかということで、こちらを買ってみました。

Flex＆Flash Builder 4 による Webアプリケーション開発ガイドブック

ワークスペーストとかプロジェクトという概念に戸惑う

これまで、FLASHムービーを作るのにワークスペーストとかプロジェクトとかいう概念は必要なかったので、少し戸惑いました。要は作業ファイル一式を保存しておく場所を決めておくようで。

 
新規プロジェクトを作成すると、ワークスペースに対してこのようにフォルダが作成される。

MXMLがさっぱりわからない

はじめてなので、分からなくて当然なのですけれども。
とりあえず、デザインビューにコンポーネントを置いてみよう。

コンポーネントは↓このように様々な機能を持った部品としてコンポーネントパネルに置いてある。

インターフェースをつくる

今回作るのは文字の変換ツール。HTMLをコーディングしていて、メールアドレス等を数値文字参照で書きたい時の助けになるツールを作ってみます。

インターフェースはこうしました。

※個々のコンポーネントが分かるように選択状態になってます。

上の「変換する文字列」に文字を入れると、数値文字参照型に変換された文字列が「変換結果」に表示されるようにします。

コンポーネントにIDを振る

それぞれのコンポーネントに名前を付けます。その名前でActionScript側から操作するわけですな。

これがプロパティパネル。ここではTextInputコンポーネントのプロパティを表示しています。
IDだけでなく、色やフォントサイズなど色々（といっても全部じゃないけど）設定できます。

「変更時」という所にイベントハンドラを書いてある点に注目してください。
その隣の雷アイコン（？）をクリックすると・・・

いよいよコードビューにActionScriptを書く

このように画面がコードビューに切り替わり、自動的にfunctionの準備を整えてくれます。
あとは、ここに必要な処理を書けばいいわけだ。

それにしても、今まで学んできたActionScriptでは見慣れない記述ばかりで戸惑いますな。
ヘルプを何度も見ながらがんばりました。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="588" minHeight="210" height="210" width="588" preloaderChromeColor="#FFFFFF" backgroundColor="#D9E4E8">
	<fx:Script>
		<![CDATA[
			import spark.events.TextOperationEvent;
			
			protected function inputChange(event:TextOperationEvent):void
			{
				var t:String = "";
				for (var i:int = 0; i < convertStrings.text.length; i++){
					t += "&#" + convertStrings.text.charCodeAt(i) + ";";
				}
				if (!t)
				{
					resultBox1.text = resultBox2.text = "";
				}
				else
				{
					resultBox1.text = t;
					resultBox2.text = '<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;' + t + '">' + t + '</a>';
				}
			}
			
			protected function myFocus(event:FocusEvent):void
			{
				event.currentTarget.selectRange(0,event.currentTarget.text.length);
			}
			
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<s:Label x="10" y="10" text="変換する文字列" fontFamily="ＭＳ ゴシック" fontSize="14" fontWeight="bold" color="#3C4D70"/>
	<s:Label x="447" y="193" text="http://www.two-hearts.net/" fontFamily="Georgia" fontSize="10" fontWeight="normal" color="#FFFFFF" textAlign="right"/>
	<s:Label x="10" y="72" text="変換結果" fontFamily="ＭＳ ゴシック" fontSize="14" fontWeight="bold" color="#3C4D70"/>
	<s:Label x="10" y="127" text="変換結果（aタグ＆mailto:付与）" fontFamily="ＭＳ ゴシック" fontSize="14" fontWeight="bold" color="#3C4D70"/>
	<s:TextInput x="10" y="28" width="568" fontSize="24" id="convertStrings" enabled="true" change="inputChange(event)"/>
	<s:TextInput x="10" y="90" width="568" fontSize="14" contentBackgroundColor="#FFFAEB" id="resultBox1" focusIn="myFocus(event)"/>
	<s:TextArea x="10" y="144" width="568" height="41" contentBackgroundColor="#FFFAEB" lineThrough="false" id="resultBox2" editable="false" focusIn="myFocus(event)"/>
</s:Application>

はじめてのリリースビルド

出来上がったら最後にリリースビルドの書き出しを行う点もこれまでのFLASHと異なります。
これを行うことで、最終的にサーバーにアップするファイル一式がbin-releaseディレクトリに書き出される仕組みです。

よくわからんファイルがたくさんできています。これらがFlexのコンポーネントファイルなんだと思います。
そのせいで全体のファイルサイズが大きくなってしまうのが玉に瑕。

はじめてのFlexアプリケーション、遂に完成！

おおげさです。
まぁとにかく出来ました！実際の動作は別ページで見られるようにしましたので、そちらで触ってやってください。

数値文字参照変換ツール（迷惑メール対策用）