Mobile Apps mit Cordova

JavaScript-Dateien nutzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In dem Video sehen Sie die Verbindung zum Cordova-Framework über eine generierte JavaScript-Standarddatei und die Bereitstellung eigener Funktionalität über eigene JavaScripts.
05:52

Transkript

Der Dreh-und Angelpunkt jeder Cordova- App ist Javacsript. Es gibt eine Javascript Datei, die im Grunde das Laden der App überwacht und dann irgendwann sagt das Gerät ist fertig, aber auch semtliche weitere Funktionalität, die eine App realisiert wird mit Javascript Script. Wir schauen uns in diesem Video die generierte Javascript-Datei an, die mit den Komandozeilentools von Coedova Ihnen zur Verfügung gestellt wird und die Sie in der Lage verstezt, auf die Fertigstellung des Ladevorgangs einer App zu reagieren. Ausgehend von einer typischen Struktur eines Cordova-Projektes finden Sie im Verzeichnis www ein Unterverzeichnis JS Javascript und dort eine Datei index.js. Diese Datei wird in HTML referenziert. Hier am Ende von dem Body der HTML-Seite haben Sie die Referenz aus diese Javascript Datei Und das ist die Javascript Datei selbst. Wer moderne Javascript Programmierung kennt, wird ungefähr lesen können was hier passiert. Wir haben im Grunde eine gleiche Logik, eine gleiche Syntax, wie wir sie im Web haben. Es gibt allerdings spezifische Ereignisse, Events, die an Mobilgeräte angepasst sind und diese Events werden über sogenannte Hooks in das Cordova-System integriert. Das heißt, wenn Sie hier einen Event Listener haben deviceready, dann wird es den bei einer typischen Website nicht geben, also wenn Sie im Dom programmieren oder den Dom programmieren eine Websiete da gibt es einen onload Event- Händler, aber keinen Device Event- Händler. Es ist die Leistung des Cordova APIs. Genau solche Eventhändler zur Verfügung zu stellen, die auf Spezifika eines mobilen Geräts abgestimmt sind. Im Projektverzeichnis einer Cordova-App gibt es hier dieses Unterverzeichnis hooks und dort eine Datei README.md, und wenn man die mit einem normalen Editor öffnet, dann sieht man hier eine Auflistung von bestimmten Events, auf die man reagieren kann. Diese Hooks als auch die im API sonst zur Verfügung gestellte Eventhändler erweitern eben das normale Ereignismodell oder einen Dom. Aber ansonsten von der Anwendung her, da kann man das im Grunde verstehen Es gibt hier einen addEventListener, der auf deviceready reagiert und dann gibt es einen Pointer, einen Zeiger aif eine ganz bestimmte Funktion, die dann aufgerufen wird. Das ist schon ein bisschen trickreich, denn dieser Zeiger hier, dieser Referenz verweist hierhin und hier wird wieder eine anonyme Funktion aufgerufen und in der wird die Methode receivedEvent aufgerufen. Beachten Sie, dass 'app' der Name von einem Objekt ist, und wenn Sie sich hier diese geschweiften Klammern ansehen das ist JSON Notation und damit wird ein Objekt deklariert und im Inneren dieses Objektes wird auch direkt diese Objekt verwendet. Bei dieser Methode wird wieder eine anonyme Funktion aufgerufen und hier im Inneren wird dann eigentlich das zusammengebaut, was die Funktionalität dieser generierten Standard-App ausmacht. Im Wesentlichen wird bei der Standard-App ein Element unsichtbar gesetzt, nämlich das, das die Meldung anzeigt,das auf die Fertigstellung des Ladeforgangs der App wartet und ein anderes Element, das sagt device is ready wird angezeigt. Kommt hier noch die Konsolenausgabe, die nur Debug- Zwecken sinnvoll ist. Das heißt also, die gesammte Javascript Datei, die generiert wird besteht aus der Definition oder Deklaration eines Objektes und dem Aufruf der Initialisierungsmethode. Und die sehen Sie hier, und auch hier kann man nachvollziehen was da passiert, da wird ein Ereignis gebunden über die Methode bindEvents und die wird hier deklariert mit der anonymen Funktion. Und damit sind wir wieder beim addEventListener an das Event deviceready. Etwas trickreich, vom hinten durch Auge sieht das so aus, ist aber klar strukturiert und man kann im Grunde sich darauf zurückziehen, dass man seine eigene Funktionalität in diesem Bereich hinlegt. Das heißt dort, wo im Grunde Device is ready jetzt angezeigt wird, dort werden Sie einen Aufruf Ihrer eigenen Funktionalität hinpacken und den Rest, so würde ich es eppfählen, zumindest sollten Sie auch bei Ihrer eigenen App später einfach so lassen, wie es generiert wurde Wir haben uns also in diesem Video jetzt diese Struktur der generierten Javascript-Datei angesehen und Sie haben erfahren, dass Javascript die gesamte Funktionalität einer Cordova-App bereitstellen wird.

Mobile Apps mit Cordova

Schreiben Sie mit Cordova mobile Apps, die nicht nur auf einer bestimmten mobilen Plattform laufen, sondern in verschiedenen Umgebungen.

3 Std. 58 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!