2. Single Page Applications
2. Single Page Applications
Tijdens deze oefening voeg je een labeling systeem en side-menu toe en implementeer je verschillende views voor de taken.
Tijdens deze oefeningenreeks oefen je op:
- De leerstof van de vorige 2 lessen
- Services
- 2-way databinding
- Herbruiken van code
- Lezen en begrijpen van documentatie
Deze oefeningen bouwen verder op het lesvoorbeeld van les 2.
Startbestanden
Oefening 1: 2-way databinding
Vorige oefeningenreeks heb je een filter gebouwd die gebruikt kon worden om, onder andere, enkel de afgewerkte taken te selecteren.
Pas de code voor deze filter aan zodat 2-way-databinding gebruikt wordt in de plaats van event binding via het ionChange event.
Oefening 2: TaskPage titel
Momenteel toont de TaskPage altijd de titel "New Task" zorg dat deze aangepast wordt naar "Edit Task" als de pagina gebruikt wordt om een bestaande taak aan te passen.
Oefening 3: ILabel interface
Voeg een datatype toe dat een label voorstelt. Een label kan van alles zijn: dringend, belangrijk, studie, werk, familie, hobby, … De gebruiker voegt zelf de nodige labels toe.
Begin met de ITask interface aan te passen zodat er één of meer labels toegevoegd kunnen worden aan een taak, hier is natuurlijk ook een interface ILabel voor nodig. De interface ILabel bevat 3 velden, name, color en id. De kleuren worden in een enum gedefinieerd en zijn: primary, secondary, tertiary, success, warning, danger, light, medium en dark.
Bouw vervolgens een service waarmee labels toegevoegd, opgehaald en verwijderd kunnen worden. Gebruik onderstaande code om 3 test labels te initialiseren. Vergeet niet dat het verwijderen van een label betekent dat dit label ook van alle taken verwijderd moet worden. Voor deze opgave is het handig om te weten dat services in andere services geïnjecteerd kunnen worden.
[
{name: 'Dringend', color: Color.danger, id: 'c5012fe4-19ab-415c-a974-ffcccda0ab50'},
{name: 'Studies', color: Color.primary, id: '74f1d6dc-6e1b-4b51-9d44-7b6f431468cd'},
{name: 'Werk', color: Color.secondary, id: '41a65da2-1062-449f-856c-805bdf1d7b20'},
]Oefening 4: Labels toevoegen
Implementeer de functionaliteit om een label toe te voegen of te verwijderen via de TaskPage component. Het formulier op deze pagina toont een lijst van alle labels, elk label krijgt de gepaste kleur. Het is vanzelfsprekend dat deze wijzigingen bewaard worden en nog zichtbaar zijn als je terugkeert naar de HomePage component en daarna terug naar de TaskPage component navigeert voor diezelfde taak.
Voor deze opgave kan je gebruikmaken van de <ion-checkbox> component. Daarnaast is het waarschijnlijk ook handig om te weten dat je het *ngFor directive als volgt kan uitbreiden zodat het een index bevat.
<ion-item *ngFor='let label of labels; let i = index'>
<!-- Some code -->
</ion-item>Oefening 5: Menu
Genereer twee extra pagina's: label en tasksByLabel.
Voeg een <ion-menu> toe aan de app. Het menu mag maar op één locatie binnen je app gedefinieerd worden, je doet dit dus op de bovenste component in de componentenboom, in app.component.html. Zo controleert het menu de volledige app en staat het zelf niet binnen de <ion-router-outlet> component. Lees zeker de properties sectie in de documentatie, één van deze properties is vereist om het menu correct werkende te krijgen.
Je menu moet 3 links bevatten. Maak voor de twee onderste nog een pagina aan.
Om het menu te openen kan je swipen, maar het is duidelijker wanneer het menu ook met een knop geopend kan worden. Voeg aan elke pagina, behalve de detailpagina van de taken, een <ion-menu-button> toe.
Het menu sluit zich nog niet nadat je op een link klikt. Dit is eenvoudig op te lossen. In de documentatie zie je onderaan een lijst van methodes staan, om deze te gebruiken heb je een verwijzing naar het menu nodig, dit kan via template variables.
Begrip: Template variable
Een template variable kan toegekend worden aan een element in een Angular template, dit kan door een attribuut toe te voegen dat begint met een hekje, achter het hekje komt dan de naam van de variabele. De variabele kan dan gebruikt worden in de rest van de template en bied toegang tot de publieke methodes die op de component waarnaar de variabele verwijst gedefinieerd zijn.
<ion-content #content>
<ion-button (click)="content.scrollToBottom()">
Scroll to bottom
</ion-button>
</ion-content>Oefening 6: Labels
De labels pagina toont de gebruiker een overzicht van de verschillende labels die aanwezig zijn in de app. De labels worden getoond in een lijst waar elk label de gepaste kleur krijgt.
Voeg opnieuw een FAB-button toe. Ditmaal opent deze geen nieuwe pagina, maar een <ion-modal> component (het modale scherm is een aparte component die nog aangemaakt moet worden). De lay-out van het modale venster gebruikt <ion-chip> componenten om de verschillende kleuren te tonen. Voor deze componenten wordt enkel de outline getoond, met uitzondering van de geselecteerde kleur, hier wordt de component getoond met een achtergrond.
De lay-out in bovenstaand screenshot is opgebouwd met de <ion-grid>, <ion-row> en <ion-col> componenten. Deze componenten werken op dezelfde manier als de grid systemen in CSS-frameworks zoals Bootstrap, Materialize, Tailwind, … Tenslotte is CSS-code toegevoegd om de breedte van de <ion-chip> componenten en de <ion-labels> binnen een cell in het grid op 100% te zetten. Om de tekst te centreren zijn er Ionic utility klassen beschikbaar.
Om een nieuw label aan te maken heb je twee keuzes. De eerste en meest voor de hand liggende optie is om de LabelService rechtstreeks aan te spreken vanuit de modale component. Een tweede optie is om de onDismiss methode van een modaal venster te gebruiken. Binnen de presentModal methode (zie de documentatie), kan je via onDismiss een functie oproepen die de afhandeling doet. Dit is niet vereist, maar is wel een goede oefeningen. In de oplossingen wordt deze methode gebruikt.
modal.onDidDismiss().then(d => console.log('Not implemented yet.'));Oefening 7: Taken per label
De laatste pagina toont per label alle taken die met dit label gemarkeerd zijn. Deze view begint met een volledig dichtgeklapt menu. Door op de hoofdingen te drukken kunnen de lijsten van taken geminimaliseerd of gemaximaliseerd worden. Je kan de <ion-accordion> component gebruiken om onderstaande lay-out na te bouwen.
Deze view ziet er anders uit dan de eerste, maar heeft wel 100% dezelfde functionaliteit. Taken moeten nog steeds aangemaakt, bijgewerkt, en verwijderd kunnen worden. Ook de status moet gewijzigd kunnen worden. Je zult merken dat de routing in de gedeelde component nog niet werkt, deze is momenteel niet ingesteld om universeel te werken. Het pad is relatief gedefinieerd ten opzichte van de huidige locatie, om de component in verschillende pagina’s te kunnen gebruiken moet dit aangepast worden naar een absoluut pad.