Определение пользовательских интерфейсов, подобных интерфейсу обозревателя, для содержимого HTML

Adobe AIR 1.0 и более поздних версий

О расширении класса HTMLHost
Пример: расширение класса HTMLHost
Обработка изменений свойства window.location
Обработка вызовов сценарием JavaScript методов window.moveBy(), window.moveTo(), window.resizeTo(), window.resizeBy()
Обработка вызовов сценарием JavaScript метода window.open()
Обработка вызовов сценарием JavaScript метода window.close()
Обработка изменений свойства window.status
Обработка изменений свойства window.document.title
Обработка вызовов сценарием JavaScript методов window.blur() и window.focus()
Создание окон с прокруткой содержимого HTML

JavaScript содержит несколько API-интерфейсов для управления окном, в котором отображается содержимое HTML. В AIR эти API-интерфейсы можно переопределить путем реализации пользовательского класса HTMLHost .

О расширении класса HTMLHost

Если, например, ваше приложение представляет несколько объектов HTMLLoader в интерфейсе с вкладками, можно сделать так, чтобы при загрузке страниц HTML изменялось название вкладки, а не заголовок основного окна. Более того, можно сделать так, чтобы код реагировал на вызов метода window.moveTo() изменением положения объекта HTMLLoader в контейнере родительского экранного объекта, перемещением окна, содержащего объект HTMLLoader, бездействием или выполнением какого-либо иного действия.

Класс HTMLHost в AIR управляет следующими свойствами и методами JavaScript:

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

При создании объекта HTMLLoader с использованием new HTMLLoader() перечисленные свойства и методы JavaScript неактивны. Класс HTMLHost обеспечивает реализацию этих API-интерфейсов JavaScript подобно интерфейсу обозревателя по умолчанию. Для настройки вариантов поведения можно расширить класс HTMLHost. Для создания объекта HTMLHost, поддерживающего поведение по умолчанию, установите параметр defaultBehaviors на значение true в конструкторе HTMLHost:

var defaultHost:HTMLHost = new HTMLHost(true);

При создании окна HTML в AIR при помощи метода createRootWindow() класса HTMLLoader экземпляр HTMLHost, поддерживающий варианты поведения по умолчанию, назначается автоматически. Изменить поведение объекта узла можно путем присваивания другой реализации HTMLHost свойству htmlHost объекта HTMLLoader или путем присваивания значения null для отключения всех функций.

Примечание. AIR назначает объект HTMLHost по умолчанию исходному окну, созданному для приложения AIR на базе HTML, и всем окнам, созданным реализацией метода JavaScript window.open() по умолчанию.

Пример: расширение класса HTMLHost

Следующий пример показывает, как настроить способ влияния объекта HTMLLoader на пользовательский интерфейс путем расширения класса HTMLHost:

Пример Flex:

Создайте класс, расширяющий класс HTMLHost (подкласс).

Измените методы нового класса, при помощи которых будут обрабатываться изменения в настройках пользовательского интерфейса. Например, следующий класс, CustomHost, определяет варианты поведения при вызове метода window.open() и изменения window.document.title . Вызов метода window.open() открывает страницу HTML в новом окне, а изменения window.document.title (включая настройку элемента <title> страницы HTML) задают заголовок этого окна.

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), создайте объект нового класса. Присвойте новый объект свойству htmlHost объекта HTMLLoader. В следующем коде 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.

Создайте файл Flash для AIR. Задайте класс документа CustomHostExample и сохраните файл как CustomHostExample.fla.

Создайте файл ActionScript с именем CustomHost.as, содержащий класс, расширяющий класс HTMLHost (подкласс). Этот класс переопределяет некоторые методы нового класса, при помощи которых обрабатываются изменения настроек пользовательского интерфейса. Например, следующий класс, CustomHost, определяет варианты поведения при вызове метода window.open() и изменения window.document.title . Вызов метода window.open() открывает страницу HTML в новом окне, а изменения свойства window.document.title (включая настройку элемента <title> страницы HTML) задают заголовок этого окна.

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; 
        } 
    } 
}

Создайте другой файл ActionScript с именем CustomHostExample.as, который будет содержать класс документа приложения. Этот класс создает объект HTMLLoader и устанавливает его свойство host на экземпляр класса 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() для обработки изменений URL-адреса страницы HTML. Метод locationChange() вызывается, когда сценарий JavaScript страницы изменяет значение свойства window.location . В следующем примере загружается запрошенный URL-адрес:

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

Примечание. При помощи свойства htmlLoader объекта HTMLHost можно создать ссылку на текущий объект HTMLLoader.

Обработка вызовов сценарием JavaScript методов window.moveBy(), window.moveTo(), window.resizeTo(), window.resizeBy()

Измените метод 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; 
}

Обработка вызовов сценарием JavaScript метода window.open()

Измените метод createWindow() для обработки вызовов сценарием JavaScript метода window.open() . Реализация метода 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; 
}

Примечание. В данном примере пользовательская реализация HTMLHost назначается всем новым окнам, созданным при помощи метода window.open() . Также можно использовать другую реализацию или установить свойство htmlHost на значение null для новых окон, если необходимо.

Объект, передаваемый в качестве параметра методу createWindow() является объектом HTMLWindowCreateOptions . Класс HTMLWindowCreateOptions содержит свойства, передающие значения, заданные строкой параметра features в вызове метода window.open() :

свойство HTMLWindowCreateOptions	Соответствующие настройки строки features в вызове сценарием JavaScript метода window.open()
`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 не реализует все функции, которые могут быть указаны в строке feature. При необходимости приложение должно обеспечивать наличие полос прокрутки, строк размещения, строк меню, строк состояния и панелей инструментов.

Другие аргументы метода window.open() в JavaScript обрабатываются системой. Реализация метода createWindow() не должна загружать содержимое в объект HTMLLoader или задавать заголовок окна.

Обработка вызовов сценарием JavaScript метода window.close()

Измените метод windowClose() для обработки вызовов сценарием JavaScript метода window.close() . Следующий пример закрывает окно рабочего стола при вызове метода window.close() :

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

Вызовы сценарием JavaScript метода window.close() не должны закрывать окно содержимого. Можно, например, удалить объект 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. Можно изменить другой элемент интерфейса, например текстовое поле.

Обработка вызовов сценарием JavaScript методов window.blur() и window.focus()

Измените методы windowBlur() и windowFocus() для обработки вызовов сценарием JavaScript методов window.blur() и window.focus() , как показано в следующем примере:

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() , который позволяет открыть новое окно (представленное объектом NativeWindow), содержащее объект HTMLLoader, а также задать некоторые настройки пользовательского интерфейса для этого окна. Метод использует четыре параметра, определяющие пользовательский интерфейс:

Параметр	Описание
`visible`	Логическое значение, указывающее на то, является окно исходно видимым ( `true` ) или нет ( `false` ).
`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();

Примечание. Окна, созданные путем вызова метода createRootWindow() непосредственно в JavaScript, не зависят от открывающего окна HTML. Свойства JavaScript Window opener и parent , например, имеют значение null . Однако при косвенном вызове метода createRootWindow() путем изменения метода HTMLHost createWindow() на вызов метода createRootWindow() свойства opener и parent содержат ссылку на открывающее окно HTML.