Strony WWW z SystemFlow: Komponenty

SystemFlow 1.0+

0:00W tej lekcji chciałbym rozszerzyć trochę temat komponentów.

0:02Podobnie jak Web Flow są to najważniejsze

0:05elementy składowe frameworka i będziemy pracowali z nimi cały czas w firmie.

0:09Tak jak wspomniałem, elementy tutaj w

0:11firmie są to komponenty, czyli podobnie jak w Web Flow.

0:15Mamy tutaj taką wersję Master naszego np.

0:18Next Aria Basic.

0:20No a to co my będziemy robić to będziemy

0:22korzystali z instancji tego komponentu i jeśli to widzimy, to widzisz, że

0:28instancja ma charakterystyczną taką ikonkę pustą w środku.

0:31Tutaj mamy master komponent, w którym

0:33możemy edytować elementy i będzie to miało wpływ na zachowanie wszystkich instancji.

0:39Jeśli w instancji sobie coś w edytujemy.

0:41Jak widzisz ma to wpływ w zasadzie tylko na instancje.

0:44Z poziomu instancji łatwo dostać się do master komponentu, bo wystarczy, że

0:49klikniemy na tą malutką opcję Goto main komponent i nieważne na której stronie

0:54mielibyśmy to czy to jest dokumentacji czy poza, czy na tej

0:57stronie design w której projektujemy, to teraz klikając na tego oto master

1:00komponent zostaniemy przeniesieni do Master komponentu, dzięki czemu możemy

1:04wprowadzić zmiany systemowe do tego głównego komponentu i to właśnie w tych

1:08master komponentach będziemy chcieli wprowadzić te kluczowe zmiany

1:12i to, żeby przerobić właśnie komponent, żeby każda kolejna jego instancja tak

1:16wyglądała, a w poszczególnych instancjach będziemy tylko zmieniać teksty treści,

1:20ewentualnie wpisywać jakieś inne ustawienia.

1:23No i podobna koncepcja jak Web Flow ma

1:25miejsce w tej firmie, że jeśli korzystamy z instancji i używamy ich w naszym

1:31designie, może pokażę Ci jak to zrobić na przykładzie tego.

1:33Tekstylia Basic będziemy projektować najprawdopodobniej na stronie Design albo

1:37po prostu dodajemy sobie kolejną nową stronę, ale strona jest pusta.

1:41Możemy z niej skorzystać.

1:42Możemy dodać sobie nowego Page'a, nazwać go np.

1:46home page.

1:47Jakkolwiek i na tym na tej stronie będziemy projektować.

1:51Najczęściej wybierzemy sobie odpowiedni odpowiednią sekcję, np.

1:55desktop wcisnąłem, ażeby przejść do

1:57definicji iframe i wybierzemy sobie taki oto frame.

2:00No i tutaj na niego będziemy chcieli wstawić ten komponent.

2:03Te komponenty są przeszukiwane w sekcji Assets i teraz wystarczy, że kupimy tą

2:07nazwę Text Basic i zostanie ona znaleziona.

2:11Mamy tutaj możliwość przeglądania widoku listy albo widoku miniatur.

2:15Ja wolę widok listy, bo pamiętam głównie nazwy, ale Ty możesz skorzystać na

2:19początku z widoku miniatur, bo jest chyba bardziej przyjazne dla osób, które

2:23jeszcze nie są zaznajomione z wszystkimi nazwami i tych kasetach.

2:26Możemy łatwo to wyszukać.

2:28Podobnie jak Web Command Działa czy Controller.

2:30To tutaj przerzucamy sobie ten komponent i umieszczamy go na scenie.

2:34I teraz jeśli umieścimy go na scenie, to zwróć proszę uwagę na to.

2:38W sekcji Layers możesz przełączać się pomiędzy tymi zakładkami.

2:40Ad1. Ad2.

2:41Na przykład mamy tekst Basic, ale jest to pusty w środku ten szablon, czyli jest to

2:46instancja komponentu komponentu Tekstylia, więc możemy to edytować.

2:50A gdybyśmy chcieli edytować master

2:52komponent musimy kliknąć tutaj i wtedy przeniesiemy się do tego main

2:55komponentu, czyli w ogóle do innej strony tekst i do definicji main komponentu.

3:00To jest bardzo ważne.

3:01A jeśli chodzi o naszą pracę, to podobnie

3:03jak we Flow te komponenty możemy sobie ustawiać na scenę,

3:08a następnie je podlinkować od tego głównego master komponentu.

3:12Często będziemy chcieli to zrobić, bo będziemy chcieli, żeby zmiany, które tutaj

3:15wprowadzimy w takim komponencie nie dotyczyły jakichś różnych innych

3:19instancji, a często właśnie takiej instancji nie będziemy mogli w pełni nawet

3:23edytować, więc będziemy wybierali tą opcję.

3:26Instant we Flow jest to handling, a tutaj mamy beta i wybieramy sobie.

3:31I w tym momencie wygląda

3:33tak, że to jest osobny frame i znów jakby w środku mamy znowu jakiś komponent, więc

3:39znowu trzeba wybrać polecenie handling czy instance w ten sposób.

3:45I teraz wygląda na to, że już mamy czyste

3:49rzeczy, które nie są z niczym powiązane i możemy je spokojnie edytować.

3:52Fajny skrót na korzystanie z tego typu komponentów, jeśli chcemy je od niego

3:58wywołać i wybiorę jakieś bardziej skomplikowane komponent np.

4:01weźmy sobie ten pricing i jakąś tabelę z pressingiem.

4:05Tutaj będzie dużo, dużo różnych komponentów, więc jeśli ja to wrzucę na

4:08scenę, no to się okaże, że taka tabela z pressingiem.

4:11Przejdźmy teraz do sekcji.

4:12Layers jest oczywiście sama komponentem i możemy ją od linkować.

4:18Czyli wybieramy polecenie instance,

4:20ale w środku zawiera jeszcze mnóstwo różnych innych komponentów.

4:24I teraz sugerowany sposób na odpięcie wszystkiego.

4:28Jeśli chcę, żeby to był taki czysty element, który można edytować we firmie

4:33jest taki, że ustawiamy się na tym głównym komponencie, wciskamy Enter

4:37return i to pozwala nam iść w dół w hierarchii.

4:41Czyli teraz zaznaczył się rabat.

4:42Czy to jest jakiś jakaś instancja?

4:45Nie jest To wciskamy enter i raz jeszcze i

4:48mamy zaznaczone kolejne elementy w środku tego Harpera.

4:51Czy tutaj znajduje się jakiś komponent?

4:53Znajduje się ta instancja Empty Section, więc możemy prawym przyciskiem myszy

4:56kliknąć teraz dowolne miejsce, bo wszystkie te elementy są.

5:00Jeśli teraz wybierzemy instancję to

5:01zobacz, że została podpięta tylko ta instancja Empty Action.

5:05Nie klikam teraz nigdzie indziej.

5:06Wciskam po prostu return raz jeszcze i zobacz co się stało.

5:10Zostały zaznaczone znowu wszystkie elementy, które znajdują się odpowiednio

5:14we wnętrzu tych rodziców, które miałem zaznaczone.

5:17I okazuje się, że te elementy to też są

5:20instancje komponentów, więc mogę iść dalej i mogę od linkować dalej.

5:24Czyli znów prawy przycisk myszy w dowolnym

5:27miejscu teraz i wybieramy polecenie instancji.

5:30I znów. Ponieważ jest tam założony komponent, znów

5:33mam zaznaczonych teraz rodziców, ale w środku widzę, że znajdują się kolejne

5:38elementy, które mają, które są instancjami symboli.

5:42To po prostu polega na tym, że my z tego wszystkiego korzystamy we frameworku.

5:46Jak widzisz, my używamy cały czas tych

5:49samych komponentów, więc jeśli zmienisz w jednym miejscu, to się zmieni wszędzie.

5:52Wszystkie te opisy i wszystkie te rzeczy są spójne ze sobą.

5:56No ale jeśli chcesz je customowe edytować, to będziesz musiał je odłączać.

6:01Nie mówię, że to zawsze trzeba zrobić w przypadku wszystkich elementów.

6:04Niektórych rzeczy nie będziemy zmieniać,

6:05więc nie ma sensu się do kopiować do samego wnętrza.

6:09Całkiem głęboko i po prostu od niego.

6:11To wszystko natomiast pokazuje właśnie prostą metodę, z której ja korzystam.

6:15Czyli mam zaznaczone te elementy.

6:17Jeszcze nigdzie nie kliknąłem i ot kliknąłem się i klikam raz jeszcze enter,

6:21return i znowu prawy przycisk myszy i znowu.

6:25I teraz już w zasadzie prawie wszystko

6:27widzę, że jest on linkowany jeszcze raz jak kliknę return.

6:29Na wszelki wypadek, żeby się upewnić

6:31jeszcze klikam raz i zobacz, że nie mam tutaj żadnych instancji komponentu.

6:35To znaczy, że mogę tu wszystko edytować,

6:37zmieniać, psuć i nie będzie miało to wpływ na elementy frameworku.

6:42Więc w ten sposób to odłączamy.

6:44Natomiast jeśli chcemy edytować elementy frameworku, raczej robimy to w tych master

6:49komponentach, czyli i tak nie pracujemy na instancjach, tylko

6:54tak jak wspomniałem przenosimy się do takiej instancji.

6:57Następnie zaznaczamy ją sobie i wybieramy to polecenie Komponent i tam go edytujemy.

7:03Jeśli chcemy, aby te zmiany były

7:05wprowadzone na przestrzeni całego frameworku,

7:09jeśli pracowali byśmy już bezpośrednio na instancji, a jeszcze nie od linkowania i

7:13tego od głównego master komponentu, to mamy też możliwość wprowadzenia zmian w

7:18instancji i jeżeli chcielibyśmy te zmiany w instancji sprzątać na zmiany do Mastera

7:23i tym samym zmienić ten element w całym naszym frameworku, to możemy to zrobić za

7:28pomocą tych trzech kropek zakładając, że wprowadziliśmy tu jakieś zmiany.

7:31Wybieramy polecenie push or rights main

7:33component, czyli nie musimy iść do master komponentu i tam tego edytować.

7:37Możemy wprowadzić zmiany do instancji, a

7:39następnie push, czyli nadpisać tymi zmianami master komponent i wtedy

7:43wszystkie instancje bazujące na tym master komponencie nam się napiszą.

7:48Tu mamy jeszcze opcję zresetowania wszystkich override wszystkiego co

7:51wprowadziliśmy do komponentu później i też opcja

7:55instance, czyli to samo co mamy tutaj pod prawym przyciskiem myszy co pokazywałem.

7:59I to w zasadzie wszystko jeśli chodzi o korzystanie z komponentów.

8:02Jest to bardzo ważne, abyśmy pamiętali właśnie, żeby tę instancję rozpakowywać.

8:07Wtedy będzie nam dużo łatwiej pracować.

8:08Często w ramach instancji nie możemy tutaj zmienić wszystkich

8:13elementów, dopiero będziemy musieli właśnie to opakować.

8:16Wtedy możemy wygodnie pracować na takim elemencie.

8:19Przypominam i zapamiętaj z tej lekcji ten skrót return czy Enter.

8:23W momencie, gdy jesteśmy ustawieni na takim górnym elemencie.

8:27Return przejdzie nam do wszystkich dzieci

8:28i znowu return przejdzie nam do kolejnych dzieci.

8:31I łatwo jest wtedy właśnie np.

8:33odłączyć te instancje.

8:35I to wszystko komponentach.

8:36Dzięki serdeczne za uwagę.

8:38Do usłyszenia w kolejnej lekcji.