Mobile-Tutorial: Verwenden von Webbrowser-Komponenten (iOS und Android)

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)


Verwenden von Webbrowser-Komponenten in mobilen FireMonkey-Anwendungen

Für mobile Plattformen kapselt FireMonkey die Webbrowser-Komponente als TWebBrowser-Komponente. In diesem Thema wird das Erstellen einer einfachen FireMonkey-Webbrowser-Anwendung für iOS- und Android-Plattformen beschrieben.

TWebBrowserDemo.png

Entwerfen der Benutzeroberfläche

  1. Wählen Sie Datei > Neu > Mobile FireMonkey-Anwendung - Object Pascal > Leere Anwendung oder Datei > Neu > Mobile FireMonkey-Anwendung - C++ > Leere Anwendung.
  2. Wählen Sie in der Tool-Palette die Komponente TToolBar aus, und ziehen Sie sie in den Designer für mobile FireMonkey-Formulare. Geben Sie in das Suchfeld der Tool-Palette einige Buchstaben (z. B. "tool") ein, um TToolBar schnell zu finden:
    SelectToolBar 2.png

  3. Nach dem Ablegen der Komponente wird die TToolBar-Komponente oben im Designer für mobile Formulare angezeigt:
    ToolBarOnForm.png

  4. Wählen Sie in der Tool-Palette die Komponente TButton aus, und legen Sie sie auf der TToolBar-Komponente ab.
  5. Wählen Sie im Designer für mobile Formulare die TButton-Komponente aus, und setzen Sie im Objektinspektor die Eigenschaft StyleLookup auf priortoolbutton.
    Mit dem Wert priortoolbutton von StyleLookup für TButton wird eine "Zurück"-Schaltfläche hinzugefügt. Auf iOS-Geräten sieht diese Schaltfläche wie folgt aus: Prior.png
    Weitere Einzelheiten zum Auswählen eines Stils in mobilen FireMonkey-Anwendungen finden Sie unter Mobile-Tutorial: Verwenden von Schaltflächen-Komponenten mit unterschiedlichen Stilen (iOS und Android).
  6. Wählen Sie in der Tool-Palette die Komponente TEdit aus, und legen Sie sie auf der TToolBar-Komponente ab. Passen Sie die Größe des TEdit-Steuerelements so an, dass es die gesamte Breite von TToolBar ausfüllt:
    ToolBarButtonAndEditControl.png

  7. Wählen Sie im Designer für mobile Formulare das Eingabefeld aus, und setzen Sie dann im Objektinspektor die Eigenschaft ReturnKeyType auf Done, die Eigenschaft KeyboardType auf URL und die Eigenschaft KillFocusByReturn auf True.
    Weitere Informationen über das Auswählen einer virtuellen Tastatur in mobilen FireMonkey-Anwendungen finden Sie unter Auswählen der geeigneten virtuellen Tastatur für die Webbrowser-Anwendung.
  8. Wählen Sie in der Tool-Palette die Komponente TWebBrowser aus, und legen Sie sie auf dem Formular ab.
  9. Wählen Sie die TWebBrowser-Komponente im Designer für mobile Formulare aus, und wählen Sie im Objektinspektor für die Eigenschaft Align den Wert Client aus.
    Wenn Sie diese Schritte ausgeführt haben, sollte das Formular etwa folgendermaßen aussehen:
    NewBrowserAppOnDesigner.png

Schreiben einer Ereignisbehandlungsroutine zum Öffnen einer Webseite, wenn der Benutzer den URL im Eingabe-Steuerelement ändert

Im Unterschied zur Desktop-Plattform verwenden mobile Geräte die virtuelle Tastatur zur Eingabe von Text (siehe die folgenden Abbildungen). Der Benutzer kann die Aktion durch Klicken auf "Return" abschließen.

iOS Android

VirtualKeyBoard iOS.png
iPad

VirtualKeyBoard Android.png
Android (LG - E612


In FireMonkey sind viele Arten von Ereignisbehandlungsroutinen verfügbar, die die meisten Benutzeraktionen abdecken. Nach Tippen auf die Schaltfläche "Return" sendet das FireMonkey-Framework ein OnChange-Ereignis an das TEdit-Steuerelement. Für die Schaltfläche "Zurück" gibt es kein spezielles Ereignis. In diesem Abschnitt werden Ereignisbehandlungsroutinen für beide Szenarien implementiert.

Implementieren einer allgemeinen Methode zum Öffnen einer Webseite

Implementieren Sie vor der Implementierung von Ereignisbehandlungsroutinen zuerst eine allgemeine Methode zum Öffnen einer Webseite auf Basis der Eigenschaft Text des TEdit-Steuerelements.

  1. Erstellen Sie im Quelltext-Editor die folgende neue private OpenURL-Methode:

    Object Pascal:

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

    C++:

    private:	// Benutzer-Deklarationen
      void __fastcall openURL();
    
  2. Implementieren Sie die Methode openURL wie folgt:

    Object Pascal:

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


    C++:

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

Implementieren einer Ereignisbehandlungsroutine für das Ereignis "OnChange"

  1. Erstellen Sie eine Ereignisbehandlungsroutine, indem Sie die Edit-Komponente (im Designer für mobile Formulare) auswählen und dann auf eine freie Stelle neben dem Ereignis OnChange doppelklicken (im Objektinspektor, Registerkarte Ereignisse).
    Der Objektinspektor erstellt eine neue Ereignisbehandlungsroutine mit dem Namen Edit1Change:
    Edit1ChangeAtObjectInspector.png

  1. Stellen Sie die Ereignisbehandlungsroutine fertig, indem Sie den folgenden Code hinzufügen:

    Object Pascal:

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

    C++:

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

Implementieren einer Ereignisbehandlungsroutine für die "Zurück"-Schaltfläche

Zum Implementieren der Zurück-Schaltfläche für Ihren Webbrowser können Sie einfach die Methode GoBack für die Webbrowser-Komponente aufrufen:

Object Pascal:

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

C++:

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

Das grundlegende Verhalten für diese Webbrowser-Anwendung ist jetzt implementiert. Führen Sie die Anwendung auf Ihrem Android-Gerät, dem iOS-Simulator oder auf Ihrem iOS-Gerät aus.

Auswählen der geeigneten virtuellen Tastatur für die Webbrowser-Anwendung

Nach der ersten Ausführung Ihrer Webbrowser-Anwendung stellen Sie möglicherweise fest, dass die virtuelle Tastatur nicht optimal ist.

iOS stellt die folgenden virtuellen Tastaturen bereit:

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 stellt die folgenden virtuellen Tastaturen bereit:

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



Die geeignetste virtuelle Tastatur für Webbrowser-Komponenten ist der Typ URL. Wie bereits unter Entwerfen der Benutzeroberfläche beschrieben, wird der Typ URL mit den folgenden Schritten als virtuelle Tastatur für die Webbrowser-Komponente in diesem Beispiel festgelegt. Wählen Sie im Designer für mobile Formulare das Eingabefeld aus, und setzen Sie dann im Objektinspektor die Eigenschaft KeyboardType auf URL.

TEdit Properties.png

WebBrowser-Codefragment für die mobile Entwicklung

Das Projekt WebBrowser in Codefragmente für die mobile Entwicklung veranschaulicht die in diesem Tutorial beschriebenen Funktionen.

Sie finden das WebBrowser-Projekt unter:

Siehe auch