Lekcja 3. ViewController(Kontrolery Widoków) – Xamarin.Mac

Opublikowane przez Mikołaj w dniu

ViewController, na czym to polega? Wielkie zdziwienie nigdy się o tym nie słyszało a więc co to jest ViewController? ViewController to widok aplikacji, Który jest zmienny możemy go zmieniać w kodzie lub bezpośrednio z Widoku Interfejsu (Main.Storyboard), o tym właśnie będzie ten artykuł.

Aplikacje mają zazwyczaj kilka widoków na których opierają całą swą strukturę, w tym artykule chciałem wam pomóc/pokazać w jaki sposób z nich korzystać, zmieniać je i wykonywać na nich operacje.

Otwórzmy zatem Visual Studio (Nie masz Visual Studio for mac? Zobacz jak pobrać i zainstalować Visual Studio tutaj) stwórzmy nowy projekt:

I wybierzmy odpowiedni szablon…

Instrukcja Tworzenia Projektu

Kliknijcie Mac >> Aplikacja >> Aplikacja Cocoa (Xamarin.Mac) tak jak na powyższym zrzucie ekranu, wciśnijcie przycisk “Dalej”.

Teraz nazwijcie wasz projekt “Test_ViewController” czyli jak by to spolszczyć wyjdzie nam “Test_KontrolerówWidoków” (ViewController ang. Widok Controller’a (Kontroler Widoku))

Wciśnijcie “Dalej” a następnie “Utwórz”.

Gdy projekt zostanie przez was utworzony, kliknijcie prawym przyciskiem myszy w plik o nazwie Main.Storyboard (Mac. Stuknięcie dwoma palcami na gładziku) Wyświetli wam się okno podobne do tego:

Możecie postępować za pomocą instrukcji na obrazku czyli: Main.Storyboard (Hint: Stukniecie dwoma palcami) >> Otwórz za pomocą (Hint: Kliknięcie) >> Xcode Interface Builder (Hint: Kliknięcie)

Otworzy wam się okno jednego z narzędzi Xcode czyli “Xcode Interface Builder”(Nie masz Xcode? Instrukcje pobierania i instalacji Tutaj).

Teraz jak zrobiliśmy podstawowe rzeczy, zajmijmy się widokami, Przejdzie do “Xcode Interface builder” w prawym górnym rogu jest biblioteka obiektów (razem z asystentem kodu, i właściwościami)

Prawy górny róg, zaznaczona biblioteka obiektów

Wciskamy przycisk biblioteki obiektów (na zdjęciu zaznaczone na czerwono) W polu wyszukiwania wpisujemy “View Controller” wyświetli nam się lista obiektów pod tą nazwą, klikamy pierwszą(“ViewController”) i przeciągamy na Pole Interfejsu pliku Main.Storyboard

Pokazanie dodania Widoku

Jak pewnie zauważyliście w projekcie już jest jeden ViewController, aktualnie mamy dwa ViewController’y, czyli wszystko co jest nam potrzebne do dzisiejszego projektu:

Zmienianie Wyświetlanych ViewController (Kontrolerów Widoków)

Wytłumaczę wszytko w 6 punktach:

  • Punkt.1. Akcja “Show”.

W pierwszym punkcie zaczniemy od akcji(Połączenia/Akcji) “Show”.

Dodajmy do naszego pierwszego Widoku Przycisk w ten sam sposób w jaki dodawaliśmy widok, wejdzie do biblioteki obiektów i wyszukajcie “Push Button” (ang. Przycisk) i dodajcie go do rodzimego Widoku (Tego który już był załączony).

Pokazanie dodania Przycisku

Gdy juz dodacie przycisk, wciśnijcie i przytrzymajcie klawisz “Ctrl” na waszej klawiaturze, kliknijcie i przeciągnijcie linkę łączącą od przycisku do naszego drugiego Widoku (Tego dodanego ręcznie przez nas).

Pokazanie połączenia między oknami

Gdy najedziecie na nasz drugi widok dodany przesz nas zmieni kolor na niebieski wtedy opuśćcie mysz i wyskoczy nam okienko typu połączenia/akcji.

Okienko powinno przypominać to powyżej.

Wybierzcie opcję “Show”.

Teraz przejedzcie do Visual Studio i uruchomcie swój program przezz naciśnięcie strzałki uruchamiającej.

Gdy skompilujecie program, kliknijcie w przycisk który stworzyliśmy, zobaczycie że pojawi wam się drugie okno.

Pokazanie akcji Show w praktyce

Spróbujmy teraz dodać do naszego Widoku przycisk który je zamyka, zróbmy wiec tak:

Wjedzcie do Xcode, kliknijcie na taką ikonę:

i przejedzcie do takiej zakładki na bocznym panelu:

Teraz wpiszmy do pola “Class” nazwę klasy w której mamy odwołanie do obiektu(“ViewController_Drugi”), ale co to jest!? W te pole wpisujemy nazwę klasy w której rejestrują się kontrolki zainicjowane w tym Widoku.

Teraz dodajcie do widoku przycisk(tego którego wyświetlamy po kliknięciu przycisku) teraz połączmy go z kodem żebyśmy mieli do niego odwołanie aby wykonywać operacje na obiekcie.

Dodawanie Obiektu

Zmieńmy typ połączenia z kodem źródłowym na “Action”.

Zmienienie typu połączenia

Oraz zmieniamy pole Name(ang. Nazwa) na “Zamknij_btn”.

Teraz gdy połączymy nasz obiekt z kodem źródłowym przejdźmy do Visual Studio

Zobaczymy że powstała nam klasa o nazwie “ViewController_Drugi.cs”.

Otwórzmy ten plik(Klasę) i stwórzmy metodę wykonywana po kliknięciu w przycisk. Zróbmy tak:

1.Sposób

W naszym pierwszym sposobie wystarczy napisać metodę akcji:

Shemat:

partial void [Nazwa_Przycisku] (Foundation.NSObject sender) 
{
   //Tutaj twój kod
}

Tworzymy tutaj metodę typu void o nazwie przycisku oraz tworzymy obiekt biblioteki “Foundation” która powoduje nam akcję

2. Sposób

Możemy też zrobić tak,

Otwórzmy Plik o nazwie “ViewController_Drugi.designer.cs”

Gdy go otworzycie skopiujcie zaznaczony na zrzucie ekranu fragment

Teraz pewnie kolejne pytanie, Ale co to jest?

To co kopiujemy to tzw. odnośnik do obiektu interfejsu czyli metoda wykonywana po przyciśnięciu przycisku o danej nazwie

Teraz przejdźmy do pliku Widoku o nazwie “ViewController_Drugi”, i wklejcie pod metodą “ViewDidLoad”(Której Znaczenie wytłumaczę w tym artykule)

Usuńcie średnik( ; ) z końca wklejonej linijki i dodajcie na końcu nawiasy klamrowe ( { } ) Teraz możemy do środka naszej metody dodać jakiś kod który wykona się w czasie kliknięcia przycisku.

Dodajmy tam więc kod odpowiedzialny za zamykanie naszego okna

partial void Zamknij_btn(Foundation.NSObject sender)
{
    DismissController(this);
}

Co ten kod powoduje?

Za pomocą metody “DismissController();”(ang. Zwolnij tę Kontrolkę ) zwalniamy czyli inaczej zamykamy nasze okno(Więcej na temat metod do wyświetlania Widoków z pozycji kodu w tym artykule)

Hint: Uwaga są dwie wersje metody “Dismmis” jest “DismmisController” oraz “DismmisViewController”, czym te metody się różnią ? Różnią się funkcją jak pewnie się domyśliliście funkcja “DismmisViewController” powoduje zamknięcie całej rodziny widoków więc gdy spróbujemy użyć tą metodę zamiast “DismmisController” zawiesi się wam program, “DismmisController” powodujezamknięcie jednej danej kontrolki, widoku

Teraz skompilujmy nasz program…

Po skompilowaniu powinno nam ukazać się okno z przyciskiem do otworzenia widoku kliknijmy w przycisk…

Pokazanie działania akcji “Modal”

Teraz kliknijmy w przycisk zamykający…

i DZIAŁA !!!

  • Punkt.2. Akcja “Modal”.

Ta akcja działa podobnie jak akcja “Show”, tylko z jedną mała różnicą, okno które ukażemy za pomocą tej akcji, będzie tylko one jedno aktywne do interakcji z użytkownikiem reszta będzie zamrożona

Jak ją zastosować tak samo jak w przypadku akcji “Show” tylko na okinku wyboru akcji klikamy w “Modal”

Możecie usunąć wcześniejsze połączenie(Akcji “Show” kilkając na połączenie i wciskając klawisz “Delete”) teraz nam już nie jest potrzebne.

Łączymy tak samo jak w przypadku innych akcji(Wciskamy przycisk “Ctrl” i przeciągamy do drugiego widoku i wybieramy akcję w naszym przypadku “Modal”)

Skompilujcie i zobaczycie że po kliknięciu przycisku otwierającego drugie okno i po pojawieniu się go z drugim oknem nie mamy interakcji

A jak wyświetlić okno Modalne, programistycznie?

Shemat jest taki:

PresentViewControllerAsModalWindow([ObjektKlasyViewController]);

Tam gdzie w kwadratowym nawiasie mamy napisane “ObjektKlasyViewController” tam mamy dać obiekt klasy ViewController czyli? np.:

Sposób.1.

PrzykladowyViewcontroller przykladowyviewcontroller = new PrzykladowyViewcontroller();

PresentViewControllerAsModalWindow(przykladowyviewcontroller);

Tworzymy obiekt klasy Pożądanego Widoku i dajemy jego nazwę w środku nawiasu okrągłego metody “PresentViewControllerAsModalWindow”

Sposób.2.

PresentViewControllerAsModalWindow(new PrzykladowyViewcontroller);

Tutaj tworzymy obiekt od razu w metodzie.:

  • Punkt.3. Akcja “Custom”

Działa identycznie jak akcja “Show” ale mozna więcej robić na niej operacji z poziomu kodu źródłowego

Hint: Więcej na temat tej akcji w następnych artykułach

  • Punkt.4. Akcja “Popover”

Ta akcja jest bardzo ciekawa ponieważ bardzo się różni odwyżej wymienionych akcji ponieważ pokazuje okno w stylu dymku

Po kliknięciu przycisku otwierającego okno otwiera nam się okno o kształcie dymka; A jak je zamknąć? wystarczy kliknąć na rodzimy widok lub kliknąć nasz przycisk zamykający

Jak połączyć?

Idenytcznie jak w przypadku powyzszych akcji tylko wybieramy opcję “Popover”

Jak połączyć z pozycji kodu źródłowego?

Nie da się otworzyć okna “Popover” z pozycji kodu źródłowego, ale z zasady nie jest to potrzebne

  • Punkt.5. Akcja “Sheet”

Ta akcja jest również bardzo specyficzna ponieważ okno które jest pokazywane wysuwa się z góry okna z którego wywołujemy nasz ViewController w stylu “Sheet”

Pokaz Akcji “Sheet”

Jak połączyć?

Idenytcznie jak w przypadku powyzszych akcji tylko wybieramy opcję “Sheet”

Jak połączyć z pozycji kodu źródłowego?

Tworzymy obiekt (w taki sam sposób jak robiliśmy w punkcie Akcja Modalna)

Tak

PresentViewControllerAsSheet(new PrzykladowyViewController());

Lub tak:

PrzykladowyViewcontroller przykladowyviewcontroller = new PrzykladowyViewcontroller();

PresentViewControllerAsSheet(przykladowyviewcontroller);

W ten sposób możemy pokazać okno akcji “Sheet” z pozycji kodu

  • Punkt.6. Podsumowanie

ViewController to widoki w których za pomocą zdarzeń możemy zmieniać. Zmieniać z kodu możemy za pomocą odpowiednich metod które są opisane w powyższych punktach

ViewController to Widok który jest edytowalny.Ten typ istnieje w rodzajach technologi Xamarin takich jak Xamarin.Mac oraz Xamarin.iOS

Co w następnym artykule?

  • Metody wykonywawcze Widoków.
  • Używanie i stosowanie ich.
  • Teoria i Praktyka stosowania metod takich jak:
    • ViewDidLoad();
    • ViewDidAppear();
    • ViewDidDisappear();
    • I wiele innych metod…
  • Oraz wytłumaczenie ich roli w kodzie.
Kategorie: Początki

1 Komentarz

Mikołaj · Wrzesień 13, 2019 o 2:03 pm

*W komentarzach piszcie jakie macie problemy, co byście dodali do bloga i czy coś jeszcze poprawić

Dodaj komentarz

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