Ionic 2-Teil bereits mit der IDE Visual Studio Codeeberhart.media/pdfs/ionic/ionic2.pdf ·...

Eberhart ionic2.docx 1

Ionic 2-Teil – bereits mit der IDE Visual Studio Code

Tipp:

Wenn man Microsoft Visual Studio verwendet, kann man direkt darin auf die Eingabeaufforderung

(CMD) zugreifen. Das erspart das Umschalten.

1.Variante: Ganz unten platziere den Cursor so, dass der Doppelpfeil erscheint. Dann ziehe ihn nach

oben und es wird ein neuer Bereich mithinauf gezogen.

Klicke auf „Terminal“

2.Variante: Im Menü „Anzeigen“ wähle „integriertes Terminal“.

1)neue Seiten anlegen

Öffne die „index.html“ in „www-Ordner“.

Nur zur Info:

In Zeile 39 sind zwischen den <ion-app> noch keine Seiten eingetragen. Hier folgen später die

einzelnen Seiten der App, von wo sie dann geladen werden.

1a)Löschen der „home.html“,

damit man sie danach zwei neue Sites erstellt, die aber bereits die passenden „module-

Erweiterungen“ aufweisen.

Im Ordner „pages“ lösche den „home-Bereich“ inkl. Allen

drei enthaltenen Dateien.


1b)Neue „page“ erstellen.

Dazu nutze das integrierte Terminal und gib ein zum Generieren:

ionic generate page Home

Ergebnis:

Gleich eine zweite Site auch

ionic generate page About

Ergebnis:

Man sieht den Vorteil, da nun auch die neue Datei home.module.ts dazugekommen ist. Man hat sich

das selber Anlegen dieser „module“ erspart.

1c)Laden der einzelnen Seiten über „lacy-loading“

Dazu muss in der Datei „app.components.ts“ im Ordner „app“ in der Zeile 11 das „any“ durch „string“

ersetzt werden. Und „Homepage“ kommt in Anführungszeichen.

Ergebnis:

http://home.module.ts/


Damit werden die Seiten als Zeichenkette „string“ übergeben.

Daher kann auch die Zeile 6 komplett gelöscht werden:

Speichern und Schließen.

Zusätzlich öffne das „app.module.ts“

Entferne hier komplett die Zeile 8 (import….) und das Wort „Homepage“ in den Zeien 13 (bei den

declarations) und 23 (bei entryComponents).

Ergebnis:

Speichern und Schließen.


2)Seite betrachten

Gib im Terminal ein

ionic serve

Ergebnis:

Die Seite im Hintergrund ist die „home.html“.

Öffne diese.

2a)Button im <ion-content> erstellen

Ergebnis:


Das geht schöner:

Mit dem Zusatz „ion-button“

Weitere Änderungen:

Button über de ganze Breite, so groß wie möglich und in roter Farbe:

Ergebnis:

2b)Eine Ausgabe erstellen, wenn der Button gedrückt wurde

Öffne die „home.ts“.

Dafür soll unter de „constructor“ eine neue Funktion erstellt werden.

Der Zugriff darauf geht über de „home.html“:

Im Button muss die Klick-Möglichkeit auf die Funktion eingefügt werden:


Ergebnis:


3)Eingaben verarbeiten

Ziel: Text in Textfelder eingeben und dann ausgeben lassen.

3a)Zuerst soll statt dem „alert“ von oben ein richtiger „AlertController“ entwickelt werden.

Arbeite im „home.ts“:

Der „constructor“ in der Zeile 18 muss einen neuen Konstruktor erhalten. Dabei soll der bereits

vorhandene „AlertController“ geholt werden. Bei der Schreibweise für den Namen kann man sich an

den bereits vorhandenen orientieren, z.B. „navCtrl: NavCotnroller“ , daher

In der Zeile 2 wurde der AlertController automatisch dazugefügt, da im Hintergrund der

„autoimport“ funktioniert.

Nun muss die „hello-Funktion“ geändert werde:. Das „create“ zum Erstellen und das „present“ für

die Anzeige. Im „create“ und den geschweiften Klammern kommt das hinein, was übergeben werden

soll, hier die „message“.

Info: Damit man sieht, was überhaupt alles übergeben werden kann, drücke die Taste STRG und

klicke auf „create“. Da es mit dem „alertCztl“ verbunden ist, zeigt es die richtigen Elemente:

Es wird, wie hier in Zeile 225, angezeigt:

Hier wieder mit gedrückter STRG-Taste auf „AlertOptions“ klicken um die Optionen zu sehen:

In diesem Fall wären dies: z.B. title, subTitle, message usw.


Ergebnis:

3b)Variablen erstellen in „home.ts“

Der String der Variablen wird auf einen leeren String gesetzt, d.h. es ist nichts drinnen.

Die Felder werden nun in „home.html“ erstellt. Dies in einer „ion-Liste“ mit sogenannten <ion-item>

darinnen. Diese beinhalten ein entsprechendes „label“ und „input“:

Kopiere dies einmal und füge es darunter ein. Mit den Daten wird es befüllt:


Ergebnis:

Verschönern mit „floating“ beim Label. Das erzeugt ein dynamisches Hochklappen des Labels bei der

Eingabe.

3c)Übergabe der Inhalte des Textfeldes:

Dazu muss beim input die Variable übergeben werden: In eckigen und runden Klammern „ngModel“

und das mit der Variable gleichsetzten.

Das gleiche für den „lastName“.


Ziel: schon bei der Eingabe soll der Text sofort ausgegeben werden (auto-update)

Dazu gib folgende Zeile unterhalb der Liste ein und zwar den Variablennamen in doppelten

geschweiften Klammern:

<p>{{firstName}} {{lastName}}</p>

Ergebnis:

3d)Aber die Ausgabe erfolgt noch nicht beim Klick auf den Button.

Dazu ändere die Ausgabe in der Variablen „hello“ in der „home.ts“:

Die fixe Message „Hallo Welt“ wird ersetzt:

In einfachen Anführungszeichen, damit man die Variablen dazu verketten kann. Mit Dollarzeichen

und geschwungener Klammer:


Ergebnis (leider nicht korrekt):


4)Auf andere Pages navigieren

Dafür erstelle eine neue Funktion in der „home.ts“.

Zeile 31-33 kann ohne Bedenken gelöscht werden.

4a)Neue Funktion mit dem erfundenen Namen „navToAboutPage“:

Dazu verwendet man den Nav-Controller, der die Möglichkeit bietet, zwischen den Pages zu

wechseln. Zu finden ist er z.B. bereits in Zeile 21.

Die Umleitung erfolgt mit „push“ und dem Namen, wohin gepuscht werden soll. Der Name

für die „about-Site“ ist zu finden in der „about.ts“ Zeile 16 bei „class“:

Daher:

4b)Auslösung des „push“:

Dafür wird in der „home.html“ ein Button oben rechts in der Navbar erstellt.

Mit dem „end“ wird er ans Ende gestellt:

Nun kommt der Buttons hinein:

Dieser soll nur das Icon enthalten, ohne Text, daher „icon-only“.

Füge nun den Button ein, mit „icon-only>


Eine Auswahl an Icons findet man auf einer Seite des Frameworks, nämlich

https://ionicframework.com/docs/ionicons/

Ganz rechts findet man de Icons für Android unter „Material Design“.

Wähle z.B.

In den Button kommt „ion-icon“ mit dem speziellen Icon-Symbol: name=“md-skip-forward“.

Dann noch eine grüne Farbe für das Icon, mit „color“.

https://ionicframework.com/docs/ionicons/


Tipp: Die „color“ kann aus bestehenden vordefinierten 5 Möglichkeiten ausgewählt werden, durch

einfaches Verwenden des betreffenden Namens, z.B. „secondary“ für grün.

Natürlich kann der Hexadezimalcode auch individuell abgeändert werde.

Zu finden in der Datei „variables.scss“ im Ordner „theme“:

Ergebnis:

Event hinterlegen, damit etwas passieren kann durch Anklick:

Dafür füge im Button ein „click“ in Klammern ein und nach dem Istgleichzeichen folgt der

Funktionsnamen aus der „home.ts“

Ergebnis:

Die Verlinkung funktioniert. Die besuchte Seite erhält einen Pfeil für ein Zurück

Ionic 2-Teil bereits mit der IDE Visual Studio Codeeberhart.media/pdfs/ionic/ionic2.pdf ·...

Documents

Transcript of Ionic 2-Teil bereits mit der IDE Visual Studio Codeeberhart.media/pdfs/ionic/ionic2.pdf ·...