Archive for 2009/6/4
2009/6/4
さて、前回は空のクラスだけを用意しただけですが、今回はこのクラスを実装していきます。
まずは、Tabに×（バツ）ボタンを表示するところを実装しましょう。
対象となるクラスは、CustomTabクラスです。
とりあえず、バツを表示する画像を用意してください。
私は自分で
のような画像を作成しました。
もし面倒ならこれを使ってください。サイズは 24x16です。このサイズは後でソースで記述します。
さて、まずはこのボタンをタブに表示します。
package com.coltware.cise.ui {
import mx.controls.tabBarClasses.Tab;
import mx.controls.Image;
public class CustomTab extends Tab{
[Embed(source="/com/coltware/cise/ui/assets/close.png")]
private var tabCloseClass:Class;
private var closeImage:Image;
// ボタンの画像を指定する
private var btnWidth:int = 24;
private var btnHeight:int = 16;
public function CustomTab() {
super();
}
override protected function createChildren():void{
super.createChildren();
closeImage = new Image();
closeImage.visible = true;
closeImage.buttonMode = true;
closeImage.width = btnWidth;
closeImage.height = btnHeight;
var imageObj:Object = new tabCloseClass();
closeImage.source = imageObj;
addChild(closeImage);
}
}
}
これで表示はできます。ただし、思った場所に表示されないのです。
こんな感じに、おかしな場所に表示されてしまいます。
ここで、これを調整するメソッドをここに実装していきましょう。
まずは、ソースです。
/**
* タブのサイズを大きくする
*
*/
override protected function measure():void{
super.measure();
measuredMinWidth = measuredMinWidth + btnWidth + 6;
measuredWidth = measuredWidth + btnWidth + 6;
}
/**
* 再表示処理
*/
override protected function updateDisplayList(nscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.updateCloseButton();
this.textField.x-=10;
}
/**
* 閉じるボタンを再表示する
*/
private function updateCloseButton():void{
closeImage.visible = true;
setChildIndex(closeImage, numChildren - 1);
closeImage.move(width - btnWidth - 6, this.textField.y + 1);
}
初めの、measure()は、サイズを決定するメソッドです。
これでバツボタンを表示するためのエリアを確保するため、横に大きくしましょう。
+6って書いたのは、実際やってみての私の気分です。このあたりは適当に調整してみてください。
次に、updateDisplayListです。この処理は画面更新時に呼ばれるメソッドですが、ここでボタンの位置をずらします。
updateCloseButton()の中でmoveしているところが実際、位置ずらしです。
ただ、バツ画像をずらしても、テキスト（ラベル）にかかってしまう可能性があるので、こちらもずらします。
さらにアイコンを表示している場合にはアイコンも調整が必要になるでしょう。このあたりは、ぜひ試してみてください。
これで、きれいに表示されました。
次回は、このバツを押せるようにしていきます。
Posted in 
2009/6/4
今回はComboBoxの表示についてです。ComboBoxとはＨＴＭＬでいう、Selectですね。
今回は、そのComboBoxの
とう感じのものを出したいなと思います。
ただし、これをdataProviderとして提供するのではなく、別なオプションとして提供したいのです。
私は面倒なので今までdataProviderとして記述してしまいましたが、本来はデータとしてではなくプレゼンテーションのみの部分なので、
やっぱり別なこととして扱いたいなーと思っていました。
そこで、本格的（？）に調査しましたところ、見つかりました。
結論からいえば promptというプロパティがComboBoxにはありました。
と書けばおしまい。・・・・・ だったはずなのですが、出ません。
なぜ・・・なぜ・・・
でも、ほかのプログラムで書いた時には出たのに・・・・・
いろいろ調べていたのですがどうしてもわかりません。
でも、回避する方法だけはわかりました。
<mx:ComboBox prompt="---選択---" selectedIndex="-1">
のようにselectedIndex="-1"も合わせて設定すれば大丈夫なようです。
なぜ、-1を設定するようにするかといえば、ComboBoxのset selectedIndexメソッドにマイナスならば・・・・promptを
って感じの部分があったので、まあ、関係があるのかなと入れてみました。
そしたら、ほぼ問題なく動くようになったので・・・というレベルです。
ただ、ソースでの問題ではなく、HTMLに埋め込んだswfの表示では問題が発生しましたが、airや、Flash Player単体での表示では問題がでませんでした。
引き続き、あたまの隅に置いておこうと思います。
