Mobile-Tutorial: Erstellen einer Anwendung für mobile Plattformen (iOS und Android)

Aus RAD Studio
Wechseln zu: Navigation, Suche

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

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:

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

  1. Wählen Sie einen der beiden Befehle:
    Der Experte Geräteübergreifende Anwendung wird angezeigt:
    FireMonkey Mobile Application WizardRev3.png

  2. Wählen Sie Leere Anwendung. Im Formular-Designer wird ein neues Formular anzeigt:
    BlankAppMultiDevice.png
  3. Wählen Sie in der Projektverwaltung die Zielplattform aus.
    1. Android: Informationen zur Verwendung eines Android-Geräts finden Sie unter Konfigurieren des Systems für die Erkennung von Android-Geräten.
    2. 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

  1. 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.

  1. Erweitern Sie in der Tool-Palette mit der Maus durch Klicken auf das Plus-Zeichen (+) neben dem Kategorienamen die Kategorie Standard.
  2. Wählen Sie die Komponente TEdit aus, und doppelklicken Sie entweder auf TEdit, oder ziehen Sie sie in den Formular-Designer.
  3. Wiederholen Sie diese Schritte, aber fügen Sie jetzt dem Formular eine TLabel- und eine TButton-Komponente hinzu.
  4. Wählen Sie das Eingabefeld aus, und setzen Sie im Objektinspektor die Eigenschaft KillFocusByReturn auf True.
  5. Wählen Sie die Schaltfläche aus, und ändern Sie im Objektinspektor die Eigenschaft Text in "Say Hello".
  6. Jetzt sollten die drei Komponenten im Formular-Designer angezeigt werden. Beispiel einer iOS-App:
    PlaceComponentsMultiDevice.png
  7. 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).
  8. 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:
    See Form2 at Structure View.png

    Hinweis: Formulare mit den Standardnamen Form1, Form2, Form3... befinden sich in den Master-Ansichten. Geräteansichten erhalten die Namen Formularname_Ansichtsname, wie Form1_iPhone (iPhone 3.5”-Formular) und Form1_NmXhdpiPh (Android 4” Phone-Formular).
  9. 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++

Switch to source.png

Switch to Source CPP.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:
Delphi C++

Source code of new iOS app.png

SourceCode CPP.png

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.

  1. Wechseln Sie zur Ansichtsauswahl.
  2. Wählen Sie durch Klicken auf die verfügbaren Ansichten diejenigen aus, die Sie hinzufügen möchten.
  3. 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++

New form code.png

EventHandlerCode CPP.png

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++

CodeInsight in action for FireMonkey application.png

Tooltip hint CPP.png

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 (RunButton.png), oder drücken Sie F9, oder wählen Sie im Hauptmenü von RAD Studio Start > Start:

Delphi C++

Run my first FireMonkey application.png

Run My First CPP.png

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.

CreatingAFireMonkeyApp.png

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:

ProjectConfiguredForSimulator.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
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:

SelectDeviceProfile.png

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".

CodeSignToiOSApp.png

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:

FMXFlame.png

Siehe auch