HTML and CSS Reference
In-Depth Information
sen, bleiben Sie immer in derselben Syntax. Dadurch können Sie nicht nur schneller
entwickeln, Sie eliminieren auch eine zusätzliche Fehlerquelle.
Schreiben Sie nun Folgendes in die Datei app.js :
new Ext.application({
launch: function() {
Ext.create("Ext.Container", {
fullscreen: true,
html: "Hallo Welt"
});
}
});
Damit haben Sie soeben Ihre erste Mini-App mit Sencha Touch programmiert, eine
sogenannte »Hallo Welt«-Anwendung (Abbildung 8.19). Eine Sencha-Touch-App
beginnt immer mit new Ext.application() , dem Application-Objekt. Dieses stellt das
Grundgerüst für Ihre App dar, in ihm werden sämtliche Funktionen und Elemente
angelegt und konfiguriert. Unter anderem die Funktion launch , die beim Starten der
App, also wenn das Framework vollständig vom Server geladen wurde, ausgeführt
wird. Innerhalb der Launch-Funktion legen Sie mit Ext.create einen Ext.Container
an. Dies ist ein Sencha-Touch-Objekt, welches zunächst keine besonderen Eigen-
schaften aufweist, sondern als Blanko-Element mit weiteren Inhalten befüllt werden
kann. In geschweiften Klammern übergeben Sie dem Objekt anschließend alle Konfi-
gurationsparameter als JSON-Objekt. Ihr Container hat nur zwei Eigenschaften:
fullscreen besagt, dass er den kompletten Bildschirm des Geräts ausfüllen soll. Mit
html definieren Sie den Inhalt des Containers - dies kann, wie der Name der Eigen-
schaft schon sagt, beliebiger HTML-Code sein.
Abbildung 8.19 Macht nicht viel und sieht nach nichts aus, die »Hallo Welt«-App.
Soviel zur Theorie. Im nächsten Schritt programmieren Sie eine kleine Demo-App,
die aus einer Kopfzeile und zwei Schaltflächen besteht (Abbildung 8.20).
Search WWH ::




Custom Search