Bubble: Tworzymy widok logowania

0:00W poprzedniej lekcji wyjaśniliśmy sobie czym

0:02są custom states, jakie definiować dla danych elementów oraz jak dzięki nim

0:06wpływać na elementy z wykorzystaniem zakładki conditional.

0:10Natomiast w tej lekcji chciałbym się skupić na tym, w jaki sposób możemy

0:13dynamicznie zmieniać wartości przypisane do custom states.

0:17Zanim jednak do tego przejdziemy,

0:18zastanówmy się w jaki sposób my u nas chcemy zmienić na stronie te wartości.

0:23Przede wszystkim jeżeli wrócę tutaj do projektu wzorcowego,

0:26to chcę zmieniać wartość custom states w zależności od tego jaki przycisk kliknie

0:31użytkownik, czyli ustawić go na wartość logowania albo na wartość rejestracji

0:36w zależności, który ten przycisk tutaj zostanie kliknięty.

0:40Dodatkowo jeżeli przejdę na samą stronę.

0:43To chcę custom states zmieniać również z tego miejsca.

0:46Teraz jestem w widoku logowania, jeżeli

0:48kliknę tutaj na register, to states został odpowiednio zaktualizowany

0:53i tym razem wyświetlamy tutaj formularz rejestracji.

0:56Skoro już wiemy co mamy robić, to przejdźmy do edytora.

0:59Przystąpimy do działania.

1:01My w pierwszej kolejności skupimy się na

1:03tej części, czyli będziemy zmieniać custom states.

1:05Po kliknięciu tutaj w ten tekst.

1:08Wróćmy więc do edytora.

1:10Skoro w tym przypadku mamy do czynienia z jakąś akcją, którą będzie kliknięcie w

1:15ten tekst, a ona z kolei, aby wywołać jakąś reakcję, czyli zmianę custom state

1:20to jak się domyślasz, będziemy musieli wykorzystać tutaj workflow.

1:23Natomiast zanim przejdziemy do jego

1:25zdefiniowania, zastanówmy się nad tym, jaką wartość będziemy tam chcieli ustawić.

1:31Przeanalizujmy więc, jak na chwilę obecną to wszystko u nas działa.

1:36Jak już Ci mówiłem wcześniej, przy

1:37załadowaniu strony domyślnie ładowane są te wszystkie wartości, które tutaj

1:41ustawiliśmy, a zakładka conditional zadziała nam tylko i

1:45wyłącznie wtedy, kiedy ten custom state tutaj dla view, będzie równy wartości login.

1:53Jeżeli będzie tam jakakolwiek inna wartość np.

1:55pusta, pokazywałem Ci to, kiedy tutaj zyzerowaliśmy sobie to default value.

2:02Jeżeli nie przekazaliśmy tutaj żadnej wartości, to oczywiście ten warunek tutaj

2:07nam się nie spełnił ani na tym, ani na tym elemencie, ani na żadnym innym.

2:11Dla którego go ustaliliśmy i wtedy oczywiście ładowała nam się strona z rejestracją.

2:18Natomiast co by się stało, gdybym tutaj przekazał cokolwiek innego niż login?

2:24Np. zamiast pustej wartości wpisał tutaj register?

2:29To jak się pewnie już domyślasz,

2:30znów zastosowanie będą miały te domyślne wartości.

2:35Warunek nam się nie wykona to register nie jest równe login, a więc

2:40wyświetlają nam się te wszystkie treści, to pole będzie widoczne itd.

2:45Oczywiście możemy to sobie jeszcze sprawdzić.

2:48Odświeżam stronę.

2:51Jak widzisz wyświetla się poprawnie formularz rejestracji.

2:55Tak więc nasz custome state możemy w tym przypadku chyba zmienić po prostu na pustą

2:59wartość albo wpisać tam cokolwiek innego jak np.

3:02ja teraz zrobiłem to wpisując tutaj wartość register.

3:07Efekt będzie taki sam.

3:10Przywróćmy więc tutaj tą domyślną,

3:12login i teraz odpowiednio zdefiniujmy sobie custom state.

3:17W tym celu oczywiście zaznaczam ten tekst.

3:21Wybieram start edit workflow.

3:24I z listy gotowych operacji.

3:26Przechodzę do sekcji element actions.

3:28Wybieram set state.

3:30Muszę wskazać element, który taki state

3:32posiada, u nas oczywiście jest to strona autentykacji.

3:37Wybieram custom state.

3:39U nas mamy tylko jeden, czyli jest to view

3:41i przekazuję tutaj wartość jaką chcę ustawić.

3:44Po prostu ustawię sobie na register.

3:48Sprawdźmy teraz, czy to rzeczywiście zadziała.

3:51Jak pamiętasz, przywróciliśmy tutaj

3:53custom state

3:56na wartość login, a więc po odświeżeniu strony ta powinna mieć zastosowanie.

4:02Sprawdzamy.

4:05Wszystko jest tak jak trzeba.

4:06Wyświetla nam się formularz logowania, klikamy w tekst.

4:10Custom state się zmienił odpowiednio i teraz mamy formularz rejestracji.

4:15Natomiast co się stanie, jeżeli ponownie kliknę w ten tekst?

4:18To jak się domyślasz znowu wykonamy to samo workflow.

4:20Znowu zmieniliśmy ten stan na register, ale ponieważ był już tutaj wcześniej

4:25ustawiony register, to nic się w zasadzie nie stało.

4:28W jaki więc sposób teraz uzyskać tą opcję toggle?

4:31A więc jeżeli klikamy tutaj na ten tekst mając wyświetlony formularz

4:36logowania to chcemy zmienić state tak aby wyświetlać formularz rejestracji.

4:41I oczywiście tą samą operację chcemy wykonać na odwrót.

4:44Czyli jeżeli mamy wyświetlony formularz

4:46rejestracji to chcemy custom state zmienić z powrotem

4:49na login.

4:51Wracamy do edytora.

4:53Kolejno wracamy do zakładki workflow

4:56i teraz zastanówmy się w jaki sposób osiągnąć efekt na jakim nam zależy.

5:00Otóż w obu przypadkach trigger będzie dokładnie ten sam.

5:04Będzie to po prostu ten sam tekst.

5:06Natomiast my w momencie kliknięcia w taki tekst chcemy sprawdzić, jaka jest aktualna

5:11wartość custom state ustawionego dla naszej całej strony.

5:15Jak więc to zdefiniować?

5:17Wystarczy, że zaznaczę tutaj nasz trigger,

5:20przejdę do sekcji only when i tutaj zdefiniuje określony warunek.

5:25W tym przypadku chcę powiedzieć, że jeżeli

5:28state o nazwie view dla elementu authentication, jest równy login.

5:37To, co chcemy zrobić?

5:38Chcemy wtedy wykonać tą operację, czyli zamienić go na register.

5:44Natomiast w jaki sposób osiągnąć efekt odwrotny?

5:47Otóż bardzo prosto. Wystarczy, że skopiuję sobie.

5:51Cały ten workflow czyli klikam tutaj prawym przyciskiem myszy,

5:54wybieram copy, klikam w to miejsce i klikam paste.

5:59Na chwilę obecną mamy dokładnie dwa identyczne workflow.

6:03Rozróżnimy więc je sobie można kolorami.

6:05Powiedzmy, że ten będzie tutaj niebieski, a ten z kolei powiedzmy, że zielony.

6:13I teraz zastanówmy się jak osiągnąć właśnie ten drugi efekt.

6:17Tutaj, jeżeli view jest równe login.

6:20Chcemy to zmienić na register.

6:23Natomiast w tym przypadku

6:24chcę powiedzieć, że jeżeli custom state o nazwie view nie jest równy login, czyli

6:30może być jakakolwiek inna wartość albo wartość pusta, albo text register albo

6:34cokolwiek innego, to wtedy chcę przywrócić ją i ustawić na login.

6:38Czyli tutaj zamiast is wybieramy is not,

6:43a tu z kolei w samej operacji zamiast register wpisuje login.

6:49W ten sposób mamy jeden element, który odpala nam dwa różne workflow w

6:54zależności od tego, który z tych warunków zostanie spełniony.

6:58Przejdźmy więc do podglądu.

7:00Odśwież naszą stronę.

7:04Na chwilę obecną mamy ustawione custom state na wartościach login.

7:06Wyświetla nam się formularz logowania.

7:09Klikamy tutaj.

7:10Zmienia nam się to teraz na register, więc jeżeli kliknę tutaj

7:15ponownie w nasz tekst to jak się domyślasz tym razem custom states zostanie zmieniony

7:19na wartość loginu, w ten sposób definiując tutaj workflows,

7:24możemy ograniczyć ich działanie w

7:25zależności od tego, który z tych warunków zostanie spełniony.

7:29Za trigger służy nam dokładnie ten sam element,

7:31natomiast jeżeli spełni się ten warunek, to wykonają się tylko te operacje.

7:36Natomiast jeżeli spełni się ten, to

7:38oczywiście cała ta seria tutaj zdefiniowana.

7:41A skoro tą część pracy mamy już za sobą,

7:43to w kolejnej lekcji zastanowimy się w jaki sposób zmieniać workflow w zależności

7:48od tego, w który przycisk kliknął użytkownik na naszej stronie indeksowej.