このマスターシリーズでは、コーディング環境の強化、Creative Suiteシリーズの連携など、Flash Builder 4.5との新機能について解説します。

本記事では、Flash Builder 4.5の数ある新機能の中から、新しくサポートしたプラットフォームと、大幅に強化されたコーディング環境について解説します。

最新プラットフォームのサポート

Eclipse 3.6ベースへ

Flash Builderの屋台骨となっているEclipseのプラットフォームが最新バージョンの3.6ベースとなり、Eclipse本体のバグ修正やパフォーマンスの向上、新機能などの恩恵を受けることができます。

Cocoa版登場(Mac版)

Mac版のFlash Builderは、これまでCarbon版で提供されていましたが、新たにCocoa版のplug-inとしてリリースされました。これにより、Macでより快適に開発できるようになります。

新しいFlex SDK

新しいFlex SDKが同梱されるようになり、以下の2つから選択できます。

  • Flex 3.6(3.6.0 build 16995)
  • Flex 4.5(4.5.0 build 20967)

Flex 3系のメンテナンスリリースであるFlex 3.6も同梱されているので、Flash Builder 4.5で引き続きFlex 3のアプリ開発を行うことが可能です。Flex 4.5のSDKには、Adobe AIRの最新バージョン2.6(2.6.0.19120)のSDKも含まれています。

コーディングを楽に、高速化する機能

デザインモードの有効/無効の切り替え

開発時にデザインモードを使用しない場合、メニューからデザインモードを無効にすることができます。無効にしておくと、複数のプロジェクトやファイルを開いているときに、デザインモードの読み込み時間が発生しないため、素早く切り替わります。また、ソースモードとデザインモードを切り替えるショートカットキー「Ctrl(Mac版 Cmd)+`(左引用符)」も無効になります。

コンポーネントセットに[Sparkのみ]を追加

コンポーネントセットの選択肢は[MXのみ]と[MX+Spark]でしたが、[Sparkのみ]が追加されました。これにより、コンテンツアシスタントで表示される候補にもSparkコンポーネントだけが表示されるようになり、素早くアクセスすることができます。

デザインモードで、コンポーネントセットに応じたコンポーネントを追加

デザインモードに新しくSparkコンポーネントが追加されました。プロジェクトのコンポーネントセットで[MX + Spark]か[Sparkのみ]を選択している場合、DataGridやImageをドラッグすると、Sparkコンポーネントとして追加されます。コンポーネントセットで[MXのみ]を選択している場合、これまで通りMXのDataGridやImageが追加されます。

新たなファイルテンプレートの追加

Flash Builder 4で登場したファイルテンプレート機能には、4.5で新たにテンプレートとなるコードが追加されています。

【ActionScriptで追加されたもの】
ActionScriptのテンプレートとして、以下の2つが追加されています。

  • ActionScript スキナブルコンポーネント
  • モバイルリスト用のカスタム ActionScript アイテムレンダラー

【MXMLで追加されたもの】
MXMLのテンプレートとして、以下の6つが追加されています。主にSparkコンポーネントやモバイルに使用するテンプレートです。

  • MXML ViewNavigator アプリケーション
  • MXML Flash Catalyst Web アプリケーション
  • MXML Spark モジュール
  • Spark DataGridのアイテムレンダラー
  • モバイルリストのアイコンアイテムレンダラー
  • 複数のイメージソースが設定されたアイコンアイテムレンダラー

Flash Builder 4と同様に、一覧にあるテンプレートは編集することが可能です。「プロジェクト共通のヘッダーを追加する」「"(括弧)"の位置を共通ルールに合わせる」といったことができます。

getter/setterの自動生成

Flash Builder 4から、変数にマウスカーソルを置いた後、右クリックのコンテキストメニューよりgetter/setterを生成することができました。4.5では[getter/setterを生成]ウィンドウが強化され、[バインド可能にする]チェックボックスが追加されています。

[バインド可能にする]にチェックを入れると、以下のように変数に[Bindable]のメタタグも合わせて生成され、Eventを送出するコードにすることもできます。

[Bindable(event="firstNameChange")] public function get firstName():String { return _firstName; } public function set firstName(value:String):void{ if( _firstName !== value) { _firstName = value; dispatchEvent(new Event("firstNameChange")); } }

メタデータのコンテンツアシスト

MXMLファイルやActionScriptクラスを編集する際にメタデータもコード補完対象になりました。メタデータを追加する対象で「[(ブラケット)」を入力してCtrl(Mac版 Cmd)+ Spaceをクリックすると、メタデータの候補が表示されるので簡単に追加することができます。

コンテンツアシスタントの循環を指定可能

コード補完をする際に、Ctrl(Mac版 Cmd)+ Spaceを複数回入力することで、コンテンツアシストウィンドウで表示される候補の種類を切り替えていくことができます。どのように循環するかは、[環境設定]ウィンドウで指定することができます。ActionScriptとMXMLで別々に設定することが可能です。

メソッドをオーバーライドまたは実装

ActionScriptエディタで右クリックして「ソース→メソッドをオーバーライドまたは実装」を選択し、既存クラスのメソッドオーバーライドやインターフェイスクラスの実装メソッドを追加できます。

コードテンプレートの導入

Flash Builder 4.5からコードテンプレートが導入されました。あらかじめ設定された単語をタイプした後、Ctrl(Mac版 Cmd)+ Spaceでコードが生成されます。これまでのコード補完と合わせて使えば、アプリケーションコードの記述を効率化することが可能です。

例えば、MXMLファイルで「Data」とタイプした後、Ctrl(Mac版 Cmd)+ Spaceを2回タイプすると、コード補完で[DataGridを生成します]が一覧に表示され、選択するとDataGridの雛形が生成されます。

コードテンプレートはカテゴリー(ActionScript/MXML/CSS/Flash Builder)ごとに設定することができ、100以上のコードが初期導入時に用意されています。

また、新規に追加することもでき、自分がよく使うコードを設定し、コード生成することができます。

クイックアシスト

コードを追加していくときに必要になる作業やエラー修正を行う際に非常に役立つクイックアシストが追加されました。コード上でCtrl(Mac版 Cmd)+1を入力することで、下記のように現在のコードにあった修正やコード生成を行うことができます。

import文の整理 import文にカーソルをおき、クイックアシストを利用してimport文を整理することができます。
変数を追加した後にgetter/setterを作成 クラス変数を追加した後にクイックアシストでgetterとsetterを作成するウィンドウを開くことができます。
コードテンプレートから追加されたコードでのエラー修正 コードテンプレートで自動生成されたコードでイベントハンドラがないときは、対応するイベントハンドラを自動生成できます。
メソッドの生成 関数内で未定義のメソッド呼び出しを記述した後に、クイックアシストを使用してメソッドを自動生成することができます。先に呼び出し側のコードを書いても、クイックアシストの自動生成ですぐにエラーを解消できます。

新機能を使ったコーディング例

これまで紹介した新機能を使ったコーディング例を示します。Flexプロジェクトを作成後、メインのMXMLファイルを開きます。まず、「B」とタイプして、Ctrl(Mac版 Cmd)+ Spaceを2回タイプします(コンテンツアシスタントの循環)。

[Button - Spark Button を作成します]を選択してButtonを生成し、一度保存します(コードテンプレート)。

clickイベントである、「onClick(event)」が存在しないのでエラーになります。ここでonClickにカーソルをおき、Ctrl(Mac版 Cmd)+ 1をタイプするとイベントハンドラーを自動生成します(クイックアシスト)。

自動生成された関数である「onClick」内で変数を記述します。

protected function onClick(event:MouseEvent):void { // TODO Auto-generated method stub lastName }

ここでCtrl(Mac版 Cmd)+ 1をタイプすると[ローカル変数~を作成]や[インスタンス変数~を作成]を選択することができます。ここで、インスタンス変数を指定すると変数宣言が自動的に生成されます(クイックフィックス)。

生成された変数にカーソルをおき、Ctrl(Mac版 Cmd)+ 1をタイプすると、getterとsetterの生成ダイアログを呼び出すことができます(クイックフィックス:getterとsetterを生成)。

コードを記述しているうちに不要なimport文が追加された場合は、import文にカーソルを移動し、Ctrl(Mac版 Cmd)+ 1をタイプすると「読み込みを整理」を選択し、import文を整理することができます(クイックアシスト)。

クイックフィックスを中心としたコーディング例の一部を紹介しました。Flash Builder 4.5になって改善されたコーディング環境を確認できたでしょうか。

終わりに

以上がFlash Builder 4.5の新機能の一部でした。Flash Builder 4で改善されたコーディング機能がさらに強化され、細かいところまで手が届いていることに気づかれるでしょう。

モバイル開発用に強化された機能やFlash Catalystとの双方向編集については、この連載で別途詳しく紹介する予定です。合わせてご覧ください。

関連記事