Mobile-Tutorial: Erstellen einer Anwendung für mobile Plattformen (iOS und Android)
Nach oben zu Mobile-Tutorials: Mobile Anwendungsentwicklung (iOS und Android)
Inhaltsverzeichnis
- 1 Vorbereitungen
- 2 Schritt 1: Erstellen einer neuen FireMonkey-Anwendung für Android oder iOS
- 3 Schritt 2: Auswählen eines Stils
- 4 Schritt 3: Einfügen von Komponenten in das geräteübergreifende Formular
- 5 Schritt 4: Hinzufügen von Ansichten zu Ihrem Projekt
- 6 Schritt 5: Schreiben einer Ereignisbehandlungsroutine für die Behandlung eines Klicks auf die Schaltfläche durch den Benutzer
- 7 Schritt 6: Testen der mobilen Anwendung
- 8 Siehe auch
In diesem Thema wird das Erstellen einer geräteübergreifenden "Hello World"-Anwendung (C++ oder Delphi) für die Zielplattformen iOS und Android beschrieben..
Vorbereitungen
Um mobile Anwendungen (für iOS und Android) mit RAD Studiozu 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:
- Mobile-Tutorial: Konfigurieren der Entwicklungsumgebung auf dem Mac (iOS)
- Mobile-Tutorial: Konfigurieren der Entwicklungsumgebung auf dem Windows-PC (iOS)
- Mobile-Tutorial: Konfigurieren der Entwicklungsumgebung auf dem Windows-PC (Android)
Schritt 1: Erstellen einer neuen FireMonkey-Anwendung für Android oder iOS
- Wählen Sie einen der beiden Befehle:
- Datei > Neu > Geräteübergreifende Anwendung - Delphi
- Datei > Neu > Geräteübergreifende Anwendung - C++Builder
- Der Experte Geräteübergreifende Anwendung wird angezeigt:
- Wählen Sie Leere Anwendung. Im Formular-Designer wird ein neues Formular anzeigt:
- Wählen Sie in der Projektverwaltung die Zielplattform aus.
- Android: Informationen zur Verwendung eines Android-Geräts finden Sie unter Konfigurieren des Systems für die Erkennung von Android-Geräten.
- iOS: Wenn Sie eine iOS-App erstellen möchten, öffnen Sie in der Projektverwaltung den Knoten Zielplattformen, und doppelklicken Sie auf iOS-Simulator (nur für Delphi) oder auf ein angeschlossenes iOS-Gerät (für Delphi oder C++):
-
- Hinweis: Wenn Sie eine Plattform auswählen, werden die Komponenten, die für diese Plattform nicht verfügbar sind, abgedunkelt dargestellt.
Schritt 2: Auswählen eines Stils
- Wählen Sie aus dem Dropdown-Menü Stil entweder "iOS" oder "Android" aus, um die Master-Ansicht mit allen Eigenschaften für diesen Stil anzuzeigen.
- Hinweis: Weitere Informationen finden Sie unter Stilauswahl.
Schritt 3: Einfügen von Komponenten in das geräteübergreifende Formular
Bitte lesen Sie zuerst dieses Tutorial, bevor Sie mit dem Einfügen von Komponenten beginnen: Mobile-Tutorial: Verwenden von Layouts zur Ausrichtung unterschiedlicher Formulargrößen (iOS und Android).
Der erste Schritt beim Erstellen einer geräteübergreifenden Anwendung besteht aus dem Entwerfen der Benutzeroberfläche. In der IDE stehen viele wiederverwendbare Komponenten zum Erstellen von Benutzeroberflächen zur Verfügung.
- Erweitern Sie in der Tool-Palette mit der Maus durch Klicken auf das Plus-Zeichen (+) neben dem Kategorienamen die Kategorie Standard.
- Wählen Sie die Komponente TEdit aus, und doppelklicken Sie entweder auf TEdit, oder ziehen Sie sie in den Formular-Designer.
- Wiederholen Sie diese Schritte, aber fügen Sie jetzt dem Formular eine TLabel- und eine TButton-Komponente hinzu.
- Wählen Sie das Eingabefeld aus, und setzen Sie im Objektinspektor die Eigenschaft KillFocusByReturn auf
True
. - Wählen Sie die Schaltfläche aus, und ändern Sie im Objektinspektor die Eigenschaft Text in "Say Hello".
- Jetzt sollten die drei Komponenten im Formular-Designer angezeigt werden. Beispiel einer iOS-App:
- Nach dem Ablegen dieser Komponenten im Formular-Designer werden deren Namen automatisch von der IDE festgelegt.
- Um den Namen einer Komponente anzuzeigen oder zu ändern, klicken Sie im Formular-Designer auf die entsprechende Komponente, und suchen Sie im Objektinspektor und in der Strukturansicht deren Eigenschaft Name:
- 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).
- Auch das Formular, auf dem sich diese Komponenten befinden, hat einen Namen. Klicken Sie auf den Hintergrund des Formular-Designers, und wählen Sie im Objektinspektor die Eigenschaft Name aus. Der Name des Formulars Form1 (oder Form2, Form3,...) wird angezeigt. Sie können den Namen des Formulars auch in der Strukturansicht finden:
- Sie können durch Klicken auf die Registerkarte Code (für Delphi) oder <Unit-Name>.cpp/<Unit-Name>.h (für C++) am unteren Rand des Formular-Designers schnell zum Quellcode wechseln.
Sie können auch die Taste F12 drücken, um zwischen dem Formular-Designer und dem Quelltext-Editor zu wechseln:
Delphi | C++ |
---|---|
- Im Quelltext-Editor wird der Quellcode angezeigt, den die IDE generiert hat. Es sollten die drei festgelegten Komponenten (Edit1, Label1 und Button1) vorhanden sein:
Delphi | C++ |
---|---|
- Hinweis: Wenn Sie Ihr Projekt speichern oder ausführen, werden die uses- und include-Klauseln aktualisiert (um für TLabel FMX.StdCtrls und für TEdit FMX.Edit hinzuzufügen).
Schritt 4: Hinzufügen von Ansichten zu Ihrem Projekt
Mit Ansichten können Sie Ihre Anwendung für einen bestimmten Gerätetyp anpassen.
- Wechseln Sie zur Ansichtsauswahl.
- Wählen Sie durch Klicken auf die verfügbaren Ansichten diejenigen aus, die Sie hinzufügen möchten.
- Nehmen Sie in der jeweiligen Ansicht die gewünschten Änderungen vor.
Informationen zum Hinzufügen einer angepassten Ansicht finden Sie unter Hinzufügen einer angepassten Ansicht zur Ansichtsauswahl.
Schritt 5: Schreiben einer Ereignisbehandlungsroutine für die Behandlung eines Klicks 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 Ihre Anwendung auf die gleiche Weise wie für Desktop-Plattformen definiert werden. Das typische Ereignis für TButton-Komponenten ist das Klicken auf die Schaltfläche.
Doppelklicken Sie im Formular-Designer auf die Schaltfläche, und RAD Studio erstellt den Skeleton-Code, den Sie zum Implementieren einer Ereignisbehandlungsroutine für das Klickereignis der Schaltfläche verwenden können:
Delphi | C++ |
---|---|
Jetzt können Sie Reaktionen in der Methode Button1Click implementieren.
Die folgenden Codefragmente (Delphi und C++) implementieren eine Reaktion, die ein kleines Dialogfeld mit dem Text "Hello + <in das Eingabefeld eingegebener Name>" angezeigt:
Delphi-Code:
Label1.Text := 'Hello ' + Edit1.Text + ' !';
C++-Code:
Label1->Text = "Hello " + Edit1->Text + " !";
In Delphi müssen die Anführungszeichen um String-Literale 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:
Delphi | C++ |
---|---|
Schritt 6: 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 (), oder drücken Sie F9, oder wählen Sie im Hauptmenü von RAD Studio Start > Start:
Delphi | C++ |
---|---|
Testen der Android-Anwendung 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.
Testen der iOS-Anwendung
Testen auf dem Mac (iOS-Simulator)
Standardmäßig werden FireMonkey-Delphi-Anwendungen für iOS auf der Zielplattform iOS-Simulator ausgeführt. Sie können in der Projektverwaltung die Zielplattform bestätigen:
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:
- Hinweis: Auf iOS-Simulatoren können Sie nur Ihre Delphi-Anwendungen testen.
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 - 32 Bit oder iOS-Gerät - 64 Bit aus, damit der "Platform Assistant" die Anwendung für das angeschlossene iOS-Gerät bereitstellt:
Nach Auswahl der entsprechenden Zielplattform iOS-Gerät führen Sie die iOS-App durch Klicken auf die Schaltfläche Start in der IDE, durch Drücken von F9
oder durch 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 zum Signieren der App entweder "Immer zulassen" oder "Zulassen".
Nehmen Sie dann Ihr iOS-Gerät zur Hand, und warten Sie bis die FireMonkey-iOS-App angezeigt wird. Das FireMonkey-Startbild (aus $(BDS)\bin\Artwork\iOS, das Sie in den Anwendungsoptionen festlegen können) wird angezeigt: