HTML コンテンツのブラウザー形式のユーザーインターフェイスの定義

Adobe AIR 1.0 およびそれ以降

HTMLHost クラスの拡張について
例：HTMLHost クラスの拡張
window.location プロパティの変更の処理
window.moveBy()、window.moveTo()、window.resizeTo()、window.resizeBy() の JavaScript 呼び出しの処理
window.open() の JavaScript 呼び出しの処理
window.close() の JavaScript 呼び出しの処理
window.status プロパティの変更の処理
window.document.title プロパティの変更の処理
window.blur() と window.focus() の JavaScript 呼び出しの処理
スクロールする HTML コンテンツを含むウィンドウの作成

JavaScript には、HTML コンテンツを表示するウィンドウを制御するための API がいくつか用意されています。AIR では、これらの API はカスタム HTMLHost クラスを実装してオーバーライドできます。

HTMLHost クラスの拡張について

例えば、アプリケーションで複数の HTMLLoader オブジェクトをタブ付きインターフェイスに表示する場合、読み込まれた HTML ページによってタイトルを変更する際に、メインウィンドウのタイトルではなく、タブのラベルを変更したい場合があります。同様に、コードで、 window.moveTo() 呼び出しへの応答として、親表示オブジェクトコンテナ内で HTMLLoader オブジェクトの位置を変更したり、HTMLLoader オブジェクトを含むウィンドウを移動したり、何も行わなかったり、まったく別の操作を行ったりすることもできます。

AIR HTMLHost クラスは、次の JavaScript プロパティとメソッドを制御します。

window.status
window.document.title
window.location
window.blur()
window.close()
window.focus()
window.moveBy()
window.moveTo()
window.open()
window.resizeBy()
window.resizeTo()

new HTMLLoader() を使用して HTMLLoader オブジェクトを作成した場合、上記の JavaScript プロパティまたはメソッドは有効になりません。HTMLHost クラスは、これらの JavaScript API のデフォルトのブラウザー形式の実装を提供します。HTMLHost クラスを拡張して、動作をカスタマイズすることもできます。デフォルトの動作をサポートする HTMLHost オブジェクトを作成するには、HTMLHost コンストラクターの defaultBehaviors パラメーターを true に設定します。

var defaultHost:HTMLHost = new HTMLHost(true);

AIR で、HTMLLoader クラスの createRootWindow() メソッドを使用して HTML ウィンドウを作成する場合は、デフォルトの動作をサポートする HTMLHost インスタンスが自動的に割り当てられます。ホストオブジェクトの動作を変更するには、別の HTMLHost 実装を HTMLLoader の htmlHost プロパティに割り当てます。また、このプロパティに null を割り当てて、機能全体を無効にすることもできます。

注意： AIR では、HTML ベースの AIR アプリケーション用に作成された初期ウィンドウと、JavaScript の window.open() メソッドのデフォルト実装によって作成されたすべてのウィンドウに、デフォルトの HTMLHost オブジェクトが割り当てられます。

例：HTMLHost クラスの拡張

次の例では、HTMLHost クラスを拡張して、HTMLLoader オブジェクトがユーザーインターフェイスに及ぼす影響をカスタマイズする方法を示します。

Flex の例：

HTMLHost クラスを拡張するクラス（サブクラス）を作成します。

新しいクラスのメソッドをオーバーライドして、ユーザーインターフェイス関連の設定の変更を処理します。例えば、次の CustomHost クラスは、 window.open() の呼び出しと window.document.title の変更の動作を定義します。 window.open() の呼び出しによって新しいウィンドウで HTML ページを開き、 window.document.title の変更（HTML ページの <title> エレメントの設定を含む）によってそのウィンドウのタイトルを設定します。

package 
{ 
    import flash.html.*; 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
 
    public class CustomHost extends HTMLHost 
    { 
        import flash.html.*; 
        override public function 
            createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title; 
        } 
    } 
}

HTMLLoader を含むコードで（HTMLHost の新しいサブクラスのコードではなく）、新しいクラスのオブジェクトを作成します。その新しいオブジェクトを HTMLLoader の htmlHost プロパティに割り当てます。次の Flex コードでは、前述の手順で定義した CustomHost クラスを使用します。

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    applicationComplete="init()"> 
    <mx:Script> 
        <![CDATA[ 
            import flash.html.HTMLLoader; 
            import CustomHost; 
            private function init():void 
            { 
                var html:HTMLLoader = new HTMLLoader(); 
                html.width = container.width; 
                html.height = container.height; 
                var urlReq:URLRequest = new URLRequest("Test.html"); 
                html.htmlHost = new CustomHost(); 
                html.load(urlReq); 
                container.addChild(html); 
            } 
        ]]> 
    </mx:Script> 
    <mx:UIComponent id="container" width="100%" height="100%"/> 
</mx:WindowedApplication>

ここで示したコードをテストするには、次のコンテンツを含む HTML ファイルをアプリケーションディレクトリに含めます。

<html> 
    <head> 
        <title>Test</title> 
    </head> 
    <script> 
        function openWindow() 
        { 
            window.runtime.trace("in"); 
            document.title = "foo" 
            window.open('Test.html'); 
            window.runtime.trace("out"); 
        } 
    </script> 
    <body> 
        <a href="#" onclick="openWindow()">window.open('Test.html')</a> 
    </body> 
</html>

Flash Professional の例：

AIR の Flash ファイルを作成します。ドキュメントクラスを CustomHostExample に設定し、CustomHostExample.fla としてファイルを保存します。

HTMLHost クラスを拡張するクラス（サブクラス）を含む CustomHost.as という ActionScript ファイルを作成します。このクラスは、新しいクラスの特定のメソッドをオーバーライドして、ユーザーインターフェイス関連の設定の変更を処理します。例えば、次の CustomHost クラスは、 window.open() の呼び出しと window.document.title の変更の動作を定義します。 window.open() メソッドの呼び出しによって新しいウィンドウで HTML ページを開き、 window.document.title プロパティの変更（HTML ページの <title> エレメントの設定を含む）によってそのウィンドウのタイトルを設定します。

package 
{ 
    import flash.display.StageScaleMode; 
    import flash.display.NativeWindow; 
    import flash.display.NativeWindowInitOptions; 
    import flash.events.Event; 
    import flash.events.NativeWindowBoundsEvent; 
    import flash.geom.Rectangle; 
    import flash.html.HTMLLoader; 
    import flash.html.HTMLHost; 
    import flash.html.HTMLWindowCreateOptions; 
    import flash.text.TextField; 
 
    public class CustomHost extends HTMLHost 
    { 
        public var statusField:TextField; 
         
        public function CustomHost(defaultBehaviors:Boolean=true) 
        { 
            super(defaultBehaviors); 
        } 
        override public function windowClose():void 
        { 
            htmlLoader.stage.nativeWindow.close(); 
        } 
        override public function createWindow( 
                                windowCreateOptions:HTMLWindowCreateOptions ):HTMLLoader 
        { 
            var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
            var bounds:Rectangle = new Rectangle(windowCreateOptions.x, 
                                            windowCreateOptions.y, 
                                            windowCreateOptions.width, 
                                            windowCreateOptions.height); 
            var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                        windowCreateOptions.scrollBarsVisible, bounds); 
            htmlControl.htmlHost = new HTMLHostImplementation(); 
            if(windowCreateOptions.fullscreen){ 
                htmlControl.stage.displayState = 
                    StageDisplayState.FULL_SCREEN_INTERACTIVE; 
            } 
            return htmlControl; 
        } 
        override public function updateLocation(locationURL:String):void 
        { 
            trace(locationURL); 
        } 
        override public function set windowRect(value:Rectangle):void 
        { 
            htmlLoader.stage.nativeWindow.bounds = value; 
        } 
        override public function updateStatus(status:String):void 
        { 
            statusField.text = status; 
            trace(status); 
        } 
        override public function updateTitle(title:String):void 
        { 
            htmlLoader.stage.nativeWindow.title = title + "- Example Application"; 
        } 
        override public function windowBlur():void 
        { 
            htmlLoader.alpha = 0.5; 
        } 
        override public function windowFocus():void 
        { 
            htmlLoader.alpha = 1; 
        } 
    } 
}

アプリケーションのドキュメントクラスを格納する CustomHostExample.as という別の ActionScript ファイルを作成します。このクラスは、HTMLLoader オブジェクトを作成し、そのホストプロパティを前述の手順で定義した CustomHost クラスのインスタンスに設定します。

package 
{ 
    import flash.display.Sprite; 
    import flash.html.HTMLLoader; 
    import flash.net.URLRequest; 
    import flash.text.TextField; 
 
    public class CustomHostExample extends Sprite 
    { 
        function CustomHostExample():void 
        { 
            var html:HTMLLoader = new HTMLLoader(); 
            html.width = 550; 
            html.height = 380; 
            var host:CustomHost = new CustomHost(); 
            html.htmlHost = host; 
             
            var urlReq:URLRequest = new URLRequest("Test.html"); 
            html.load(urlReq); 
             
            addChild(html); 
             
            var statusTxt:TextField = new TextField(); 
            statusTxt.y = 380; 
            statusTxt.height = 20; 
            statusTxt.width = 550; 
            statusTxt.background = true; 
            statusTxt.backgroundColor = 0xEEEEEEEE; 
            addChild(statusTxt); 
             
            host.statusField = statusTxt; 
        } 
    } 
}

ここで示したコードをテストするには、次のコンテンツを含む HTML ファイルをアプリケーションディレクトリに含めます。

<html> 
     <head> 
     <title>Test</title> 
     <script> 
     function openWindow() 
     { 
     document.title = "Test" 
     window.open('Test.html'); 
     } 
     </script> 
     </head> 
     <body bgColor="#EEEEEE"> 
     <a href="#" onclick="window.open('Test.html')">window.open('Test.html')</a> 
     <br/><a href="#" onclick="window.document.location='http://www.adobe.com'"> 
     window.document.location = 'http://www.adobe.com'</a> 
     <br/><a href="#" onclick="window.moveBy(6, 12)">moveBy(6, 12)</a> 
     <br/><a href="#" onclick="window.close()">window.close()</a> 
     <br/><a href="#" onclick="window.blur()">window.blur()</a> 
     <br/><a href="#" onclick="window.focus()">window.focus()</a> 
     <br/><a href="#" onclick="window.status = new Date().toString()">window.status=new Date().toString()</a> 
     </body> 
</html>

window.location プロパティの変更の処理

locationChange() メソッドをオーバーライドして、HTML ページの URL の変更を処理します。 locationChange() メソッドは、ページの JavaScript で window.location の値を変更するときに呼び出されます。次の例では、要求された URL を読み込んでいます。

override public function updateLocation(locationURL:String):void 
{ 
    htmlLoader.load(new URLRequest(locationURL)); 
}

注意： HTMLHost オブジェクトの htmlLoader プロパティを使用して、現在の HTMLLoader オブジェクトを参照できます。

window.moveBy()、window.moveTo()、window.resizeTo()、window.resizeBy() の JavaScript 呼び出しの処理

set windowRect() メソッドをオーバーライドして、HTML コンテンツの境界の変更を処理します。 set windowRect() メソッドは、ページの JavaScript から window.moveBy() 、 window.moveTo() 、 window.resizeTo() または window.resizeBy() を呼び出すときに呼び出されます。次の例では、デスクトップウィンドウの境界を更新します。

override public function set windowRect(value:Rectangle):void 
{ 
    htmlLoader.stage.nativeWindow.bounds = value; 
}

window.open() の JavaScript 呼び出しの処理

createWindow() メソッドをオーバーライドして、 window.open() の JavaScript 呼び出しを処理します。 createWindow() メソッドの実装は、新しい HTMLLoader オブジェクトを作成して返します。通常、HTMLLoader は新しいウィンドウに表示しますが、ウィンドウの作成は必須ではありません。

次の例では、 createWindow() 関数を HTMLLoader.createRootWindow() で実装し、ウィンドウと HTMLLoader オブジェクトの両方を作成する方法を示します。NativeWindow オブジェクトを別個に作成し、HTMLLoader をウィンドウステージに追加することもできます。

override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader{ 
    var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    var bounds:Rectangle = new Rectangle(windowCreateOptions.x, windowCreateOptions.y,  
                                windowCreateOptions.width, windowCreateOptions.height); 
    var htmlControl:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, 
                                    windowCreateOptions.scrollBarsVisible, bounds); 
    htmlControl.htmlHost = new HTMLHostImplementation(); 
    if(windowCreateOptions.fullscreen){ 
        htmlControl.stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE; 
    } 
    return htmlControl; 
}

注意：この例では、 window.open() で作成した新しいウィンドウにカスタム HTMLHost 実装を割り当てます。必要に応じて、別の実装を使用したり、新しいウィンドウの htmlHost プロパティを null に設定したりすることもできます。

createWindow() メソッドにパラメーターとして渡されるオブジェクトは HTMLWindowCreateOptions オブジェクトです。HTMLWindowCreateOptions クラスには、 features パラメーターストリング（ window.open() の呼び出しで使用）の設定値を知らせるプロパティがあります。

HTMLWindowCreateOptions プロパティ	window.open() の JavaScript 呼び出しにおける features ストリングの対応する設定
`fullscreen`	`fullscreen`
`height`	`height`
`locationBarVisible`	`location`
`menuBarVisible`	`menubar`
`resizeable`	`resizable`
`scrollBarsVisible`	`scrollbars`
`statusBarVisible`	`status`
`toolBarVisible`	`toolbar`
`width`	`width`
`x`	`left` または `screenX`
`y`	`top` または `screenY`

HTMLLoader クラスは、features ストリングで指定できる機能の一部は実装していません。スクロールバー、ロケーションバー、メニューバー、ステータスバーおよびツールバーは、必要に応じてアプリケーションで用意する必要があります。

JavaScript の window.open() メソッドのその他の引数は、システムによって処理されます。 createWindow() の実装では、HTMLLoader オブジェクトにコンテンツを読み込んだり、ウィンドウタイトルを設定したりしないでください。

window.close() の JavaScript 呼び出しの処理

windowClose() をオーバーライドして、 window.close() メソッドの JavaScript 呼び出しを処理します。次の例では、 window.close() メソッドが呼び出されたときにデスクトップウィンドウを閉じます。

override public function windowClose():void 
{ 
    htmlLoader.stage.nativeWindow.close(); 
}

window.close() の JavaScript 呼び出しでは、必ずしもコンテナウィンドウを閉じる必要はありません。例えば、次のコードのように、ウィンドウ（他のコンテンツを含んでいるウィンドウ）を開いたまま、表示リストから HTMLLoader を削除することもできます。

override public function windowClose():void 
{ 
    htmlLoader.parent.removeChild(htmlLoader); 
}

window.status プロパティの変更の処理

updateStatus() メソッドをオーバーライドして、JavaScript による window.status の値の変更を処理します。次の例では、ステータス値をトレースします。

override public function updateStatus(status:String):void 
{ 
    trace(status); 
}

要求されたステータスが、 updateStatus() メソッドにストリングとして渡されます。

HTMLLoader オブジェクトにステータスバーはありません。

window.document.title プロパティの変更の処理

updateTitle() メソッドをオーバーライドして、JavaScript による window.document.title の値の変更を処理します。次の例では、ウィンドウタイトルを変更し、「Sample」というストリングをタイトルに追加します。

override public function updateTitle(title:String):void 
{ 
    htmlLoader.stage.nativeWindow.title = title + " - Sample"; 
}

document.title が HTML ページで設定されると、要求されたタイトルが updateTitle() メソッドにストリングとして渡されます。

document.title の変更では、必ずしも HTMLLoader オブジェクトを含むウィンドウのタイトルを変更する必要はありません。例えば、テキストフィールドなど、別のインターフェイスエレメントを変更することもできます。

window.blur() と window.focus() の JavaScript 呼び出しの処理

windowBlur() メソッドと windowFocus() メソッドをオーバーライドして、 window.blur() と window.focus() の JavaScript 呼び出しを処理します。この例を次に示します。

override public function windowBlur():void 
{ 
    htmlLoader.alpha = 0.5; 
} 
override public function windowFocus():void 
{ 
    htmlLoader.alpha = 1.0; 
    NativeApplication.nativeApplication.activate(htmlLoader.stage.nativeWindow); 
}

注意： AIR には、ウィンドウまたはアプリケーションを非アクティブ化するための API はありません。

スクロールする HTML コンテンツを含むウィンドウの作成

HTMLLoader クラスには HTMLLoader.createRootWindow() という静的メソッドがあり、このメソッドを使用すると、HTMLLoader オブジェクトを含む新しいウィンドウ（NativeWindow オブジェクトによって表されるウィンドウ）を開き、そのウィンドウのユーザーインターフェイス設定を定義することができます。このメソッドは、ユーザーインターフェイスの定義に使用できる 4 つのパラメーターを受け取ります。

パラメーター	説明
`visible`	初期状態でウィンドウを表示する（ `true` ）か、非表示にする（ `false` ）かを指定する Boolean 値です。
`windowInitOptions`	NativeWindowInitOptions オブジェクトです。NativeWindowInitOptions クラスは、NativeWindow オブジェクトの初期化オプションを定義します。例えば、ウィンドウの最小化、最大化またはサイズ変更が可能かどうか、ウィンドウでシステムクロムまたはカスタムクロムを使用するか、ウィンドウを透明にするかどうか（システムクロムを使用しないウィンドウの場合）や、ウィンドウのタイプなどを指定するオプションがあります。
`scrollBarsVisible`	スクロールバーを表示する（ `true` ）か、表示しない（ `false` ）かを指定します。
`bounds`	新しいウィンドウの位置とサイズを定義する Rectangle オブジェクトです。

例えば、次のコードでは、 HTMLLoader.createRootWindow() メソッドを使用して、スクロールバーを使用する HTMLLoader コンテンツを含むウィンドウを作成します。

var initOptions:NativeWindowInitOptions = new NativeWindowInitOptions(); 
var bounds:Rectangle = new Rectangle(10, 10, 600, 400); 
var html2:HTMLLoader = HTMLLoader.createRootWindow(true, initOptions, true, bounds); 
var urlReq2:URLRequest = new URLRequest("http://www.example.com"); 
html2.load(urlReq2); 
html2.stage.nativeWindow.activate();

注意： JavaScript で createRootWindow() を直接呼び出すことによって作成されたウィンドウは、そのウィンドウを開いた HTML ウィンドウから独立したままになります。例えば、JavaScript ウィンドウの opener プロパティと parent プロパティは null になります。ただし、 createRootWindow() を、HTMLHost の createWindow() メソッドをオーバーライドして createRootWindow() を呼び出すことによって間接的に呼び出した場合には、 opener と parent は、そのウィンドウを開いた HTML ウィンドウを参照します。