[FlashBuilder4]Flexプロジェクトの作成サンプル

つい先日、FlashBuilder4が発売となりました。

今回は、FlashBuilder4にて簡単なFlexアプリケーションを作成し、新機能などを紹介したいと思います。

Flash Builder4は公式サイトより体験版が入手可能です。

http://www.adobe.com/jp/products/flashbuilder/?view=topnew

まずはじめに、Flexプロジェクトを作成します。

１．パッケージエクスプローラーで右クリックし「Flexプロジェクト」を選択しプロジェクトを作成します。

2.　アプリケーションの種類は「Web(Adobe Flash Playerで実行)」を選択し終了ボタンをクリックします。

作成されたプロジェクト内のmxmlを見てみると、<s:Application>のようにsparkコンポーネントベースでApplicationが作成されます。
従来（Flex3まで）はFlex標準コンポーネントは、ネームスペースmxで始まるHaloコンポーネントで構成されておりましたが、FlashBuilder4からネームスペースsで始まるSparkコンポーネントが追加されました。
Flex標準コンポーネントの<TextInput>や<Panel>などのおなじみの部品もHaloコンポーネントとSparkコンポーネントでそれぞれ存在します。
プロジェクト作成時に自動的に作成されるmxmlのソースを見てみると<fx:Declarations>など、従来になかった表記がされています。
これらmxml2009に関する詳細は、「Flex4マスターシリーズ」で詳しく説明されておりますのでそちらもご参照ください。

http://www.adobe.com/jp/devnet/flex/articles/flex4_tutorials.html

次にデザインビューにて、コンポーネントを配置し画面を作成します。
サンプルでは以下のログインフォームの様な画面を作成しました。

<?xml version="1.0" encoding="utf-8"?>

	
		
	
	
		
			
				
					
					
				
					
					
						
					
					
        		
			
		
	

ここから、デザインビューでデザインの詳細設定を行っていこうと思います。
まず、ログインフォーム内(s:Panel)に配置されたVGroupのパディングを設定します。
FlashBuilder4からは、デザインビューのプロパティからパディングの設定も行う事が可能となりました。
以下の通り、全て10で設定します。

次にログインボタンをクリックするとアラートを表示する機能を実装します。
<s:Button>にclick=""と入力するとコードアシストの候補に「Clickハンドラーを作成」と表示されます。

「Clickハンドラーを作成」を選択すると、mxml内に「部品id+イベントハンドラ」と命名されたイベントハンドラが自動生成されます。
これもFlashBuilder4から追加された機能となりますがなかなか便利です。

作成されたイベントハンドラにアラートを実装します。

サンプルでは以下の通り実装しました。

;


	
		
	


	
		
	
	
		
			
				
					
				
				
					
				
			
			
		
	

次に、今回から追加された、「Flexテーマの変更」を行ってみようかと思います。
Flexプロジェクトを右クリックし、「Flexテーマ」を選択します。

FlashBuilder4からは「Flexテーマ」の変更によって簡単に外観を変更する事が可能です。
デフォルトは「Adobeテーマ － Spark」が選択されているので、他のテーマを選択しOKボタンをクリックします。

[デフォルト:Spark]

[Arcade]

以上でサンプルは完成です。

今回は、ボタンをクリックするとアラートが表示されるだけという非常に簡単なサンプルでしたが、それだけのアプリケーションを作成するに当たって、色々な変更点を紹介する事が出来ました。
もちろんこれだけではなく非常に多くの変更点がありますので
早めに、FlashBuilder4をいじり倒してみる事をお勧めします。