Ostatnio nauczyliśmy się korzystać z widoku tabeli. Dziś ta wiedza się nam przyda, ponieważ wykorzystamy ten widok do pokazania danych, które pobierzemy z internetu. Plan tego tutorialu jest następujący:
- Stworzyć nowy projekt
- Stworzyć widok ładowania danych
- Pobrać dane z webservice'u (skorzystamy z api blip.pl)
- Skonwertować dane do przyjaznego formatu
- Wyświetlić nową zawartość tabeli
- Dodać przycisk do odświeżania danych
Otwórzmy na początek RootViewController.xib w Interface Builder. Jak widzimy dostaliśmy tam gotową tabelę, ale ponieważ dane pobierane z sieci nie pojawiają się natychmiast, a dopiero po jakimś czasie, zajmiemy się tabelą w kodzie. Usuwamy UITableView i zamiast niego wkładamy zwykły widok UIView. Nie zapomnijmy połączyć go z kontrolerem. Zapisujemy i wychodzimy z IB.
Dodajemy UIView
Wiążemy widok z kontrolerem
W RootViewController.h zdefiniujmy kilka własności, w miarę czytania wyjaśni się do czego służą.
Właśności w kontrolerze (plik .h)
Właśności w kontrolerze (plik .m)
Szukamy metody loadView w RootViewController.m. Jeśli takiej nie ma, tworzymy ją i w niej zbudujemy nasze widoki. Będą nam potrzebne 2, jeden do poinformowania użytkownika, że trwa pobieranie danych z internetu (loadingView), a drugi do wyświetlania tych danych (tableView). W tym momencie wyjaśnia się nam cel dwóch wcześniej zdefiniowanych własności. Dla tableView ustawiamy źródło danych i delegata na self, czyli na RootViewController. Dzięki temu przydają nam się metody, które zostały stworzone wraz z nowym projektem.
Metoda loadView
Do pobierania danych stwórzmy nową metodę. W celach demonstracyjnych wykorzystamy API blip.pl. Dokumentacja dostępna jest pod adresem http://blip.pl/api-0.02.html. Pobierzemy statusy z bliposfery, ponieważ nie wymaga to autoryzacji. Będziemy sprawdzać czy czasem już nie pobieramy danych, użyjemy w tym celu flagi isLoading. Dane będziemy pobierać asynchronicznie, czyli po prostu wyślemy zapytanie i gdy coś się będzie działo (dostaniemy odpowiedź), będziemy reagować.
Metoda sendRequest
Po kolei, sprawdzamy czy czasem nie mamy jakichś danych w requestData i jeśli tak, pozbywamy się ich. Gdyby tam zostały jakieś śmieci moglibyśmy mieć problemy z konwersją do przyjaznej postaci. Następnie tworzymy URL do webservice'u oraz obiekt, który będzie reprezentował nasze zapytanie. Korzystamy z wersji "mutable" ponieważ API blip.pl wymaga abyśmy podali kilka dodatkowych nagłówków. Teraz już z górki. Tworzymy połączenie i zamieniamy aktualny widok, żeby pokazać, że pobieramy dany. Delegata połączenia ustawiliśmy znów na RootViewController, czyli ta klasa będzie obsługiwała wszystko, co będzie się działo w programie. Na potrzeby tutorialu taka architektura wydaje mi się odpowiednia, ale w prawdziwych appkach, nie powinniśmy ładować wszystkiego do jednej klasy, bo tak jest wygodnie.
Dane pobierane są paczkami, dlatego potrzebujemy zdefiniować metodę, której zadaniem będzie zapisać daną paczkę na później. W tym momencie wyjaśnia się własność requestData, również wersja mutable, bo będziemy dopisywać dane w miarę jak będą się pojawiać.
Obsługa danych pobieranych z webservice'u
Teraz pojawia się problem. Nasze dane, nawet po konwersji do łańcucha znaków, nie są zbyt użyteczne. Na szczęście istnieje gotowy framework, który elegancko konwertuje JSON do tablicy (NSArray) lub hasha (NSDictionary). JSON.framework można pobrać z tej strony. Trzeba go również dodać do projektu. Otwieramy pobrany obraz i przeciągamy folder JSON do naszego projektu. Istnieją inne metody instalacji, ale ta wydaje mi się najprostsza. Po więcej informacji odsyłam do dokumentacji.
Pobrany JSON framework
Dodajemy framework do projektu
Chyba jednak to nie wszystko
Nasza tabela jest pusta. Nie zmieniliśmy metod odpowiedzialnych za informowanie o ilości wierszy ani o tym, co ma się pokazywać w komórkach tabeli. Odszukujemy metodę "(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section" i w niej zwracamy po prostu ilość elementów tablicy results. Natomiast w "(UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath" zajmiemy się zawartością komórek tabeli.http://iphone.devzon...z013-300x71.png
Ustawiamy wartości etykiet w komórce tabeli
Zmieniamy styl z domyślnego na "Subtitle" abyśmy mieli dostęp do drugiej etykiety (detailTextLabel). W naszych wynikach mamy elementy oznaczone kluczami "user_path" i "body". Pierwszy to informacja jak powinniśmy zapytać API o dokładne informacje o użytkowniku, ale nie są one nam potrzebne, drugi to treść blipnięcia.
Jak widać, nie wygląda to najlepiej. Po małych zmianach możemy uzyskać sam login użytkownika, bez konieczności odpytywania API po raz kolejny. Niektóre statusy są za długie i nie widać ich w całości. To zostawiam jako zadanie domowe
Podpowiem, że trzeba stworzyć własną klasę komórki tabeli i nadpisać metodę layoutSubviews.http://iphone.devzon...0141-300x76.png
Mała kosmetyka
Ostatnim punktem na dziś był przycisk do wymuszania odświeżania danych. Otwieramy MainWindow.xib w IB i do nawigatora przeciągamy nowy element. Zmieniamy mu "Identifier" na "Refresh", będzie wtedy wyglądał jak przycisk z Safari i automatycznie będzie wiadomo do czego służy. Podpinamy naszą metodę do wysyłania zapytania i to wszystko.
Kompilujemy i jeśli wszystko poszło OK w symulatorze powinniśmy zobaczyć najnowsze wpisy z bliposfery. Projekt można pobrać stąd.
Tekst pochodzi z mojego bloga iPhone z zaplecza.
