Отображение HTML-содержимого в мобильных приложениях

Adobe AIR 2.5 и более новых версий

Объекты StageWebView
Содержимое
- JavaScript URI
События навигации
История
Фокус
Захват растрового изображения

Класс StageWebView при отображении HTML-содержимого использует механизм управления системного браузера на мобильных устройствах и стандартный механизм управления Adobe® AIR® HTMLLoader в настольных системах. Проверьте свойство StageWebView.isSupported , чтобы определить, поддерживается ли класс на определенном устройстве. Поддержка не гарантирована для всех устройств в мобильном профиле.

Во всех профилях класс StageWebView поддерживает только ограниченный набор взаимодействий между HTML-содержимым и остальной частью приложения. Вы можете управлять навигацией, но взаимодействие между сценариями и прямой обмен данными не разрешены. Содержимое может быть загружено по локальному или удаленному URL, а также передано в строку HTML.

Объекты StageWebView

Объект StageWebView не является экранным объектом и не может быть добавлен в список отображения. Вместо этого он выполняет функции окна просмотра, напрямую связанного с рабочей областью. Содержимое StageWebView отрисовывается поверх любого содержимого списка отображения. Способ управления порядком отрисовки нескольких объектов StageWebView не предусмотрен.

Чтобы отобразить объект StageWebView, используя свойство stage объекта StageWebView, задайте рабочую область, в которой появится объект. С помощью свойства viewPort установите размер отображения.

В свойстве viewPort задайте координаты x и y в диапазоне от -8192 до 8191. Максимальное значение ширины и высоты рабочей области составляет 8191. Если размер превышает максимальное значение, будет сгенерировано исключение.

Следующий пример создает объект StageWebView, задает свойства stage и viewPort и отображает строку HTML:

var webView:StageWebView = new StageWebView(); 
webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight); 
webView.stage = this.stage; 
var htmlString:String = "<!DOCTYPE HTML>" + 
                        "<html><body>" + 
                        "<p>King Philip could order five good steaks.</p>" + 
                        "</body></html>"; 
webView.loadString( htmlString );

Чтобы скрыть объект StageWebView, для свойства stage установите значение null . Для полного удаления объекта вызовите метод dispose() . Вызов метода dispose() не является обязательным, но он помогает сборщику мусора быстрее восстановить память, использовавшуюся объектом.

Содержимое

Содержимое в объект StageWebView можно загрузить с помощью двух методов: loadURL() и loadString() .

Метод loadURL() загружает ресурс по указанному URL. Можно использовать любую схему URI, поддерживаемую механизмом управления системного браузера, включая: data:, file:, http:, https:, и javascript:. Схемы app: и app-storage: не поддерживаются. AIR не проверяет строку URL.

Метод loadString() загружает строковый литерал, содержащий HTML-содержимое. Расположение страницы, загруженной с помощью этого метода, задается следующим образом:

На персональном компьютере: about:blank
В iOS: htmlString
В Android: формат данных URI закодированного свойства htmlString

Схема URI определяет правила загрузки встроенного содержимого или данных.

Схема URI	Загрузка локального ресурса	Загрузка удаленного ресурса	Local XMLHttpRequest	Remote XMLHttpRequest
data:	Нет	Да	Нет	Нет
file:	Да	Да	Да	Да
http:, https:	Нет	Да	Нет	Один и тот же домен
about: (loadString() method)	Нет	Да	Нет	Нет

Примечание. Если для свойства рабочей области displayState установлено значение FULL_SCREEN , на персональном компьютере вы не сможете выполнять ввод в текстовое поле, которое отображается в объекте StageWebView. Однако в iOS и Android ввод в текстовое поле в StageWebView можно выполнять, даже если для события рабочей области displayState установлено значение FULL_SCREEN .

В следующем примере объект StageWebView используется для отображения веб-сайта Adobe.

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.geom.Rectangle; 
     
    public class StageWebViewExample extends MovieClip{ 
 
        var webView:StageWebView = new StageWebView(); 
         
        public function StageWebViewExample() { 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
            webView.loadURL( "http://www.adobe.com" ); 
        } 
    } 
}

На устройствах Android необходимо задать разрешение Android INTERNET, чтобы приложения могли загружать удаленные ресурсы.

В ОС Android 3.0 и более поздних версий приложение должно включать аппаратное ускорение в элементе manifestAdditions Android дескриптора приложения AIR для отображения содержимого подключаемого модуля в объекте StageWebView. См. раздел « Включение Flash Player и других подключаемых модулей в объекте StageWebView ».

JavaScript URI

Можно использовать JavaScript URI для вызова функции, определенной на странице HTML, которая загружается объектом StageWebView. Функция, вызываемая с помощью JavaScript URI, выполняется в контексте загружаемой веб-страницы. В следующем примере объект StageWebView используется для вызова функции JavaScript:

package { 
    import flash.display.*; 
    import flash.geom.Rectangle; 
    import flash.media.StageWebView; 
    public class WebView extends Sprite 
    { 
        public var webView:StageWebView = new StageWebView(); 
        public function WebView() 
        {     
            var htmlString:String = "<!DOCTYPE HTML>" + 
            "<html><script type=text/javascript>" + 
            "function callURI(){" + 
            "alert(\"You clicked me!!\");"+ 
            "}</script><body>" + 
            "<p><a href=javascript:callURI()>Click Me</a></p>" + 
            "</body></html>"; 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
            webView.loadString( htmlString ); 
        } 
    } 
}

События навигации

Когда пользователь нажимает на ссылку в HTML, объект StageWebView отправляет событие locationChanging . Можно вызывать метод preventDefault() объекта события, чтобы остановить навигацию. В противном случае объект StageWebView переходит на новую страницу и отправляет событие locationChange . После завершения загрузки страницы StageWebView отправляет событие complete .

Событие locationChanging отправляется каждый раз при перенаправлении HTML. События locationChange и complete отправляются в соответствующий момент времени.

В iOS событие locationChanging отправляется перед событием locationChange , за исключением методов loadURL( ) и loadString() . Событие locationChange также отправляется при изменении навигации через фреймы и встроенные фреймы.

Следующий пример показывает, как можно предотвратить изменение местоположения и вместо этого открыть новую страницу в системном браузере.

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.events.LocationChangeEvent; 
    import flash.geom.Rectangle; 
    import flash.net.navigateToURL; 
    import flash.net.URLRequest; 
     
    public class StageWebViewNavEvents extends MovieClip{ 
        var webView:StageWebView = new StageWebView(); 
         
        public function StageWebViewNavEvents() { 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
        webView.addEventListener( LocationChangeEvent.LOCATION_CHANGING, onLocationChanging ); 
            webView.loadURL( "http://www.adobe.com" ); 
        } 
        private function onLocationChanging( event:LocationChangeEvent ):void 
        { 
            event.preventDefault(); 
            navigateToURL( new URLRequest( event.location ) ); 
        } 
    } 
}

История

Когда пользователь нажимает на ссылки в содержимом, отображаемые в объекте StageWebView, механизм управления сохраняет стеки истории переходов назад и вперед. Следующий пример демонстрирует навигацию по двум стекам истории переходов. В примере используются программные клавиши «Назад» и «Поиск».

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.geom.Rectangle; 
    import flash.events.KeyboardEvent; 
    import flash.ui.Keyboard; 
     
    public class StageWebViewExample extends MovieClip{ 
 
        var webView:StageWebView = new StageWebView(); 
         
        public function StageWebViewExample() 
        { 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight ); 
            webView.loadURL( "http://www.adobe.com" ); 
             
            stage.addEventListener( KeyboardEvent.KEY_DOWN, onKey ); 
        } 
         
        private function onKey( event:KeyboardEvent ):void 
        { 
            if( event.keyCode == Keyboard.BACK && webView.isHistoryBackEnabled ) 
            { 
                trace("back"); 
                webView.historyBack(); 
                event.preventDefault(); 
            } 
            if( event.keyCode == Keyboard.SEARCH && webView.isHistoryForwardEnabled ) 
            { 
                trace("forward"); 
                webView.historyForward(); 
            } 
        } 
    } 
}

Фокус

Несмотря на то что класс StageWebView не является отображаемым объектом, он содержит членов, которые позволят управлять контролем над переходами фокуса.

Когда объект StageWebView получает фокус, он отправляет событие focusIn . Используйте это событие для управления элементами фокуса в приложении, если это необходимо.

Когда объект StageWebView теряет фокус, он отправляет событие focusOut . Экземпляр StageWebView может потерять фокус, когда пользователь переключается за пределы первого или последнего элемента управления на веб-страницы с помощью трекбола или клавиш со стрелками. Свойство direction объекта события позволяет узнать, поднимается ли фокус выше верхней части страницы или опускается ниже нижней части страницы. Используя эту информацию, назначьте фокус соответствующему отображаемому объекту выше или ниже StageWebView.

В ОС iOS программная установка фокуса невозможна. StageWebView отправляет события focusIn и focusOut со свойствам направления FocusEvent , для которого установлено значение none . Если пользователь нажимает внутри объекта StageWebView, отправляется событие focusIn . Если пользователь нажимает за пределами объекта StageWebView, отправляется событие focusOut .

Следующий пример иллюстрирует переход фокуса от объекта StageWebView к отображаемым объектам Flash:

package  { 
    import flash.display.MovieClip; 
    import flash.media.StageWebView; 
    import flash.geom.Rectangle; 
    import flash.events.KeyboardEvent; 
    import flash.ui.Keyboard; 
    import flash.text.TextField; 
    import flash.text.TextFieldType; 
    import flash.events.FocusEvent; 
    import flash.display.FocusDirection; 
    import flash.events.LocationChangeEvent; 
     
    public class StageWebViewFocusEvents extends MovieClip{ 
        var webView:StageWebView = new StageWebView(); 
        var topControl:TextField = new TextField(); 
        var bottomControl:TextField = new TextField(); 
         
        public function StageWebViewFocusEvents() 
        { 
            trace("Starting"); 
            topControl.type = TextFieldType.INPUT; 
            addChild( topControl ); 
            topControl.height = 60; 
            topControl.width = stage.stageWidth; 
            topControl.background = true; 
            topControl.text = "One control on top."; 
            topControl.addEventListener( FocusEvent.FOCUS_IN, flashFocusIn ); 
            topControl.addEventListener( FocusEvent.FOCUS_OUT, flashFocusOut ); 
             
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle( 0, 60, stage.stageWidth, stage.stageHeight 
- 120 ); 
            webView.addEventListener( FocusEvent.FOCUS_IN, webFocusIn ); 
            webView.addEventListener(FocusEvent.FOCUS_OUT, webFocusOut ); 
            webView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, 
                                     function( event:LocationChangeEvent ):void 
                                     { 
                                         event.preventDefault(); 
                                     } ); 
            webView.loadString("<form action='#'><input/><input/><input/></form>"); 
            webView.assignFocus(); 
             
            bottomControl.type = TextFieldType.INPUT; 
            addChild( bottomControl ); 
            bottomControl.y = stage.stageHeight - 60; 
            bottomControl.height = 60; 
            bottomControl.width = stage.stageWidth; 
            bottomControl.background = true; 
            bottomControl.text = "One control on the bottom.";             
            bottomControl.addEventListener( FocusEvent.FOCUS_IN, flashFocusIn ); 
            bottomControl.addEventListener( FocusEvent.FOCUS_OUT, flashFocusOut );        } 
         
        private function webFocusIn( event:FocusEvent ):void 
        { 
            trace("Web focus in"); 
        } 
         
        private function webFocusOut( event:FocusEvent ):void 
        { 
            trace("Web focus out: " + event.direction); 
            if( event.direction == FocusDirection.TOP ) 
            { 
                stage.focus = topControl; 
            } 
            else 
            { 
                stage.focus = bottomControl; 
            } 
        } 
 
        private function flashFocusIn( event:FocusEvent ):void 
        { 
            trace("Flash focus in"); 
            var textfield:TextField = event.target as TextField; 
            textfield.backgroundColor = 0xff5566; 
        } 
         
        private function flashFocusOut( event:FocusEvent ):void 
        { 
            trace("Flash focus out"); 
            var textfield:TextField = event.target as TextField; 
            textfield.backgroundColor = 0xffffff; 
        } 
         
    } 
}

Захват растрового изображения

Объект StageWebView визуализируется над всем содержимым списка отображения. Невозможно добавить содержимое поверх объекта StageWebView. Например, нельзя развернуть раскрывающийся список над содержимым StageWebView. Для решения этой проблемы получите снимок объекта StageWebView. Затем скройте объект StageWebView и вместо него добавьте растровое изображение со снимком.

Следующий пример иллюстрирует получение снимка объекта StageWebView с использованием метода drawViewPortToBitmapData . Он скрывает объект StageWebView, устанавливая для рабочей области значение «null». После того как веб-страница полностью загрузится, он вызывает функцию, которая создает и отображает растровое изображение. При выполнении кода отображается две метки: Google и Facebook. По нажатию на метку соответствующая веб-страница захватывается и отображается как снимок на рабочей области.

package 
{ 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import flash.display.Sprite; 
    import flash.events.*; 
    import flash.geom.Rectangle; 
    import flash.media.StageWebView; 
    import flash.net.*; 
    import flash.text.TextField; 
    public class stagewebview extends Sprite 
    { 
        public var webView:StageWebView=new StageWebView(); 
        public var textGoogle:TextField=new TextField(); 
        public var textFacebook:TextField=new TextField(); 
        public function stagewebview() 
        { 
            textGoogle.htmlText="<b>Google</b>"; 
            textGoogle.x=300; 
            textGoogle.y=-80;         
            addChild(textGoogle); 
            textFacebook.htmlText="<b>Facebook</b>"; 
            textFacebook.x=0; 
            textFacebook.y=-80; 
            addChild(textFacebook); 
            textGoogle.addEventListener(MouseEvent.CLICK,goGoogle); 
            textFacebook.addEventListener(MouseEvent.CLICK,goFaceBook); 
            webView.stage = this.stage; 
            webView.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); 
        } 
    public function goGoogle(e:Event):void 
        { 
            webView.loadURL("http://www.google.com"); 
            webView.stage = null; 
            webView.addEventListener(Event.COMPLETE,handleLoad); 
        } 
     
    public function goFaceBook(e:Event):void 
        { 
            webView.loadURL("http://www.facebook.com"); 
            webView.stage = null; 
            webView.addEventListener(Event.COMPLETE,handleLoad); 
        } 
    public function handleLoad(e:Event):void 
        { 
            var bitmapData:BitmapData = new BitmapData(webView.viewPort.width, webView.viewPort.height); 
            webView.drawViewPortToBitmapData(bitmapData); 
            var webViewBitmap:Bitmap=new Bitmap(bitmapData); 
            addChild(webViewBitmap); 
        } 
    } 
}

Отображение HTML-содержимого в мобильных приложениях

Рекомендации Adobe

AIR2.5 StageWebView demo – OAuth Support (демонстрация AIR2.5 StageWebView – поддержка OAuth)

Рекомендации Adobe

Хотите поделиться собственными рекомендациями?

Making the most of StageWebView (использование всех возможностей StageWebView)

HTML Web View in Air for Android (HTML Web View в AIR for Android)

Create a basic web browser with StageWebView (создание базового веб-браузера с помощью StageWebView)

AIR Mobile StageWebView UIComponent

Using StageWebView within a UIComponent in Mobile (использование StageWebView в UIComponent на мобильных устройствах)