Mobile-Tutorial: Erstellen einer mobilen FireMonkey-Anwendung (iOS und Android)

Aus Appmethod Topics
Wechseln zu: Navigation, Suche

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


In diesem Thema wird das Erstellen der mobilen Anwendung "Hello World" für die Zielplattformen iOS und Android beschrieben.

Vorbereitungen

Um mobile Anwendungen (für iOS und Android) mit Appmethod zu erstellen, müssen Sie einige wichtige Konfigurationsschritte ausführen. In diesem Tutorial wird davon ausgegangen, dass Sie bereits alle erforderlichen Konfigurationsschritte ausgeführt haben.
Einzelheiten finden Sie unter:

Schritt 1: Erstellen einer neuen Anwendung für Android oder iOS

  1. Wählen Sie Datei > Neu > Mobile FireMonkey-Anwendung - Object Pascal.
    Der Experte Mobile FireMonkey-Anwendung wird angezeigt:
    FireMonkey Mobile Application WizardRev3.png

  2. Wählen Sie Leere Anwendung. Im Designer für mobile FireMonkey-Formulare wird ein neues Formular für die mobile Standardplattform Android angezeigt:
    NewAndroidApp4.png

  3. Android: Informationen zur Verwendung eines Android-Geräts finden Sie unter Konfigurieren des Systems für die Erkennung von Android-Geräten. Falls Sie kein Android-Gerät haben, können Sie alternativ einen Android-Emulator erstellen.
  4. iOS: Wenn Sie eine iOS-App erstellen möchten, öffnen Sie in der Projektverwaltung den Knoten Zielplattform, und doppelklicken Sie auf iOS-Simulator, oder schließen Sie ein iOS-Gerät an:
    Blank FireMonkey iOS application2.png
    WhiteSpace50.png

Schritt 2: Einfügen von Komponenten in das mobile Formular

Der erste Schritt beim Erstellen einer mobilen Anwendung besteht, genau wie bei Desktop-Anwendungen, aus dem Entwerfen der Benutzeroberfläche. In der IDE stehen viele wiederverwendbare Komponenten zum Erstellen von Benutzeroberflächen zur Verfügung.

  1. Erweitern Sie in der Tool-Palette mit der Maus die Kategorie Standard durch Klicken auf das Plus-Zeichen (+) neben dem Kategorienamen.
  2. Wählen Sie die Komponente TEdit aus, und doppelklicken Sie entweder auf TEdit, oder ziehen Sie sie in den Designer für mobile FireMonkey-Formulare.
  3.  :
    Standard Tab.png   TEdit on ToolPalette for FireMonkey.png

    Eine Instanz der Komponente TEdit wird auf dem Formular angezeigt. Beispiel einer Android-App:
    AndroidAppEdit.png

  4. Wiederholen Sie diese Schritte, aber fügen Sie jetzt dem Formular eine TLabel- und eine TButton-Komponente hinzu.
  5. Wählen Sie das Eingabefeld aus, und setzen Sie im Objektinspektor die Eigenschaft KillFocusByReturn auf True.
  6. Wählen Sie die Schaltfläche aus, und ändern Sie im Objektinspektor die Eigenschaft Text in "Say Hello".
  7. Es sollten jetzt drei Komponenten im Designer für mobile FireMonkey-Formulare angezeigt werden. Beispiel einer iOS-App:
  8.  :
    Development an iOS application on Windows.png

  9.  :
  10. Nachdem Sie diese Komponenten in den Designer für mobile FireMonkey-Formulare eingefügt haben, legt die IDE automatisch Namen für die Komponenten fest.
    Um den Namen einer Komponente anzuzeigen oder zu ändern, klicken Sie im Designer für mobile FireMonkey-Formulare auf die entsprechende Komponente, und suchen Sie im Objektinspektor und in der Strukturansicht deren Eigenschaft Name:
  11.  :
    See Name Property of FireMonkey Button.png

  12.  :
    Für TButton-Komponenten wird der Komponentenname standardmäßig auf Button1 gesetzt (oder auf Button2, Button3, je nachdem, wie viele TButton-Komponenten Sie in dieser Anwendung erstellt haben).
  13. Auch das Formular, auf dem sich diese Komponenten befinden, hat einen Namen. Klicken Sie auf den Hintergrund des Designers für mobile Formulare, und wählen Sie im Objektinspektor die Eigenschaft Name aus. Der Name des Formulars Form1 (oder Form2, Form3,...) wird angezeigt. In der Strukturansicht können Sie den Namen des Formulars auch schnell finden:
  14.  :
    See Form2 at Structure View.png

  15. Sie können durch Klicken auf die Registerkarte Code im unteren Bereich des Formular-Designers schnell zum Quellcode wechseln.
    Sie können auch die Taste F12 drücken, um zwischen dem Designer für mobile FireMonkey-Formulare und dem Quelltext-Editor zu wechseln:
Switch to source.png

Im Quelltext-Editor wird der Quellcode angezeigt, den die IDE generiert hat. Es sollten die drei festgelegten Komponenten (Edit1, Label1 und Button1) vorhanden sein:

Source code of new iOS app.png

Hinweis: Wenn Sie Ihr Projekt speichern oder ausführen, werden die uses-Klauseln aktualisiert (um für TLabel FMX.StdCtrls und für TEdit FMX.Edit hinzuzufügen).

Schritt 3: Schreiben einer Ereignisbehandlungsroutine für einen Klick auf die Schaltfläche durch den Benutzer

Im nächsten Schritt wird eine Ereignisbehandlungsroutine für die TButton-Komponente erstellt. Ereignisbehandlungsroutinen können für mobile Anwendungen auf die gleiche Weise wie für Desktop-Anwendungen definiert werden. Das häufigste Ereignis für TButton-Komponenten ist das Klicken auf die Schaltfläche.

Doppelklicken Sie im Formular-Designer auf die Schaltfläche, und Appmethod erstellt den Skeleton-Code, den Sie zum Implementieren einer Ereignisbehandlungsroutine für das Klickereignis der Schaltfläche verwenden können:

New form code.png
WhiteSpace50.png

Jetzt können Sie Reaktionen in der Methode Button1Click implementieren.

Das folgende Codefragment implementiert eine Reaktion, die ein kleines Dialogfeld mit dem Text "Hello + <in das Eingabefeld eingegebener Name>" anzeigt:

 Label1.Text := 'Hello ' + Edit1.Text + ' !';


Die Anführungszeichen um String-Literale müssen einfache gerade Anführungszeichen sein (z. B. 'string'). Mit dem Pluszeichen (+) können Strings verkettet werden. Wenn Sie in einem String ein einfaches Anführungszeichen benötigen, können Sie zwei aufeinanderfolgende einfache Anführungszeichen verwenden, was ein einzelnes Anführungszeichen ergibt.

Während Sie den Code eingeben, werden Kurzhinweise zur Art der Parameter, die Sie angeben müssen, angezeigt. In den Kurzhinweisen wird auch die Art der Member angezeigt, die in einer gegebenen Klasse unterstützt werden:

CodeInsight in action for FireMonkey application.png
WhiteSpace50.png


Schritt 4: Testen der mobilen Anwendung

Die Implementierung dieser Anwendung ist abgeschlossen, und Sie können sie jetzt ausführen.
Klicken Sie dazu in der IDE auf die Schaltfläche Start (RunButton.png), oder drücken Sie F9, oder wählen Sie im Hauptmenü von AppmethodStart > Start:

Run my first FireMonkey application.png WhiteSpace50.png

Testen der Android-Anwendung

Testen auf dem Android-Emulator

Bevor Sie die Android-App ausführen, überprüfen Sie die Zielplattform in der Projektverwaltung:

AndroidProjectManager.png

Testen auf dem Android-Gerät

Wenn Sie die im Mobile-Tutorial: Konfigurieren der Entwicklungsumgebung auf dem Windows-PC (Android) beschriebenen Schritte ausführen, bevor Sie Ihr Projekt erstellen, können Sie Ihre Android-App jetzt auf einem Android-Gerät ausführen, das über ein USB-Kabel an Ihren PC angeschlossen ist.

CreatingAFireMonkeyApp.png

Testen der iOS-Anwendung

Testen auf dem Mac (iOS-Simulator)

Standardmäßig werden iOS-Anwendungen auf der iOS-Simulator-Zielplattform ausgeführt. Sie können in der Projektverwaltung die Zielplattform bestätigen:

ProjectConfiguredForSimulator.png

WhiteSpace50.png

Wenn Sie die Anwendung ausführen, wird sie auf dem Mac und dann auf dem iOS-Simulator auf dem Mac bereitgestellt. Für dieses Beispiel wird ein Formular mit einem Eingabefeld und einer Schaltfläche angezeigt. Geben Sie in das Eingabefeld Text ein, und klicken Sie auf die Schaltfläche Say Hello:

FirstiOSAppOnMac.png

WhiteSpace50.png

Testen auf einem angeschlossenen iOS-Gerät

Wenn Sie die im Mobile-Tutorial: Konfigurieren der Entwicklungsumgebung auf dem Mac (iOS) und Mobile-Tutorial: Konfigurieren der Entwicklungsumgebung auf dem Windows-PC (iOS) beschriebenen Schritte ausführen, bevor Sie Ihr Projekt erstellen, können Sie Ihre iOS-App jetzt auf einem iOS-Gerät ausführen, das über ein USB-Kabel an Ihren Mac angeschlossen ist.

Wählen Sie zum Ausführen der iOS-App auf einem angeschlossenen iOS-Gerät zuerst die Zielplattform iOS-Gerät aus, damit der "Platform Assistant" die Anwendung für das angeschlossene iOS-Gerät bereitstellt:

SelectDeviceProfile.png

Nach Auswahl der iOS-Gerät-Zielplattform führen Sie die iOS-App durch Klicken auf die Schaltfläche Start in der IDE, durch Drücken von F9 oder Auswahl von Start > Start aus.

Auf dem Mac wird möglicherweise ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, die Berechtigung zur Codesignierung Ihrer iOS-App zu gewähren. Wählen Sie entweder "Immer zulassen" oder "Zulassen" zum Signieren der App.

CodeSignToiOSApp.png

Nehmen Sie dann Ihr iOS-Gerät zur Hand, und warten Sie bis die iOS-App angezeigt wird. Das Startbild (aus $(BDS)\bin\Artwork\iOS, das Sie in Anwendungsoptionen festlegen können) wird angezeigt:

FMXFlame.png

Siehe auch