Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Mobile Apps mit Cordova

Standardschablone nutzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Lassen Sie sich erklären, wie eine Standardschablone als sinnvolle Basis aller Cordova-Apps dienen kann. Dazu werden nach dem Generieren des Cordova-Projekts mit dem CLI Änderungen in den generierten Webdateien vorgenommen.
07:44

Transkript

In diesem Video möchte ich Ihnen eine Standard-Schablone für Cordova-Apps vorstellen, die auf dem generierten Code basiert, der beim Erzeugen eines Cordova-Projektes mit dem CLI erzeugt wird. Sie sehen hier diese beiden Emulatoren, die zeigen diese Standard-App, sie ist natürlich leer, aber hier wollen Sie ja später Ihre spezifischen Inhalte anzeigen, also dass jetzt hier wenig angezeigt wird ist für eine Schablone von Vorteil. Schauen wir uns die Grundstrukturen an und was ich da modifiziert habe gegenüber dem gereierten Code, so fern Sie mit der Create Anweisung Cordova-Create ein Projekt anlegen. Im www Verzeicnis haben Sie die Datei index, sowie die Unterverzeichnisse css,img und JS, wie gehabt. In der Datei index hat sich ein bisschen was getan. Das ist meine modifizierte Datei. Auf den ersten Blick sie sieht genauso aus, wie das was generiert wird mit dem CLI. Aber das ist auch meine Intension möglichst wenig zu verändern gegenüber den generierten Codes. Diese gesamte Schablone ist an dem orientiert, was von Cordova generiert wird. Eine Änderung sehen Sie hier. Ich habe die Klasse blink jetzt einen span zugewiesen generierten Codes, und hier steht Connecting to Device, das heißt nur noch dieser Text-blink, denn ich möchte nicht, dass auf Dauer der Inhalt meiner App klingt, was in der generierten Standardschablone der Fall ist. Das hab ich hier oben weggenommen. Des Witeren habe ich aus dem Absatz, der mit der ''class event received'' gekennzeichnet wurde, einen div-Container gemacht und ich habe zusätzlich eine ID zugewiesen Über die ID möchte ich diesen Div aus Javascript später ansprechen und da Inhalte modifizieren. Das geht besser über eine ID. Dieser Div ist jetzt auch leer und enthält nicht mehr 'Device is ready' als Text. Das möchte ich nicht anzeigen, ich möchte meinen spezifischen Code, meine Inhalte dort anzeigen. Die letzte Änderung, die ich hier vorgenommen habe in dieser HTML-Datei ist, dass ich die Referenz auf eine weitere Javascript-Datei hier eingebunden habe. Die Position ist nicht zufällig gewählt Ich habe die Referenz explizit vor der Referenz auf die generierte Standard Javascript-Datei index.js eingebaut. Der Grund ist, dass ich hier Deklarationen vornehmen möchte. Deklarationen von Funktionen, die allerdings nachher aus der index-js aufgerufen werden. Oder ich möchte zumindestens den Aufruf der ersten eigenen Funktion weiter aus der index.js machen, also aus der generierten Grundstruktur. Kommen wir zur css-Datei, denn dort habe ich auch einiges vereinfacht. Das soll in keiner Weise bedeuten, dass das generierte css nicht schön ist, aber es werden sehr sehr viele Sachen gemacht, Sie Sie möglicherweise in Ihrem Layout überhaupt nicht brauchen, nicht wollen. Deswegen habe ich hier einiges vereinfacht, wegenommen, dass können Sie natürlich individuäll wieder hinzunehmen, wenn Sie eine Gestaltung Ihrer App geben. Ich habe z. B. das Hintergrundbild entfernt und ich habe auch den Farbverlauf beseitigt und ähnliche Dinge. im Wesentlichen habe auch die Margin- und Pedding-Angaben etwas reduziert. Ich denke das ist sowieso eine Stelle, wo Sie selbst sehr vieles modifizieren werden. Hier möchte ich ein möglichst einfaches Layout haben und keine Randwirkungen daher noch zu sehen. Das einzige, was ich hier ergänzt habe, ich habe diese ID, die ich benutze in der HTML-Datei, jetzt mit einer Minimalhöhe versehen. Ansonsten ist das, wie gesagt, eine fast nur reduzierte oder fereinfachte Variante der original generierten css Datei. Das ist nun die generierte index.js Datei ein bisschen modifiziert. Ich habe auch hier die Strategie verfolgt möglichst wenig zu ändern. Das ist ein durchdachtes Konzept bei Cordova, warum die die Javascript-Datei so aufbauen, warum sie beispielsweise auf die verschiedenen Phasen des Ladens, Initialisierens und Anzeigens einer App auf diese Art und Weise reagieren. Und man sollte sich, aus meiner Sicht, den Erfahrungen vom Cordova Projekt schon anschließen. Wenn Sie das Projekt über die letzten Jahre verfolgt haben, wie ich, dann haben Sie gesehen, dass hier sehr viele Veränderungen stattgefunden haben. Wie man das früher programmiert hat und heute programmiert unterscheidet sich maßiv und das wird garantiert auf Erfahrung basieren, die bei diesem Projekt gemacht wurde. Also aus dem Grund sind meine Änderungen minimal. Genau genommen habe ich die HTML Struktur so gewählt, dass hier überhaupt keine relevannten Änderungen notwendig sind. Beachten sie beispielsweise hier, dass hier auch auf parent-Element dazugegriffen wird. Das bedeutet die Struktur in der HTML-Datei muss im Grunde so bleiben, wie sie ursprünglich war. Wenn Sie diesen Code so beibehalten wollen, ohne große Änderung und ich setze nur voraus, dass an der Stelle, wo Ihr diesen Kommentar eingefügt habt, danach die Aufrufe Ihrer eigenen Funktionen stattfinden wurde. Ich empfehle, dass Sie eine zentrale Initialisierungsfunktion benutzen und aus der heraus dann ihre Logik entwickeln. Wenn Sie also diese Standardschablone benutzen wollen, würde ich folgendee Vorgehensweise empfählen. Sie erzeugen mit Cordova-Create ein Projekt für Ihre App. Darin wird sich ein Verzeichnis ''www'' befinden und das ersetzen Sie durch das www-Verzeichnis meiner Standardschablone. Danach gehen Sie ganz konventionell vor. Sie fügen die gewünschte Platform hinzu, Sie bilden die App und dann können Sie sie evenntuell im Emulator testen oder wie auch immer. Wenn Sie spezifische Modifikationen vornehmen wollen und das ist auch der Sinn eigenen App, dann werden Sie nachdem Sie das www-Verzeichnis ersetzt haben dort in dem Quellcodes Ihre eigenen Codes einfügen, schreiben oder wie auch immer und dann das Bildendurchführen und gegebenfalls auch das Testen und später auch dass die Bleu entspricht, das Verteilen dieser App. Sie haben also in diesem Video gesehen, wie man auf vernünftige Weise eine Struktur zur Verfügung hat, in dem man dann eigene Anwendungen in einer Cordova-App durchführen kann, basierend auf eine Standardschablone, die im Grunde nur das generierte www-Verzeichnis oder das www-Verzeichnis einer Cordova-App umfasst.

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!