Tutoriel mobile : Utilisation du composant Navigateur Web (iOS et Android)

De Appmethod Topics
Aller à : navigation, rechercher

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)


Utilisation du composant Navigateur Web dans des applications mobiles FireMonkey

Pour les plates-formes mobiles, FireMonkey encapsule le composant Navigateur Web sous la forme du composant TWebBrowser. Cette rubrique décrit comment créer une application Navigateur Web FireMonkey simple pour les plates-formes iOS et Android.

TWebBrowserDemo.png

Conception de l'interface utilisateur

  1. Sélectionnez Fichier > Nouveau > Application mobile FireMonkey - Object Pascal > Application vide ou Fichier > Nouveau > Application mobile FireMonkey - C++ > Application vide.
  2. Sélectionnez le composant TToolBar sur la palette d'outils et déposez-le sur le Concepteur de fiches mobiles FireMonkey. Pour trouver TToolBar, entrez quelques caractères (comme "tool") dans la zone Chercher de la palette d'outils :
    SelectToolBar 2.png

  3. Une fois déposé, vous pouvez voir le composant TToolBar en haut du Concepteur de fiches mobiles :
    ToolBarOnForm.png

  4. Sélectionnez le composant TButton dans la palette d'outils et déposez-le sur le TToolBar.
  5. Sélectionnez le composant TButton sur le Concepteur de fiches mobiles, puis dans l'inspecteur d'objets, définissez la propriété StyleLookup sur priortoolbutton.
    La définition de la valeur priortoolbutton pour la propriété StyleLookup de TButton provoque l'ajout d'un libellé de bouton Back (Retour). Sur les périphériques iOS, il est semblable à l'image suivante : Prior.png
    Pour plus de détails sur la sélection d'un style dans les applications mobiles FireMonkey, voir Tutoriel mobile : Utilisation d'un composant Bouton avec différents styles (iOS et Android).
  6. Sélectionnez le composant TEdit sur la palette d'outils et déposez-le sur le TToolBar. Assurez-vous que la taille du contrôle de saisie est suffisamment large pour remplir la zone du TToolBar :
    ToolBarButtonAndEditControl.png

  7. Sélectionnez le contrôle de saisie sur le Concepteur de fiches mobiles, puis dans l'inspecteur d'objets, définissez la propriété ReturnKeyType sur Done, la propriété KeyboardType sur URL, et la propriété KillFocusByReturn sur True.
    Pour plus d'informations sur la sélection du type de clavier virtuel le plus approprié dans les applications mobiles FireMonkey, voir Sélection du clavier virtuel approprié pour l'application Navigateur Web.
  8. Sélectionnez le composant TWebBrowser dans la palette d'outils et déposez-le sur la fiche.
  9. Sélectionnez le composant Navigateur Web sur le Concepteur de fiches mobiles, accédez à l'inspecteur d'objets et sélectionnez Client pour la propriété Align.
    Une fois ces étapes accomplies, la fiche doit être similaire à la figure suivante :
    NewBrowserAppOnDesigner.png

Ecriture d'un gestionnaire d'événement provoquant l'ouverture d'une page Web lorsque l'utilisateur change d'URL dans le contrôle de saisie

A la différence de la plate-forme de bureau, les périphériques mobiles utilisent le clavier virtuel pour entrer du texte comme illustré sur les images suivantes. L'utilisateur peut terminer l'action en cliquant sur "Done" ("Terminer").

iOS Android

VirtualKeyBoard iOS.png
iPad

VirtualKeyBoard Android.png
Android (LG - E612


FireMonkey fournit de nombreux types de gestionnaires d'événement pour couvrir la plupart des actions entreprises par les utilisateurs. Après que le bouton "Terminer" ait été sélectionné, le framework FireMonkey envoie un événement OnChange au contrôle TEdit. D'autre part, il n'y a pas d'événement spécifique pour le bouton "Back" ("Retour"). Dans cette section, nous allons implémenter des gestionnaires d'événement pour supporter les deux scénarios.

Implémentation d'une méthode commune pour ouvrir une page Web

Avant d'implémenter des gestionnaires d'événement, commencez par implémenter une méthode commune pour ouvrir une page Web basée sur la propriété Text du contrôle de saisie.

  1. Dans l'éditeur de code, créez la nouvelle méthode privée OpenURL suivante : 

    Object Pascal :

     
    type
      TForm1 = Class(TForm)
        ToolBar1: TToolBar;
        Button1: TButton;
        Edit1: TEdit;
        WebBrowser1: TWebBrowser;
      private
        { Private declarations }
        procedure OpenURL;
      public
        { Public declarations }
      end;
    

    C++ :

    private:	// User declarations
      void __fastcall openURL();
    
  2. Implémentez la méthode openURL comme suit :

    Object Pascal :

    procedure TForm1.OpenURL;
    begin
      WebBrowser1.Navigate(Edit1.Text);
    end;
    


    C++ :

     void __fastcall TForm1::openURL()
      {
          WebBrowser1->Navigate(Edit1->Text);
      }
    

Implémentation d'un gestionnaire d'événement pour l'événement OnChange

  1. Créez le gestionnaire d'événement en sélectionnant le composant TEdit (sur le Concepteur de fiches mobiles), puis en double-cliquant sur l'espace vide suivant l'événement OnChange (dans l'onglet Evénements de l'inspecteur d'objets).
    L'inspecteur d'objets crée un nouveau gestionnaire d'événement nommé Edit1Change :
    Edit1ChangeAtObjectInspector.png

  1. Terminez le gestionnaire d'événement en ajoutant le code suivant :

    Object Pascal :

    procedure TForm1.Edit1Change(Sender: TObject):
    begin
      OpenURL;
    end;
    

    C++ :

    void __fastcall TForm1::Edit1Change(TObject *Sender)
    {
        openURL();
    }
    

Implémentation d'un gestionnaire d'événement pour le bouton Back

Pour implémenter le bouton Back de votre navigateur Web, il suffit d'appeler la méthode GoBack du composant Navigateur Web :

Object Pascal :

procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.GoBack;
end;

C++ :

void __fastcall TForm1::Button1Click(TObject *Sender)
{
   WebBrowser1->GoBack();
}

Le comportement de base est maintenant implémenté pour cette application Navigateur Web. Essayez d'exécuter l'application sur le périphérique Android, le simulateur iOS ou le périphérique iOS.

Sélection du clavier virtuel approprié pour l'application Navigateur Web

Après avoir exécuté votre première application Navigateur Web, vous réaliserez sans doute que le clavier virtuel n'est pas optimisé.

iOS fournit plusieurs claviers virtuels comme suit :

Alphabet : Default : EmailAddress : NamePhonePad :
VktAlphabet.png VktDefault.png VktEmailAddress.png
VktNamePhonePad.png




NumberPad : NumbersAndPunctuation : PhonePad : URL :
VktNumberPad.png VktNumbersAndPunctuation.png VktPhonePad.png VktURL.png



Android fournit plusieurs claviers virtuels comme suit :

Alphabet : Default : EmailAddress : NamePhonePad :
VktAlphabet Android.png VktDefault Android.png VktEmailAddress Android.png
VktNamePhonePad Android.png




NumberPad : NumbersAndPunctuation : PhonePad : URL :
VktNumberPad Android.png VktNumbersAndPunctuation Android.png VktPhonePad Android.png VktURL Android.png



Le type de clavier virtuel le plus approprié pour les composants Navigateur Web est URL. Comme nous l'avons déjà expliqué dans Conception de l'interface utilisateur, les étapes suivantes attribuent le type URL comme type de clavier virtuel pour le composant Navigateur Web dans cet exemple. Sélectionnez la zone d'édition sur le Concepteur de fiches mobiles, puis dans l'inspecteur d'objets, définissez la propriété KeyboardType sur URL.

TEdit Properties.png

Extrait de code mobile Navigateur Web

Le projet WebBrowser des extraits de code mobile illustre la fonctionnalité décrite dans ce tutoriel.

Le projet WebBrowser se trouve dans :

Voir aussi