Flash Builder 4の最近のブログ記事

FlashBuilder4から簡単にアイテムレンダラーの設定を行う事が可能となりました。
今回はその方法の紹介として、データグリッドにカスタムレンダラー部品を埋め込んだサンプルを作成してみます。

最初に、メインアプリケーションを作成します。 サンプルでは、<s:Panel>内 に<mx:DataGrid>を配置しました。
メインアプリケーションのcreationCompleteハンドラでデータグリッドの表示データを設定します。

[実行結果]

上記データグリッドのチェック列にチェックボタンを表示し、チェックボタンが選択された場合、チェックボタンの横に「選択済」と文字列が表示されるようにアイテムレンダラーを設定しようと思います。

mxmlのデザインビューでデータグリッドを選択し、プロパティにて「列の構成」ボタンをクリックします。

ここでは、ヘッダーテキストの値や幅などのプロパティの設定をはじめ、詳細ビューでは詳細な設定をおこなう事が可能です。データバインディングの欄にアイテムレンダラーの設定欄がありますので、横の紫のボタンをクリックし「アイテムレンダラーを作成」をクリックします。

パッケージとコンポーネント名を入力し終了ボタンをクリックします。

終了ボタンをクリックすると「列の構成」設定画面に戻ってくるので、先ほど作成したコンポーネントがアイテムレンダラー欄に設定されている事を確認しＯＫボタンをクリックします。

設定が完了するとパッケージエクスプローラー上に、先ほどアイテムレンダラーで設定したコンポーネントが作成されている事が確認できると思います。更に先ほどの設定で自動的に<mx:DataGridColumn>にitemRendererが設定されます。

次にアイテムレンダラーの部品を編集します。
<s:CheckBox>を配置しクリックハンドラ内でチェックボックスが選択された場合、チェックボックスのlabelプロパティの値に”選択済”を設定します。

デザインビューでサクサク設定を行えるので、多彩な表現を簡単に設定できるのは非常に嬉しいです。
以下はコードになります。

以上で設定は完了です。実際に実行したイメージは以下の様になります。

ＧＵＩで簡単にアイテムレンダラーの設定を行う事が可能となったので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をいじり倒してみる事をお勧めします。