© prettyboy80/Shutterstock.com
Mit NativeScript für Android-Devices entwickeln

Mobile mal anders


PhoneGap ermöglichte Java-Script-Entwicklern das Erzeugen von Applikationen, die sich im Store vertreiben ließen. Zur damaligen Zeit war dies insofern eine Revolution, als die Apps endlich das „Gefängnis“ des Browsers verlassen konnten. Doch war damit das Ende der Fahnenstange erreicht?

Denn in der Praxis zeigte PhoneGap jedoch schon bald seine Zähne. Das lag vor allem daran, dass die Programme in einer eingebetteten Web View ausgeführt wurden: Ob der fehlenden Möglichkeit zum Zugriff auf den nativen GUI-Stack sahen die Programme trotz diverser Steuerelementbibliotheken „eigen“ aus. Zudem war der Zugriff auf APIs nur über Plug-ins möglich: Wer einmal ein Plug-in entwickelt hat, ist von diesbezüglichen Ambitionen geheilt.

Die Verfügbarkeit von quelloffenen und hochleistungsfähigen JavaScript-Interpretern wie Googles V8 verwandelte die Websprache zu einer seriösen Runtime. Das bei Telerik als quelloffenes Projekt verwaltete Native­Script nutzt V8 zur Realisierung einer Laufzeitumgebung, die ob eines Maklers direkt mit nativen Elementen arbeitet. Die Vorteile dieser Struktur lassen sich anhand des in Abbildung 1 gezeigten Architekturdiagramms zusammenfassen.

hanna_nativescript_1.tif_fmt1.jpgAbb. 1: Alles Laufzeit oder was?

Die V8-Engine wurde von Telerik um eine Möglichkeit zur Reflektion erweitert – es ist problemlos möglich, nach folgendem Schema auf native APIs zuzugreifen:

var time = new android.text.format.Time(); time.set( 1, 0, 2015 ); console.log( time.format( "%D") );

Da dies keine Vorteile gegenüber der Nutzung von Java und Objective-C bietet, gibt es mit den Modulen von Telerik bereitgestellte Bibliotheken, die häufige Aufgaben übernehmen. Da Telerik diese für Android und iOS gleichermaßen wartet, eignet sich NativeScript bei Beschränkung auf Bibliotheksfunktionen als Cross-Plattform-Runtime.

Als besondere Stärke gilt die Integration in den nativen GUI-Stack. NativeScript arbeitet mit im XML-Format vorliegenden Benutzerschnittstellendefinitionen, die von der Runtime in native Steuerelemente umgewandelt werden. Die aus diversen Tags zusammengebauten GUIs treten zur Laufzeit wie eine in den nativen Entwicklungswerkzeugen erstellte Benutzerschnittstelle auf: Die bei Emulation mit CSS auftretenden Unterschiede zu „normalen“ Applikationen sind bei NativeScript nicht zu befürchten.

Eine Frage des Werkzeugs

Das von Telerik als quelloffen entwickelte Framework wird nicht aus reiner Eigenliebe bereitgestellt: Die kostenlose Version zwingt Entwickler zum Arbeiten mit der PhoneGap-CLI. Zahlungswillige Kunden können stattdessen auf einen Webdienst, eine lokal lauffähige IDE oder ein Plug-in für Visual Studio zurückgreifen. Wir wollen im folgenden Artikel den Webdienst Telerik Platform verwenden, der unter [1] über den Button Start Now dreißig Tage kostenlos zur Verfügung steht.

Nach der Anmeldung setzt die IDE ihre Nutzer in einem Tutorial ab, das für uns von geringer Relevanz ist. Klicken Sie auf das Logo auf der linken Seite des Bildschirms, um in die Startseite Ihres Kontos zu wechseln. Wählen Sie die Option Start from a blank app, und vergeben Sie als Namen SUSSample1. Telerik Platform orientiert sich an Visual Studio – nach der Erstellung der „Solution“ folgt ein Klick auf den Button Create AppBuilder Native Project, der die Solution um eine GUI-Applikation ergänzt. Der in Abbildung 2 gezeigte Assistent erlaubt die Auswahl von Projektvorlagen, in denen die von Haus aus voreingestellten Optionen für JavaScript-Entwickler ideal geeignet sind. TypeScript-Nutzer sollten stattdessen eine der TS-Vorlagen wählen.

hanna_nativescript_2.tif_fmt1.jpgAbb. 2: Bitte wählen Sie Ihre Vorlage aus

Nach der Eingabe eines Namens erzeugt Telerik Platform die in Abbildung 3 gezeigte Projektstruktur, die uns erste Einblicke in den Aufbau der Solution erlaubt.

hanna_nativescript_3.tif_fmt1.jpgAbb. 3: Das Projektskelett ist fertig

Der Inhalt von app.js sollte Node.js-erfahrenen Entwicklern bekannt vorkommen: Wir beschaffen eine Instanz der Application-Klasse durch Aufruf von require(), weisen ihr Attribute zu und rufen danach start auf:

var application = require("application"); application.mainModule = "main-page"; application.cssFile = "./app.css"; application.start();

Im Moment ist das XML-File des Hauptformulars leer: Es besteht nur aus der Deklaration eines Page-Tags, das für uns nicht weiter relevant ist. Klicken Sie main-page.xml doppelt an, um seinen Code im Editor zu öffnen. Ersetzen Sie den dort vorhandenen Inhalt durch den in Listing 1 gezeigten Code.

Listing 1

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="mainPageLoaded" > <StackLayout> <Label text="Name:" /> <TextField id="name" width="200"/> <Label text="Password:" /> <TextField id="password" width="200"/> <Button id="signUpButton" text="Sign Up" width="100"/> </StackLayout> </Page>

Die in der Einleitung erwähnte Transformation in native Steuerelemente erfolgt durch Tags. Android-Entwickler werden einige der hier erwähnten Widgets instinktiv wiedererkennen. In der im Abschnitt „Mehr lernen“ referenzierten Dokumentation findet sich eine Tabelle mit einer vollständigen Auflistung aller vorhandenen Widget-Klassen.

Für uns ist im nächsten Schritt die Implementierung der Methode mainPageLoaded erforderlich, die nach dem erfolgreichen Aufbau der Benutzerschnittstelle aufgerufen wird. Sie ist für die Parametrierung der einzelnen Steuerelemente zuständig. Neben dem Einschreiben von Default- oder im Remanent-Speicher gespeicherten Werten erfolgt hier auch die Zuweisung von Event Handlern und ähnlichen Lustigkeiten.

Klicken Sie die Datei main-page.js doppelt an, um sie im Editor zu öffnen. Passen Sie den dort befindlichen Code danach gemäß im Listing 2 gezeigten Schema an.

Listing 2

var view = require("ui/core/view"); function myMainPageFunc(args) { var page = args.object; var nameField = view.getViewById(page, "name"); var passField = view.getViewById(page, "password"); var signUpButton = view.getViewById(page, "signUpButton"); signUpButton.on("tap", function () { if(nameField.Text==="Tester" && passField.Text==="Test") { alert("Hallo Welt"); } else { alert("Login-Fehler"); } }); } exports.mainPageLoaded=myMainPageFunc;

Auch diese Datei beginnt – Node.js-Entwickler lachen mittlerweile freudig – mit einem Aufruf von require(). Diesmal beschaffen wir einen Verweis auf das View-Objekt, das als Metaklasse für alle am Bildschirm angezeigten Steuerelemente dient.

Im nächsten Schritt folgt die Deklaration der Funktion myMainPageFunc. Sie beschafft Verweise auf die in der XML-Datei deklarierten Steuerelemente und schreibt dem Button einen Handler für ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang