Affichage de contenu HTML dans une application mobile

Adobe AIR 2.5 et les versions ultérieures

Objets StageWebView
Contenu
- URI JavaScript
Evénements de navigation
Historique
Cible d’action
Capture d’image bitmap

La classe StageWebView affiche un contenu HTML à l’aide du contrôle de navigateur système sur un périphérique mobile et du contrôle HTMLLoader standard d’Adobe® AIR® sur un poste de travail. Vérifiez la propriété StageWebView.isSupported pour déterminer si la classe est prise en charge sur le périphérique en cours. Le profil mobile n’assure pas la prise en charge de tous les périphériques.

Dans tous les profils, la classe StageWebView ne prend en charge qu’une interaction restreinte entre le contenu HTML et le reste de l’application. Vous pouvez contrôler la navigation, mais l’intercodage ou les échanges directs de données sont interdits. Vous pouvez charger un contenu à partir d’une URL locale ou distante ou transmettre une chaîne de contenu HTML.

Adobe recommande

AIR2.5 StageWebView demo – OAuth Support (disponible en anglais uniquement)

Mark Doherty
Mark Doherty explique comment se connecter à un site protégé via OAuth, tel que Twitter, à l’aide de la classe StageWebView.

Adobe recommande		Si vous souhaitez partager un didacticiel .

	Making the most of StageWebView (disponible en anglais uniquement) Sean Voisen		HTML Web View in Air for Android (disponible en anglais uniquement) Jonathan Campos

	Create a basic web browser with StageWebView (disponible en anglais uniquement) Rich Tretola		AIR Mobile StageWebView UIComponent (disponible en anglais uniquement) Sönke Rohde

	Using StageWebView within a UIComponent in Mobile (disponible en anglais uniquement) Judah Frangipane

Objets StageWebView

Un objet StageWebView n’est pas un objet d’affichage et il est impossible de l’ajouter à la liste d’affichage. Il fait plutôt office de fenêtre d’affichage directement associée à la scène. Un contenu StageWebView est superposé à n’importe quel contenu de liste d’affichage. Il n’existe aucun moyen de contrôler l’ordre de tracé de plusieurs objets StageWebView.

Pour afficher un objet StageWebView, vous affectez la scène sur laquelle il doit apparaître à sa propriété stage . Définissez la taille de l’affichage à l’aide de la propriété viewPort .

Définissez les coordonnées x et y de la propriété viewPort sur une valeur comprise entre -8192 et 8191. La largeur et la hauteur maximales de la scène ne doivent pas dépasser 8191. Si la taille excède les valeurs maximales, une exception est renvoyée.

L’exemple suivant crée un objet StageWebView, définit les propriétés stage et viewPort et affiche une chaîne de contenu 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 );

Pour masquer un objet StageWebView, définissez la propriété stage correspondante sur null . Pour détruire complètement l’objet, appelez la méthode dispose() . Bien que l’appel de la méthode dispose() soit facultatif, il permet au nettoyeur de mémoire de récupérer plus tôt la mémoire utilisée par l’objet.

Contenu

Vous disposez de deux méthodes, loadURL() et loadString() , pour charger un contenu dans un objet StageWebView.

La méthode loadURL() charge une ressource à l’adresse URL indiquée. Libre à vous de faire appel à tout modèle d’URI pris en charge par le contrôle du navigateur Web du système, tel que data:, file:, http:, https: et javascript:. Les modèles app: et app-storage: ne sont pas pris en charge. AIR ne valide pas la chaîne URL.

La méthode loadString() charge une chaîne littérale qui intègre un contenu HTML. L’emplacement d’une page chargée par le biais de cette méthode est exprimé comme suit :

Sur un système d’exploitation de bureau : about:blank
Sur iOS : htmlString
Sur Android : format URI de données de l’élément htmlString codé

Le modèle d’URI détermine les règles de chargement de contenu ou de données intégrés.

Modèle d’URI	Chargement de ressource locale	Chargement de ressource distante	Objet XMLHttpRequest local	Objet XMLHttpRequest distant
data:	Non	Oui	Non	Non
file:	Oui	Oui	Oui	Oui
http:, https:	Non	Oui	Non	Même domaine
about: (méthode loadString())	Non	Oui	Non	Non

Remarque : si la propriété displayState de la scène est définie sur FULL_SCREEN , il est impossible de renseigner sur Desktop un champ de texte affiché dans l’objet StageWebView. Toutefois, sur iOS et Android, vous pouvez saisir des données dans un champ de texte de l’objet StageWebView même si la propriété displayState de la scène est définie sur FULL_SCREEN .

L’exemple suivant fait appel à l’objet StageWebView pour afficher le site Web d’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" ); 
        } 
    } 
}

Sur un périphérique Android, vous devez spécifier l’autorisation INTERNET Android pour permettre à l’application de charger des ressources distantes.

Dans Android 3.0+, l’application doit activer l’accélération matérielle dans l’élément manifestAdditions Android du descripteur d’application AIR pour afficher le contenu des modules d’extension dans un objet StageWebView. Voir Activation de Flash Player et d’autres modules d’extension dans un objet StageWebView .

URI JavaScript

Vous disposez d’un URI JavaScript pour appeler une fonction définie sur la page HTML chargée par un objet StageWebView. La fonction appelée par le biais de l’URI JavaScript s’exécute dans le contexte de la page Web chargée. L’exemple suivant appelle une fonction JavaScript à l’aide d’un objet StageWebView :

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

Evénements de navigation

Lorsqu’un utilisateur clique sur un lien dans HTML, l’objet StageWebView distribue un événement locationChanging . Vous pouvez appeler la méthode preventDefault() de l’objet d’événement pour arrêter la navigation. Si tel n’est pas le cas, l’objet StageWebView navigue jusqu’à la page suivante et distribue un événement locationChange . Une fois le chargement de la page terminé, l’objet StageWebView distribue un événement complete .

Un événement locationChanging est distribué lors de chaque redirection HTML. Les événements locationChange et complete sont distribués au moment opportun.

Sur iOS, un événement locationChanging est distribué avant un événement locationChange , à l’exception des premières méthodes loadURL( ) ou loadString() . La distribution d’un événement locationChange est également associée aux changements de navigation via des iFrames et images.

L’exemple suivant illustre la procédure à mettre en œuvre pour interdire un changement d’emplacement et ouvrir la nouvelle page dans le navigateur système.

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

Historique

Lorsqu’un utilisateur clique dans le contenu affiché dans un objet StageWebView, le contrôle enregistre les piles d’historique en amont et en aval. L’exemple suivant illustre la procédure à mettre en œuvre pour naviguer d’une pile d’historique à l’autre. L’exemple fait appel aux touches programmables Back et Search.

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

Cible d’action

Bien qu’il ne s’agisse pas d’un objet d’affichage, la classe StageWebView contient des membres destinés à gérer les transitions de cible d’action par rapport au contrôle.

Lorsque l’objet StageWebView devient la cible d’action, il distribue un événement focusIn . Le cas échéant, cet événement permet de gérer les éléments cibles d’action de l’application.

Lorsque l’objet StageWebView cesse d’être la cible d’action, il distribue un événement focusOut . Une occurrence de l’objet StageWebView peut cesser d’être la cible d’action lorsqu’un utilisateur « évite » le premier ou le dernier contrôle de la page Web à l’aide des touches de direction ou d’un trackball (boule roulante) de périphérique. La propriété direction de l’objet d’événement permet de savoir si la cible d’action remonte au-delà du haut de la page ou descend via le bas de la page. Grâce à ces informations, vous pouvez faire de l’objet d’affichage approprié placé au-dessus ou au-dessous de l’objet StageWebView la cible d’action.

Sur iOS, il est impossible de définir la cible d’action par programmation. L’objet StageWebView distribue les événements focusIn et focusOut en définissant la propriété de direction de FocusEvent sur none . Si l’utilisateur touche l’intérieur de l’objet StageWebView, l’événement focusIn est distribué. Si l’utilisateur touche l’extérieur de l’objet StageWebView, l’événement focusOut est distribué.

L’exemple suivant illustre la transition de la cible d’action de l’objet StageWebView aux objets d’affichage 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; 
        } 
         
    } 
}

Capture d’image bitmap

Un objet StageWebView est superposé au contenu de la liste d’affichage. Vous ne pouvez pas ajouter de contenu par-dessus un objet StageWebView. Il est, par exemple, impossible de développer une liste déroulante par-dessus le contenu StageWebView. Pour résoudre ce problème, capturez un instantané de l’objet StageWebView. Masquez ensuite l’objet StageWebView et ajoutez à sa place l’instantané de l’image bitmap.

L’exemple suivant illustre la capture de l’instantané d’un objet StageWebView à l’aide de la méthode drawViewPortToBitmapData . Pour masquer l’objet StageWebView, la scène est définie sur null. Une fois le chargement complet de la page Web terminé, la fonction appelée capture l’image bitmap et l’affiche. A l’exécution, le code affiche deux libellés, Google et Facebook. Le fait de cliquer sur l’étiquette capture la page Web correspondante et l’affiche sur la scène sous la forme d’un instantané.

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

Affichage de contenu HTML dans une application mobile

Adobe recommande

AIR2.5 StageWebView demo – OAuth Support (disponible en anglais uniquement)

Adobe recommande

Si vous souhaitez partager un didacticiel .

Making the most of StageWebView (disponible en anglais uniquement)

HTML Web View in Air for Android (disponible en anglais uniquement)

Create a basic web browser with StageWebView (disponible en anglais uniquement)

AIR Mobile StageWebView UIComponent (disponible en anglais uniquement)

Using StageWebView within a UIComponent in Mobile (disponible en anglais uniquement)

Objets StageWebView

Contenu

URI JavaScript

Evénements de navigation

Historique

Cible d’action

Capture d’image bitmap