Tytuł oryginału: Mastering TypeScript, Second Edition · 2019. 5. 15. · J zyk TypeScript....

Tytuł oryginału: Mastering TypeScript, Second Edition

Tłumaczenie: Piotr Rajca

ISBN: 978-83-283-3641-4

Copyright © Packt Publishing 2017.

First published in the English language under the title 'Mastering TypeScript - Second Edition - (9781786468710)'

Polish edition copyright © 2017 by Helion SAAll rights reserved.

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher.

Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji.

Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli.

Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.

Wydawnictwo HELIONul. Kościuszki 1c, 44-100 GLIWICEtel. 32 231 22 19, 32 230 98 63e-mail: [email protected]: http://helion.pl (księgarnia internetowa, katalog książek)

Pliki z przykładami omawianymi w książce można znaleźć pod adresem: ftp://ftp.helion.pl/przyklady/jeztyp.zip

Drogi Czytelniku!Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/jeztypMożesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

Printed in Poland.

• Kup książkę• Poleć książkę • Oceń książkę

• Księgarnia internetowa• Lubię to! » Nasza społeczność

http://helion.pl/rt/jeztyp

http://helion.pl/rf/jeztyp

http://helion.pl/ro/jeztyp

http://helion.pl

http://ebookpoint.pl/r/4CAKF

Spis tre ci

O autorze 15

O recenzentach 17

Wst p 19

Rozdzia 1. TypeScript — dost pne narz dzia i frameworki 25

Przedstawienie j zyka TypeScript 27Standard EcmaScript 27Zalety j zyka TypeScript 28

Zintegrowane rodowiska programistyczne obs uguj ce j zyk TypeScript 36Kompilacja w rodowisku Node 36Visual Studio 2017 38WebStorm 44Visual Studio Code 48Inne edytory 55

Podsumowanie 57

Rozdzia 2. Typy, zmienne oraz funkcje 59

Typy podstawowe 60Typy w j zyku JavaScript 60Okre lanie typów w j zyku TypeScript 61Sk adnia okre lania typów 62Wnioskowanie typów 64Kacze typowanie 65a cuchy szablonów 66

Tablice 67P tle for...in oraz for...of 68Typ any 69Jawne rzutowanie 70Typy wyliczeniowe 71Ustalone typy wyliczeniowe 73

Poleć książkęKup książkę



J zyk TypeScript. Tajniki kodu

4

Sta e 74S owo kluczowe let 75

Funkcje 77Typy warto ci zwracanych przez funkcje 77Funkcje anonimowe 78Parametry opcjonalne 78Parametry domy lne 80Parametr reszty 80Funkcje zwrotne 82Sygnatury funkcji 84Przeci anie funkcji 86

Zaawansowane typy 87Typ unii 88Stra niki typów 88Nazwy zast pcze typów 90Warto null i undefined 91Reszta obiektu i rozproszenie 93

Podsumowanie 94

Rozdzia 3. Interfejsy, klasy i dziedziczenie 95

Interfejsy 96W a ciwo ci opcjonalne 97Kompilacja interfejsów 98

Klasy 98W a ciwo ci klas 99Implementacja interfejsów 100Konstruktory klas 101Funkcje klas 102Definicje funkcji interfejsów 105Modyfikatory klas 106Modyfikatory dost pu w konstruktorach 108W a ciwo ci tylko do odczytu 109Akcesory w a ciwo ci klas 109Funkcje statyczne 111W a ciwo ci statyczne 111Przestrzenie nazw 112

Dziedziczenie 113Dziedziczenie interfejsów 114Dziedziczenie klas 114S owo kluczowe super 115Przeci anie funkcji 116Sk adowe chronione 117Klasy abstrakcyjne 118Domkni cia JavaScript 121

Stosowanie interfejsów, klas i dziedziczenia — wzorzec projektowy Fabryka 123Wymagania biznesowe 123Co robi wzorzec Fabryka? 123Stosowanie klasy fabrykuj cej 127

Podsumowanie 128




Spis tre ci

5

Rozdzia 4. Dekoratory, typy ogólne i asynchroniczno 129

Dekoratory 130Sk adnia dekoratorów 131Stosowanie wielu dekoratorów 132Fabryki dekoratorów 132Parametry dekoratorów klas 133Dekoratory w a ciwo ci 135Dekoratory w a ciwo ci statycznych 136Dekoratory metod 137Stosowanie dekoratorów metod 138Dekoratory parametrów 139Metadane dekoratorów 140Stosowanie metadanych dekoratorów 142

Typy ogólne 143Sk adnia typów ogólnych 144Tworzenie instancji klas ogólnych 145Stosowanie typu T 146Ograniczenia typu T 148Interfejsy ogólne 150Tworzenie nowych obiektów w klasach ogólnych 151

Mechanizmy programowania asynchronicznego 153Obietnice 153Sk adnia obietnic 155Stosowanie obietnic 156Sk adnia funkcji zwrotnych a sk adnia obietnic 158Zwracanie warto ci z obietnic 158S owa kluczowe async i await 160S owo kluczowe await a obs uga b dów 161Obietnice a sk adnia s owa kluczowego await 162Komunikaty a s owo kluczowe await 163

Podsumowanie 165

Rozdzia 5. Pisanie i stosowanie plików deklaracji 167

Zmienne globalne 168Stosowanie bloków kodu JavaScript w kodzie HTML 170

Dane strukturalne 171Pisanie w asnych plików deklaracji 173

S owo kluczowe module 175Interfejsy 177Typy unii 179

Scalanie modu ów 180Sk adnia plików deklaracji 180

Przes anianie funkcji 181Zagnie d one przestrzenie nazw 181Klasy 182Przestrzenie nazw klas 182Przeci anie konstruktora klas 182





6

W a ciwo ci klas 183Funkcje klas 183W a ciwo ci i funkcje statyczne 183Funkcje globalne 184Sygnatury funkcji 184W a ciwo ci opcjonalne 184Scalanie funkcji i modu ów 185

Podsumowanie 185

Rozdzia 6. Biblioteki innych twórców 187

Pobieranie plików definicji 188Stosowanie NuGet 190

Stosowanie mened era pakietów 190Instalowanie plików deklaracji 191Stosowanie konsoli mened era pakietów 191

Stosowanie narz dzia Typings 192Poszukiwanie pakietów 193Inicjalizacja Typings 194Instalowanie plików definicji 194Instalowanie konkretnej wersji pliku 195Ponowna instalacja plików definicji 195

Stosowanie programu Bower 196Stosowanie npm i @types 196Stosowanie bibliotek innych twórców 197

Wybór frameworka JavaScript 197Backbone 198

Stosowanie dziedziczenia we frameworku Backbone 199Stosowanie interfejsów 201Stosowanie sk adni typów ogólnych 201Stosowanie j zyka ECMAScript 5 202Zgodno frameworka Backbone z j zykiem TypeScript 203

Angular 203Klasy Angular i zmienna $scope 205Zgodno frameworka AngularJS z j zykiem TypeScript 207

Dziedziczenie — Angular kontra Backbone 207ExtJS 208

Tworzenie klas w ExtJS 208Stosowanie rzutowania typów 210Kompilator TypeScript dla ExtJS 211

Podsumowanie 211

Rozdzia 7. Frameworki zgodne z j zykiem TypeScript 213

Czym jest MVC? 214Model 215Widok 215Kontroler 216Podsumowanie wzorca MVC 217




Spis tre ci

7

Zalety stosowania wzorca MVC 218Szkic przyk adowej aplikacji 219

Stosowanie frameworka Backbone 220Wydajno wy wietlania 221Konfiguracja frameworka Backbone 222Modele Backbone 223Widok ItemView 224Widok CollectionView 225Aplikacja Backbone 227

Stosowanie frameworka Aurelia 228Konfiguracja frameworka Aurelia 228Zagadnienia do rozwa enia 229Wydajno frameworka Aurelia 230Modele frameworka Aurelia 230Widoki frameworka Aurelia 231Wczytywanie aplikacji Aurelia 232Zdarzenia frameworka Aurelia 233

Framework Angular 2 234Konfiguracja frameworka Angular 2 234Modele frameworka Angular 2 235Widoki Angular 2 235Wydajno frameworka Angular 2 237Zdarzenia Angular 2 237

Stosowanie frameworka React 238Konfiguracja frameworka React 238Widoki React 240Wczytywanie aplikacji React 243Zdarzenia React 245

Podsumowanie 246

Rozdzia 8. Programowanie w oparciu o testy 247

Programowanie w oparciu o testy 248Testy jednostkowe, integracyjne oraz akceptacyjne 249

Testy jednostkowe 250Testy integracyjne 250Testy akceptacyjne 250

Frameworki testów jednostkowych 251Jasmine 251

Prosty test Jasmine 252Plik SpecRunner 252Obiekty dopasowuj ce 254Uruchamianie i ko czenie testów 256Testy bazuj ce na danych 256Stosowanie szpiegów 258Szpiegowanie funkcji zwrotnych 259Stosowanie szpiegów jako imitacji 261Testy asynchroniczne 261





8

Stosowanie funkcji done() 263Modyfikacje DOM w Jasmine 264Zdarzenia DOM 265

Mechanizmy wykonawcze Jasmine 266Testem 267Karma 268Protractor 270

Stosowanie ci g ej integracji 272Zalety ci g ej integracji 273Wybór serwera budowy 274Raportowanie testów integracyjnych 275

Podsumowanie 276

Rozdzia 9. Testowanie frameworków zgodnych z j zykiem TypeScript 277

Testowanie naszej aplikacji przyk adowej 278Modyfikacja aplikacji przyk adowej w celu umo liwienia testowania 279Testowanie frameworka Backbone 280

Z o one modele 280Aktualizacje widoków 283Modyfikacje obs ugi zdarze DOM 283Testy modeli 285Testy modelu z o onego 287Testy wy wietlania 288Testy zdarze DOM 289Podsumowanie testów Backbone 291

Testowanie frameworka Aurelia 291Komponenty frameworka Aurelia 291Model widoku komponentów Aurelia 292Komponent widoku frameworka Aurelia 293Wy wietlanie komponentu 293Konwencje nazewnicze frameworka Aurelia 294Konfiguracja testów we frameworku Aurelia 295Testy jednostkowe we frameworku Aurelia 296Testy wy wietlania 297Testy przekrojowe we frameworku Aurelia 299Podsumowanie testów frameworka Aurelia 303

Testowanie frameworka Angular 2 303Aktualizacja aplikacji 303Konfiguracja testów we frameworku Angular 2 305Testy modelu w Angular 2 305Testy wy wietlania w Angular 2 306Testowanie DOM w Angular 2 307Podsumowanie testów Angular 2 308

Testowanie frameworka React 308Wiele punktów wej cia 309Modyfikacje w aplikacji React 309Testy jednostkowe komponentów React 312




Spis tre ci

9

Testy modelu i widoków React 313Testy zdarze we frameworku React 315

Podsumowanie 316

Rozdzia 10. Modularyzacja 317

Podstawowe informacje o modu ach 318Eksportowanie modu ów 320Importowanie modu ów 320Zmiana nazwy modu u 321Eksporty domy lne 322Eksportowanie zmiennych 323

Wczytywanie modu ów AMD 324Kompilacja modu ów AMD 324Konfiguracja modu ów AMD 326Konfiguracja Require 326Konfiguracja przegl darki dla modu ów AMD 327Zale no ci w modu ach AMD 328Wczytywanie frameworka Require 331Poprawianie b dów konfiguracji Require 333

Wyczytywanie modu ów przy u yciu SystemJS 334Instalacja SystemJS 335Konfiguracja SystemJS do u ycia w przegl darce 335SystemJS i zale no ci modu ów 337Wczytywanie Jasmine 340

Stosowanie Express i Node 340Konfiguracja Express 341Stosowanie modu ów w aplikacjach Express 342Okre lanie i obs uga tras w aplikacjach Express 344Stosowanie szablonów w Express 346Stosowanie Handlebars 347Zdarzenia POST we frameworku Express 350Przekierowywanie da HTTP 353Podsumowanie informacji o Node i Express 355

Podsumowanie 355

Rozdzia 11. Programowanie obiektowe 357

Zasady programowania obiektowego 358Programowanie w oparciu o interfejsy 358Zasady SOLID 359

Projektowanie interfejsu u ytkownika 360Projekt koncepcyjny 361Konfiguracja aplikacji Angular 2 363Stosowanie frameworka Bootstrap 364Tworzenie panelu bocznego 365Tworzenie nak adki 369Koordynacja efektów przej 371





10

Wzorzec Stan 372Interfejs stanu 372Konkretne stany 373

Wzorzec Mediator 374Modularny kod 375Komponent Navbar 376Komponent SideNav 377Komponent RightScreen 378Komponenty podrz dne 380Implementacja interfejsu mediatora 381Klasa Mediator 382Stosowanie klasy Mediator 385Reagowanie na zdarzenia DOM 386

Podsumowanie 387

Rozdzia 12. Wstrzykiwanie zale no ci 389

Wysy anie poczty elektronicznej 390Wykorzystanie pakietu nodemailer 390Ustawienia konfiguracyjne 393Stosowanie lokalnego serwera SMTP 395Wstrzykiwanie zale no ci 396Wzorzec Lokalizacja us ugi 396Lokalizacja us ugi — antywzorzec 398Wstrzykiwanie zale no ci 399

Implementacja wstrzykiwania zale no ci 399Wyznaczanie interfejsów 399Wyznaczanie z u yciem typów wyliczeniowych 400Wyznaczanie nazwy klasy 401Wstrzykiwanie przy u yciu konstruktora 402

Wstrzykiwanie przy u yciu dekoratora 403Stosowanie definicji klasy 404Analiza parametrów konstruktora 405Okre lanie typów parametrów 406Wstrzykiwanie w a ciwo ci 407Stosowanie wstrzykiwania zale no ci 408Wstrzykiwanie rekurencyjne 409

Podsumowanie 410

Rozdzia 13. Tworzenie aplikacji 411

Interfejs u ytkownika 412Stosowanie edytora Brackets 413Stosowanie rozszerzenia Emmet 415Tworzenie panelu logowania 417

Witryna korzystaj ca z frameworka Aurelia 419Kompilacja Node i frameworka Aurelia 420Udost pnianie aplikacji Aurelia 421Strony frameworka Aurelia w aplikacji Express 422




Spis tre ci

11

Komponenty aplikacji Aurelia 424Przetwarzanie danych JSON 425Formularze we frameworku Aurelia 427Przesy anie danych 430Stosowanie komunikatów we frameworku Aurelia 431

Witryna Angular 2 434Konfiguracja Angular 2 434Udost pnianie stron aplikacji Angular 2 434Komponenty aplikacji Angular 2 437Przetwarzanie danych JSON 440Przesy anie danych do aplikacji 442

Witryna Express i React 443Express i React 443Udost pnianie aplikacji React 445Wi ksza liczba plików package.json 447Komponenty React 448Korzystanie z punktów ko cowych REST 451Komponent panelu logowania 452Wi zanie danych w aplikacji React 454Przesy anie danych JSON w daniach POST 456

Podsumowanie 457

Rozdzia 14. Czas zakasa r kawy! 459

Aplikacja SurfDechy 460Wyj ciowa aplikacja Angular 2 461

Testy jednostkowe 463Testy implementacji wzorców projektowych 464Stan panelu logowania 468Integracja paneli 471Struktura danych JSON 474Komponent BoardList 476Testy jednostkowe da HTTP 477Wy wietlanie listy desek 483Testowanie zdarze interfejsu u ytkownika 484Widok szczegó ów deski 487Stosowanie filtra 489Panel logowania 492Architektura aplikacji 496

Podsumowanie 497

Skorowidz 499





12

ZESPÓ WYDANIA ORYGINALNEGO ==>> osobny plik




11

Programowanieobiektowe

W 1995 roku tak zwany Gang Czworga (ang. Gang of Four, w skrócie GoF) opublikowa ksi kpt. Design Patterns: Elements of Reusable Object-Oriented Software1. Autorzy tej ksi ki —Erich Gamma, Richard Helm, Ralph Johnson oraz John Vlissides — opisali w niej szereg klasycz-nych programowych wzorców projektowych, stanowi cych proste i eleganckie rozwi zania po-wszechnie wyst puj cych problemów programistycznych. Je li nigdy nie s ysza e o wzorcachprojektowych, takich jak Fabryka (ang. Factory), Kompozyt (ang. Composite), Obserwator (ang.Observer) czy te Singleton, gor co zach cam do przeczytania tej ksi ki.

Wzorce projektowe zaprezentowane przez Gang Czworga zosta y zaimplementowane w wieluró nych j zykach programowania, tak e w Javie i C#. Vilic Vane napisa ksi k pt. TypeScriptDesign Patterns, w której ka dy z wzorców przedstawionych przez Gang Czworga zosta zaimple-mentowany i opisany z perspektywy j zyka TypeScript. W trzecim rozdziale tej ksi ki, „Interfejsy,klasy i dziedziczenie”, po wi ci em nieco czasu na zaimplementowanie klasycznego wzorcaprojektowego Fabryka, b d cego jednym z bardziej popularnych wzorców opisanych w ksi ceautorstwa Gangu Czworga. TypeScript, wraz ze swoimi konstrukcjami zgodnymi ze standardamiES6 i ES7, jest doskona ym przyk adem obiektowego j zyka programowania. Ze swoimi mo li-wo ciami tworzenia klas, klas abstrakcyjnych, interfejsów, z dziedziczeniem oraz typami ogólnymiaplikacje pisane w j zyku TypeScript mog ju w pe ni korzysta ze wzorców projektowychopisanych w ksi ce Gangu Czworga.

Przedstawienie implementacji ka dego z wzorców projektowych opisanych przez Gang Czworganapisanej w j zyku TypeScript jest zagadnieniem daleko wykraczaj cym poza ramy jednego

1 Polskie t umaczenie tej ksi ki zosta o wydane nak adem wydawnictwa Helion, pt. Wzorce projektowe.

Elementy oprogramowania obiektowego wielokrotnego u ytku — przyp. t um.





358

rozdzia u, poza tym by oby to niesprawiedliwe wzgl dem wspania ej prezentacji tych wzorcównapisanej przez Vilica Vane’a. Dlatego te w tym rozdziale skoncentrujemy si na procesie pisaniakodu obiektowego, przedstawionym na przyk adzie dwóch wzorców projektowych, które dosko-nale wspó pracuj i u atwiaj obs ug z o onych interfejsów u ytkownika. Wzorcami tymi sStan (ang. State) oraz Mediator (ang. Mediator), które koncentruj si na stanie aplikacji orazsposobach wzajemnej interakcji pomi dzy obiektami. W tym rozdziale utworzymy aplikacjAngular 2 dysponuj c raczej z o onym interfejsem u ytkownika i korzystaj c z wyszukanychefektów przej CSS. Nast pnie rozpoczniemy proces przepisywania tej pocz tkowej wersjiaplikacji tak, by korzysta a z zasad programowania obiektowego, a przy okazji poznamy wzajemneinterakcje pomi dzy tworz cymi j obiektami. W ko cu, zaimplementujemy wzorce projektoweStan i Mediator, aby hermetyzowa logik odpowiedzialn za okre lanie, które elementy interfejsuu ytkownika maj by w danej chwili widoczne, a które nie.

W tym rozdziale zostan opisane nast puj ce zagadnienia. Zasady programowania obiektowego. Stosowanie interfejsów. Zasady SOLID. Projektowanie interfejsów u ytkownika. Wzorzec Stan. Wzorzec Mediator. Kod modularny.

Zasady programowania obiektowegoKa d pisan aplikacj nale y ocenia pod k tem najlepszych praktyk programowania obiekto-wego. Robert Martin opublikowa tak zwane zasady projektowe SOLID, przy czym nazwa tajest akronimem pi ciu praktyk programowania obiektowego. Post puj c zgodnie z tymi zasadami,atwiej sprawimy, e nasz kod b dzie: prosty do utrzymania, atwy do zrozumienia i rozszerza-

nia, jak równie odporny na zmiany. W naszym b yskawicznie rozwijaj cym si wiecie zazwyczajnie mo emy pozwoli sobie na luksus po wi cania du ych ilo ci czasu na modyfikowanieaplikacji i zaspokajanie nieustannie zmieniaj cych si wymaga . Im szybciej b dziemy w staniedostarcza aktualizacje spe niaj ce wymagania biznesowe, tym wi ksza szansa, e uda si wyprze-dzi konkurencj . Post powanie zgodnie z zasadami SOLID b dzie stanowi doskona podstaw ,która zapewni mo liwo atwego wprowadzania zmian w istniej cym kodzie, niezb dn do za-spokojenia b yskawicznie zmieniaj cych si wymaga stawianych przed naszym kodem.

Programowanie w oparciu o interfejsyJednym z podstawowych za o e wykorzystywanych przez Gang Czworga jest to, e programi cipowinni programowa w oparciu o interfejsy, a nie implementacje. Oznacza to, e programy




Rozdzia 11. • Programowanie obiektowe

359

powinny by tworzone w taki sposób, by wszystkie interakcje pomi dzy obiektami by y realizo-wane przy wykorzystaniu interfejsów. Dzi ki temu obiekty pe ni ce rol klientów nie musz nicwiedzie o wewn trznej logice dzia ania obiektów, od których s zale ne, gdy wtedy staj siznacznie bardziej odporne na zmiany. Definiuj c interfejs, zaczynamy tworzy API opisuj cemo liwo ci funkcjonalne udost pniane przez dany obiekt, sposoby korzystania z danego obiektuoraz to, jak maj wygl da interakcje pomi dzy obiektami.

Zasady SOLIDRozszerzeniem zasady programowania w oparciu o interfejsy s tak zwane zasady projektoweSOLID, bazuj ce na pomys ach Roberta Martina. SOLID to akronim nazw pi ciu ró nychzasad projektowych, o którym warto wspomina w ka dej dyskusji po wi conej zasadom progra-mowania obiektowego.

Zasada jednej odpowiedzialno ciIdea le ca u podstaw wzorca jednej odpowiedzialno ci g osi, e obiekt powinien mie tylkojedn odpowiedzialno . Ma robi tylko jedn rzecz i robi to naprawd dobrze. Przyk adywykorzystania tej zasady mogli my zobaczy w wielu frameworkach TypeScript, których u ywali-my w tej ksi ce. Przyk adowo klasa Model jest u ywana do reprezentowania jednego modelu.

Z kolei klasa Collection s u y do reprezentacji kolekcji takich modeli, a klasa View pozwala nawy wietlanie modeli i ich kolekcji.

Je li zauwa ymy, e która z klas zaczyna stawa si superklas , czyli zaczyna wykonywaoperacje ró nych typów, stanowi to sygna , e narusza ona zasad jednej odpowiedzialno ci.Oto prosty przyk ad: je li plik ród owy jakiej klasy zaczyna by bardzo d ugi, najprawdopo-dobniej klasa ta wykonuje zbyt wiele czynno ci. W takim przypadku nale y zastanowi si , jakajest jej podstawowa odpowiedzialno , a nast pnie podzieli mo liwo ci funkcjonalne takiej klasyna mniejsze fragmenty i umie ci je w nowych klasach.

Zasada otwarte-zamkni teZasada otwarte-zamkni te g osi, e obiekt powinien by otwarty na rozszerzenia i zamkni tyna modyfikacje. Innymi s owy, po zaprojektowaniu interfejsu klasy jego zmiany pojawiaj ce sistopniowo wraz z up ywem czasu powinny by wprowadzane przy wykorzystaniu zasad dziedzi-czenia, a nie poprzez bezpo redni modyfikacj samego interfejsu.

Koniecznie nale y zwróci uwag , e podczas pisania bibliotek, które za po rednictwem udo-st pnianego API s u ywane przez innych programistów, zasada ta nabiera kluczowego znaczenia.Zmiany takiego publicznego API powinny by wprowadzane wy cznie poprzez udost pnianiejego nowej wersji opatrzonej nowym numerem i w celu zapewnienia zgodno ci wstecznej nigdynie powinny powodowa problemów w dzia aniu istniej cych, wcze niejszych wersji API lubinterfejsu.





360

Zasada podstawienia LiskovaZasada podstawienia Liskova (ang. Liskov Substitution Principle, w skrócie LSP) g osi, e je lijeden obiekt dziedziczy po innym obiekcie, obu tych obiektów mo na u ywa zamiennie bezwywo ywania problemów z funkcjonowaniem kodu. Cho mo na by s dzi , e zaimplemento-wanie tej zasady jest stosunkowo atwe, jednak okazuje si , e mo e ono by z o onym proble-mem, zw aszcza w kontek cie regu dziedziczenia zwi zanych z bardziej z o onymi typami,takimi jak listy obiektów lub operacje na obiektach, które s powszechnie stosowane w kodzie ko-rzystaj cym z typów ogólnych. W takich przypadkach wprowadza si poj cie wariancji, a obiektymog by kowariantne, kontrawariantne b d te inwariantne. W tej ksi ce nie b dziemy zag -bia si w tajniki wariancji, trzeba jednak pami ta o tej zasadzie w razie pisania bibliotek lubkodu korzystaj cego z typów ogólnych.

Zasada segregacji interfejsówIde tej zasady jest za o enie, e utworzenie wielu interfejsów jest lepszym rozwi zaniem niutworzenie jednego du ego interfejsu ogólnego przeznaczenia. Je li po czymy t zasad z zasadjednej odpowiedzialno ci, zaczniemy postrzega nasze interfejsy jako wspó pracuj ce ze sobniewielkie elementy jednej du ej uk adanki, a nie jako du e interfejsy obejmuj ce znaczne obsza-ry mo liwo ci funkcjonalnych tworzonego rozwi zania.

Zasada wstrzykiwania zale no ciChodzi w niej o to, e tworzone rozwi zania powinny zale e od abstrakcji (czy te od interfej-sów), a nie od instancji konkretnych obiektów. Jest ona zbli ona do zasady programowania w opar-ciu o interfejsy, a nie implementacje.

Projektowanie interfejsu u ytkownikaW ramach przyk adu wykorzystania zasad projektowania SOLID napiszemy teraz aplikacjposiadaj c stosunkowo z o ony interfejs u ytkownika i przekonamy si , jak mo na wykorzystate zasady, by podzieli jej kod na mniejsze modu y, które b d u ywane przy wykorzystaniuinterfejsów i które znacznie u atwi zarz dzanie baz kodu aplikacji.

W tym podrozdziale napiszemy aplikacj Angular 2, której uk ad b dzie podzielony na paneleprzesuwane w poziomie. Do okre lania wygl du tej aplikacji wykorzystamy framework Bootstrap,który uzupe nimy o efekty przej CSS, daj ce mo liwo przesuwania paneli w prawo i lewo.W ten sposób postaramy si zapewni u ytkownikom nieco inne doznania ni te, jakie dajewi kszo witryn, których zawarto jest przewijana w pionie.





361

Projekt koncepcyjnyZobaczmy, jaka jest koncepcja dzia ania naszej witryny wraz z jej przesuwanymi panelami.Zosta a ona zilustrowana na rysunku 11.1.

Rysunek 11.1. Projekt koncepcyjny interfejsu u ytkownika aplikacji z przesuwanymi panelami

G ówn stron naszej aplikacji b dzie stanowi panel przegl dania wraz z panelem nag ówkaoraz przyciskiem kontroluj cym wy wietlanie i ukrywanie bocznego panelu nawigacyjnegoumieszczonego z lewej strony. W momencie otwierania lewego panelu b dzie on wy wietlanyz wykorzystaniem animacji CSS, które utworz efekt przypominaj cy wsuwanie panelu do wi-docznego obszaru strony. Analogicznie taki sam efekt b dzie u ywany podczas zamykania tegopanelu — b dzie on wysuwany na lewo. I podobnie, po klikni ciu przycisku w celu wy wietleniadrugiego panelu (Panel 2) b dzie on wsuwany z prawej strony i zajmie obszar panelu przegl da-nia; tak e w tym przypadku efekt wizualny zostanie uzyskany dzi ki zastosowaniu animacji CSS.

Rysunek 11.2 przedstawia panel przegl dania wraz z panelem nag ówka oraz panelem nawigacyjnym.

Na rysunku wyra nie wida panel nawigacyjny umieszczony u góry strony, panel nawigacyjnyumieszczony z lewej strony oraz dwa przyciski. Pierwszy z przycisków jest widoczny po lewejstronie tekstu Wybierz opcj : i widzimy na nim jedynie znak mniejszo ci (<) informuj cy, eklikni cie przycisku ukryje panel. Klikni cie tego przycisku uruchomi animacj CSS, którawysunie panel w lewo, tak e przestanie by widoczny. Posta strony w trakcie tej animacji zosta aprzedstawiona na rysunku 11.3.

Na tym rysunku animacja zosta a zatrzymana, tak by by o wida , e lewy panel jest w trakcieukrywania, a panel g ówny poszerza si , by zaj ca y obszar strony panelu przegl dania. Przy tejokazji warto zwróci uwag , e posta przycisku do obs ugi panelu nawigacyjnego zosta a zmie-niona z < na >. Ta drobna zmiana informuje, e panel boczny mo na ponownie wy wietli , kli-kaj c przycisk >.





362

Rysunek 11.2. G ówny panel przegl dania wraz z widocznym lewym panelem nawigacyjnym

Rysunek 11.3. Animacja ukrywaj ca lewy panel nawigacyjny

Z kolei klikni cie przycisku Szczegó y spowoduje, e zarówno lewy panel nawigacyjny, jak i panelg ówny zostan wysuni te w lewo, dzi ki czemu pojawi si drugi panel — panel szczegó ów.Tak e i ta operacja b dzie wykonywana przy wykorzystaniu animacji CSS, której posta zosta aprzedstawiona na rysunku 11.4.

Na tym rysunku wida , jak panel szczegó ów jest wysuwany z prawej ku lewej, natomiast obapanele widoczne wcze niej — nawigacyjny oraz g ówny — s wysuwane w lewo.





363

Rysunek 11.4. Animacja wy wietlaj ca panel szczegó ów

Konfiguracja aplikacji Angular 2Skoro ju wiemy, jaka jest koncepcja wygl du naszej aplikacji, mo emy zaj si implementacjtego uk adu, zaczynaj c od utworzenia i skonfigurowania aplikacji Angular 2. Jak mogli mysi przekona podczas prac nad poprzednimi projektami korzystaj cymi z tego frameworka,now aplikacj mo na utworzy , wykonuj c z poziomu wiersza polece komend ng new. Ten pro-ces spowoduje zainstalowanie wszelkich niezb dnych zale no ci wymaganych przez frameworkoraz utworzy pocz tkowe pliki aplikacji, w tym app.component.ts oraz app.component.html.

Plik app/app.component.ts nie mo e chyba by prostszy:import { Component } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { title = 'Wybierz opcj :';}

Na pocz tku pliku importujemy modu Component, tak jak robili my ju wcze niej, a nast pniedefiniujemy trzy w a ciwo ci, które przekazujemy do dekoratora @Component. Nale y zwróciuwag , e zamiast okre la warto w a ciwo ci template, która normalnie zawiera kod HTML,okre lili my warto w a ciwo ci templateUrl. Informuje ona framework o tym, ze powinienwczyta z dysku plik o podanej nazwie, a nast pnie u y jego zawarto ci jako szablonu. I analo-gicznie, u ywaj c w a ciwo ci styleUrls, podali my adres arkusza stylów CSS, który ma byu ywany przez nasz komponent. Umieszczona poni ej definicja klasy AppComponent zawieraju tylko jedn w a ciwo o nazwie title.





364

Zastosowanie w a ciwo ci templateUrl do wczytania oddzielnego pliku zawieraj cego kod HTMLszablonu jest przyk adem zastosowania zasady wstrzykiwania zale no ci. Nasza klasa AppComponentjest zale na od szablonu HTML, który jest niezb dny do wy wietlenia komponentu w przegl -darce. W przypadku stosowania w a ciwo ci template pojawia si silne powi zanie pomi dzyszablonem HTML i klas . Pojawienie si takiego cis ego powi zania oznacza, e wszelkie zmianywprowadzane w kodzie szablonu b d wymusza ponown kompilacj modu u. Po przeniesieniukodu szablonu do osobnego pliku mo emy wyeliminowa to cis e powi zanie, a klasa modu ub dzie mog a by modyfikowana zupe nie niezale nie od kodu HTML szablonu.

Na obecnym etapie prac nad aplikacj plik app.component.html tak e jest bardzo prosty; jegokod zosta przedstawiony poni ej:

<div> {{title}}</div>

<div> <button>szczegó y</button></div>

Jak wida , ca zawarto tego pliku stanowi dwa elementy <div>. Pierwszy z nich zawieratytu , a drugi — pojedynczy przycisk.

Stosowanie frameworka BootstrapSkoro przygotowali my ju podstawow struktur naszej aplikacji, mo emy zaj si uatrakcyjnie-niem jej wygl du. Do tego celu u yjemy frameworka o nazwie Bootstrap. Jest to frameworkHTML i CSS s u cy do tworzenia komponentów stron WWW, zapewniaj cy przewa aj cwi kszo mo liwo ci funkcjonalnych oraz stylów potrzebnych do tworzenia nowoczesnychwitryn i aplikacji internetowych. Zaczynaj c od przycisków i ikon, poprzez karty, ró nego rodzajukomunikaty i niemal wszystkie inne powszechnie u ywane elementy stron, Bootstrap udost pniaprost sk adni pozwalaj c na atwe dodawanie do naszych stron profesjonalnie wygl daj -cych elementów interfejsu u ytkownika. Bootstrap powsta jako framework responsywny, cooznacza, e automatycznie dostosowuje si i dobiera optymalny sposób prezentacji dla urz dzemobilnych, tabletów i komputerów biurkowych. Aby zastosowa Bootstrap w naszym projekcie,trzeba go najpierw zainstalowa przy u yciu narz dzia npm:

npm install bootstrap --save

Aby do czy do generowanych stron plik CSS Bootstrapa, wystarczy otworzy w edytorzeplik angular.cli.json zapisany w g ównym katalogu projektu i doda do niego w a ciwo styles,tak jak pokazano na poni szym przyk adzie:

"styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css"],





365

Teraz mo emy ju przyst pi do upi kszania naszej strony app.component.html; zaczniemy oddodania paska nawigacyjnego, który b dzie umieszczony u góry. Oto jego kod HTML:

<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm"> <a class="navbar-brand"> </a> <div class="nav navbar-nav"> <a class="nav-item nav-link active">Strona g ówna</a> <a class="nav-item nav-link">Produkty</a> <a class="nav-item nav-link">O nas</a> </div></nav>

Powy szy fragment kodu odpowiada za wy wietlenie paska nawigacyjnego. Sk ada si on zeznacznika <nav> u ywaj cego kilku klas CSS frameworka Bootstrap, dzi ki którym zostaniewy wietlony jako pasek zajmuj cy górny fragment strony. Wewn trz znacznika <nav> jest umiesz-czony pusty znacznik <a>, a nast pnie zagnie d ony element <div> zawieraj cy trzy kolejnezagnie d one znaczniki <a>. Te trzy odno niki maj —odpowiednio — tytu y: Strona g ówna,Produkty oraz O nas i b d prezentowane jako elementy nawigacyjne.

Nale y zwróci uwag , e w tym rozdziale u ywamy frameworka Bootstrap w wersji 4.0.0-alpha.4,który pod wieloma wzgl dami ró ni si od wcze niejszych wersji. Je li powy szy pasek nawiga-cyjny nie b dzie wy wietlany prawid owo, nale y sprawdzi plik package.json i upewni si , ejest zainstalowana odpowiednia wersja frameworka Bootstrap:

"dependencies": { ... inne biblioteki npm ... "bootstrap": "^4.0.0-alpha.4", ... inne biblioteki npm ...}

Tworzenie panelu bocznegoTeraz zajmiemy si przygotowaniem lewego panelu strony. Doskona ym miejscem do poznawaniaelementów HTML, stylów CSS oraz animacji jest witryna http://w3schools.com. Jej dzia doku-mentacji zawiera bardzo wiele przyk adów prezentuj cych, jak tworzy pokazy slajdów, modalneokna dialogowe, paski post pów, responsywne tabele i wiele innych elementów stron. W naszejaplikacji wykorzystamy przyk ad bocznej sekcji nawigacyjnej o nazwie Sidenav Push Content.Pokazuje on, jak utworzy boczny ekran nawigacyjny, który podczas otwierania wypycha na bokg ówn cz strony, a nie przes ania jej. Zaczniemy od dodania do pliku app.component.htmlponi szego fragmentu kodu HTML:

<div id="mySidenav" class="sidenav"> <a href="#">Informacje</a> <a href="#">Us ugi</a> <a href="#">Klienci</a> <a href="#">Kontakt</a></div>

Ten fragment kodu przedstawia element <div> o identyfikatorze mySidenav, do którego dodali myklas CSS sidenav. Wewn trz niego umieszczone zosta y cztery odno niki. Aby przekszta ci





366

ten fragment kodu HTML w atrakcyjny pasek nawigacyjny, musimy otworzy w edytorze plikapp.component.css i doda do niego poni sz definicj stylu:

/* Boczne menu nawigacyjne */.sidenav { height: 100%; /* 100% pe na wysoko */ width: 250px; /* lub 0 - zmieniane przy u yciu JavaScriptu */ position: fixed; /* pozostaje na miejscu */ z-index: 1; /* pozostaje nad innymi elementami */ top: 50px; left: 0; background-color: #111; /* czarne t o */ overflow-x: hidden; /* bez poziomego paska przewijania */ padding-top: 60px; /* tre przesuni ta w dó o 60px */ transition: 0.3s;}

/* odno niki nawigacyjne */.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s}

/* zmiana koloru po wskazaniu odno nika mysz */.sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1;}

Dzi ki tym paru stylom CSS nasz boczny panel nawigacyjny zaczyna wygl da ciekawiej, cowida na poni szym rysunku 11.5.

Rysunek 11.5. Prosty boczny panel nawigacyjny po zastosowaniu stylów CSS





367

Jak wida , po zastosowaniu stylów uzyskali my atrakcyjny boczny panel nawigacyjny. Niestetyg ówna zawarto strony zosta a pod nim ukryta, a to z kolei oznacza, e b dziemy musieli przesu-n g ówny panel tre ci w prawo, wykorzystuj c do tego celu zewn trzny element <div> i odpo-wiednie style CSS. Poni ej przedstawiona zosta a zmodyfikowana wersja kodu HTML panelug ównego:

<div id="main" class="main-content-panel"> <div class="row"> <div class="col-sm-1"> <button class="btn button-no-borders" (click)="showHideSideClicked()" > <span id="show-hide-side-button" class="fa "><</span> </button> </div> <div class="col-sm-11 "> <div class="row-content-header">{{title}}</div> </div> </div> <div class="main-content"> <button class="btn btn-primary" (click)="buttonClickedDetail()">szczegó y</button> </div></div>

Jak wida , g ówn tre strony umie cili my wewn trz elementu <div> o identyfikatorze "main",do którego dodali my tak e klas "main-content-panel". Obszar tego elementu podzielili mynast pnie na dwie kolumny, których szeroko ci wynosz — odpowiednio — 1 i 11. Ten wierszzawiera przycisk do ukrywania i wy wietlania panelu bocznego oraz element {{title}}. Poni ejtego wiersza nag ówka znajduje si g ówna zawarto strony, która obecnie sk ada si z jednegoprzycisku z napisem szczegó y. Poni ej przedstawione zosta y style CSS okre laj ce posta tejcz ci strony:

#main { margin-left: 250px; transition: .3s;}

#main-body { transition: .3s;}

.main-content { padding: 20px;}

.row-content-header { padding: 5px; font-size: 20px;}





368

Powy szy arkusz zawiera dwie kluczowe regu y, które maj wp yw na posta tre ci prezentowa-nych na stronie. Pierwsz z nich jest regu a margin-left: 250px stylu #main. U ycie w a ciwomargin-left CSS spowoduje przesuni cie g ównej tre ci strony w prawo, kiedy b dzie widocznylewy panel nawigacyjny. Odpowiada ona szeroko ci bocznego panelu nawigacyjnego, okre lonejprzez styl .sidenav { width: 250px; }. Innymi s owy, panel boczny ma szeroko 250px i taksam szeroko ma lewy margines g ównego panelu strony. Po czone zastosowanie tych dwóchstylów pozwala wy wietli boczny panel nawigacyjny i jednocze nie przesuwa w prawo panelg ówny. Pó niej b dziemy zmienia te warto ci z 250px na 0px i na odwrót, by ukrywa i ponowniewy wietla panel boczny.

Drugim kluczowym stylem jest styl zawieraj cy regu CSS transition: .3s;. Okre la ona,ile ma trwa animacja, która b dzie ukrywa lub wy wietla panel boczny, jak równie odpowied-nio przesuwa g ówny panel strony. Po dodaniu tych stylów do arkusza mo emy dopisa dostrony prosty kod JavaScript, który b dzie uruchamia efekt przej cia. W tym celu w kodzieHTML strony musimy zarejestrowa funkcj obs uguj c zdarzenia klikni cia, a nast pnie zde-finiowa t funkcj w pliku app.component.ts. Zacznijmy od przedstawienia kodu definiuj cegoobs ug zdarze klikni cia, umieszczonego w pliku app.component.html:

<button class="btn button-no-borders" (click)="showHideSideClicked()" > <span id="show-hide-side-button" class="fa "><</span></button>

Kolejny fragment kodu przedstawia funkcj showHideSideClicked, która b dzie wywo ywanapo ka dym klikni ciu przycisku do ukrywania i wy wietlania bocznego panelu nawigacyjnego.Oto zmiany, jakie nale y wprowadzi w kodzie pliku app.component.ts:

export class AppComponent { title = 'Wybierz opcj :'; isSideNavVisible = true; showHideSideClicked() { if (this.isSideNavVisible) { document.getElementById('main').style.marginLeft = "0px"; document.getElementById('mySidenav').style.width = "0px"; this.isSideNavVisible = false; } else { document.getElementById('main').style.marginLeft = "250px"; document.getElementById('mySidenav').style.width = "250px"; this.isSideNavVisible = true; } }}

Jak wida , w powy szym fragmencie kodu dodali my do klasy AppComponent now w a ciwoo nazwie isSideNavVisible, której pocz tkowo przypisujemy warto true. W a ciwo ta b dzieprzechowywa informacj o tym, czy boczny panel nawigacyjny jest widoczny, czy nie. Poni ejumieszczona zosta a implementacja funkcji showHideSideClicked. Je li panel boczny jest widoczny,w a ciwo ci marginLeft panelu g ównego przypisujemy warto 0px, podobnie jak w a ciwo ci





369

with elementu mySideNav. Operacje te odpowiadaj zwini ciu panelu bocznego i przesuni ciupanelu g ównego w lewo, tak by zaj ca szeroko strony. Je li natomiast boczny panel nawiga-cyjny jest zwini ty, post pujemy odwrotnie, czyli w a ciwo ciom marginLeft oraz width odpo-wiednich elementów przypisujemy warto 250px, a dodatkowo w a ciwo ci isSideNavVisibleprzypisujemy warto true. Po uruchomieniu aplikacji na obecnym etapie prac mo emy ju ukry-wa i wy wietla panel nawigacyjny, który dzi ki zastosowaniu w a ciwo ci CSS transition: .3sjest animowany w atrakcyjny sposób.

Tworzenie nak adkiTeraz mo emy skoncentrowa si na drugiej stronie, która po klikni ciu przycisku szczegó yb dzie wsuwa si na stron od prawej kraw dzi okna do lewej. T drug stron definiuje po-ni szy fragment kodu HTML:

<div id="mySidenav" class="sidenav"> ... kod panelu bocznego ...</div>

<div id="myRightScreen" class="overlay"> <button class="btn button-no-borders" (click)="closeClicked()"> <span class="fa fa-chevron-left"></span> </button> <div class="overlay-content"> <h1>strona 2.</h1> </div></div>

... istniej cy panel g ówny ...<div id="main" class="main-content-panel">

Jak wida , do kodu pliku app.component.html wstawili my element <div> o identyfikatorzemyRightScreen i dodali my do niego klas CSS overlay. Ten prosty element <div> zawieraumieszczony u góry przycisk, w którym zdefiniowali my funkcj obs uguj c zdarzenia click(closeClikck) oraz element <h1> wy wietlaj cy nag ówek strona 2. Podobnie jak w przypadkupoprzednich elementów strony, tak e teraz do okre lenia postaci tego fragmentu strony b dziemypotrzebowali arkusza stylów. Arkusz ten b dzie musia spe nia dwa podstawowe cele.

Przede wszystkim ta druga strona musi by pocz tkowo przesuni ta w prawo, a my musimydysponowa sposobem, by przesun j w lewo po klikni ciu przycisku szczegó y. Poni ejprzedstawiony zosta kod CSS okre laj cy posta tego elementu:

/* nak adka - strona 2. (t o) */.overlay { height: 100%; width: 100%; position: fixed; /* ma pozostawa w miejscu */ z-index: 1; /* ma by widoczna nad innymi elementami */ left: 0;





370

top: 54px; overflow-x: hidden; /* wy czamy poziomy pasek przewijania */ transition: 0.3s; transform: translateX(100%); border-left: 1px solid;}

Tak e w tym arkuszu u ywane s dwie regu y stylów kontroluj ce sposób wy wietlania tejstrony. Pierwsz z nich jest transform: translateX(100%), a drug transition: 0.3s. Pierwszaw tym przypadku zmienia pocz tkow wspó rz dn X elementu <div> na 100%. Domy lnieoznacza to, e przesuni cie elementu na osi X ma wynosi 100% szeroko ci strony, czyli eelement b dzie ca kowicie wysuni ty poza ni . Z kolei druga regu a — transition: 0.3s —okre la jedynie animacj pokazywania i ukrywania elementu.

Aby pokaza dzia anie tych efektów, zaimplementujemy obs ug klikni na stronie. Najpierwzajmiemy si przyciskiem szczegó y; oto kod u ywanej przez niego funkcji obs ugi zdarze click:

buttonClickedDetail() { document.getElementById('myRightScreen') .style.transform = "translateX(0%)"; document.getElementById('main') .style.transform = "translateX(-100%)";}

Powy sza funkcja wykonuje dwie operacje. Pierwsz jest przypisanie w a ciwo ci transform drugiejstrony warto ci translateX(0%). Jej efekt jest przeciwie stwem u ycia warto ci translateX(100%):przypisuje pocz tkowej warto ci wspó rz dnej X elementu <div> warto 0%. Dzi ki zastoso-waniu w a ciwo ci translate uzyskujemy interesuj cy nas efekt przesuwania elementu od pra-wej do lewej.

Natomiast drug wykonywan operacj jest przypisanie w a ciwo ci transform elementu<div> strony g ównej warto ci translate(-100%). Zapewni to efekt wysuni cia panelu g ównegow lewo. Zanim przetestujemy dzia anie tych efektów przej , zaimplementujemy jeszczefunkcj closeClicked, która b dzie zamyka prawy panel strony. Jej kod zosta przedstawionyponi ej:

closeClicked() { document.getElementById('myRightScreen') .style.transform = "translateX(100%)"; document.getElementById('main') .style.transform = "translateX(0%)";}

Ta funkcja dzia a odwrotnie ni przedstawiona wcze niej funkcja buttonClickedDetail, a jejprzeznaczeniem jest wysuni cie panelu szczegó ów na prawo, tak by g ówny panel strony ponow-nie sta si widoczny. Obie te funkcje wspó pracuj , przypisuj c odpowiednie warto ci transformXw a ciwo ciom transform obu elementów <div>, czyli g ównemu panelowi strony oraz elemen-towi o identyfikatorze myRightScreen.





371

Je li teraz wy wietlimy stron w przegl darce, b dziemy ju mogli klikn przycisk szczegó y,aby zobaczy , jak drugi panel wysuwa si zza prawej kraw dzi okna przegl darki.

Koordynacja efektów przejDotychczas uda o si utworzy prost aplikacj internetow sk adaj c si z panelu g ównego,lewego panelu nawigacyjnego oraz dodatkowego panelu szczegó ów; elementy te upi kszyli myprzy u yciu stylów wzbogaconych o efekty przej , które pozwoli y uzyska atrakcyjn wizu-alnie struktur strony. Niestety w bie cej implementacji naszej aplikacji wyst puj pewneproblemy. Kiedy jednocze nie b dzie widoczna strona g ówna oraz lewy panel nawigacyjny,klikni cie przycisku szczegó y nie spowoduje zamkni cia panelu nawigacyjnego przed wsuni -ciem panelu szczegó ów. W efekcie ta strona szczegó ów zostanie nasuni ta na panel i b dziego cz ciowo przes ania , tak jak pokazano na rysunku 11.6.

Rysunek 11.6. Prawy panel szczegó ów nak adaj cy si na panel nawigacyjny

Problem ten mogliby my rozwi za , wywo uj c zaimplementowan ju funkcj showHideSideClicked, która pozwoli aby ukry panel nawigacyjny. Cho w taki sposób mogliby my wyelimi-

nowa problem z nak adaniem si prawego i lewego panelu, jednak takie rozwi zanie przyczyni-oby si do wyst pienia innego b du: gdyby my przy pocz tkowo widocznym panelu nawigacyj-

nym wy wietlili, a nast pnie ukryli panel szczegó ów, panel nawigacyjny pozosta by niewidoczny.I cho mogliby my próbowa poradzi sobie z tym problemem, ponownie wywo uj c funkcjshowHideSideClicked, tak e i to rozwi zanie przyczyni oby si do wyst powania nowych, dziwacz-nych b dów.

Chocia mogliby my dopracowa logik aplikacji tak, by wyeliminowa wszystkie te b dy,jednak szybko wpadliby my we frustruj cy kr g, w którym próby poprawienia jednego b dyprowadzi yby do wyst powania kolejnych problemów. W naszej aplikacji przyda by si jakimechanizm pozwalaj cy na ledzenie wszystkich elementów wizualnych oraz kontrolowaniereakcji aplikacji na interakcje z u ytkownikiem. I to w a nie w takich przypadkach bardzo przy-daj si wzorce projektowe Stan oraz Mediator.





372

Wzorzec StanJednymi z wielu wzorców projektowych opisanych w ksi ce Gangu Czworga s wzorce Stan(ang. State) oraz Mediator (ang. Mediator). Pierwszy z nich do opisania konkretnego stanu u ywagrupy konkretnych klas maj cych wspóln klas bazow . W ramach przyk adu wyobra mysobie typ wyliczeniowy opisuj cy stany, w jakich mog znajdowa si drzwi. W pierwszymodruchu zapewne uznamy, e drzwi mog by Otwarte lub Zamkni te.

Zastanówmy si jednak, co si stanie z naszym przep ywem sterowania oraz logik dzia aniaaplikacji, je li b dziemy tak e potrzebowali stanów Zamkni teNaKlucz oraz Otworzone b d teje li b dziemy chcieli opisa stany drzwi przesuwnych, takie jak LekkoUchylone, Pó Otwarte,PrawieOtwarte oraz Ca kowicieOtwarte. Wzorzec projektowy Stan pozwala na bardzo proste defi-niowanie wszystkich tych stanów oraz dostosowywanie logiki na podstawie bie cego stanu obiektu.

Je li zastanowimy si nad nasz aplikacj , dojdziemy do wniosku, e jej ekran w ka dej chwilib dzie si znajdowa w konkretnym stanie. Mo e w niej by widoczny b d to panel g ówny,b d te panel szczegó ów. Tak e lewy panel nawigacyjny mo e by widoczny lub ukryty.Potencjalne kombinacje pozwalaj wskaza trzy stany aplikacji:

widoczny tylko panel g ówny, widoczne panele g ówny i nawigacyjny, widoczny panel szczegó ów.

Interfejs stanuWzorzec projektowy Stan u atwia definiowanie takich stanów w kodzie programu. Podstawowzasad , na jakiej opiera si ten wzorzec projektowy, jest utworzenie interfejsu lub abstrakcyjnejklasy bazowej oraz konkretnych klas dla ka dej z mo liwych specjalizacji. W naszej aplikacjiStan musi zapewnia odpowiedzi na dwa pytania.

Czy boczny panel nawigacyjny jest widoczny? Czy jest widoczny panel g ówny, czy panel szczegó ów?

Je li dodatkowo aktualnie jest widoczny panel g ówny, musimy wiedzie , czy w jego lewym,górnym rogu nale y wy wietla przycisk ze strza k <, czy te ze strza k >. Nasz interfejsstanu b dzie zatem mia nast puj c posta :

export enum StateType { MainPanelOnly, MainPanelWithSideNav, DetailPanel}export enum PanelType { Primary, Detail}





373

export interface IState { getPanelType() : PanelType; getStateType() : StateType; isSideNavVisible() : boolean; getPanelButtonClass() : string;}

Powy szy fragment kodu zaczyna si od definicji typu wyliczeniowego StateType, który b dzieprzekazywa informacj o tym, w którym z trzech stanów aplikacja si aktualnie znajduje. Nast p-nie zdefiniowali my typ wyliczeniowy PanelType, który b dzie s u y do okre lania, czy aktualniejest widoczny panel g ówny (Primary), czy te panel szczegó ów (Detail). Nasz interfejs stanuIState okre la cztery funkcje. Pierwsza z nich, getPanelType, zwraca warto typu PanelType;a druga, getStatePanel, warto typu StateType. Kolejna funkcja, isSideNavVisible, zwraca war-to logiczn okre laj c , czy boczny panel nawigacyjny jest widoczny, czy nie. I w ko cu ostatniaz funkcji, getPanelButtonClass, b dzie zwraca nazw klasy CSS pozwalaj c na zmian przyci-sku < na >, zale nie od stanu bocznego panelu nawigacyjnego.

Tworz c ten interfejs, zdefiniowali my jednocze nie pytania, które mo emy zadawa ka dejz konkretnych klas reprezentuj cych stany naszej aplikacji. Odpowiedzi na te pytania b d niecoinne w zale no ci od tego, czy widoczny b dzie panel g ówny, czy panel szczegó ów. Tak wygl -daj podstawowe za o enia wzorca projektowego Stan. Nale y zdefiniowa interfejs zwracaj cyodpowiedzi na wszelkie pytania dotycz ce stanu, a nast pnie u ywa go w kodzie aplikacji.Takie rozwi zanie pozwala odseparowa implementowan logik korzystaj c ze stanów od samejdefinicji tych stanów. Innymi s owy, dodawanie nowych czy te usuwanie istniej cych stanównie b dzie mia o adnego wp ywu na kod korzystaj cy z interfejsu IState.

Konkretne stanyA teraz przyjrzyjmy si trzem konkretnym klasom, reprezentuj cym stany, w jakich mo e siznajdowa aplikacja. Oto pierwsza z nich:

export class MainPanelOnly implements IState { getPanelType() : PanelType { return PanelType.Primary; } getStateType() : StateType { return StateType.MainPanelOnly; } getPanelButtonClass() : string { return 'fa-chevron-right';} isSideNavVisible() : boolean { return false; }}

Powy szy fragment kodu przedstawia definicj klasy MainPageOnly opisuj cej stan w sytuacji,gdy boczny panel nawigacyjny nie jest widoczny, a wy wietlony jest panel g ówny. To naprawdbardzo prosta klasa implementuj ca interfejs IState, a dzia anie ka dej z czterech funkcji interfej-su sprowadza si jedynie do zwracania odpowiednich warto ci. Na podstawie tych warto ci wida ,e wy wietlony jest panel g ówny (PanelType.Primary), funkcja IsSideNavVisible zwraca false,

a do wy wietlenia przycisku steruj cego widoczno ci panelu nawigacyjnego u ywana b dzieklasa 'fa-chevron-right'. Jak pokazuje poni szy fragment kodu, pozosta e dwie konkretneklasy s bardzo podobne:





374

export class MainPanelWithSideNav implements IState { getPanelType() : PanelType { return PanelType.Primary; } getStateType() : StateType { return StateType.MainPanelWithSideNav; } getPanelButtonClass() : string { return 'fa-chevron-left';} isSideNavVisible() : boolean { return true; }}

export class DetailPanel implements IState { getPanelType() : PanelType { return PanelType.Detail; } getStateType() : StateType { return StateType.DetailPanel; } getPanelButtonClass() : string { return '';} isSideNavVisible() : boolean { return false; }}

Jak wida , klasa MainPanelWithSideNav jest niemal taka sama jak klasa MainPanel, z t ró nic ,e jej funkcja isSideNavVisible zwraca warto true, a funkcja getPanelButtonClass zwracaa cuch znaków 'fa-chevron-left'. Z kolei funkcje klasy DetailPanel zwracaj nast puj ce war-

to ci: funkcja getPanelType warto PanelType.Detail, funkcja isSideNavVisible warto false,a funkcja getPanelButtonClass pusty a cuch znaków.

Wszystkie te trzy klasy s bardzo proste i opisuj stan, w jakim ma by interfejs u ytkownikaaplikacji zale nie od stanu aplikacji. Klasy te pozwol nam hermetyzowa logik niezb dndo zarz dzania ró nymi elementami widocznymi na ekranie.

Wzorzec MediatorSkoro uda o si ju opisa ró ne stany, w jakich mo e si znajdowa interfejs u ytkownika naszejaplikacji, mo emy zacz implementowa logik wymagan do przechodzenia pomi dzy tymistanami. Wzorzec Mediator s u y do definiowania wzajemnych interakcji w zbiorze obiektów.Wzorzec ten wstrzykuje obiekt Mediator pomi dzy obiekty, które wzajemnie na siebie wp ywaj ,dzi ki czemu obiekty nie przestaj komunikowa si ze sob bezpo rednio. Takie rozwi zanieu atwia wprowadzanie lu nych powi za pomi dzy obiektami, które maj wspó pracowa .

Wzorzec Mediator sk ada si z dwóch g ównych cz ci. Pierwsz z nich jest interfejs, któregoMediator mo e u ywa w celu wprowadzania niezb dnych zmian. W naszej aplikacji Mediatorb dzie musia dysponowa mo liwo ci sygnalizowania interfejsowi u ytkownika, e nale y wy-wietli lub ukry panel g ówny b d te wy wietli lub ukry panel szczegó ów. Oprócz tego

Mediator b dzie potrzebowa mo liwo ci zmieniania postaci przycisku — z < na > i na odwrót— w zale no ci od bie cego stanu aplikacji. Mediator musi tak e dysponowa rejestrem wszyst-kich dopuszczalnych stanów, a w odpowiedzi na zmian stanu aplikacji b dzie wywo ywafunkcje interfejsu u ytkownika.





375

Definiuj c interfejs dla tych interakcji, post pujemy zgodnie z najlepszymi praktykami progra-mowania obiektowego i oddzielamy kod wzorca Mediator od faktycznej implementacji logikiodpowiedzialnej za zmiany w interfejsie u ytkownika. Dzi ki temu b dziemy tak e mogli przete-stowa logik dzia ania Mediatora bez konieczno ci wykorzystania w tym celu faktycznego inter-fejsu u ytkownika.

Nasz interfejs Mediatora b dzie mie nast puj c posta :

export interface IMediatorImpl { showNavPanel(); hideNavPanel(); showDetailPanel(); hideDetailPanel(); changeShowHideSideButton(fromClass: string, toClass: string);}

W pi ciu powy szych funkcjach zawarli my wszelkie zmiany interfejsu u ytkownika, jakichmo e wymaga nasza aplikacja. Mo emy zatem wy wietli lub ukry panel nawigacyjny, wy wie-tli lub ukry panel szczegó ów oraz zmieni klas okre laj c posta przycisku.

Analizuj wprowadzone modyfikacje, mo na zauwa y , e pod dwoma wzgl dami uda o siupro ci logik biznesow naszej aplikacji. Przede wszystkim zdefiniowali my stany, w jakichmo e si znajdowa jej interfejs u ytkownika, a po drugie, zdefiniowali my funkcje niezb dnedo wprowadzania zmian w jej wygl dzie. W ten sposób dotarli my ju ca kiem daleko na drodzedo utworzenia modularnej, obiektowej i atwej do zrozumienia aplikacji, której kodem b dziemo na wygodnie zarz dza .

Modularny kodNa obecnym etapie prac nasza aplikacja dysponuje ju ca ym kodem HTML i CSS oraz fragmen-tem logiki biznesowej zaimplementowanej w klasie AppComponent. Cho rozdzielili my ju tklas na pliki app.component.html i app.component.css, to i tak zawieraj one kilka odr bnychkomponentów. Skorzystajmy zatem z okazji, by nieco poprawi modularno naszego kodu.W tym celu wprowadzimy trzy nowe klasy.

NavbarComponent: ta klasa b dzie wy wietla i obs ugiwa pasek nawigacyjnyumieszczony na samej górze strony.

SideNavComponent: ta klasa b dzie wy wietla lewy panel nawigacyjny. RightScreenComponent: z kolei ta klasa b dzie obs ugiwa panel szczegó ów

wsuwany i wysuwany z prawej strony.

Wprowadzenie tych trzech nowych komponentów oznacza, e klasa AppComponent stanie sicentraln klas aplikacji i b dzie odpowiada za koordynacj funkcjonowania wszystkichtrzech pozosta ych komponentów.





376

Komponent NavbarNajpierw zajmiemy si klas NavbarComponent, której jedynym zadaniem b dzie wy wietlaniepaska nawigacyjnego umieszczonego na samej górze strony. W tym celu utworzymy w kataloguapp dwa nowe pliki — navbar.component.ts oraz navbar.component.html.

Zawarto pliku HTML wystarczy skopiowa z istniej cego ju pliku app.component.html:

<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-sm"> <a class="navbar-brand"> </a> <div class="nav navbar-nav"> <a class="nav-item nav-link active">Strona g ówna</a> <a class="nav-item nav-link">Produkty</a> <a class="nav-item nav-link">O nas</a> </div></nav>

Kolejny listing przedstawia kod klasy NavbarComponent:

import { Component } from '@angular/core';

@Component( { selector: 'navbar-component', templateUrl: './app/navbar.component.html'})

export class NavbarComponent {

}

To bardzo prosta klasa Angular 2, która w dekoratorze @Component odwo uje si do okre lonegopliku HTML i okre la w a ciwo selector. Aby u y tej nowej klasy w aplikacji, musimy jzarejestrowa we frameworku Angular, a nast pnie umie ci znacznik <navbar-component> w plikuapp.component.html. Rejestracja komponentu sprowadza si do zaimportowania go do plikuapp.module.ts, tak jak pokazano na poni szym przyk adzie:

import { AppComponent } from './app.component';

// Do czamy, aby mo na by o odszuka dany modu .import { NavbarComponent } from './navbar.component';

@NgModule({ declarations: [ AppComponent, NavbarComponent ], imports: [ BrowserModule, FormsModule, HttpModule ],





377

providers: [], bootstrap: [AppComponent]})export class AppModule { }

Jak wida , w tym pliku dodali my instrukcj import odwo uj c si do naszego nowego modu unavbar.component, a nast pnie zaktualizowali my zawarto tablicy declarations dekoratora@NgModule. To w a nie dodanie wpisu do tablicy declarations powoduje zarejestrowanie znacznika<navbar-component> i umo liwia stosowanie go w kodzie HTML szablonów. Ostatni zmian ,jak musimy wprowadzi , jest oddanie znacznika <navbar-component> do pliku app.component.html.Po wprowadzeniu tych zmian nasza aplikacja b dzie ju u ywa modu u navbar.componentpodczas wy wietlania strony.

Komponent SideNavTeraz w bardzo podobny sposób zaimplementujemy komponent SideNavComponent, który b dzieodpowiada za wy wietlanie i obs ug lewego panelu nawigacyjnego. W tym przypadku b dziemymusieli utworzy trzy nowe pliki: sidenav.component.ts, sidenav.component.html oraz sidenav.

component.css. Podobnie jak we wcze niejszym komponencie, tak e i w tym plik HTMLb dzie zawiera kopi fragmentu kodu HTML z istniej cego pliku app.component.html:

<div id="mySidenav" class="sidenav"> <a href="#">Informacje</a> <a href="#">Us ugi</a> <a href="#">Klienci</a> <a href="#">Kontakt</a></div>

Poni ej przedstawiony zosta kod klasy SideNavComponent:

import { Component } from '@angular/core';

@Component( { selector: 'sidenav-component', templateUrl: './sidenav.component.html', styleUrls: ['./sidenav.component.css']})

export class SideNavComponent { closeNav() { document.getElementById('mySidenav').style.width = "0px"; }

showNav() { document.getElementById('mySidenav').style.width = "250px"; }}





378

Tak e w tym przypadku mamy do czynienia ze stosunkowo prost klas Angular 2, która w deko-ratorze @Component rejestruje w a ciwo selector i okre la u ywane pliki HTML i CSS. Nale yjednak zwróci uwag , e klasa ta definiuje dwie funkcje — closeNav oraz showNav. Funkcje teustawiaj warto w a ciwo ci CSS style.width na — odpowiednio — 0px oraz 250px. W tensposób uda o si nam w praktyce hermetyzowa w jednej klasie wszystkie mo liwo ci funkcjonal-ne zwi zane z bocznym panelem nawigacyjnym. W a nie na tym polega zasada jednej odpowie-dzialno ci — klasa powinna robi tylko jedn rzecz.

Teraz mo emy ju zarejestrowa ten nowy komponent w pliku app.module.ts, tak samo jak zrobili-my to poprzednio, a nast pnie doda znacznik <sidebar-component> do pliku app.component.html.

Komponent RightScreenZajmijmy si zatem ostatnim komponentem naszej aplikacji, który b dzie odpowiada za wy wie-tlanie i obs ug panelu szczegó ów. Nadamy mu nazw RightScreenComponent. Tak e dla niegoutworzymy plik rightscreen.component.ts oraz odpowiednie pliki HTML i CSS. Plików HTMLi CSS tego komponentu nie b dziemy tu przedstawia , gdy zawieraj one jedynie skopiowanei wklejone fragmenty kodu z wcze niejszych plików app.component.html i app.component.css.Przyjrzymy si natomiast kodowi klasy tego komponentu:

import { Component, EventEmitter, Output } from '@angular/core';

@Component( { selector: 'rightscreen-component', templateUrl: './rightscreen.component.html', styleUrls: ['./rightscreen.component.css']})

export class RightScreenComponent{ @Output() notify: EventEmitter<string> = new EventEmitter<string>();

closeClicked() { this.notify.emit('Click from nested component'); }

closeRightWindow() { document.getElementById('myRightScreen') .style.transform = "translateX(100%)"; }

openRightWindow() { document.getElementById('myRightScreen') .style.transform = "translateX(0%)"; }}





379

Ta klasa jest bardzo podobna do poprzednich, gdy tak e ona okre la w dekoratorze @Componentu ywany znacznik (we w a ciwo ci selector), plik szablonu (we w a ciwo ci templateUrl)oraz plik CSS. Dalsza cz powy szego kodu to klasa komponentu RightScreenComponent,która definiuje trzy funkcje: closeClicked, closeRightWindow oraz openRightWindow. FunkcjecloseRightWindow oraz openRightWindow ustawiaj warto ci w a ciwo ci CSS style.transform,tak samo jak robili my to w pierwotnej wersji aplikacji opisanej w poprzednim podrozdziale.

Znacznie bardziej interesuj ca jest natomiast funkcja closeClicked oraz zastosowanie czegonowego, co ma nazw EventEmitter. Nale y zwróci uwag , e zarówno EventEmitter, jak i deko-rator Output zaimportowali my na samym pocz tku pliku w instrukcji import. Angular 2 u ywadekoratora w a ciwo ci @Output oraz klasy ogólnej EventEmitter, by zapewni komponentommo liwo informowania innych komponentów o zdarzeniach.

Pami tamy zapewne, e panel szczegó ów ma w lewym, górnym rogu przycisk, który pozwalana jego zamkni cie i wy wietlenie panelu g ównego. Oto fragment kodu HTML generuj cyten przycisk:

<button class="btn button-no-borders" (click)="closeClicked()"> <span class="fa fa-chevron-left"></span></button>

Jak wiemy, sk adnia u ywana we frameworku Angular 2 do obs ugi zdarze click DOM manast puj c posta : (click)="<funkcjaObs ugi>". W przedstawionym kodzie HTML taka funkcjaobs ugi ma nazw closeClicked, dlatego te funkcj o takiej nazwie musimy zdefiniowa w na-szym komponencie.

Niemniej jednak klasa RightScreenComponent kontroluje jedynie obszar swojego kodu HTMLi z tego wzgl du nie mo e implementowa mo liwo ci funkcjonalnych zwi zanych z innymiobszarami interfejsu u ytkownika aplikacji. Oznacza to, e jedyn operacj , jak mo emy w tymkomponencie wykona , jest zg oszenie zdarzenia informuj cego o klikni ciu przycisku — innefragmenty aplikacji b d musia y na to zdarzenie jako zareagowa . Tak e to rozwi zanie dosko-nale pasuje do zasady projektowej jednej odpowiedzialno ci.

Przyjrzyjmy si nieco dok adniej sk adni zastosowania klasy EventEmitter:

@Output() notify: EventEmitter<string> = new EventEmitter<string>();

closeClicked() { this.notify.emit('Klikni to w komponencie zagnie d onym.');}

Emiter zdarze przygotowujemy, dodaj c dekorator @Output do w a ciwo ci notify. Nast pnieokre lamy, e typem tej w a ciwo ci b dzie EventEmitter<string> i od razu tworzymy nowinstancj klasy EventEmitter. Klasa EventEmitter jest klas ogóln , a to oznacza, e podczastworzenia jej instancji mogliby my u y parametru typu <number> czy <boolean>, a nawet zamiasttypu prostego skorzysta z jakiej klasy z o onej.





380

Poniewa w a ciwo notify jest instancj EventEmitter typu string, zatem w kodzie funkcjicloseClicked mo emy u y wywo ania this.notify.emit i przekaza w nim a cuch znaków.To jedno wywo anie spowoduje wyemitowanie zdarzenia, kiedy u ytkownik kliknie przyciskprezentowany przez nasz komponent.

Teraz musimy zdefiniowa funkcj , która b dzie te zdarzenia obs ugiwa . Poniewa za tworzenieoraz kontrolowanie komponentu RightScreenComponent odpowiada klasa AppComponent, w plikuapp.component.html musimy zarejestrowa funkcj obs uguj c te zdarzenia. W tym przypadkuznacznik wy wietlaj cy nasz komponent b dzie mie nast puj c posta :

<rightscreen-component (notify)='onNotifyRightWindow($event)'></rightscreen-component>

Jak wida , do znacznika <rightscreen-component> dodali my atrybut pozwalaj cy zarejestrowazdarzenie (notify), a nast pnie wywo ali my funkcj onNotifyRightWindow. Funkcja ta zostaniezdefiniowana w klasie AppComponent. Na razie funkcja ta mo e jedynie wy wietla komunikatinformuj cy o obs u eniu zdarzenia — w ten sposób zyskamy pewno , e zdarzenie jest zg a-szane i obs ugiwane.

onNotifyRightWindow(message:string):void { alert('klikni to przycisk');}

Niebawem pod czymy t funkcj obs ugi zdarze do klasy naszego Mediatora — w ten sposóbwymusimy przej cie aplikacji do innego stanu.

Komponenty podrz dneTeraz klasa AppComponent jest w a cicielem ca ej aplikacji. Wy wietla kod HTML ca ej strony,w tym tak e komponentów navbar, sidenav, rightscreen oraz panelu g ównego. Jako taka jesttak e elementem nadrz dnym dla tych podkomponentów. Innymi s owy, wszystkie utworzonewcze niej komponenty s komponentami podrz dnymi klasy AppComponent. Czasami s one tak enazywane komponentami potomnymi. Obecnie potrzebujemy jeszcze jakiego sposobu, którypozwoli by na odwo ywanie si w kodzie klasy AppComponent do komponentów SideNavComponentoraz RightScreenComponent. Chodzi tu o powi zanie instancji klas utworzonych przy u yciu znacz-ników HTML <sidenav-component> oraz <rightscreen-component>.

Angular udost pnia dekorator w a ciwo ci o nazwie @ViewChild, który s u y w a nie do tego celu.Aby go zastosowa w naszej aplikacji, musimy wprowadzi w kodzie klasy AppComponent zmianyprzedstawione na poni szym przyk adzie:

import { Component, ViewChild } from '@angular/core';import { SideNavComponent } from './sidenav.component';import { RightScreenComponent } from './rightscreen.component'... @Component ...export class AppComponent{





381

@ViewChild(SideNavComponent) private sideNav : SideNavComponent; @ViewChild(RightScreenComponent) private rightScreen: RightScreenComponent;

... dalszy kod klasy ...

Jak wida , w kodzie klasy wprowadzili my ca kiem sporo zmian. Przede wszystkim zaimportowa-li my dekorator ViewChild z modu u @angular/core, a nast pnie modu y SideNavComponentoraz RightScreenComponent. Oprócz tego zdefiniowali my dwie prywatne w a ciwo ci o nazwachsideNav oraz rightScreen, które b d przechowywa instancje komponentów podrz dnych.

Nast pnie zastosowali my dekorator @ViewChild, przekazuj c do niego nazw klasy, do którejchcemy si odwo ywa . Oznacza to, e dekorator @ViewChild(SideNavComponent) powi e prywatnw a ciwo sideNav z odpowiedni instancj klasy SideNavComponent.

Analogicznie sprawimy, e framework powi e instancj klasy RightScreenComponent u yt w kodzieHTML aplikacji z prywatn w a ciwo ci rightScreen. W ten sposób nasza klasa AppComponentdysponuje ju programowym dost pem do obu klas, które zosta y u yte w kodzie HTML.

Implementacja interfejsu mediatoraSkoro klasa AppComponent dysponuje ju dost pem do swoich komponentów podrz dnych,mo emy przyst pi do implementacji interfejsu IMediatorImpl. Kod tej implementacji zostaprzedstawiony poni ej:

showNavPanel() { this.sideNav.showNav(); document.getElementById('main').style.marginLeft = "250px";}hideNavPanel() { this.sideNav.closeNav(); document.getElementById('main').style.marginLeft = "0px";}showDetailPanel() { this.rightScreen.openRightWindow(); document.getElementById('main').style.transform = "translateX(-100%)";}hideDetailPanel() { this.rightScreen.closeRightWindow(); document.getElementById('main').style.transform = "translateX(0%)";}changeShowHideSideButton(fromClass: string, toClass: string) { if (fromClass.length > 0 && toClass.length > 0) { document.getElementById('show-hide-side-button') .classList.remove(fromClass); document.getElementById('show-hide-side-button') .classList.add(toClass); }}





382

Pierwsz z funkcji zdefiniowanych w powy szym fragmencie kodu jest showNavPanel. Funkcja tawywo uje implementacj funkcji showNav komponentów podrz dnego sideNav, a nast pniemodyfikuje styl marginLeft elementu DOM o identyfikatorze 'main'. Funkcja hideNavPanel jestbardzo podobna, lecz ma odwrotne dzia anie. Kolejna ze zdefiniowanych funkcji showDetailPanelwywo uje implementacj funkcji openRightWindow komponentu podrz dnego rightScreen,a nast pnie ustawia warto w a ciwo ci transform elementu DOM o identyfikatorze 'main'.Po dodaniu do kodu implementacji tych funkcji mo emy skoncentrowa si na samej klasieMediator.

Klasa MediatorKlasa Mediator odpowiada za koordynacj ogólnego stanu aplikacji oraz za interakcje pomi dzyposzczególnymi klasami jej interfejsu u ytkownika. Oznacza to, e musi zawiera trzy kluczowesk adniki. Przede wszystkim musi dysponowa konkretn implementacj interfejsu IMediatorImpl,tak by mog a wywo ywa odpowiednie funkcje, kiedy pojawi si konieczno aktualizacji interfej-su u ytkownika aplikacji. Przed chwil zaimplementowali my ten interfejs w klasie AppComponent,a zatem b dziemy musieli przekaza do klasy Mediator referencj do instancji klasy AppComponent.

Poza tym klasa Mediator b dzie potrzebowa konkretnych instancji ka dej z klas stanu, tak bymog a odtworzy zarówno bie cy stan aplikacji, jak i nast pny stan, w jakim ma si na znale .Dzi ki temu klasa b dzie mog a porówna bie cy stan z nast pnym i na tej podstawie okre lizmiany, jakie nale y wprowadzi , by przej do tego nast pnego stanu.

I w ko cu klasa Mediator b dzie musia a przechowywa bie cy stan aplikacji. Poniewa odpo-wiada ona za przechodzenie od jednego stanu do drugiego, zatem ca kiem sensowne jest potrak-towanie jej jako jedynego i w pe ni wiarygodnego ród a wszelkich informacji dotycz cychstanu aplikacji. Oprócz tego wsz dzie tam, gdzie mo liwo ci funkcjonalne interfejsu u ytkownikas zale ne od bie cego stanu aplikacji, mo emy przekazywa do klasy Mediator wszelkie zapy-tania dotycz ce tego, co nale y zrobi , by to ona podj a za nas odpowiednie decyzje.

Pami taj c o tych wszystkich za o eniach, przeanalizujmy teraz w a ciwo ci oraz funkcj kon-struktora naszej klasy Mediator:

export class Mediator { private _mainPanelState = new MainPanelOnly(); private _detailPanelState = new DetailPanel(); private _sideNavState = new MainPanelWithSideNav();

private _currentState: IState; private _currentMainPanelState: IState; private _mediatorImpl: IMediatorImpl;

constructor(mediatorImpl: IMediatorImpl) { this._mediatorImpl = mediatorImpl; this._currentState = this._currentMainPanelState = this._sideNavState; }





383

Na samym pocz tku tej klasy umie cili my definicje trzech w a ciwo ci, w których zapisane zosta-n instancje konkretnych klas stanu, maj one nazwy: _mainPanelState, _detailPanelStateoraz _sideNavState. Kolejne dwie w a ciwo ci to _currentState oraz _currentMainPanelStatei obie s typu IState. B d one u ywane do przechowywania bie cego stanu samej aplikacjii stanu panelu g ównego. Musimy pami ta , e je li prze czymy si z panelu g ównego na panelszczegó ów i z powrotem na panel g ówny, to lewy panel nawigacyjny powinien pojawi siw takim samym stanie, w jakim by na pocz tku tej sekwencji czynno ci. W a nie do tego celub dzie s u y w a ciwo _currentMainPanel.

Kolejn funkcj klasy Mediator, któr si zajmiemy, b dzie prosta funkcja wytwórcza o nazwiegetStateImpl, zwracaj ca konkretne instancje obiektów typu IState, wybierane na podstawieparametru typu StateType. Kod tej funkcji zosta przedstawiony na poni szym przyk adzie:

getStateImpl(stateType: StateType) : IState { var stateImpl : IState; switch(stateType) { case StateType.DetailPanel: stateImpl = this._detailPanelState; break; case StateType.MainPanelOnly: stateImpl = this._mainPanelState; break; case StateType.MainPanelWithSideNav: stateImpl = this._sideNavState; break; } return stateImpl;}

Jak wida , jest to prosta funkcja pomocnicza, zwracaj ca odpowiedni implementacj obiektustanu w zale no ci od przekazanej warto ci typu wyliczeniowego StateType.

W ko cu mo emy przej do kluczowego elementu klasy Mediator — funkcji zarz dzaj cejzmianami interfejsu u ytkownika podczas przechodzenia aplikacji z jednego stanu do drugiego.Kod tej funkcji zosta przedstawiony na poni szym przyk adzie:

moveToState(stateType: StateType) { var previousState = this._currentState; var nextState = this.getStateImpl(stateType);

if (previousState.getPanelType() == PanelType.Primary && nextState.getPanelType() == PanelType.Detail ) { this._mediatorImpl.showDetailPanel(); } if (previousState.getPanelType() == PanelType.Detail && nextState.getPanelType() == PanelType.Primary) { this._mediatorImpl.hideDetailPanel(); }





384

if (nextState.isSideNavVisible()) this._mediatorImpl.showNavPanel(); else this._mediatorImpl.hideNavPanel();

this._mediatorImpl.changeShowHideSideButton( previousState.getPanelButtonClass(), nextState.getPanelButtonClass() );

this._currentState = nextState; if (this._currentState.getPanelType() == PanelType.Primary ) { this._currentMainPanelState = this._currentState; }}

Powy sza funkcja moveToState implementuje ca logik konieczn do obs ugi trzech stanówaplikacji. Jej kod rozpoczyna si od zadeklarowania dwóch zmiennych — previousState oraznextState. Pierwsza z nich, czyli previousState, okre la stan, w którym aplikacja znajdujesi obecnie; z kolei zmienna nextState zawiera stan nast pny, okre lony na podstawie parametrustateType. Po przygotowaniu tych dwóch obiektów mo emy ju zacz porównywa ich w a ci-wo ci oraz odpowiednio wywo ywa funkcje interfejsu IMediatorImpl.

Przeanalizujmy pierwsz instrukcj warunkow if. Jej logika stwierdza, co nast puje. Je eli jest wy wietlony panel g ówny, a my chcemy przej do panelu szczegó ów,

musimy poinstruowa interfejs u ytkownika aplikacji, e nale y wy wietli panelszczegó ów.

A to stwierdza druga instrukcja if. Je eli jeste my na stronie szczegó ów i chcemy wy wietli panel g ówny, musimy

poinstruowa interfejs u ytkownika aplikacji, e nale y zamkn panel szczegó ów.

Oto, co twierdzi trzecia z instrukcji if. Je li stan aplikacji informuje, e lewy panel nawigacyjny powinien by widoczny,

nale y go wy wietli ; w przeciwnym razie trzeba ten panel ukry .

Nast pnie wywo ujemy funkcj , która odpowiednio zmieni ikon wy wietlan na przycisku doukrywania i wy wietlania bocznego panelu nawigacyjnego. Spowoduje to zmian znaku wy wie-tlanego na tym przycisku z < na > lub na odwrót, w zale no ci od w a ciwo ci bie cegoi nast pnego stanu.

Po zako czeniu wprowadzania zmian w interfejsie u ytkownika musimy jeszcze zapisa nowystan aplikacji.

I w ko cu ostatnia instrukcja if tej funkcji stwierdza, e je li aktualnie jest widoczny panelg ówny, nale y odpowiednio zaktualizowa warto w a ciwo ci _currentMainPanelState. Musimyzapisa t warto , aby my po wy wietleniu panelu szczegó ów i powrocie do panelu g ównegomogli prawid owo odtworzy stan lewego panelu nawigacyjnego.





385

Funkcja ta zawiera wszystkie operacje niezb dne do zmieniania stanu aplikacji, wyra one w for-mie prostych i zrozumia ych instrukcji. Niezb dn logik uda o si sprowadzi do zadawaniakilku prostych pyta i wykonywania równie prostych czynno ci w zale no ci od uzyskanychodpowiedzi.

Stosowanie klasy MediatorOstatnim etapem implementacji wzorców projektowych Stan oraz Mediator jest wywo aniezmiany stanu. Operacj t mo e wywo a jawne danie przej cia do konkretnego stanu umiesz-czone w kodzie b d te mo e stanowi ona reakcj na jakie zdarzenia zachodz ce w interfejsieu ytkownika. Przede wszystkim musimy utworzy now instancj klasy Mediator i zarejestrowaklas AppComponent jako implementacj interfejsu IMediatorImpl. Oto zmiany, jakie musimy w tymcelu wprowadzi :

export class AppComponent implements IMediatorImpl{ ... istniej cy kod klasy ... mediator: Mediator = new Mediator(this);

W powy szym fragmencie kodu zaznaczyli my, e klasa AppComponent implementuje interfejsIMediatorImpl, a nast pnie zdefiniowali my zmienn lokaln o nazwie mediator. W tej zmiennejzapisujemy now instancj klasy Mediator, do której przekazali my referencj this (czyli instancjklasy AppComponent). W praktyce oznacza to, e rejestrujemy klas AppComponent jako implementa-cj interfejsu IMediatorImpl, której nasz Mediator b dzie u ywa do modyfikowania interfejsuu ytkownika aplikacji.

Po zarejestrowaniu klasy AppComponent w Mediatorze, mo emy go ju u y do wywo ania zmianystanu aplikacji. W ramach przyk adu zagwarantujemy, e bezpo rednio po uruchomieniu apli-kacji b dzie widoczny jedynie jej panel g ówny; innymi s owy, przejdziemy do stanu StateType.MainPanelOnly. W tym celu musimy odwo a si do cyklu wy wietlania komponentów frame-

worka Angular i zaimplementowa funkcj o nazwie ngAfterViewInit. Niezb dne modyfikacjezosta y przedstawione na poni szym listingu:

export class AppComponent implements IMediatorImpl, AfterViewInit{ ... istniej cy kod klasy ... ngAfterViewInit() { this.mediator.moveToState(StateType.MainPanelOnly); }

W powy szym fragmencie kodu zaznaczyli my, e klasa AppComponent implementuje interfejsAfterViewInit. Interfejs ten definiuje jedn funkcj ngAfterViewInit i to w a nie jej u yjemy,by przej do stanu MainPanelOnly. Funkcja ta jest automatycznie wywo ywana przez frameworkAngular po zainicjalizowaniu pocz tkowego widoku komponentu. Oznacza to, e Angular juprzeanalizowa kod HTML komponentu, utworzy wszelkie widoki podrz dne i przes a ca y kod





386

HTML do przegl darki. Dopiero w tym momencie dysponujemy referencjami do komponentówpodrz dnych SideNavComponent oraz RightScreenComponent, niezb dnymi do dzia ania klasyMediator.

Teraz po wczytaniu nasza aplikacja b dzie wy wietlana w odpowiednim stanie.

Reagowanie na zdarzenia DOMJu niemal uda o si nam dotrze do ko ca implementacji wzorców projektowych Stan i Media-tor. Ostatnim elementem uk adanki jest nas uchiwanie zdarze click DOM i wykorzystanieich do zmiany stanu aplikacji. Zaczniemy od zmodyfikowania funkcji buttonClickedDetail,której nowy kod zosta przedstawiony poni ej:

buttonClickedDetail() { this.mediator.moveToState(StateType.DetailPanel);}

Funkcja ta jest wywo ywana, kiedy u ytkownik kliknie przycisk szczegó y umieszczony na panelug ównym. Obecnie jedyn operacj , jak ta funkcja musi wykona , jest wywo anie funkcjimoveToState obiektu Mediator, aby zmieni stan aplikacji na DetailPanel. Naprawd trudno sobiewyobrazi co prostszego.

Dodatkowo musimy tak e zmodyfikowa funkcj obs uguj c klikni cia przycisku umieszczo-nego na panelu szczegó ów. Musimy pami ta , e skojarzyli my zdarzenia generowane przyu yciu klasy EventEmitter w komponencie RightScreenComponent z funkcj obs ugi zdarzeonNotifyRightWindow w klasie AppComponent. Teraz mo emy zmodyfikowa t funkcj obs ugizdarze w nast puj cy sposób:

onNotifyRightWindow(message:string):void { this.mediator.moveToState(this.mediator.getCurrentMainPanelState());}

Jak wida , dzia anie tej funkcji sprowadza si do przej cia do poprzedniego zapami tanego stanupanelu g ównego. Równie w tym przypadku trudno sobie wyobrazi jakie prostsze rozwi zanie.

Ostatni interakcj , któr musimy obs u y , s klikni cia przycisku pokazuj cego i ukrywaj cegolewy panel nawigacyjny. Trzeba pami ta , e rezultat klikni cia tego przycisku b dzie niecoinny w zale no ci od tego, czy pasek nawigacyjny b dzie w danym momencie widoczny, czy nie.A zatem to nie klasa AppComponent powinna podejmowa decyzj , co zrobi po klikni ciu tegoprzycisku, gdy decyzja ta zale y od bie cego stanu aplikacji.

A zatem sensownym rozwi zaniem b dzie przechwytywanie zdarze klikni cia tego przyciskuw klasie AppComponent, a nast pnie przekazanie podj cia decyzji, jak je obs u y , klasie Mediator,gdy to w a nie ona przechowuje wszystkie informacje o bie cym stanie aplikacji.





387

Kod funkcji obs uguj cej klikni cia tego przycisku umieszczony w klasie AppComponent ma nast -puj c posta :

showHideSideClicked() { this.mediator.showHideSideNavClicked();}

Jak wida , ca e dzia anie tej funkcji sprowadza si do wywo ania funkcji showHideSideNavClickedklasy Mediator, która z kolei jest zaimplementowana w nast puj cy sposób:

showHideSideNavClicked() { switch (this._currentState.getStateType()) { case StateType.MainPanelWithSideNav: this.moveToState(StateType.MainPanelOnly); break; case StateType.MainPanelOnly: this.moveToState(StateType.MainPanelWithSideNav); break; }}

Funkcja ta sprawdza stan aplikacji, odwo uj c si do obiektu _currentState, i na podstawie uzy-skanych informacji powoduje przej cie aplikacji do stanu MainPanelOnly lub MainPanelWithSideNav.

Teraz nasza implementacja wzorców Stan i Mediator jest ju kompletna.

PodsumowanieW tym rozdziale dok adnie przyjrzeli my si tworzeniu aplikacji Angular 2. Przy okazji poekspe-rymentowali my troch z uk adem strony wykorzystuj cym dwa panele przesuwane w poziomiei przekonali my si , jak mo na korzysta ze stylów i efektów przej CSS do tworzenia atrakcyj-nych wizualnie stron WWW. Niestety nasze pocz tkowe próby napisania aplikacji zako czy ysi sporym zamieszaniem i problemami ze zmiennymi lokalnymi, których u ywali my do kontro-lowania stanu poszczególnych elementów interfejsu u ytkownika.

Aby rozwi za ten problem, cofn li my si nieco i poznali my wzorce projektowe Stan i Mediator;dowiedzieli my si tak e, w jaki sposób mog one pomóc w zarz dzaniu zmianami stanu aplikacji.Nast pnie poddali my nasz aplikacj gruntownej refaktoryzacji, w ramach której podzielili myjej kod na sensowne komponenty. Nast pnie zastosowali my wzorce projektowe Stan i Mediatordo zarz dzania stanem aplikacji oraz z o onymi przej ciami wyst puj cymi podczas zmian tegostanu.

W nast pnym rozdziale przyjrzymy si z kolei poj ciu wstrzykiwania zale no ci oraz mo liwo-ciom wykorzystania nowych cech j zyka TypeScript w celu implementacji tego u ytecznego,

a jednocze nie prostego paradygmatu programowania obiektowego.





388




Skorowidz

Aakcesory

prywatne, 34publiczne, 34w a ciwo ci klas, 109

aktualizacje widoków, 283analiza parametrów

konstruktora, 405Angular, 203

atrapa modu u HTTP, 478dziedziczenie, 207klasy, 205zmienna $scope, 205

Angular 2, 234komponenty aplikacji, 437konfiguracja, 234, 434

aplikacji, 363testów, 305

modele, 235przesy anie danych, 442testowanie DOM, 307testy

modelu, 305wy wietlania, 306

udost pnianie stronaplikacji, 434

widoki, 235wydajno , 237zdarzenia, 237

Apache Cordova, 25aplikacja

Angular 2, 461Aurelia, 421Backbone, 227Express, 422SurfDechy, 460–497

architektura aplikacji, 496asynchroniczno , 153atrapa modu u Http, 478, 481Aurelia

formularze, 427komponenty, 291

aplikacji, 424widoku, 293

komunikaty, 431konfiguracja, 228

testów, 295konwencje nazewnicze, 294model widoku

komponentów, 292modele, 230przesy anie danych, 430testowanie, 291testy

jednostkowe, 296przekrojowe, 299wy wietlania, 297

udost pnianie aplikacji, 421wczytywanie aplikacji, 232widoki, 231wydajno , 230wy wietlanie komponentu,

293zastosowanie, 419zdarzenia, 233

BBackbone, 198, 220

aktualizacje widoków, 283aplikacja, 227dziedziczenie, 207konfiguracja, 222

modele, 223stosowanie

dziedziczenia, 199interfejsów, 201j zyka ECMAScript 5, 202sk adni typów ogólnych,

201testowanie, 280testy

modeli, 285modelu z o onego, 287wy wietlania, 288zdarze DOM, 289

widokCollectionView, 225ItemView, 224

wydajno , 221zdarzenia DOM, 283z o one modele, 280

biblioteka, 187, 197Backbone, 198Handlebars, 347, 422

bloki kodu, 170b dy, 161

404, 333konfiguracji Require, 333

Bootstrap, 364Bower, 196Brackets, 413

CChrome, 47ci g a integracja, 275

serwer budowy, 277zalety, 276





500

Ddane

JSON, 425, 440, 456, 474strukturalne, 171

debugowaniew przegl darce Chrome, 48w Visual Studio, 43w Visual Studio Code, 52

definicje funkcji interfejsów,105

dekoratory, 130fabryka, 132metod, 137parametrów, 139w a ciwo ci, 135w a ciwo ci statycznych,

136metadane, 140parametry, 133sk adnia, 131

DOM, 266obs uga zdarze , 283testy zdarze , 289

domkni cia, 33, 121dziedziczenie, 113, 207

interfejsów, 114klas, 114

EECMAScript Harmony, 27edytor

Brackets, 413kodu, 43

efekty przej , 371eksportowanie

modu ów, 320zmiennych, 323

Emmet, 415Espruino, 25Express, 340

konfiguracja, 341obs uga tras, 344przekierowywanie da

HTTP, 353stosowanie

modu ów, 342szablonów, 346

strony frameworka Aurelia,422

zdarzenia POST, 350ExtJS, 208

kompilator TypeScript, 211rzutowanie typów, 210tworzenie klas, 208

FFabryka, 95, 123fabryki dekoratorów, 132filtr, 489formularze, 427framework, 25, 213

Angular, 203Angular 2, 234Aurelia, 228Backbone, 220Bootstrap, 364Express, 340ExtJS, 208Jasmine, 254React, 238Require, 326

frameworki testówjednostkowych, 253

funkcje, 77anonimowe, 78globalne, 184interfejsów, 105klas, 102, 183przeci anie, 86, 116statyczne, 111, 183sygnatury, 184typy warto ci zwracanych,

77zwrotne, 82, 262

Ggruba strza ka, fat arrow, 84

HHandlebars, 347hermetyzacja, 32

IIDE, Integrated Development

Environment, 29, 36edytory, 55Node, 36Visual Studio 2017, 38Visual Studio Code, 48WebStorm, 44

implementacjainterfejsów, 100interfejsu mediatora, 381wstrzykiwania zale no ci,

399importowanie modu ów, 320informacje o modu ach, 318inicjalizacja Typings, 194instalacja

pakietów, 192plików

definicji, 194deklaracji, 191

SystemJS, 335Visual Studio Code, 50

instancje klas ogólnych, 145integracja paneli, 471IntelliSense, 47interfejs u ytkownika, 360, 412

edytor Brackets, 413panel logowania, 417projektowanie, 361rozszerzenie Emmet, 415testowanie zdarze , 484

interfejsy, 96, 100, 177, 399funkcji, 105ogólne, 150stanu, 372

JJasmine, 254

funkcja done(), 265ko czenie testów, 258mechanizmy wykonawcze,

269modyfikacje DOM, 266obiekty dopasowuj ce, 257stosowanie szpiegów, 261,

263




Skorowidz

501

szpiegowanie funkcjizwrotnych, 262

testy, 254asynchroniczne, 264bazuj ce na danych, 259uruchamianie, 258

wczytywanie, 340zdarzenia DOM, 268

jawne rzutowanie, 70JSON, 425, 440, 456, 474

Kkacze typowanie, 65Karma, 271klasa Mediator, 382klasy, 98, 182

abstrakcyjne, 118Angular, 205fabrykuj ce, 127funkcje, 102, 183

globalne, 184statyczne, 111, 183

konstruktory, 101modyfikatory, 106, 108przeci anie konstruktora,

182przestrzenie nazw, 182sk adowe chronione, 117w a ciwo ci, 99, 183

opcjonalne, 184statyczne, 111tylko do odczytu, 109

kompilacja, 28frameworka Aurelia, 420interfejsów, 98modu ów AMD, 324Node, 420w rodowisku Node, 36

komponentAngular 2, 437Aurelia, 291, 293, 424BoardList, 476Navbar, 376panelu logowania, 452React, 448RightScreen, 378SideNav, 377

komunikaty, 163, 431

konfiguracjaAngular 2, 234, 363, 434Aurelia, 228Backbone, 222Express, 341modu ów AMD, 326React, 238Require, 326SystemJS, 335

konsola mened era pakietów, 191konstruktor, 101, 182kontroler, 216koordynacja efektów przej , 371

Llokalizacja us ugi, 389, 396

a cuchy szablonów, 66

Mmechanizm IntelliSense, 47Mediator, 374

implementacja interfejsu, 381komponent

Navbar, 376RightScreen, 378SideNav, 377

komponenty podrz dne, 380zdarzenia DOM, 386

mened er pakietów, 190, 191metadane dekoratorów, 140mikrokontroler

Espruino, 25model, 215

frameworkaAngular 2, 235Aurelia, 230Backbone, 223

widoku komponentówAurelia, 292

modeleschemat, 281testowanie, 285, 305, 313z o one, 280

modularny kod, 375

modularyzacja, 317modu y

AMD, 324konfiguracja, 326konfiguracja przegl darki,

327wczytywanie, 324zale no ci, 328

eksportowanie, 320zmiennych, 323

eksporty domy lne, 322importowanie, 320scalanie, 180wyczytywanie, 334zarz dzanie, 340zmiana nazwy, 321

modyfikacje obs ugi zdarzeDOM, 283

modyfikatorydost pu w konstruktorach,

108klas, 106

MVC, Model-View-Controller,214

MVVM, Model View ViewModel, 249

Nnak adka, 369narz dzie, 25

JSLint, 29Karma, 271Protractor, 273SystemJS, 334Testem, 269Typings, 192

nazwane w a ciwo ci, 339nazwy zast pcze typów, 90nieprawid owe zale no ci, 333Node, 340, 355NuGet, 190

Oobiekty dopasowuj ce, 257obietnice, 153, 162

sk adnia, 155, 158zwracanie warto ci, 158





502

obs ugab dów, 161szablonów, 346tras, 344zdarze DOM, 283

ograniczenia typu T, 148okre lanie typów, 61, 406

Ppakiet nodemailer, 390pakiety, 191

instalowanie, 192poszukiwanie, 192, 193

panelboczny, 365logowania, 417, 452, 468,

492parametr reszty, 80parametry

dekoratorów klas, 133domy lne, 80konstruktora, 405opcjonalne, 78

p tlafor...in, 68for...of, 68

pliklaunch.json, 51package.json, 447SpecRunner, 255tasks.json, 50tsconfig.json, 37

plikidefinicji, 30

instalowanie, 194pobieranie, 188ponowna instalacja, 195

deklaracji, 167instalowanie, 191sk adnia, 180w asne, 173

DLL, 190pobieranie plików definicji, 188poczta elektroniczna, 390

ustawienia konfiguracyjne,393

polecenie npm, 196poszukiwanie pakietów, 193

programNuGet, 190Bower, 196

programowanie, 250asynchroniczne, 153obiektowe, 357w oparciu

o interfejsy, 358o testy, 250

projektowanie interfejsuu ytkownika, 360

Protractor, 273przeci anie

funkcji, 86, 116konstruktora klas, 182

przegl darka Chrome, 47przekierowywanie da

HTTP, 353przes anianie funkcji, 181przestrzenie nazw, 112

klas, 182zagnie d one, 181

przesy anie danych, 430, 442JSON, 456

punkt ko cowy REST, 451

Rraportowanie testów

integracyjnych, 278React, 238

komponenty, 448konfiguracja, 238testowanie, 308testy

jednostkowe, 312modelu, 313widoków, 313zdarze , 315

udost pnianie aplikacji, 445wczytywanie aplikacji, 243wi zanie danych, 454widoki, 240zdarzenia, 245

repozytorium DefinitelyTyped,32

Requireb dy konfiguracji, 333konfiguracja, 326wczytywanie, 331

REST, 451reszta obiektu, 93rozproszenie, 93rozszerzenie

.d.ts, 30Emmet, 415

rzutowanie typów, 70, 210

Sscalanie funkcji i modu ów, 180,

185schemat

aplikacji, 281modeli, 281

Selenium, 273serwer

Apache Cordova, 25Jenkins, 277SMTP, 395Team Foundation Server,

277TeamCity, 277

sk adniadekoratorów, 131funkcji zwrotnych, 158obietnic, 155, 158okre lania typów, 62plików deklaracji, 180typów ogólnych, 144

sk adowe chronione, 117s owo kluczowe

async, 160await, 160, 162, 163interface, 399let, 75module, 175super, 115

sta e, 74Stan, 372stan panelu logowania, 468standard EcmaScript, 27stosowanie

atrapy modu u Http, 481bloków kodu, 170ci g ej integracji, 275definicji klasy, 404dekoratorów metod, 138dziedziczenia, 199edytora Brackets, 413




Skorowidz

503

filtra, 489frameworka

Angular 2, 234Aurelia, 228Backbone, 220Bootstrap, 364React, 238

funkcji done(), 265Handlebars, 347interfejsów, 201j zyka ECMAScript 5, 202klasy Mediator, 385komunikatów, 431konsoli mened era

pakietów, 191mened era pakietów, 190metadanych dekoratorów,

142narz dzia Typings, 192npm i @types, 196NuGet, 190obietnic, 156programu Bower, 196rozszerzenia Emmet, 415rzutowania typów, 210Selenium, 273sk adni typów ogólnych, 201szablonów w Express, 346szpiegów, 261szpiegów jako imitacji, 263typu T, 146wielu dekoratorów, 132wstrzykiwania zale no ci,

408wzorca MVC, 218

stra niki typów, 88struktura danych JSON, 474sygnatury funkcji, 84, 184syntaktyczne usprawnienia

j zyka, 30SystemJS, 334

instalacja, 335konfiguracja, 335wyczytywanie modu ów, 334zale no ci modu ów, 337

szablony, 346projektów TypeScript, 39

szpiegowanie funkcjizwrotnych, 262

cis a kontrola typów, 29rodowisko Node, 340

Ttablice, 67TDD, Test Driven

Development, 250test Jasmine, 254Testem, 269testowanie, 278

frameworka, 277Angular 2, 303Aurelia, 291Backbone, 280React, 308

implementacji wzorcówprojektowych, 464

modeli, 285, 305, 313modeli z o onych, 287wy wietlania, 288, 297, 306zdarze , 315

DOM, 289, 307interfejsu u ytkownika,

484testy

akceptacyjne, 253asynchroniczne, 264bazuj ce na danych, 259integracyjne, 252jednostkowe, 252, 296, 312,

463jednostkowe da HTTP,

477przekrojowe, 299raportowanie, 278

tworzenieaplikacji, 411aplikacji webowej, 40instancji klas ogólnych, 145nak adki, 369obiektów w klasach

ogólnych, 151panelu

bocznego, 365logowania, 417

pliku tsconfig.json, 37projektu

Visual Studio, 39WebStorm, 45

typany, 69T, 146, 148

Typings, 192typy

kacze typowanie, 65nazwy zast pcze, 90ogólne, 143, 144okre lanie, 61podstawowe, 60sk adnia, 62stra niki, 88unii, 88, 179ustalone, 73wnioskowanie, 64wyliczeniowe, 71, 400zaawansowane, 87

Uunie, 179ustawienia konfiguracyjne

poczty, 393

VVisual Studio

debugowanie, 43dodawanie pliku, 41domy lne ustawienia

projektu, 41edytor kodu, 43pasek narz dzi

Standardowy, 44szablony projektów, 39tworzenie

aplikacji webowej, 40projektu, 39

Visual Studio 2017, 38Visual Studio Code, 48

debugowanie, 52instalacja, 50VSCode, 50





504

Wwarto

null, 91undefined, 91

wczytywanieaplikacji React, 243frameworka Require, 331Jasmine, 340

WebStorm, 44mechanizm IntelliSense, 47pliki domy lne, 45tworzenie

aplikacji, 46projektu, 45

wy wietlanie strony wChrome, 47

wi zanie danych, 412, 454widok, 215

CollectionView, 225ItemView, 224szczegó ów, 487

widokiAngular 2, 235Aurelia, 231React, 240

witrynaAngular 2, 434Express i React, 443

w asne pliki deklaracji, 173w a ciwo ci

klas, 99, 183opcjonalne, 97, 184

statyczne, 111tylko do odczytu, 109

wnioskowanie typów, inferredtyping, 64

wstrzykiwanierekurencyjne, 409w a ciwo ci, 407zale no ci, 203, 389, 396,

399implementacja, 399przy u yciu dekoratora,

403przy u yciu konstruktora,

402wybór frameworka JavaScript,

197wyczytywanie modu ów, 334wydajno frameworka

Angular 2, 237Aurelia, 230

wysy anie pocztyelektronicznej, 390

wy wietlanie listy, 483wyznaczanie

interfejsów, 399nazwy klasy, 401

wzorzecLokalizacja us ugi, 396Mediator, 374MVC, 214MVVM, 249projektowy Fabryka, 123Stan, 372

Zzaawansowane typy, 87zagnie d one przestrzenie

nazw, 181zalety j zyka, 28zarz dzanie modu ami, 340zasada

jednej odpowiedzialno ci,359

otwarte-zamkni te, 359podstawienia Liskova, 360segregacji interfejsów, 360wstrzykiwania zale no ci,

360zasady SOLID, 359zdarzenia

DOM, 268, 283, 386frameworka

Angular 2, 237Aurelia, 233React, 245

interfejsu u ytkownika, 484POST, 350

zintegrowane rodowiskoprogramistyczne, Patrz IDE

zmienna $scope, 205zmienne globalne, 168

dania HTTP, 477danie POST, 456




http://program-partnerski.helion.pl

Tytuł oryginału: Mastering TypeScript, Second Edition · 2019. 5. 15. · J zyk TypeScript....

Documents

Transcript of Tytuł oryginału: Mastering TypeScript, Second Edition · 2019. 5. 15. · J zyk TypeScript....