Flex Style Explorer

  • 2007-02-14 (水) 8:14
  • flex

FlexStyleExplorer.jpg

Flexアプリケーションを作っていく方法は、

  • ActionScript 3.0 を使って、高度なインタラクションを作る。
  • MXML という xml 記法の言語を使って、Flex コンポーネントを呼び出し・配置・設定する。コンポーネントにはボタンやスクロールバー、カラーピッカー等があり、その外観は mxml 内の css にてスタイル指定できる。

という、大別して2つのアプローチがあるそうです。

後者の Flex コンポーネントを使うとはつまり、Adobeが用意してくれている洗練されたインターフェースを使って、汎用的なUIを簡単に組み上げていけるということです。従来のFlashサイトのように、オリジナリティ溢れるUIをゼロから設計しなくてもよいので、「ツールとして毎日使ってもらうようなアプリケーション」「それほどUIの知識に自信のない開発者」「速攻でモックアップを作りたい場合」に大活躍します。

その Flex コンポーネントって何があるの?どこまで外観(スタイル)を変更できるの?その時のコードのボリュームは?と、興味が尽きない僕のために、「Adobe Consulting」が「Flex Style Explorer」をリリースしてくださいました。

リンク先の記事の最後に ” DOWLOAD THE FLEX STYLE EXPLORER” とありますので、そこからzipダウンロード&解凍してできる “Flex2StyleExplorer.swf” を開きます。スタンドアローンのAS3プレイヤーがない人は、swfファイルをFlashPlayer9をインストールしたブラウザのブラウザウィンドウにドラッグ&ドロップすると見られます。

設定したいコンポーネントを画面左のリストから選択して、左中の設定パネルで好きなようにいじりまわすと、右中のパネルにその結果が反映、右パネルにはその時の css コードが表示されます。全てのコンポーネントを設定しまくった後に、その全css設定をクリップボードにコピーすることもできます。

僕のようなFlexを知らない人間でも、Flexコンポーネントのカスタマイズの自由度と簡単さが体験できます。このアプリ自体がFlex製なのも参考になります。

備考:このエントリでは、Flex アプリケーションの外観(スタイル)について書きましたが、MXMLには、データバインディング(データ同士の連携)を簡単にできたりという機能もあり、「MXML = 外観デザイン」ではないそうですよ。

追記:
FLEXible」というエクスプローラーでも、mxml で設計する様子をビジュアルで確認できます。
これらのような、ビジュアルで確認しながら設定できる便利ツール関連の記事を、「explorer」タグとして、ブログトップページの右メニューにタギングしておきますので、よければご覧下さい。(最近タグクラウドを導入したので、まだページのデザインができてなくて見難いです。すいません。)

このエントリーをはてなブックマークに追加
はてなブックマーク - Flex Style Explorer

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.trick7.com/blog/2007/02/14-081426.php/trackback
Listed below are links to weblogs that reference
Flex Style Explorer from trick7

Return to page top