Angular JS: dyrektywy modyfikujące wygląd aplikacji – część 6

Jednym z podstawowych zastosowań Angulara jest tworzenie rozbudowanych one page sites, czyli aplikacji internetowych opartych na jednej stronie, bez konieczności przeładowywania widoku, także w przypadku użycia nawigacji. Aby to zrealizować Angular posiada szereg funkcji umożliwiających manipulowanie wyświetlania pojedynczych elementów interfejsu użytkownika. I to właśnie tego typu dyrektywom chciałbym poświęcić szósty odcinek poradnika do Angulara JS.

Ewentualna zmiana w naszym widoku może być zainicjowana w dwojaki sposób. Pierwszym z nich jest czynność wykonana przez użytkownika, wykonanie określonej operacji za pomocą interfejsu użytkownika. Taka akcja powoduje, iż uruchamiana jest obsługa wykrytego zdarzenia, którą to bezpośrednio definiuje programista za pomocą odpowiedniej klasy bądź atrybutu:

  • ng-blur – zdjęcie focusa z elementu
  • ng-change – obsługa zmiany w elemencie
  • ng-click – kliknięcie myszą na elemencie (następuje po mousedown, mouseup)
  • ng-copy – wykonanie kopiowania
  • ng-paste – obsługa wklejania
  • ng-cut – wycinanie
  • ng-dblclick – obsługa zdarzenia podwójnego kliku
  • ng-focus – obsługa zdarzenia ustawienia focusu na danym elemencie
  • ng-keydown – wciśnięcie klawisza
  • ng-keypress – wciśnięcie klawisza
  • ng-keyup – puszczenie klawisza
  • ng-mousedown – wcisnięcie klawisza myszy
  • ng-mouseup – puszczenie klawisza myszy
  • ng-mouseenter – najechanie myszą na element
  • ng-mouseleave- opuszczenie elementu
  • ng-mousemove – wykonanie ruchu myszą
  • ng-mouseover – najechanie myszą na element (następuje po mouseenter)
  • ng-submit – zdarzenie przesłania formularza

Wszystkie powyższe zdarzenia służą do wywoływania wcześniej ustalonych funkcji. Innym sposobem definiowania wyglądu elementów są dyrektywy przedstawione poniżej:

  • ng-if – dołącza element do drzewa DOM jedynie w momencie spełnienia określonego kryterium
  • ng-class – przypisuje wybranemu elementowi drzewa odpowiednią klasę
  • ng-class-even – przypisuje daną klasę, jednak jedynie parzystym elementom stworzonych za pomocą ng-repeat
  • ng-class-odd – przypisuje daną klasę, jednak jedynie nieparzystym elementom stworzonych za pomocą ng-repeat
  • ng-hide – ukrywa dany element, pod warunkiem spełnienia określonego kryterium
  • ng-show – pokazujedany element, pod warunkiem spełnienia określonego kryterium
  • ng-style – przypisuje konkretne style do opisywanego elementu HTML

Najlepsze wyniki daje połączenie obydwu powyższych metod. Spróbujmy więc pokazać, jak je używać, wykorzystując przy tym kod z poprzedniego wpisu. Startujemy z takiego miejsca:

Z tak zdefiniowanym widokiem:

Widzimy, iż akcja dotyczące wybrania przycisku opisana zostały za pomocą ngclick, która to uruchamia funkcję choose z parametrem równym identyfikatorowi danego rekordu. Spróbujmy nieco zmodyfikować nasz kod. Dodajmy dwa przyciski, które zależnie od wymagań użytkownika, będą wyświetlały listę postów lub użytkowników, prześledźmy zmodyfikowany kod widoku:

W linii 12 i 13 dodaliśmy dwa przyciski, których akcje zostały ustawione na:

  • toggleUsers() – do wyświetlania i ukrywania listy z użytkownikami
  • togglePosts() – do wyświetlania i ukrywania listy z postami

Dodatkowo nasze dwa panele z postami i użytkownikami zaktualizowaliśmy nowymi dyrektywami:

  • ng-show=”vm.posts” – oznacza, iż cała warstwa będzie wyświetlona wtedy i tylko wtedy, gdy zmienna posts będzie zawierała wartość true
  • ng-show=”vm.users” – oznacza, iż cała warstwa będzie wyświetlana wtedy i tylko wtedy, gdy zmienna users będzie zawierała wartość false

Jak się nietrudno domyślić, za wypełnienie zmiennych danymi będą stały odpowiadające funkcje zdefiniowane w linijkach 12 i 13, a opisane w kontrolerze w liniach 33-47:

Jako, że dane postów i użytkowników pobierane są bezpośrednio przy renderowaniu strony, wystarczy, iż w naszych funkcjach użyjemy zwykłych przełączników, pomiędzy prawdą fałszem.

W tej chwili nasz system wygląda następująco:

DEMO

Nasza funkcjonalność wyboru pojedynczego postu (przycisk Choose) oczywiście zachowała swoje przeznaczenie i działa całkowicie poprawnie, aczkolwiek spróbujmy dodać następujące udoskonalenia:

  • Wybór postu numer 5 wyświetli dodatkowy komunikat – ten post jest wyjątkowy! – użyjemy do tego dyrektywy ng-if
  • Spróbujemy sprawić, by lista wyświetlała się w dwóch kolorach
  • Opuszczenie myszki warstwy z postami będzie skutkowało wyczyszczeniem pola z wybranym postem.

Zacznijmy od naszego wyjątkowe postu. W tym celu stworzymy nowy element HTML w naszym widoku i za pomocą dyrektywy ng-if sprawdzimy, czy wybrany identyfikator postu ma wartość równą 5, poniżej, który:

  • sprawdza czy którykolwiek z postów został wybrany, w tym celu użyta zostaje dyrektywa ng-show, od której zależy czy zostanie pokazany komunikat ‘Wybrany post: (id i tytul postu)’
  • Druga warstwa używa już natomiast dyrektywy ng-if, która sprawdza czy wartość przypisanej zmiennej id równa jest 5, w przypadku prawdy, wyświetlany jest komunikat, iż ‘Ten post jest szczegolnie wazny’.

Szybkie sprawdzenie i faktycznie, nasz kod działa jak należy, wybranie z listy postu o ID = 5 skutkuje wyświetleniem stosownego komunikatu.

Ten etap mamy z głowy, przechodzimy do kolorowania. W tym celu definiujemy dwa style, jeden dla wiersza parzystego, drugi, a jakże,  dla nieparzystego:

Nasze style musimy teraz dopisać do odpowiednich rekordów. W tym celu użyjemy wspomnianej już wyżej dyrektywy ng-class-odd i ng-class-even:

Szybkie sprawdzenie – i faktycznie, nasz kod zmienia cyklicznie kolor tła rekordów:

Ostatni etap prac to czyszczenie wybranego postu po wyjechaniu myszą poza obszar listy postów. To także nie przysporzy problemów, użyjemy dyrektywy ng-mouseleave na warstwie z listą postów. Musimy również zmodyfikować nasz kontroler i dodać akcję czyszczenia, nasz widok:

Widzimy, iż praktycznie jedyna zmiana to dodanie:

i

czyli uruchomienie funkcji disableUsers() i disablePosts(), w momencie gdy użytkownik usunie mysz z wybranego diva.

Kod kontrolera, w którym zawiera się funkcja usuwająca znajduje się w poniższym listingu:

Tym razem zmiana polegała na dodaniu:

Dzięki temu powinniśmy osiągnąć pożądany efekt.

Mimo, iż pokazane w powyższym wpisie programy są wybitnie trywialne, pozwoliły na pokazanie przykładowego użycia sposobów modyfikacji elementów HTML, czyli tak naprawdę modyfikacji elementów interfejsu użytkownika.

DEMO
Kod Źródłowy

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.