Seite 3: Data Binding

Inhaltsverzeichnis

Fortgeschrittenes Data Binding

Die Implementierung des Data Binding setzt das Vorhandensein einer Listener-Infrastruktur voraus, die dem Client das Überwachen von Änderungen der Variableninhalte ermöglicht. Im JavaScript-Sprachstandard ist das nicht vorgesehen, weshalb viele Frameworks ihre eigene Observable-Klasse mitbringen – das mittlerweile in der Versenkung verschwundene Knockout.js war der Vorreiter dafür.

Im Fall von NativeScript ist ein Observable ein Objekt, das ein oder mehrere Attribute unter Verwaltung hat. Die neue Version von WorkPage berücksichtigt das und schreibt die Attribute unter Nutzung der Set-Methode in das Observable ein

var createWorkModel = 
  require("./work-view-model").createWorkModel;

...

  page.on("navigatedTo", function (eventData) {
    page.bindingContext.set("email", 
                        page.navigationContext.emailPar);
    page.bindingContext.set("password", 
                        page.navigationContext.passwordPar);
  });
}
exports.onNavigatingTo = onNavigatingTo;

Damit ist das Programm zur Ausführung bereit. Abbildung 6 zeigt, das zu erwartende Resultat.

Das Auslesen von Werten in einem Observable erfolgt durch Nutzung der get-Methode:

var person = new observable.Observable(json);
var name = person.get("Name");
var age = person.get("Age");
...

Mehr Design

Seit dem Erfolg von Apples iPhone müssen Applikationen nicht nur funktionieren, sondern auch gut aussehen. NativeScript möchte Entwicklern für die Gestaltung visueller Informationen eine plattformübergreifende Vorgehensweise bieten.

Dafür nutzt es CSS, dessen Deklarationen in einem dreistufigen Baum stehen: Nach einem globalen Objekt gibt es für jedes Formular eine CSS-Gruppe, unter der die elementspezifischen Deklarationen stehen. Wie im Browser gilt auch hier, dass tiefere Elemente höher stehende überschreiben.

Das an oberster Stelle stehende Objekt lädt den Inhalt der der Datei app.css. Für das Beispiel, erhält sie folgende Deklaration:

Page {
  background-color: green;
  font-size: 17;
}
...

Erwartungsgemäß gilt der Code für alle Page-Instanzen, denen er eine grüne Hintergrundfarbe zuweist. Wer das Programm im vorliegenden Zustand ausführt, sieht, dass die App erwartungsgemäß funktioniert, wie die Abbildungen  7 und 8 zeigen.

Damit nicht alle Formulare der Heise-Beispiel-App grün sind, erzeugen Entwickler im nächsten Schritt eine Datei namens main-page.css. Wichtig ist, dass die XML- und die CSS-Datei vor der Endung den exakt gleichen Namen aufweisen. Die neue Datei erhält nun folgende CSS-Deklaration:

Page {
  background-color: red;
  font-size: 17;
}

NativeScript kennt nicht den vollen Funktionsumfang von CSS. Telerik bietet eine Liste der Elemente, Eigenschaften und Selektoren an, die die Sprache unterstützt. Insbesondere unter Android ist das endgültige Aussehen der Steuerelemente zudem abhängig vom Gerätehersteller.

Eine Frage des Zugangs

Die Realisierung nativer Komponenten in React Native ist vergleichsweise einfach: Entwickler erzeugen die Klasse und melden sie bei der Runtime an. Interaktionen zwischen JavaScript und nativem Code erfolgen über ein klares Interface.

NativeScript verwischt diese Grenzen insofern, als das Transpilieren auf Funktions- und Objektebene erfolgt. In der Dokumentation findet sich zur Illustration der Vorgehensweise folgendes Snippet:

var Button = android.widget.Button;
var context = ...;
var btn = new Button(context);

Von Haus aus exponiert NativeScript Androids API-Level 17, also Android 4.2 vom November 2012.

Wer höhere Versionen ansprechen möchte, muss das Verhalten des Transpilers anpassen und neue Metadaten generieren. Das Erzeugen einer neuen nativen Framework-Klasse sorgt im Hintergrund für die Entstehung zweier Klassen: eine Instanz der eigentlichen Klasse auf nativer Seite und eine Proxyklasse für JavaScript.

Auch wenn NativeScript den Gutteil der Transpilation erledigt, gibt es schwierige Grenzfälle. Die Transpilationsbeziehungen listet die Dokumentation für den Schritt von JavaScript nach Java und den umgekehrten von Java nach JavaScript auf.

Entwickler sollten die Dateien des platform-Verzeichnisses übrigens niemals von Hand bearbeiten. Die NativeScript-Runtime ersetzt sie regelmäßig durch ihre Pendants im Ordner /app.

Vor dem Beginn der praktischen Übungen sei noch darauf hingewiesen, dass das Exponieren kompletter Steuerelemente für den XML-Parser möglich ist. Weitere Informationen dazu finden sich im Beispiel innerhalb der Dokumentation.