Client-Mobile - Hello World
In diesem Tutorial wird eine Client-Anwendung für mobile Geräte mit den folgenden Steuerelementen auf der Benutzeroberfläche erstellt:
- Ein Textfeld zur Eingabe eines Namens.
- Eine Beschriftung zur Anzeige einer Meldung.
- Eine Schaltfläche, die – wenn darauf geklickt wird – die Beschriftung mit der Meldung "Hello, <Name>!" füllt, wobei <Name> der in das Textfeld eingegebene Name ist.
Inhaltsverzeichnis
Erstellen einer neuen Anwendung
Sie können neue Dateien und Projekte über die Seite Neu der Ansicht Start erstellen. Wählen Sie in der linken Hierarchie HTML5 Builder-Projekte aus, und doppelklicken Sie dann rechts oben auf Mobile Client-Anwendung.
Für Ihre neue Anwendung wird eine erste (leere) Client-Seite für mobile Geräte erstellt und in der Ansicht Design geöffnet.
Der mittlere Bereich der Design-Ansicht wird vom Designer für mobile Anwendungen eingenommen, einem grafischen Tool zur Bearbeitung von Seiten für mobile Geräte. Auf der linken, rechten und unteren Seite des Designers für mobile Anwendungen befinden sich verschiedene Widgets. Diese werden detailliert in anderen Themen der Dokumentation erläutert. In diesem Tutorial werden einiger dieser Widgets verwendet.
Hinzufügen von Steuerelementen
Der erste Schritt beim Erstellen einer mobilen Client-Anwendung mit HTML5 Builder umfasst das Entwerfen der Benutzeroberfläche. Zum Erstellen von Benutzeroberflächen sind standardmäßig viele Komponenten verfügbar. Bewegen Sie den Cursor auf die Tool-Palette (das Widget in der rechten oberen Ecke), und erweitern Sie die Kategorie Mobile, indem Sie auf das Plus-Zeichen (+) klicken. Wählen Sie die MEdit-Komponente aus, und legen Sie sie im Designer für mobile Anwendungen ab. Eine Instanz der Komponente wird im Designer für mobile Anwendungen angezeigt.
Wiederholen Sie diese Schritte, um dem Designer für mobile Anwendungen die Komponenten MLabel und MButton hinzuzufügen.
Jetzt sollten die drei Komponenten im Designer für mobile Anwendungen angezeigt werden. Verschieben Sie die Komponenten mit dem Mauszeiger, und ordnen Sie sie nach Ihren Vorstellungen an.
Wenn Sie eine Komponente im Designer für mobile Anwendungen ausgewählt haben, können Sie deren Eigenschaften im Objektinspektor anzeigen und ändern.
Ändern Sie als Nächstes die Eigenschaft Caption der MButton-Komponente. Die Eigenschaft Caption der MLabel-Komponente und die Eigenschaft Text der MEdit-Komponente können Sie leer lassen, weil die erste programmgesteuert geändert wird und die zweite vom Benutzer eingegeben wird. Sie müssen auch die Eigenschaft ButtonType der Schaltfläche in btNormal ändern, damit beim Klicken auf die Schaltfläche die Webseite nicht neu geladen wird.
Um eine Eigenschaft einer Komponente zu ändern, wählen Sie die Komponente im Designer für mobile Anwendungen (oder in der Dropdown-Liste oben imObjektinspektor) aus, ändern den Wert der Zieleigenschaft und drücken die Taste Eingabe, um die Änderung zu übernehmen. Im obigen Screenshot wurde die Eigenschaft Caption der Schaltfläche in "Say Hello" und die Eigenschaft ButtonType in btNormal geändert.
Schreiben einer Reaktion auf das Klicken auf eine Schaltfläche
Bei mobilen Anwendungen können Reaktionen auf Benutzeraktionen, wie z.B. das Klicken auf eine Schaltfläche oder die Eingabe in ein Textfeld, als Reaktion auf ein Ereignis implementiert werden. Solche Reaktionen werden inHTML5 Builder als Ereignisbehandlungsroutinen bezeichnet.
Das typische Ereignis fürMButton-Komponenten ist das Klicken auf die Schaltfläche. Wenn Sie imDesigner für mobile Anwendungenauf die Schaltfläche doppelklicken, erstelltHTML5 Builderden Skeleton-Code zum Implementieren einer Ereignisbehandlungsroutine für das Klickereignis der Schaltfläche.
Jetzt können Sie Reaktionen zwischen den geschweiften Klammern implementieren. Es soll eine Reaktion implementiert werden, die die folgende Meldung in derMLabel|Beschriftunganzeigt: “Hello, <in der MEdit-Komponente eingegebener Name>!”.
$('#MLabel1').html("Hello, " + $('#MEdit1').val() + "!");
Mit der Methode html() von jQuery können Sie den Inhalt eines Elements, wie z.B. einer Beschriftung, ändern, und mit val() den Wert eines Eingabefeldes, wie z.B. eines MEdit-Steuerelements, abrufen. In JavaScript müssen String-Literale in einfache ' ' oder doppelte " " Anführungszeichen eingeschlossen werden. Mit dem Pluszeichen (+) können Strings verkettet werden.
Während der Eingabe des Codes erhalten Sie Hinweise zur Art der Member, die von einem gegebenen Objekt unterstützt werden, das heißt, die Eigenschaften und Methoden der JavaScript- (und jQuery)-Elemente, die die Komponenten darstellen.
Testen der Anwendung in einem Webbrowser
Die Implementierung dieser Anwendung ist abgeschlossen, und Sie können sie jetzt ausführen: Klicken Sie in der Hauptsymbolleiste auf die SchaltflächeStart, oder drücken Sie die Taste F9. Damit Sie Ergebnisse erhalten, die weitestgehend denjenigen entsprechen, die beim Ausführen der Anwendung auf dem tatsächlichen Gerät erzielt werden, sollten Sie den Chrome-Browser verwenden oder auf die Anwendung remote von einem mobilen Browser aus zugreifen. Siehe Mobile Ausführung.
Bei Ausführung der Anwendung wird die mobile Seite mit einem Eingabefeld und einer Schaltfläche in Ihrem Standard-Webbrowser geöffnet. Geben Sie in das Eingabefeld Text ein, und klicken Sie auf die Schaltfläche Say Hello.
Bereitstellen der Anwendung
Sie können die Anwendung mit Start > Auf mobilem Gerät bereitstellen auf jedem wichtigen mobilen System als native Anwendung bereitstellen. Die folgenden Plattformen werden unterstützt: iOS, Android, BlackBerry, Windows Phone, Symbian und WebOS.
