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.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Ein neues Projekt mit der Vorlage "Tabs" anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sowohl unter Android als auch unter iOS werden häufig Tabs zur Navigation eingesetzt. Mit der Tab-Vorlage bekommen Sie alles, was Sie brauchen, um selbst eine tab-gestützte App schreiben zu können.
06:28

Transkript

Die dritte der durch die Ionic Erweiterungen installierten Projektvorlagen, ist die Vorlage Tabs. Wenn Sie diese Vorlage benutzen, dann erhalten Sie, wie Sie hier rechts unten sehen, eine Navigation über Tabs. Und wie das im Detail ausschaut, das werden wir uns in diesem Training einmal anschauen. Dazu lege ich eine neue App mit dieser Vorlage an, gebe also einen Namen ein und wähle OK. und warte nun kurz bis die ganzen Abhängigkeiten wiederhergestellt sind. So, die Installation der Pakete ist abgeschlossen und ich möchte die App jetzt ganz gerne mit dem Android Ripple Emulator starten. Und dann werden wir uns einmal anschauen, wie das Ganze unter Android dargestellt wird. Danach werde ich die App einmal mit dem IOS Ripple Eumulator starten und dann werden Sie hier auch die Unterschiede im Rendering sehen, die Ionic zwischen IOS und Android vornimmt. So, die App ist fertig gestartet und hier sehen wir das Ganze jetzt im Ripple Android Emulator. Die Tabs befinden sich hier oben, wir haben auf der Startseite ein kleines Dashboard, wir haben außerdem ein Tab, in dem wir Chat Nachrichten finden. Zu diesen Chat Nachrichten können wir dann jeweils navigieren und wie Sie hier sehen, wird dazu eine sehr schöne Animation genommen, dass die Seite also ein- und wieder ausblendet. Außerdem haben wir hier den Bereich Account, wo wir einen typischen Android-Button zur Aktivierung und Deaktivierung der Freunde sehen. Wenn ich die App nun einmal hier im Emulator schließe und jetzt unter IOS öffne, dann werden Sie eine kleine Änderung sehen. Und zwar sollten Sie sich einmal genau anschauen, wie die erste Seite schon dargestellt wird. So, die App ist gestartet und auf den ersten Blick sieht es so aus, also ob hier oben die Tabs fehlen und die fehlen allerdings nicht, sondern die finden wir jetzt hier unten. Warum sind die Tabs jetzt auf einem Android-Gerät oben und auf einem IOS-Gerät unten? Das liegt daran, weil die Designvorgaben der Hersteller vorgeben, dass Tabs unter IOS unten sein müssen, unter Android oben. Dass sie unter IOS unten sind, macht durchaus Sinn. Wenn Sie sich überlegen, dass Sie ein Mobiltelefon in der Hand haben, dann bedienen Sie das meist einhändig über den Daumen. Und Sie kommen natürlich dann, weil man so ein Mobiltelefon in der Regel weiter unten anfasst, mit dem Daumen sehr bequem an diese unteren Tabs, die wir hier sehen. Bei einem Android-Gerät werden Sie die Tabs in der Regel immer oben finden. Hintergrund ist, dass Android-Geräte im Gegensatz zu IOS-Geräten häufig keine physischen Knöpfe haben. Bedeutet also, unter IOS haben Sie hier unten immer den Home-Button, den Sie wirklich physisch drücken müssen. Auf Android-Geräten haben Sie im unteren Bereich drei Buttons und das können Hardware-Buttons sein, das können aber auch sogenannte Softkeys sein, die das Betriebssystem einfach nur auf den Touchscreen blendet. Und das Problem ist einfach, wenn Sie unter Android Ihre Tabs im unteren Bereich einblenden würden, dann würden Sie sehr häufig zu einem Fall kommen, dass Sie versehentlich, wenn Sie zum Beispiel den Tab wechseln wollen, statt den Tab zu wechseln, auf den Zurück-Knopf drücken und dann im schlimmsten Fall aus der App wieder herausfliegen. Genau aus diesem Grund sind Tabs also im oberen Bereich. Eine weitere Änderung sehen wir übrigens, wenn wir uns hier einmal den Account-Tab anschauen. Hier sehen wir, dass dieser Schalter hier im IOS Design gerendered wurde. Unter Android sah der also etwas anders aus. Der war ein wenig schmaler und der Knopf schaute ein wenig oben drüber. Hier ist der Knopf an sich komplett in diesem Schaltflächenbereich integriert. Es ist ein wenig größer und sieht so einfach mehr nach IOS aus. Bedeutet also, wir sehen hier sehr schön, dass das Ionic Framework für uns eine leichte Adaption der Darstellung je nach Gerät vornimmt. Ansonsten, wenn wir einen Blick auf den Quellcode werfen, dann sehen wir, dass wir im Ordner App drei Dateien haben. Einmal die Datei app.ts, das ist die TypeScript Datei, die den Startvorgang der App managed, die außerdem das Routing definiert. Bedeutet also, wir haben hier also definiert, in welchem Zustand vohin navigiert werden soll. Wir haben darüber hinaus die Datei controller.ts. Hier haben wir jetzt den Dash Controller. Das war also der Controller, der gleich zu Anfang dargestellt wurde. Wir haben den Chats Controller. Hier haben wir die Liste der Chats. Wir haben außerdem den Chat Detail Controller und das ist der Controller, der genutzt wird, um einen Chat anzuzeigen. Also wenn wir über die Liste auf einen gedrückt haben, dann sind wir zu einer zweiten Seite gekommen und genau dafür haben wir hier den Controller. Und wir haben zu guter Letzt den Account Controller und das ist der Controller, der diesen Option-Button hatte. In der Datei services.ts sehen wir außerdem den Chat Service und innerhalb dieses Chat Service ist ein Array definiert, in dem wir alle Chat Nachrichten sehen, die wir eben an der Oberfläche angezeigt bekamen. Außerdem sehen wir hier einige Methoden, um halt eben Chats zu laden, Chats zu löschen usw. Diese Tab-Vorlage, die wir hier sehen, die bietet sich immer dann natürlich an, wenn Sie in Ihrer Anwendung über Tabs navigieren möchten. Häufig ist das eine sehr gute Wahl, Tabs in seiner App zu benutzen, da Tabs im Gegensatz zum Sidemenu auf beiden Plattformen auch vom Hersteller empfohlen werden. Was das seitliche Menü angeht, sieht es so aus, dass Apple sich eher gegen dessen Verwendung ausspricht, was einfach daran liegt, dass Sie aif einem Apple-Gerät keinen Hardware-Zurück-Knopf haben, sondern zum Zurücknavigieren oben links immer so einen kleinen Pfeil haben. Und an dieser Stelle müßte jetzt aber eigentlich diese Seitennavigation stehen, bedeutet also, wenn Sie dort eine Seitennavigation hinpacken und dann einen Zurück-Button oben noch haben, dann konkurieren Sie ein wenig mit Apple's Designvorgaben. Insofern, mit der Tab-Vorlage sind Sie auf jeden Fall auf der sicheren Seite.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Steigen Sie in die App-Programmierung ein und kombinieren Sie die praktischen Tools.

2 Std. 45 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:14.11.2016

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!