Navigacija

Toolbar komponenta
Sidebar komponenta
FlexLayout (fxFlex direktiva)

(Elementi su implementirani u projektu uz uputstvo)

U prethodnim lekcijama smo se upoznali sa principima rada i korišćenja AM framework-a. Videli

smo osnovne principe rada FlexBox-a i način na koji možemo vizuelno raspoređivati naše
komponente koristeći relativno jednostavnu sintaksu. U ovom delu ćemo obraditi komponente za
globalnu navigaciju.

Postoje tri globalne navigacione komponente - meni, toolbar i sidenav (navigaciona traka koja se
obično pozicionira na levoj stranoi prikaza). Detalji komponenti se mogu naći na
https://material.angular.io/components/categories/nav. Pogledati pojedinačne komponente. Svaka
komponenta je opisana u tri sekcije - overview (najdetaljnija i ona koju ćete najčešće koristiti da se
upoznate sa načinom korišćenja komponente), api i examples.

U našem aplikaciji ćemo kombinovati dve komponente u kontekstu dizajna koji se prilagođava
doimenzijama displeja (responsive).

1. Otvoriti projekat u razvojnom okruženju i pokrenuti razvojni server (ukoliko nije pokrenut).

2. Dodavanje SideNav komponente.

Ako pogledate primer korišćenja komponente na zvaničnoj stranici, možete primetiti obrazac:
kontejner koji sadrži kontrolu (sidenav) i sadržaj koji se prikazuje (content).

Zadatak: Samostalno registrovati MatSidenavModule u modulu za registraciju Angular Material

komponenti (material.module.ts) kako biste mogli koristiti komponentu u aplikaciji.

Sidenav će biti korišćen za globalnu navigaciju i zbog toga je dobro smestiti je u korenu
komponentu (app.component.html):

Napomena: potrebno je ukloniti ili komentarisati postojeći sadržaj templejta korene komponente da
bi izbegli gomilanje elemenata na stranici.
Dakle, u sadržaj koji će se prikazivati smeštamo odredišta ruta, tj. tag u kojem se one prikazuju.

Sačuvati promene i pokrenuti stranicu. Komponenta će biti prikazana i ukoliko kliknete bilo gde u
okviru stranice sidenav će nestati. Komponenta se mora dalje konfigurisati.
Da bi definisali njeno pravilno ponašanje, potrebno je dodati sledeću logiku u Sidenav komponentu
(u okviru app.component.html):

Kreirali smo lokalnu promenjivu čija je vrednost konkretna Sidenav komponenta (#sidenav) u
okviru koje je promennjiva deklarisana. Zatim na događaj klika dugmeta (click) pozivamo ugrađenu
metodu komponente tako što pristupamo promenjivoj (sidenav.toogle()). Metoda prikazuje
komponentu ako je zatvorena i obrnuto.

Sašuvati promene i pokrenuti stranicu root komponente.

API sekcija Angular Material komponente: Prethodni primer ilustruje tipičan način definisanja
ponašanja komponenti korisničkog interfejsa preko ugrađenih metoda komponente.
Svaka komponenta ima skup ugrađenih atributa i metoda koje se mogu naći u API sekciji opisa
komponente. Na primer, https://material.angular.io/components/sidenav/api za Sidenav
komponentu. Obrazac korišćenja ovih metoda može biti:
1. Definisati lokalnu promenjivu koja ukazuje na instancu komponente u kojoj je deklarisana. Ime
uvek počinje sa #. U primeru iznad to je #sideNav.
2. Promene su obično rezultat akcije korisnika, te se u trenutku nastanka odgovarajućeg
događaja pristupa promenjivoj i poziva željena metoda. U primeru iznad na događaj klika
dugmeta otvaramo/zatvaramo sidenav.

Pogodnost ovakvog načina rada je što se interaktivna logika može definisati na jednom mestu
(html templejt komponente). Složenije obrade mogu zahtevati logiku u pozadinskom kodu
(typescript klasa komponente).

U nastavku ćemo kombinovati Sidenav i Toolbar komponentu.

3. Dodavanje Toolbar komponente.

Opis komponente se može naći na zvaničnoj stranici
(https://material.angular.io/components/toolbar/overview).

Zadatak: Samostalno registrovati MatToolbarModule u modulu za registraciju Angular Material

komponenti (material.module.ts) kako biste mogli koristiti komponentu u aplikaciji.

Toolbar ćemo dodati u okviru sadržaja Sidenav komponente i modifikovati sadržaj kao:
Dakle, dodata je Toolbar komponenta kao sadržaj Sidenav komponente. Komponenta sadrži
dugme koje smo prethodno kreirali i mesto za logo (oboje smešteni u div radi lakšeg stilizovanja).
Centralni deo Toolbar-a su linkovi ka našim komponentama koji odgovaraju putanjama ruta
(moguće je koristiti i standardni href atribut umesto routerLink).

Sačuvati promene i pogledati stranicu root komponente. Klikom na dugme "Toogle sidenav"
toolbar se naizmenično prikazuje i sakriva. U okviru toolbar-a su linkovi ka našim komponentama.
Sidenav i toolbar su uvek vidljivi u aplikaciji kao globalna navigacija i zbog toga su deo templejta
root komponente (app.component.html).

Sada je potrebno doterati prikaz komponenti za navigaciju.

4. Stilizovanje dodatih komponenti za globalnu navigaciju

Najpre ćemo stilizovati Sidenav komponentu.

Stilove ćemo definisati globalno, u okviru root komponente (app.component.html) i kao
podešavanja na nivou projekta (styles.css).

U app.component.css stilizujemo navigacione komponente:

Sidenav komponenta će zauzeti čitavu visinu stranice i biti široka 250 piksela.

Na globalnom nivou (styles.css) definišemo font za naše elemente i da komponente deca u

potpunosti iskortiste visinu roditeljske komponente (100 %):

Potrebno je još da registrujemo font globalno (u head sekciju index.html) da bi mogli da ga

koristimo:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Sačuvati promene i pokrenuti stranicu.

Sidenav zauzima čitavu visinu stranice i određenu širinu. Inicijalo je prikazan i ako kliknete bilo gde
van komponente ona se zatvara. Klikom na linkove prikazuju se pojedine komponente. Klikom na
dugme "Toggle sidenav" ponovo se prikazuje.

Sada ćemo stilizovati Toolbar komponentu. Na primer, dodati ikonu umesto dugmeta za otvaranje
Sidenav komponente, sliku za Logo i pristojniji izgled linkova ka komponentama.

Ikonu dodajemo slično kao u prethodnim lekcijama, kao modifikacija dugmeta u templejtu korene
komponente:

Sačuvati promene i pogledati stranice. Ikona menija je dodata (simbol je automatski identifikovan
na osnovu naziva - menu). Kod korišćenja Angular Material ikone voditi računa i malim i velikim
slovima. Na stranici https://material.io/tools/icons/ i naći ikonu pretragom sa "menu".

Sada definišemo stil za linkove u okviru korene komponente (app.component.css):

Sačuvati promene i pokrenuti stranice kako bi videli efekat promena na linkovima.

Sada naš logo pretvaramo u link na home komponentu, tj. welcome komponentu koju smo kreirali:

Sada ćemo pozicionirati linkove na desnoj strani i razdvojiti ih:

fxFlex direktiva: U prethodnim lekcijama smo se upoznali sa osnovnim FlexLayout direktivama

koje se koriste u roditeljskim/kontejnerskim elementima za definisanje rasporeda elemenata dece
(fxLayout, fxLayoutAlign i fxLayoutGap).

Ovde upoznajemo novu direktivu - fxFlex. Ova direktiva specificira automatsku promenu veličine
elementa deteta u okviru roditelja. U našem slučaju toolbar komponenta (<mat-toolbar>) je roditelj
koji sadrži tri deteta - div za ikonu, div za logo i div za linkove ka komponentama aplikacije.
Podrazumevana veličina div elemenata je takva da se njihove dimenzije prilagođavaju
dimenzijama elemenata koje sadrže, tj, dece. Koordinatni početak prikaza je uvek gornji desni
ugao ekrana ili roditelja, i zbog toga su div elementi poređani sa leva na desno u okviru toolbar-a.

Da bismo razdvojili grupu linkova od ikone za sidenav i logo-a i smestili je na desnu stranu toolbar-
a moramo zadati širinu div elementa koji sadrži linkove tako da on zauzima preostali prostor do
desne ivice ekrana. Ovo se može uraditi u datoteci sa stilovima, ali pogodniji način je korišćenje
fxFlex direktive za automatsku i dinamičku promenu veličine elementa u okviru kontejnera.

Direktiva omogućava promenu veličine samo u glavne ose (main-axis).

Podrazumevana vrednost glavne ose je row, kao pravac i smer sa leva na desno počev od
koordninatnog početka.
Vrednosti mogu biti izražene u pikselima, procentima, simboličkim konstantama ili čak runtime
izrazima i formulama. Ukoliko se vrednost ne navede (kao u našem slučaju) element automatski
zauzima preostali slobodan prostor u okviru roditelja.

Više informacija o direktivi se može naći na: https://github.com/angular/flex-layout/wiki/fxFlex-API.

Sačuvati promene i testirati izgled toolbar-a.

Zadatak: Samostalno dodati fxFlex direktive u preostala dva taga (prvi koji sadrži ikonu i drugi koji
sadrži logo), menjati vrednosti (na primer, kao procente ili piksele) i proveravati kako se menja
izgled toolbar komponente stranica u smislu razmeštaja elemenata.