Programowanie na iPhone'a (4): nasza pierwsza aplikacja (II)

W poprzednim poście wskazaliśmy, jak będzie wyglądać nasza aplikacja HelloWorld i jakie kroki będziemy musieli wykonać, aby zbudować naszą aplikację, a także podaliśmy linki do wymaganej dokumentacji. W tym artykule zaczynamy od otwarcia XCode i zaczynamy się rozwijać.

Krok 1. Utwórz projekt.

Z tego powodu otwieramy XCode i zamykamy (jeśli się pojawi) okno powitalne aplikacji. Przed stworzeniem naszego projektu możemy wprowadzić preferencje XCode. W Ogólne -> Układ wybierz „Wszystko w jednym”, przynajmniej jeśli chcesz mieć możliwość porównania tego, co widzisz na ekranach, z obrazami, które zobaczysz.

W tym momencie tworzymy projekt: File -> New Project i wybieramy View-Based:

Jak wskazaliśmy w poprzednim artykule, dla projektu XCode opartego na widoku tworzy widok połączony z klasą Controller (pamiętaj, że mówiliśmy o wzorcu MVC). Wywołaj projekt HelloWorld i zapisz go w wybranym folderze. Zobaczysz coś podobnego do tego:

Widzimy, że mamy kilka plików:

• HelloWorldViewController.h i HelloWorldViewController.m. Oba odpowiadają kontrolerowi naszego ekranu. Tutaj będzie logika związana z naszym poglądem; W naszym przypadku musi to być kod, który powoduje zmianę wartości etykiety wraz z wpisaniem w polu tekstowym. Widzimy, że jest plik .h i inny .m. Pierwszy to nagłówek, w Javie byłby to interfejs. Oto deklaracje zmiennych, metod itp. Plik .m to ten, który już zawiera implementację.
• HelloWorldViewController.xib. ib = Interface Builder. Ten plik to nasz widok, ekran. Przywołuje go MainWindow.xib, główna fasada widoków, których nie będziemy dotykać.
• HelloWorldAppDelegate (.h i .m). Nie będziemy ich modyfikować, ma wskaźnik do naszego ViewController.
• Info.plist. Jest to plik XML zawierający informacje o naszej aplikacji. Tutaj możemy na przykład wskazać, która jest ikoną naszej aplikacji.

Krok 2. Zaprojektuj interfejs.

Zaczniemy „rysować” ekran naszej aplikacji. Aby to zrobić, w XCode dwukrotnie klikamy HelloWorldViewController.xib i zobaczymy, że otwiera się aplikacja Interface Builder. Przede wszystkim, jako praktyczna rada, radzę zawsze sprawdzać, czy masz otwarte palety Inspektor i Biblioteka. Możesz je otworzyć w menu Narzędzia programu Interface Builder. Paleta Biblioteka umożliwia dodawanie różnych elementów sterujących do widoku, a paleta Inspektor umożliwia wyświetlanie właściwości każdego obiektu i modyfikowanie ich.

Nie będziemy próbować tworzyć ładnej aplikacji, ale sprawić, by działała. Zacznij od zlokalizowania ekranu oznaczonego jako Widok. Jeśli nie jest otwarty, można go otworzyć, klikając dwukrotnie opcję Widok na poniższym ekranie:

W widoku przeciągnij z palety Biblioteka pole tekstowe powyżej, etykietę poniżej, a na koniec okrągły przycisk prostokąta. Patrzymy na to, jeśli mamy wybraną kontrolkę taką jak TextField, możemy przesunąć rozmiar tej kontrolki, przenieść ją na ekran ... aw palecie Inspector możemy mieć jej właściwości. Wybierając przycisk możemy nadać tytuł z wartością «Zmień!». W końcu będziemy mieli coś takiego:

W ten sposób zdefiniowaliśmy interfejs naszej aplikacji. Jest zgodny z tym, co zaplanowaliśmy: pole tekstowe (dalej TextField), w którym będziemy wprowadzać informacje. Etykieta (stały tekst) i przycisk. Po naciśnięciu przycisku etykieta pokaże to, co napisaliśmy w polu tekstowym. Aby to zrobić, będziemy musieli utworzyć zmienne, które odwołują się do etykiety i pola tekstowego w naszym kontrolerze ViewController i będziemy musieli wskazać programowi Interface Builder związek między etykietą a polem tekstowym za pomocą tych zmiennych. Będziemy również musieli utworzyć metodę w ViewController, która jest odpowiedzialna za aktualizację wartości Label za pomocą tego, co wprowadziliśmy w TextField, i powiązać przycisk z tą metodą w programie Interface Builder. Wszystko to będzie krokiem 3, 4 i 5 naszego początkowego skryptu i zostanie wyjaśnione w następnym poście.

Oczywiście przed zakończeniem radzę przyjrzeć się temu, co pojawia się w palecie Biblioteka, gdy wybrałeś na przykład pole tekstowe, aby dodać je do widoku:

Widać, że wyjaśnia, co robi formant TextField, ale pod spodem jest również napisane „UITextField”. Jest to ważne, ponieważ mówi nam, która klasa we frameworku Cocoa UIKit odpowiada tej kontrolce. Daje nam to wskazówkę: aby utworzyć zmienną obsługującą tę kontrolkę w ViewController, będzie ona musiała być typu UITextField.