アクセシビリティ

Adobe MAX 2010 RETWEET - Deep Dive into Flex 4.5 (Hero) Preview

Deep Dive into Flex 4.5 (Hero) Preview

プレゼンテーション資料 : AdobeMAX2010Retweet20101125Slide.pdf
サンプル : http://blog.taiga.jp/archives/2010/11/25/171000/

廣畑大雅氏
Flex SDK 4.5の新機能を説明する廣畑大雅氏

2010年10月にカリフォルニア州ロサンゼルスで開催されたAdobe Systems最大規模のイベント「Adobe MAX 2010」では、Flashプラットフォームをターゲットとした3つの開発ツールの最新プレビュー版が公開された。Flash Builder 4.5 (開発コード"Burrito") 、Flex SDK 4.5(同"Hero")、Flash Catalyst 1.5 (同"Panini")である(いずれも、Adobe Labsのサイトからダウンロードすることが可能)。

Adobe MAX 2010での発表をもとに、日本の開発者やデザイナー向けにFlashプラットフォームの最新情報を伝えるユーザイベント「Adobe MAX 2010 RETWEET」では、廣畑大雅氏によるセッション「Deep Dive into Flex 4.5 (Hero) Preview」において、この3つのツールのひとつである"Hero"の注目すべき新機能として、新しいSparkコンポーネントに関する情報がソースコード例やデモとともに紹介された。本稿ではその内容をリポートする。なお、廣畑氏による講演資料およびデモ用のソースコードは氏のブログにおいて公開されている。本稿で使用している図やソースコード例は講演資料より抜粋したものである。

1 Flex SDK 4.5におけるSparkコンポーネントの拡張

「Spark」は、Flex 4より新たに追加されたコンポーネントアーキテクチャである。これを利用すると、コンポーネントのコアロジックとスキン、レイアウトを分離し、それぞれを独立して扱うことができる。例えばPanelコンポーネントのヘッダ(タイトルバー)にクローズボタンが付いている形のTitleWindowコンポーネントの場合には、図1.1のようにActionScriptでSkinPartとしてクローズボタンを宣言した上で、スキン定義をmxmlで記述することによって、コンポーネントに作成したスキンを適用することができるようになる。

図1.1 Sparkコンポーネントの概要
図1.1 Sparkコンポーネントの概要

廣畑大雅氏Heroでは、このSparkのためのコンポーネントが新たに追加/拡張されている。廣畑氏は、特に注目すべきSparkコンポーネントとして以下のものを挙げ、その利用方法を解説した。

  • 制約ベースのレイアウト(ConstraintLayout)
  • Formコンテナ
  • フォーマッタ
  • Imageコンポーネント
  • DataGrid

2 制約ベースのレイアウト

Flex 4のSparkコンポーネントではレイアウトを指定するためのクラスとしてBasicLayout、HorizontalLayout、VerticalLayout 、TileLayoutが用意されている。Heroではこれに制約ベースのレイアウトである「ConstraintLayout」が追加される。制約ベースのレイアウトとは、例えば「上からの距離」や「隣のコンポーネントからの距離」など、基準となる場所からの配置を指定し、その他の部分は動的に変化するようなレイアウト方法である。

HeroのConstraintLayoutでは、constraintColumnsプロパティによって列(横)方向の距離を、constraintRowsプロパティによって行(縦)方向の距離を指定できる。図2.1に示されたコード例は、2行3列からなるグリッド状の領域を定義したものだという。レイアウト時にはこの各領域のidを利用し、図2.2のようにコンポーネントに対してそれぞれの領域を基準とした配置を指定する。指定された距離以外は可変となるため、ユーザの環境に合わせた柔軟なレイアウトが可能となる。

図2.1 ConstraintLayoutではconstraintColumnsとconstraintRowsという2つのプロパティによって配置指定のためのの領域を設定する
図2.1 ConstraintLayoutではconstraintColumnsとconstraintRowsという
2つのプロパティによって配置指定のためのの領域を設定する

図2.2 コンポーネントの配置は領域ごとの基準点に対する相対位置で指定できる
図2.2 コンポーネントの配置は領域ごとの基準点に対する相対位置で指定できる

ただし、まだ開発中のバージョンであるため廣畑氏によれば実装されていない部分も多々あるとのことで、例としては%を利用した幅や高さの指定はまだ利用できないとのことだ。

3 Formコンテナ

Formコンテナは入力フォームをデザインするためのSparkコンポーネントである。Form、FormHeading、FormItemの3種類があり、それぞれに対してスキンとしてFormSkin、FormHeadingSkin、FormItemSkinと、フォームアイテムを垂直方向に配置するStackedFormSkin、StackedFormHeadingSkin、StackedFormItemSkinが用意されている。廣畑氏は特にFormItemについて取り上げ、細やかなレイアウトが可能であることを示した。

例えば、FormItemやStackedFormItemSkinに用意されたsequenceLabelプロパティを指定することで、図3.1のように連番付きの入力フォームを作ることができるという。

図3.1 StackedFormItemを利用してフォームUIを作成した例
図3.1 StackedFormItemを利用してフォームUIを作成した例

またhelpContentプロパティによって、図3.2のようにユーザに提示するヒントを表示することができる。さらにこのプロパティはバリデータと連動させることで、メッセージを動的に変化させて不正な入力に対するエラーを表示することなどにも使えるという。

図3.2 helpContentプロパティを使えば効果的なヒントをユーザに提示することができる
図3.2 helpContentプロパティを使えば効果的なヒントをユーザに提示することができる

4 フォーマッタ

フォーマッタは数字や通貨、日付などのデータをロケールに合わせて整形する機能を持つ。Heroには用途別に以下の3つのフォーマッタが用意されている。

  • CurrencyFormatter - 通貨
  • DateTimeFormatter - 日付/時間
  • NumberFormatter - 数字

図4.1はja_JPロケールを指定してフォーマットを行った例だという。下段が元データ、冗談がフォーマット後のデータである。同じデータをen_USロケールを指定してフォーマットすると図4.2のようになるという。

図4.1 フォーマッタを利用すればロケールに合わせたデータ表示を行うことが可能。
図4.1 フォーマッタを利用すればロケールに合わせたデータ表示を行うことが可能。
これは日本語ロケールでフォーマットした例

図4.2 英語ロケールでフォーマットした場合はこのようになる
図4.2 英語ロケールでフォーマットした場合はこのようになる

このように、フォーマッタを利用すれば、ユーザの利用しているOSのロケールに合わせた自然なデータ表示が簡単に実装できるようになる。

5 Imageコンポーネント

Imageコンポーネントはその名の通り画像表示のためのSparkコンポーネントである。指定のサイズの画像をリモートから読み込んだり、読み込んだ画像のキャッシング、スケーリング、キューイング、スムージングなどの機能を持ってるという。

ImageコンポーネントにはSkinStateとして次の5つの状態が定義されており、その状態に応じて表示を変化させることが可能となっている。

  • uninitialized - 未初期化
  • loading - 読込み中
  • ready - 表示完了
  • invalid - 読込みに失敗
  • disabled - 無効(enabled=false)

単に読み込んだ画像を表示するだけでなく、読込み中や読込みに失敗した場合の表示に対応するため、以下の3種類のSkinPartが用意される。

  • imageDisplay - 読み込んだ画像
  • progressIndicatorloading - 読込み中に表示する画像
  • bronkenImageready - 読込みに失敗した場合に表示する画像

その他に特筆すべき点として、廣畑氏はsmoothingQualityというプロパティを挙げている。(smoothプロパティをtrueにした上で)このプロパティに"high"を設定すると、読み込んだ画像を自動でスムージングして表示してくれるという(図5.1)。

図5.1 ImageコンポーネントのsmoothingQualityによって画像のスムージングを有効にした様子
図5.1 ImageコンポーネントのsmoothingQualityによって画像のスムージングを有効にした様子

6 DataGrid

DataGridはデータをグリッド状(表形式)に表示するためのコンポーネントである。キャレットやセパレータ、背景、選択状態など、表示方法を柔軟にカスタマイズできる他、複数行/単一行/単一セルの選択の指定などにも対応している。また、イベントハンドリングを利用することで表示を動的に変化させることもできるようになっている。

DataGridのSkinStateとしてはnormalとdisableが、SkinPartとしては列ヘッダを表示するためのcolumnHeaderBar、グリッド領域を表示するgrid、スクロールバーを表示するscroller、行ごとに背景色を変えるalternatingRowColorsBackgroundなどが用意されている。

また、次のようなプロパティによってグリッドの表示やレイアウトをカスタマイズすることが可能。

  • caretIndicator - キャレットの表示
  • selectionIndicator - 選択状態の表示
  • columnSeparator - 列セパレータの表示
  • rowSeparator - 行セパレータの表示
  • hoverIndicator - ホバーの表示

選択のモードは、selectionModeに以下のいずれかの値を指定することによって設定できる。

  • none - 指定なし(選択不可)
  • singleRow - 単一行のみ選択可能
  • singleCell - 単一セルのみ選択可能
  • multipleRows - 複数行を選択可能
  • multipleCells - 複数セルを選択可能

図6.1はselectionModeにmultipleCellsを指定した例だという。背景がピンクになっている部分が選択されたセルである、複数のセルを同時に選択できていることが確認できる。この例ではキャレットが赤、行セパレータが緑、列セパレータが青になってるが、これらは前述のようにプロパティによって指定することができる。

図6.1 DataGridは表形式のデータ表示のためのコンポーネント。
図6.1 DataGridは表形式のデータ表示のためのコンポーネント。
各種プロパティによってUIの詳細なカスタマイズが可能となっている

DataGrid関連のイベントとしては、以下の3つが用意されている。

  • GridEvent - DataGrid上でのユーザの操作に応じて発生する
  • GridSelectionEvent - DataGrid上のデータ選択が変更された場合に発生する
  • GridCaretEvent - DataGrid上でキャレット位置が変更された場合に発生する

これらのイベントを適切にハンドリングすることによって、動的な表示の切り替えなどを実現することが可能となる。ただし、廣畑氏によればDataGridについてはまだ完全に開発途上の段階であり、特にイベントについては表示に関する部分以外で使うべきではないとのことである。

上記のように、HeroではSparkコンポーネントの進化によってこれまで以上に細かなUIレイアウトの指定が容易に実現できるようになっている。現時点ではまだプレビュー版であるため開発途中の部分も多いが、Flexを使っている開発者や、これから使おうと考えている開発者はぜひ試してみるといいだろう。