すぐに使えるFlexコネタ集

昨日のおしゃれFxug勉強会にお越しいただいたみなさま、ありがとうございました。
勉強会での発表より、ドリームページで使ったFlexコネタ集を。

1.scaleプロパティの活用

なんの変哲もないよく見かけるscaleプロパティを使った小技。
Scaleを少し変更するだけで、同じインスタンスも素敵に変身します。

【Window領域に合わせた拡大表示】
大きなディスプレイを使っている人は、Windowもめいいっぱい広げて使いたいもの。Flexでは表示サイズに合わせた%指定やパディングの指定もできすが、座標計算をして表示しているコンポーネントの場合、Windowサイズが変更されるときにいちいち計算をしなおすのは面倒。そんなときは、今のWindowサイズにおける表示可能領域とそのコンポーネントのサイズを比較して、何%拡大可能か計算します。それをscaleにセットするだけで、簡単にリキッド・レイアウトが実現できます。

【一覧表示】
一覧表示や、Mini Map表示ならスケールダウン。scaleを小さく設定するだけでミニチュアコンポーネントが作れます。ミニチュアながらも機能はそのまま!なのがかわいらしい。必要に応じてステータスを変更しいらない機能は無効化しましょう。

scaleを変更するだけでいいので簡単です。インスタンスを使いまわせば経済的ですし、下手な計算なロジックを書いてバグを埋め込む心配もなし!

2.ドラッグプロキシーの活用

複雑なアプリになってくると、様々なコンポーネントが多重構造になってしまいます。通常各コンポーネントは自分の描画エリア内にしか、表示が行えないのでコンポーネント間を超えた表示を行いたい場合には、注意した設計が必要です。この画像を一番上のレイヤーに表示したいんだけど… そんな時の裏技!!

おなじみのドラッグプロキシーを辿っていくと発見しました。systemManager.addChildToSandboxRoot!

systemManager.addChildToSandboxRoot(“popUpChildren”, _imageProxy);

Sandboxという名が気になりますが、public function なのでお言葉に甘えておじゃまさせていただきました。

3.ToolTipの活用

ボタンがいっぱいあってどれを押せばいいのかわからないわ!
そんなとき、ボタンの上をうろうろしているとツールチップが現れてヒントをくれるのがバルーン表示。
toolTipプロパティに文字列をセットするだけで、バルーン表示が行えます。

toolTip=”表示したい文字列”

toolTipプロパティはUIComponentのプロパティなので、Flexのコンポーネントならなんにでも使えます。
もちろん、そもそも分かりやすいUIや分かりやすいラベル名を付けておく。
これが一番大事です。
バルーン表示も多用するとうざったくなるのでご利用は計画的に。

以上、すぐに使えるFlexコネタ集でした!
DNPドリームページでお試しください。

Related Post

Flex Hero のモバイルアプリ開発でハマった点Flex Hero のモバイルアプリ開発でハマった点

「Flex Hero のモバイルアプリ開発の基本」では、ホントの基本のみのご紹介でした。今回は、実際に使ってみてハマった点をいくつかご紹介したいと思います。*なお、この記事は公開されているFlash Builder Buritto Preview版 を対象としています。 画面回転時のレイアウト

Flex4でアイコン付きのカスタムボタンを作るFlex4でアイコン付きのカスタムボタンを作る

みなさん、Flex4(spark)は使ってますか?今回の記事では、よく使うアイコン付きButtonコンポーネントをFlex4で作ってみたいと思います。 Flex3ではiconプロパティに、画像パスをセットしてあげればアイコンが表示できましたが、Flex4のButtonにはiconプロパティがありませんので、カスタムButtonSkinを作成して、アイコンを実装します。 完成図はこんな感じです。表示するLabelも複数行にしました。 ■ButtonSkinクラスの構成カスタムButtonSkinの作成は、新規MXMLスキンでホストコンポーネントを(spark)Buttonにセットして生成できます。すると、デフォルトのButtonSkinクラスがコピーされるので、ここにiconを表示するパーツを追加します。MXMLで編集できるので、デザインビューで確認しながらスキンをカスタマイズできます。追加する前に、デフォルトのButtonSkinの構成をまとめてみます。 1:ホストコンポーネント <!– host component