Flex3 Alertのアレコレ

Flex3のAlertのアレコレメモ


また、怠けていたのでそろそろまじめにやります…


今回はAlertの設定を色々と解説します
Alertは他の言語だとMsgBoxとかMessageBoxなどに当たるものです
利用するためには、以下のimportを追加します


import mx.controls.Alert


基本的な使い方


以下のようなOKボタンが表示されるだけのAlert画面を表示するには、次のように入力します
alertSample_1.gif


Alert.show("ボタン1が押されました","確認");


Alertのshowメソッドは最大で7つの引数を持たせることができます


Alert.show(text,title,flags,parent,closeHandler,iconClass,defaultButtonFlag)


それぞれ次の意味を持ちます


  • text:String
    Alert画面に表示されるメッセージテキストです

  • title:String
    Alert画面の上部に表示されるタイトルテキストです

  • flags:uint
    Alert画面に表示されるボタンの種類を指定します
    初期状態では、OKボタンのみが表示されるようになっています

  • parent:Sprite
    Alert画面の表示される位置です
    デフォルトではFlashアプリケーションの中心に表示されますが、これを指定することで特定のコンポーネントの中心に表示させることができます

  • closeHandler:Function
    ボタンが押された際の処理を渡すメソッドを指定することができます
    例えば、OKとキャンセルボタンを表示させ、OKボタンが押された場合に特定の処理をさせたいという際に使用します

  • iconClass:Class
    Alert画面のメッセージテキストの左横に表示されるクラスを指定します

  • defaultButtonFlag:uint
    Alert画面が表示された状態でEnterが押された場合にどのボタンが押されるようにするか指定します
    初期状態では、Alert.OKが指定されています

アレコレいじってみましょうか


flagsとiconClassを指定した場合


以下のようなAlert画面を表示するには次のように構文を記述します
alertSample_2.gif



// 画像を取り込む
[Embed(source = 'asset/images/AlertSampleImage_1.gif')]
private var AlertImage:Class;

// Buttonが押された際の処理
public function button2Click():void
{

Alert.show("ボタン2が押されました", "ボタン2", Alert.OK | Alert.CANCEL,null,null, AlertImage);

}

OKボタンとキャンセルボタンを表示させるには、showメソッドの第3引数を
Alert.OK | Alert.CANSELと入力します
メッセージの横に画像を表示させたい場合には、第6引数に画像クラスを指定します
[ Embed ( source = '画像のPATH' ) ]
private var AlertImage:Class;
で画像クラスが作成できますので、変数名AlertImageを第6引数に記述します


Alert画面に表示させることができるボタンの種類


画面に表示させるボタンは全部で4つ用意されています
Alert.OK ... デフォルトで表示されるOKボタンです
Alert.CANSEL ... CANCELと書かれたボタンが表示されます
Alert.YES ... YESと書かれたボタンが表示されます
Alert.NO ... NOと書かれたボタンが表示されます


表示されるボタンのラベルを変える方法



ublic function button3Click():void
{

Alert.okLabel = "OKだよ!!";
Alert.cancelLabel = "嫌だよ!!";
Alert.buttonWidth = 100;
Alert.show("ボタン3が押されました", "ボタン3", 0xC, null, button3CloseHandler );

}

private function button3CloseHandler(event:CloseEvent):void
{

// AlertのLabelを元に戻す
setDefaultAlertLabel();

// 押されたボタンにより処理を分岐
if ( event.detail == Alert.OK)
Alert.show("OKボタンが押されたよ!!");
else if ( event.detail == Alert.CANCEL )
Alert.show("嫌ですよね!!");

}

public function setDefaultAlertLabel():void
{

Alert.buttonWidth = 60;
Alert.okLabel = "OK";
Alert.cancelLabel = "CANCEL";
Alert.yesLabel = "YES";
Alert.noLabel = "NO";

}

上記の例を実行すると下記のように表示されます
alertSample_3.gif


表示されるボタンのラベルを変更するには以下のような構文をshowメソッドの前に記述します


Alert.okLabel = "OKの代わりに表示させたい文字列"


CANCELの場合にはcancelLabel、YESの場合にはyesLabel、NOの場合にはnoLabelを変更します
表示されるラベルを変更した場合には、必ず元に戻すようにしましょう(上の例では、メソッドを作成して元に戻しています)
また、独自の文字列を表示させる場合にはデフォルトのボタンの幅が60であるため、切れてしまうことがあり、その場合には、buttonWidthの数値を変更して幅を調整しましょう


押されたボタンによる処理の分岐


上記の例のように、第5引数にボタンが押された場合に実行するメソッドを指定します


Alert.show("略","略",0xC,null,closeHandler)


上の例ではcloseHandlerが実行されます
Alert画面で表示されるボタンが押された場合にはCloseEventが発生します
そのため、以下のように記述します



...
import mx.events.CloseEvent;

...

private function closeHandler(event:CloseEvent)
{
... 処理を記述
}

引数eventのdetailプロパティにどのボタンが押されたかの情報が入っています



...
if ( event.detail == Alert.OK )
{
... OKボタンが押された場合の処理
}
else if ( event.detail == Alert.CANCEL )
{
... CANCELボタンが押された場合の処理
}
else if( event.detail == Alert.YES )
{
... YESボタンが押された場合の処理
}
else if( event.detail == Alert.NO )
{
.. NOボタンが押された場合の処理
}

上のような感じで押されたボタンの種類によって条件分岐することができます


おまけ


表示するボタンの種類は基本的に以下のように入力します
Alert.OK | Alert.CANCEL | Alert.YES | Alert.NO
上の場合、OKとCANCEL、YES、NOの4つのボタンが表示されますが、個人的にはこれがめんどくさいので、(可読性はいいが...)以下のようにしています


  1. OKとCANCELを表示させる場合
    0xC

  2. YESとNOを表示させる場合
    0x3

  3. YESとNO、CANCELを表示させる場合
    0xB

showメソッドが第3引数のuintの最下位4ビットの各ビットに対応するボタンを表示させるという動作をしているため、このような方法をとることができます


可読性が気になる場合には以下のように定数宣言しておくといいかもしれません



public static const YES_NO:uint = 0x3;
public static const YES_NO_CANCEL:uint = 0xB;

この性質を知っていると、Alert画面のボタンを動的に変更することができるので、役に立つときがくるかも!!!
例えば、特定の条件を満たさないとCANCELボタンしか表示されないようにするには以下のようにすればできます



private var buttonFlag:uint = Alert.CANCEL;

public function buttonClick()
{
Alert.show("何か","何か",buttonFlag);
}

public function Alertに表示されるButtonを変化させたいメソッド()
{
buttonFlag += Alert.OK;
}

制御ロジックをしっかりしないと、Alert.OKを2回足したりして変な動作になることがありますので、そこだけ注意すれば何とか使えるかも?


最後に


Alertだけで結構沢山かけるものだなぁーと思った
書きたいことまだまだあったけど、とりあえずはこんなとこで・・・

スポンサーサイト

Flex 3 アスキーアートを作成するFlashアプリ

アスキーアートを作成するFlashアプリケーション


まず、ご紹介ですが、Adobeから[ACTIONSCRIPT 3.0のプログラミング]というドキュメントが公開されていることはご存知でしょうか?
全部で778ページある超大作(?)です


今回はこのドキュメントで紹介されているサンプルを利用して、好きな画像ファイルからアスキーアートを作るFlashを作成してみました
このドキュメント見るとこういうことができるようになるんだという参考程度にどうぞ


非常にページ数が多く全て読むのは大変ですが、AS3を触っている方、これから触る方どんな方でも参考になると思いますのでには是非一度目を通してみてください
なお、こちらのリンクからドキュメントを閲覧できます(PDFファイルとなります)
ACTIONSCRIPT 3.0のプログラミング


操作方法


実際の完成例とソースコードは以下から閲覧してください
なお、ローカルファイルを利用するため、FlashPlayer10が必要となります


AsciiArtを作成するFlash


  1. [ロード]ボタンをクリックし、お好きな画像を選択してください

  2. 画像タブには、実際の画像が表示されます

  3. アスキーアートタブにはその画像をアスキーアートに変換したものが表示されます

  4. 白境界値及び黒境界値を変更し、リロードボタンを押すことでアスキーアートが変化します
    ※元画像の背景を白にしておくと綺麗なアスキーアートになります

細かい説明は省略しますので、適当にいじってみてください
フォントの種類ですが、本サンプルでは[typewriter]を使用しています
リクエストがあれば、変更しますが、ソースがダウンロードできるので、自由に変更してください


便利なTabNavigator


これだけだとアレなので、TabNavigatorの使い方を解説します


以下のソースをみてみてください



<mx:TabNavigator id="myTabNavi" width="100%" height="100%" creationPolicy="all">
<mx:VBox id="imageVBox" label="画像">
<mx:Image id="imageContainer" width="100%" height="100%" />
</mx:VBox>
<mx:VBox id="asciiArtVBox" label="アスキーアート">
<mx:TextArea id="asciiArtTextArea" />
</mx:VBox>
</mx:TabNavigator>

少々省略していますが、アスキーアート作成FlashのMXMLの一部です
TabNavigatorを使用すると非常に簡単に画面を切り替えることができます


  1. TabNavigatorを宣言します

  2. 作成したいタブの個数分のVBOXなどのBOXを宣言します

  3. 作成したBOX一つ一つにlabelをつけましょう
    labelがそのままタブに表示されるラベルになります

  4. 各BOXの子要素として表示したいコントロールを配置します

これだけで、画面の切り替えがスクリプトいらずで実装できてしまいます


独り言...


FlashPlayer10になって、ローカルファイルの操作ができるようになりました
これにより、ブラウザだけで、インストール不要のアプリケーションが作成できるようになりました
一番のメリットはインストール不要というところでしょうか?

スタンドアローンタイプのFlashアプリケーションならば、サーバ側でのスクリプトも要らなく、既存のシステムに影響を及ぼさずに導入することが出来ます

これはコストをかけずに新たな業務アプリケーションができることを意味します

今までは、Webサイトに動きを加えるためだけにFlashが使われてきましたが、これからは新規アプリケーションは是非Flashで作成することを検討してみてはいかがでしょうか?
そして、私を雇ってください(笑)←これがいいたかった(・w・

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。