AIRでWindowsのシステムトレイにアイコンを表示

Airではデスクトップアプリケーションのようにシステムトレイにアイコンを表示することができます。

簡単なサンプルを作成したので掲載します。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="applicationCompleteHandle()">

 <mx:Script>
     <![CDATA[
         import mx.controls.Alert;

         private function applicationCompleteHandle():void {

             /* システムトレイがサポートされているか判定 */
             if (NativeApplication.supportsSystemTrayIcon) {
             
                 var images:Array = new Array();
                 images.push(new BitmapData(16, 16, false, 0xFFFFFF));
                 nativeApplication.icon.bitmaps = images;

                 var systemTrayIcon:SystemTrayIcon
                     = (nativeApplication.icon as SystemTrayIcon);

                 /* ツールチップを表示 */
                 systemTrayIcon.tooltip = "RiverStone";

                 var nativeMenu:NativeMenu = new NativeMenu();
                 nativeMenu.addItem(new NativeMenuItem("メニュー1"));
                 nativeMenu.addItem(new NativeMenuItem("メニュー2"));
                 nativeMenu.addItem(new NativeMenuItem("メニュー3"));
                 nativeMenu.addItem(new NativeMenuItem("メニュー4"));
                 systemTrayIcon.menu = nativeMenu;

                 /* クリックイベント */
                 systemTrayIcon.addEventListener(MouseEvent.CLICK, systemTrayIconClickEventHandle);

             }
         }

         private function systemTrayIconClickEventHandle(event:MouseEvent):void {
             Alert.show("システムトレイアイコンをクリック", "アラート");
         }

     ]]>
 </mx:Script>
</mx:WindowedApplication>

上記のプログラムを実行するとシステムトレイに白いアイコンが表示されます。



システムトレイをクリックするとアラートが表示されます。



システムトレイに表示されているアイコンを右クリックするとメニューが表示されます。

AIRに画像ファイルをドラッグ&ドロップして表示

AIRで作成したアプリケーションに画像ファイルをドラッグ＆ドロップして表示するサンプルを作成しましたので掲載します。

AIRで作成したアプリケーション外からドラッグ＆ドロップするには「NativeDragEvent」に定義してある「NATIVE_DRAG_ENTER」と「NATIVE_DRAG_DROP」のイベント処理を行います。

ポイントは

1.
NATIVE_DRAG_ENTERイベントにて「NativeDragManager.acceptDragDrop」を呼び出しドラッグ&ドロップを許可する

2.
NATIVE_DRAG_DROPイベントにてイベントクラスのプロパティ「Clipboard」からデータを取得して処理する

となっています。
詳細は下記のサンプルをご覧ください。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="applicationCompleteEventHandle()">

 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.managers.DragManager;

   var loader:Loader;

   private function applicationCompleteEventHandle():void {
    
    canvas.addEventListener(
     NativeDragEvent.NATIVE_DRAG_ENTER, nativeDragEnterEventHandler);

    canvas.addEventListener(
     NativeDragEvent.NATIVE_DRAG_DROP, nativeDragDropEventHandler);
   }

   private function nativeDragEnterEventHandler(event:NativeDragEvent):void {

    if (event.clipboard.hasFormat(
     ClipboardFormats.FILE_LIST_FORMAT)) {
     NativeDragManager.acceptDragDrop(canvas);
    }
   }

   private function nativeDragDropEventHandler(event:NativeDragEvent):void {
    
    var fileList:Array
     = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

    if (fileList.length > 1) {
     return;
    }

    var file:File = fileList[0];
    var fileStream:FileStream = new FileStream();
    fileStream.open(file, FileMode.READ);

    var byteArray:ByteArray = new ByteArray();

    fileStream.readBytes(byteArray, 0, fileStream.bytesAvailable);
    
    loader = new Loader();

    loader.contentLoaderInfo
     .addEventListener(Event.COMPLETE, completeEventHandle);

    loader.contentLoaderInfo
     .addEventListener(IOErrorEvent.IO_ERROR, ioErrorEventHandler);

    loader.loadBytes(byteArray);
   }

   private function completeEventHandle(event:Event):void {

    if (loader.content is Bitmap) {
     image.data = loader.content;
    }
   }

   private function ioErrorEventHandler():void {
    Alert.show("画像を読み込めませんでした。");
   }

  ]]>
 </mx:Script>

 <mx:Canvas id="canvas" x="0" y="0" width="100%" height="100%" backgroundColor="#FFFFFF">
  <mx:Image id="image" horizontalCenter="0" verticalCenter="0"/>
 </mx:Canvas>
 
</mx:WindowedApplication>

■実行結果

AIRでディスプレイの情報を取得する

AIRでディスプレイの幅・高さ・色深度を取得するには「flash.display.Screen」クラスを使用します。Screenクラスに定義されている静的フィールド「screens」・「mainScreen」からScreenクラスのインスタンスを取得してフィールドにアクセスします。

screensには「Screen」クラスのインスタンスを格納した「Array」が、mainScreentはメインとなるディスプレイのScreenクラスのインスタンスが設定されています。

下記にサンプルを掲載します。

var screenArray:Array = Screen.screens;

for (var i:int = 0; i < screenArray.length; i++) {

 var screen:Screen = screenArray[i] as Screen;
 trace(screen.colorDepth);
 trace(screen.bounds.width);
 trace(screen.bounds.height);
}

■実行結果

色深度: 32
幅: 1440
高さ: 900

AIRからSQLiteを使用する

AIRでは「flash.data」パッケージのクラスを使用するとSQLiteというデータベースを使用することができます。

JavaのJDBCを使用した経験があれば、すぐに理解できると思います。(非同期なことを除けば)

簡単なサンプルを作成したので掲載します。このサンプルではSQLiteのデータベースにアクセスしてテーブルのデータを取得し、グリッドコンポーネントに表示しています。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="applicationCompleteEventHandle()">

 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;

   private var conn:SQLConnection;
   private var stmt:SQLStatement;

   private function applicationCompleteEventHandle():void {

    var dbFile:File
     = File.applicationStorageDirectory.resolvePath("local.db");

    conn = new SQLConnection();

    conn.addEventListener(SQLEvent.OPEN, databaseOpenEventHandle);
    conn.addEventListener(SQLErrorEvent.ERROR, databaseOpenErrorEventHandle);

    conn.open(dbFile);
   }

   private function closeEventHandle():void {

    if (conn != null) {
     conn.close();
    }
   }

   private function databaseOpenEventHandle(event:SQLEvent):void {
    readCustomerData();
   }

   private function databaseOpenErrorEventHandle(event:SQLErrorEvent):void {
    Alert.show("データベースに接続できませんでした。", "データベース");
   }

   private function readCustomerData():void {

    stmt = new SQLStatement();
    stmt.sqlConnection = conn;
    stmt.text = "SELECT ID, NAME, ADDRESS FROM CUSTOMERS";

    stmt.addEventListener(SQLEvent.RESULT, queryExecuteResultEventHandle);
    stmt.addEventListener(SQLErrorEvent.ERROR, queryExecuteErrorEventHandle);

    stmt.execute();
   }

   private function queryExecuteResultEventHandle(event:SQLEvent):void {

    var result:SQLResult = stmt.getResult();

    var dataSource:ArrayCollection = new ArrayCollection();

    for (var i:int = 0; i < result.data.length; i++) {

     var obj:Object = new Object();
     obj["id"] = result.data[i]["ID"];
     obj["name"] = result.data[i]["NAME"];
     obj["address"] = result.data[i]["ADDRESS"];
     dataSource.addItem(obj);
    }

    customersGrid.dataProvider = dataSource;
   }

   private function queryExecuteErrorEventHandle(event:SQLErrorEvent):void {
    Alert.show("SQL実行時にエラーが発生しました。", "データベース");
   }

  ]]>
 </mx:Script>
 <mx:VBox y="0" height="100%" width="100%" x="0" verticalGap="0">
  <mx:Canvas width="100%" height="100%">
   <mx:DataGrid id="customersGrid" width="95%" height="95%" horizontalCenter="0" verticalCenter="0">
    <mx:columns>
     <mx:DataGridColumn headerText="顧客番号" dataField="id"/>
     <mx:DataGridColumn headerText="顧客名" dataField="name"/>
     <mx:DataGridColumn headerText="住所" dataField="address"/>
    </mx:columns>
   </mx:DataGrid>
  </mx:Canvas>
 </mx:VBox>

</mx:WindowedApplication>

■実行結果


SQLiteのデータベースファイルを指定する際に「File.applicationStorageDirectory」を使用しています。これはWindowsXPでは「Documents And Settings/ユーザ名/ApplicationData/アプリケーション名/Local Data」を指しているようです。

そのうちAdobe AIR用のO/Rマッピングソフトが流行りそうですね。(もう存在するのでしょうか？)

AIRでWebサイトを表示する

AIRではHTMLクラスを使えば簡単に任意のWebサイトを表示することができます。
Flex2ではいろいろ細工をすれば表示できましたがAIRでは驚くほど簡単にできます。

下記がサンプルです。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" title="RiverStone">

   <mx:Script>
       <![CDATA[

           private function addressKeyDownEventHandle(event:KeyboardEvent):void {

               if (event.keyCode == Keyboard.ENTER) {
                   browser.location = address.text;
               }
           }

       ]]>
   </mx:Script>

   <mx:VBox x="0" y="0" height="100%" width="100%" verticalGap="2">
       <mx:HBox width="100%" height="50" verticalAlign="middle" horizontalGap="2" paddingLeft="5" paddingRight="5">
           <mx:Button id="backButton" width="45" height="40" click="{browser.historyBack()}" label="戻る"/>
           <mx:Button id="forwardButton" label="進む" width="45" height="40" click="{browser.historyForward()}"/>
           <mx:Button id="stopButton" label="中止" width="45" height="40" click="{browser.cancelLoad()}"/>
           <mx:TextInput id="address" width="100%" keyDown="addressKeyDownEventHandle(event)"/>
       </mx:HBox>
       <mx:HTML id="browser" width="100%" height="100%" location="http://www.r-stone.net/"/>
   </mx:VBox>

</mx:WindowedApplication>

■実行結果

HTMLクラスの「historyBackメソッド」でブラウザの戻る、「historyForwardメソッド」でブラウザの進む、「cancelLoadメソッド」でブラウザの中止と同様の処理を行うことができます。

その他にも履歴情報を取得できたり、HTMLコントロールで表示しているHTMLのDOM情報にもアクセスできるようです。

AIRのFileSystemDataGridを使ってみました

Flex3の「FileSystemDataGrid」クラスを使用すれば、ローカルにあるディレクトリの中身を表示することができます。

簡単ですがサンプルを作成しました。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.events.FileEvent;

   private function fileChooseEventHandle(event:FileEvent):void {
    Alert.show(event.file.nativePath);
   }   

  ]]>
 </mx:Script>

 <mx:FileSystemDataGrid id="grid" horizontalCenter="0" width="90%" height="80%" directory="{File.documentsDirectory}" fileChoose="fileChooseEventHandle(event)" verticalCenter="0"/>
 <mx:Button x="45" y="10" label="上へ" enabled="{grid.canNavigateUp}" click="{grid.navigateUp()}"/>
 <mx:Button x="99" y="10" label="下へ" enabled="{grid.canNavigateDown}" click="{grid.navigateDown()}"/>
 <mx:Button x="153" y="10" label="戻る" enabled="{grid.canNavigateBack}" click="{grid.navigateBack()}"/>
 <mx:Button x="207" y="10" label="進む" enabled="{grid.canNavigateForward}" click="{grid.navigateForward()}"/>
 
</mx:WindowedApplication>

■実行結果


「FileSystemDataGrid」クラスには上下のディレクトリに移動するメソッドや、ブラウザの戻る・進むボタンのような動きをするメソッドもあります。

他にも表示する内容をフィルタリングできたり、ソートすることもできます。

なかなか高機能ですよね。

ActionScript3のE4Xでハイフンを含む属性の扱い

ActionScript3のE4Xでハイフンを含む属性の値を取得する場合、通常のように@属性名ではコンパイルエラーとなってしまいます。


E4Xでハイフンを含む属性値を取得する場合は、下記のようにすれば取得することができます。

var customers:XML =
    <customers>
        <customer customer-id="001">佐藤工業</customer>
        <customer customer-id="002">田中建築</customer>
    </customers>;
                trace(customers.customer[0].@["customer-id"]);

「@」の後ろを角かっこで囲み、角かっこの中に属性名を文字列型で指定します。
E4Xを使い始めた当初は、この方法がわからず小一時間ほど調べました。

Flex2でXMLオブジェクトに変数の値を埋め込む

Flex2ではXMLオブジェクトにXMLデータをリテラルで設定する際に、変数の値を埋め込むことができます。

変数を埋め込むにはスコープ上に存在する変数名を「{}」で囲みます。
例えば変数「name」を埋め込む場合は「{name}」となります。

これはXMLの構造が変化しないデータを扱うときに大変便利です。
下記に簡単ですがサンプルを掲載いたします。

var id:int = 100;
var name:String = "山田太郎";

var xml:XML =
 <employees>
  <employee id={id}>{name}</employee>
 </employees>;

trace(xml.toXMLString());

このプログラムを実行するとコンソールに下記のメッセージが表示されます。

<employees>
  <employee id="100">山田太郎</employee>
</employees>

mx.controls.textClasses.TextRangeクラス

以前から気になっていたFlex2のTextRangeクラスを使ってみました。このクラスを使用すれば「TextInput」や「TextArea」に表示されている文字のスタイルを変更することができます。

例えば「editor」というidの「TextArea」に表示されている文字の選択部分を太字にしたい場合は･･･

var textRange:TextRange = new TextRange(editor, true);
textRange.fontWeight = "bold";

とすればOKです。
TextRangeクラスのコンストラクタの第一引数には「TextInput」や「TextArea」などのインスタンスを、第２引数はtrueを設定します（詳細はリファレンスを参照ください)。

文字を太字にする以外にも、下記のようにたくさんのスタイルを設定できるようです。
　・文字の色
　・文字の書体
　・文字の大きさ
　・カーニング
　・文字間
　・文字の整列
　・斜体
　・文字にリンクを設定

Flex2からWebカメラを使って写真をキャプチャーする方法

Flex2ではCameraクラスを使用すると、Flash Playerを実行するパソコンに接続されたWebカメラから画像をキャプチャーすることができます。

Flex2を使用してWebカメラから画像をキャプチャーするサンプルを作成したので掲載いたします。
このサンプルはWebカメラが接続されているコンピュータ以外では動作させることができません。

詳細はサンプルのFlash上で右クリックをしてソースを参照してください。

This text is replaced by the Flash movie.

Flex2で「AutoComplete」を使用する

Flex Exchangeに入力に応じて候補が表示されるコンポーネント「AutoComplete」があったので使用してみました。

AutoCompleteは「mx.controls.ComboBox」を継承しているので、使用方法はComboBoxと同様に「dataProvider」に候補として使用するデータを設定してください。

下記にサンプルを掲載します。（Flash上で右クリックすればソースを見ることができます)

This text is replaced by the Flash movie.

Flex2で「MaskedTextInput」を使用する

穴埋め方式で日付を入力する機能が必要になり、Webで探したところAdobeのFlex Exchangeに「MaskedTextInput」というコンポーネントがありました。

ダウンロードして使ってみたのでサンプルを掲載します(Flash上で右クリックすればソースを表示できます)

This text is replaced by the Flash movie.