Определение пользовательских интерфейсов, подобных интерфейсу обозревателя, для содержимого HTML
Adobe AIR 1.0 и более поздних версий
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.
|
|
|
|
|