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

De RAD Studio
Aller à : navigation, rechercher

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


FireMonkey encapsule le composant Navigateur Web sous la forme du composant TWebBrowser. Vous pouvez utiliser TWebBrowser dans les apps de bureau et les apps mobiles. 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 l'une des options suivantes :
    • Fichier > Nouveau > Application multi-périphérique - Delphi > Application vide
    • Fichier > Nouveau > Application multi-périphérique - C++Builder > Application vide
  2. Sélectionnez le composant TToolBar dans la palette d'outils, et déposez-le sur le Concepteur de fiches.
    Pour trouver TToolBar, entrez quelques caractères (tel que "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. Voici une capture d'écran après avoir défini le style iOS dans le Concepteur de fiches :
    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, puis dans l'inspecteur d'objets, définissez la propriété StyleLookup sur priortoolbutton.
  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, 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 plates-formes mobiles, 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, 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 des plates-formes de bureau, les plates-formes 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. Une fois le bouton "Terminer" 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 prendre en charge 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 la section private de la classe TForm1, déclarez la méthode OpenURL :
    Delphi : 
      private
    { Private declarations }
    procedure OpenURL;
    C++Builder : 
    private:        // User declarations
  void __fastcall openURL();
  2. Implémentez la méthode openURL comme suit :
    Delphi :
     
    procedure TForm1.OpenURL;
begin
  WebBrowser1.Navigate(Edit1.Text);
end;

    C++Builder : 
     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 Edit (sur le Concepteur de fiches), 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 :
    Delphi :
     
    procedure TForm1.Edit1Change(Sender: TObject):
begin
  OpenURL;
end;
    C++Builder : 
    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 :

Delphi :
 
procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.GoBack;
end;
C++Builder : 
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, 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 :

  • Démarrer | Programmes | Embarcadero RAD Studio Alexandria | Exemples puis naviguez jusqu'à \Object Pascal\Mobile Snippets\WebBrowser
  • Réferentiel Subversion :
    • Les exemples de code Delphi se trouvent dans . Selon la version RAD Studio dont vous disposez, vous pouvez effectuer une recherche par nom dans les répertoires exemple.

Voir aussi

Récupérée de « https://docwiki.embarcadero.com/RADStudio/Alexandria/f/index.php?title=Tutoriel_mobile_:_Utilisation_du_composant_Navigateur_Web_(iOS_et_Android)&oldid=215165 »