Share
În prima parte, am aflat despre ceea ce este Wax și ceea ce îl face atât de minunat. Acum, în partea a 2-a, vom trece prin a face o aplicație simplă în Wax care afișează o listă cu subiectele actuale în curs de desfășurare pe Twitter care pot fi actualizate cu un buton.
Dacă te uiți la actualul AppDelegate.lua, ar trebui să observați câteva lucruri. Mai întâi, ar trebui să observați prima linie a dosarului Lua. Această linie este declarația clasei Obiectiv-C. Creați o clasă numită "AppDelegate" care să respecte protocolul "UIApplocationDelegate". Apoi, ar trebui să vedeți singura metodă din fișier: "applicationDidFinishLaunching". Această metodă faimoasă se numește de fiecare dată când aplicația este lansată, iar aplicația poate afișa lucrurile pe ecran. Codul din "applicationDidFinishLaunching" este destul de explicativ. Creează o fereastră nouă cu fundal teal și când adaugă un text alb. Cu toate acestea, vrem un client Twitter, nu un "Hello Lua!" ecran. Să începem prin crearea unui UITableViewController.
Creați un fișier nou în directorul script numit "TwitterViewController.lua". Dacă aveți o memorie bună, vă veți aminti că pentru a declara o nouă clasă Obiectiv-C, trebuie să folosim funcția waxClass. Dacă aveți o eaîntr-adevăr memorie buna, va veti aminti ca ceara functioneaza astfel:
clasa wax "CLASS NAME", "PARENT_CLASS"
Avem nevoie de o clasă care să extindă UITableViewController, așa că arată astfel:
waxClass "TwitterViewController", UITableViewController
Acum, că avem clasa noastră definită, să ne ocupăm de inițiere. În metoda "init", am setat tabelul să fie "grupat" în loc de "simplu", așa cum este în mod implicit. De vreme ce vom afișa și un tabel de tendințe, este de asemenea util să inițializăm un tabel Lua care să țină toate tendințele:
funcția init (self) self.super: initWithStyle (UITableViewStyleGrouped) self.trends = întoarcere auto-sfârșit
Destul de explicativ.
Acum că avem o masă grupată, avem nevoie de un titlu. Facem acest lucru în metoda "viewDidLoad:".
Accentsconagua
funcția viewDidLoad (self) self: setTitle ("Prima mea aplicație pentru ceară") self: tableView (): setAllowsSelection (false) end Foarte explicativ. Am setat pur și simplu titlul în bara din partea superioară a ecranului și apoi împiedicăm utilizatorul să aleagă orice rânduri de tabelă. Nu vrem ca utilizatorul să selecteze rânduri, deoarece nu intenționăm să manipulăm acea acțiune. Puteți vedea ce alte metode puteți apela pe pagina de documentare a Apple pentru UITableViewController. Amintiți-vă că, în loc să utilizați proprietăți, trebuie să utilizați metodele ": property ()" și ": setProperty (value)". Apăsați pe "Run" în colțul din stânga sus al Xcode și aplicația ar trebui să arate astfel:
Aplicația noastră se lansează, ceea ce este grozav, dar dorim să afișăm anumite date. Pentru a afișa aceste date, există câteva metode pe care trebuie să le implementeze toate dispozitivele UITableViewController pentru a le spune dispozitivului ce date să afișeze. Prima dintre aceste metode este "numberOfSectionsInTableView:", care ar trebui să returneze numărul de grupări care vor fi afișate în tabel. Acest lucru este foarte ușor cu această aplicație, deoarece vom avea nevoie doar de o singură secțiune, secțiunea cu tendințele actuale:
funcția numberOfSectionsInTableView (auto, tableView) retur 1 sfârșit
Ușor, nu? Acum trebuie să implementăm metoda "tableView_numberOfRowsInSection" care indică dispozitivului câte rânduri vor fi disponibile pentru o anumită grupare. Acest lucru este din nou foarte ușor pentru această aplicație deoarece avem o singură secțiune. Amintiți-vă cum am inițializat un tabel Lua în metoda "init"? Putem număra pur și simplu numărul de elemente din tabelul respectiv și vom ști câte rânduri va trebui să fie afișate de acest tabel:
tabelul de funcțiiView_numberOfRowsInSection (auto, tableView, secțiune) return # self.trends end
Aceasta folosește metoda Lua short-hand de numărare a numărului de elemente dintr-un tabel. Dacă nu sunteți familiarizați cu tabelele Lua, iată câteva indicații:
Următoarea este metoda "tableView_titleForHeaderInSection". Această metodă indică dispozitivului ce ar trebui să afișeze titlul unei grupări. Returnați pur și simplu un șir pentru gruparea specificată și apoi titlul apare în mod magic peste rândurile tabelului:
funcția tableView_titleForHeaderInSection (auto, tableView, secțiune) dacă secțiunea == 0 apoi returnați "Currently Trending Topics" final return nil end
Destul de simplu. Acum, tot ce trebuie să facem este să populam masa cu datele pe care le preluăm de pe serverele Twitter. Dacă sunteți familiarizați cu UITableViewControllers în Obiectiv-C, veți recunoaște următoarea metodă:
funcția tableviewView_cellForRowAtIndexPath (auto, tableView, indexPath) identificator local = "TwitterTableViewControllerCell" local cell = tableView: dequeueReusableCellWithIdentifier (identificator) sau UITableViewCell: initWithStyle_reuseIdentifier (UITableViewCellStyleDefault, identifier) obiect local = self.trends [indexPath: row1) Trebuie să +1, deoarece matricele Lua sunt celula bazată pe 1: textLabel (): setText (object) return end cell
Această metodă este un pic mai complexă. În primul rând, definim un identificator care este unic pentru toate celulele aceluiași stil, dar eventual cu conținut diferit. În acest caz îl numim "TwitterTableViewControllerCell". Apoi, primim exemplul nostru de UITableViewCell folosind un pic de Lua short-hand. Observați "sau" între cele două apeluri de metodă. "celula" este setată la valoarea primului apel de metodă dacă rezultatul primului apel de metodă nu este fals sau nu. În caz contrar, "celula" va fi setată la rezultatul celui de-al doilea apel. Motivul pentru care facem asta este de a salva memoria. Acest lucru permite dispozitivului să aloce doar o memorie pentru cel puțin 10 celule de pe ecran, în loc de eventualele mii care ar putea exista în sursa de date. Desigur, nu vom avea mii de rânduri pe care să le afișăm, dar este încă un bun obicei să intrăm. Apoi, setăm conținutul celulei să fie tendința care este scoasă de la partea potrivită a propriilor tendințe " matrice“. Știm că acest indice nu va fi niciodată în afara intervalului de autostrăzi, deoarece am spus dispozitivului dimensiunea matricei în metoda "tableView_numberOfRowsInSection". În cele din urmă, vom returna celulă generată recent. Dacă apăsați acum "Run", ar trebui să arate ceva de genul:
Acum pentru partea distractivă care prezintă cu adevărat puterea lui Wax: încărcarea datelor JSON de pe Internet sau, mai precis, de pe serverele Twitter. Să începem prin crearea unei metode noi numite "loadDataFromTwitter". Această metodă ar trebui să tragă JSON-ul de pe serverele Twitter și apoi să reîncarce tabelul cu noile date.
funcția loadDataFromTwitter (auto) UIApplicație: sharedApplication (): setNetworkActivityIndicatorVisible (adevărat) - arată spinner wax.http.request "http://api.twitter.com/1/trends.json", callback = funcția (json, răspuns ) UIApplication: sharedApplication (): setNetworkActivityIndicatorVisible (false) - ascunde spinner dacă răspunsul: statusCode () == 200 apoi self.trends = - Resetați lista de tendințe atunci când tendințele sunt reîmprospătate pentru index, valoare ipairs ()) - se adaugă la tabela cu tastele numerice table.insert (self.trends, value ["name"]) - adăugați valoarea la sfârșitul final al "array": tableView (): reloadData () end end
Da. Este foarte simplu. Definiți URL-ul care urmează să fie solicitat și un apel invers care urmează să fie executat când cererea este terminată. Wax identifică automat că serverul întoarce JSON și convertește automat textul JSON într-un tabel Lua. Acest lucru face ca indicatorul de activitate a rețelei (lucrul spinny din partea dreaptă sus a dispozitivului, lângă contorul de semnal WiFi) să fie incredibil de ușor. JSON-ul returnat arată cam așa. "Tendințele" cheie dețin o serie de obiecte care conțin numele tendinței și urlul pentru a accesa toate tweeturile cu acea tendință.
După ce numele trenurilor sunt stocate în variabila self.trends, tableView este reîncărcat, care rechemează toate metodele de date pe care le-am definit mai devreme. Acest lucru are ca rezultat tendințele afișate în tabel, foarte asemănătoare cu produsul final.
Dacă încercați să rulați aplicația chiar acum, aceasta nu va arăta diferită. Aceasta deoarece această metodă nu este chemată niciodată. Apelând această metodă din cadrul "viewDidLoad:", putem să ne asigurăm că afișăm întotdeauna cele mai recente tendințe. Adăugați această linie chiar înainte de sfârșitul metodei "viewDidLoad:":
auto: loadDataFromTwitter ()
Dacă apăsați pe "Run", aplicația ar trebui să arate cam așa (poate fi necesar să așteptați câteva secunde pentru ca tendințele să se încarce, urmăriți indicatorul de activitate!):
Această aplicație este destul de minunată. Cu toate acestea, un buton de reîncărcare care vă permite să afișați cele mai proaspete tendințe ar fi chiar mai bine. Din fericire, acest lucru este foarte ușor.
Să punem un buton de reîncărcare în colțul din dreapta sus al ecranului. Apple oferă, de fapt, un buton care are o pictogramă de reîmprospătare pe ea, pentru a ne permite să folosim asta. Să începem prin crearea unui buton în metoda "viewDidLoad:". Adăugați această linie înainte de a efectua apelul la "loadDataFromTwitter":
butonul local = UIBarButtonItem: initWithBarButtonSystemItem_target_action (UIBarButtonSystemItemRefresh, self, "loadDataFromTwitter")
Acest lucru creează un UIBarButtonItem care, atunci când este apăsat, selectează metoda "loadDataFromTwitter" pe instanța curentă a obiectului. Dacă doriți să experimentați alte stiluri, puteți găsi o listă aici.
Acum că am creat un buton, trebuie să-l adăugăm la interfața noastră. Folosind un UITableViewController face acest lucru foarte simplu, pur și simplu trebuie să apelam metoda "setRightBarButtonItem:" de pe bara de navigație ca în acest caz (aceasta se întâmplă după linia pe care am dat-o mai sus):
auto: navigationItem (): setRightBarButtonItem (buton)
Acum, tendințele Twitter nu se schimbă în cel de-al doilea, așa că este posibil să nu vezi întotdeauna o schimbare - dar funcționează, jur! Dacă ați făcut totul în mod corect, aplicația finalizată ar trebui să arate astfel:
O extindere distractivă a acestui proiect ar putea fi realizarea unui indicator de încărcare mai vizibil. Acest lucru ar putea implica punerea unui UIActivityIndicatorView într-unul din sloturile pentru butoane.
Sper că ați găsit acest tutorial pentru a fi o mare introducere la Wax. Dacă doriți să vedeți mai multe tutoriale despre Wax pe un anumit subiect, asigurați-vă că lăsați un comentariu și spuneți-mi ce gândiți. Cine știe, poate că îți voi lua ideea și voi crea un tutorial în profunzime!
