Share
Nella prima parte, abbiamo appreso cosa sia Wax e cosa lo rende così fantastico. Ora, nella parte 2, passeremo attraverso la creazione di una semplice applicazione in Wax che visualizza un elenco di argomenti attualmente di tendenza su Twitter che possono essere aggiornati con un pulsante.
Se guardi l'attuale AppDelegate.lua, dovresti notare alcune cose. Innanzitutto, dovresti notare la prima riga del file Lua. Questa riga è la dichiarazione della classe Objective-C. Creiamo una classe chiamata "AppDelegate" conforme al protocollo "UIApplocationDelegate". Successivamente, dovresti vedere l'unico metodo nel file: "applicationDidFinishLaunching". Questo famoso metodo viene chiamato ogni volta che l'applicazione viene avviata e l'app può ora visualizzare le cose sullo schermo. Il codice in "applicationDidFinishLaunching" è abbastanza auto-esplicativo. Crea una nuova finestra con uno sfondo verde acqua e quando inserisce del testo bianco. Tuttavia, vogliamo un client Twitter, non un "Ciao Lua!" schermo. Iniziamo creando il nostro UITableViewController.
Crea un nuovo file nella directory degli script chiamata "TwitterViewController.lua". Se hai una buona memoria, ti ricorderai che per dichiarare una nuova classe Objective-C, dobbiamo usare la funzione waxClass. Se hai un яveramente buona memoria, ti ricorderai che waxClass funziona così:
waxClass "CLASS NAME", "PARENT_CLASS"
Abbiamo bisogno di una classe che estenda UITableViewController, così sembra:
waxClass "TwitterViewController", UITableViewController
Ora che abbiamo definito la nostra classe, gestiamolainizializzazione. Nel nostro metodo "init", impostiamo la tabella in "gruppi" anziché in "plain", come per impostazione predefinita. Dato che mostreremo anche una tabella delle tendenze, per noi ha anche senso inizializzare una tabella Lua per contenere tutte le tendenze:
function init (self) self.super: initWithStyle (UITableViewStyleGrouped) self.trends = return self end
Abbastanza auto esplicativo.
Ora che abbiamo una tabella raggruppata, abbiamo bisogno di un titolo. Lo facciamo nel metodo "viewDidLoad:".
Accentsconagua
function viewDidLoad (self) self: setTitle ("My First Wax Application") self: tableView (): setAllowsSelection (false) end Molto auto-esplicativo. Semplicemente impostiamo il titolo nella barra nella parte superiore dello schermo e quindi impediamo all'utente di selezionare qualsiasi riga della tabella. Non vogliamo che l'utente selezioni alcuna riga perché non intendiamo gestire tale azione. Puoi vedere quali altri metodi puoi chiamare sulla pagina di documentazione di Apple per UITableViewController. Ricorda che invece di usare le proprietà devi usare i metodi ": property ()" e ": setProperty (value)". Premi "Esegui" nell'angolo in alto a sinistra di Xcode e la tua applicazione dovrebbe assomigliare a questa:
La nostra app si avvia, che è grandiosa, ma vogliamo mostrare alcuni dati. Per visualizzare questi dati ci sono alcuni metodi che tutti gli UITableViewController devono implementare per comunicare al dispositivo quali dati visualizzare. Il primo di questi metodi è "numberOfSectionsInTableView:", che dovrebbe restituire il numero di raggruppamenti che verranno visualizzati nella tabella. Questo è molto facile con questa app perché avremo sempre bisogno di una sola sezione, la sezione con le tendenze attuali:
function numberOfSectionsInTableView (self, tableView) restituisce 1 fine
Facile, giusto? Ora dobbiamo implementare il metodo "tableView_numberOfRowsInSection" che indica al dispositivo quante righe ci saranno per un gruppo specifico. Questo è ancora molto facile per questa app perché abbiamo solo una sezione. Ricorda come abbiamo inizializzato una tabella Lua nel metodo "init"? Possiamo semplicemente contare il numero di elementi in quella tabella e sapremo quante righe questa tabella dovrà mostrare:
function tableView_numberOfRowsInSection (self, tableView, section) return # self.trends end
Questo metodo usa il metodo Lua per contare il numero di elementi in una tabella. Se non hai familiarità con i tavoli Lua, ecco alcuni suggerimenti:
Il prossimo è il metodo "tableView_titleForHeaderInSection". Questo metodo dice al dispositivo cosa dovrebbe visualizzare un titolo per un raggruppamento. È sufficiente restituire una stringa per il raggruppamento specificato e quindi il titolo appare magicamente sopra le righe della tabella:
function tableView_titleForHeaderInSection (self, tableView, section) se section == 0 quindi restituisce "Argomenti di tendenza attuali" end return nil end
Abbastanza semplice. Ora tutto ciò che dobbiamo fare è popolare la tabella con i dati che recuperiamo dai server di Twitter. Se hai familiarità con UITableViewControllers in Objective-C, riconoscerai questo metodo successivo:
function tableView_cellForRowAtIndexPath (self, tableView, indexPath) local identifier = "TwitterTableViewControllerCell" local cell = tableView: dequeueReusableCellWithIdentifier (identificatore) o UITableViewCell: initWithStyle_reuseIdentifier (UITableViewCellStyleDefault, identificatore) local object = self.trends [indexPath: row () + 1] - Deve fare +1 perché gli array Lua sono basati su 1 cella: textLabel (): setText (oggetto) restituisce fine cella
Questo metodo è un po 'più complesso. Innanzitutto, definiamo un identificatore unico per tutte le celle dello stesso stile, ma possibilmente con contenuti diversi. In questo caso lo chiamiamo "TwitterTableViewControllerCell". Successivamente, otteniamo la nostra istanza di UITableViewCell usando un po 'di Lua short-hand. Notare "o" inserito tra le due chiamate di metodo. "cella" è impostata sul valore della prima chiamata al metodo se il risultato della prima chiamata al metodo non è falso o nullo. Altrimenti, "cella" sarà impostata sul risultato della seconda chiamata di metodo. Il motivo per cui lo facciamo è di risparmiare memoria. Ciò consente al dispositivo di allocare solo memoria per 10 o più celle sullo schermo contemporaneamente, invece delle migliaia eventualmente esistenti nell'origine dati. Ovviamente non avremo migliaia di righe da mostrare, ma è comunque una buona abitudine. In seguito, impostiamo il contenuto della cella come la tendenza che viene estratta dalla parte appropriata del self.trends " matrice". Sappiamo che questo indice non sarà mai al di fuori del range di self.trends perché abbiamo detto al dispositivo la dimensione dell'array nel metodo "tableView_numberOfRowsInSection". Infine, restituiamo la cella appena generata. Se premi "Esegui" ora, dovrebbe assomigliare a questo:
Ora per la parte divertente che mette in mostra il potere di Wax: caricamento dei dati JSON da Internet o, più specificamente, dai server di Twitter. Iniziamo creando un nuovo metodo chiamato "loadDataFromTwitter". Questo metodo dovrebbe estrarre il JSON dai server di Twitter e quindi ricaricare la tabella con i nuovi dati.
function loadDataFromTwitter (self) UIApplication: sharedApplication (): setNetworkActivityIndicatorVisible (true) - mostra spinner wax.http.request "http://api.twitter.com/1/trends.json", callback = function (json, response ) Applicazione UIA: sharedApplication (): setNetworkActivityIndicatorVisible (false) - nasconde spinner se response: statusCode () == 200 then self.trends = - Ripristina l'elenco delle tendenze quando le tendenze vengono aggiornate per indice, valore in ipairs ( json ["trends"]) esegui iterazione su una tabella con le chiavi numeriche table.insert (self.trends, value ["name"]) - aggiungi il valore alla "matrice" end end self: tableView (): reloadData () end end
Sì. È davvero così semplice. Si definisce l'URL da richiedere e un callback da eseguire al termine della richiesta. Wax identifica automaticamente che il server sta restituendo JSON e converte automaticamente il testo JSON in una tabella Lua. Ciò rende incredibilmente facile mostrare l'indicatore dell'attività di rete (la cosa spinny in alto a destra del dispositivo, vicino al misuratore di segnale WiFi). Il JSON restituito assomiglia a qualcosa del genere. Le "tendenze" chiave contengono una serie di oggetti che contengono il nome della tendenza e l'url per accedere a tutti i tweet con tale tendenza.
Dopo che i nomi di tendenza sono stati memorizzati nella variabile self.trends, il tableView viene ricaricato che richiama tutti i metodi di dati che abbiamo definito in precedenza. Ciò si traduce nelle tendenze visualizzate nella tabella, molto simile al prodotto finale.
Se provi a eseguire l'app adesso, non sembrerà diversa. Questo perché questo metodo non viene mai chiamato. Chiamando questo metodo da "viewDidLoad:", possiamo essere sicuri di mostrare sempre le ultime tendenze. Aggiungi questa riga subito prima della fine del metodo "viewDidLoad:":
auto: loadDataFromTwitter ()
Se premi "Esegui", l'app dovrebbe apparire un po 'come questa (potrebbe essere necessario attendere qualche secondo per il caricamento delle tendenze, guardare l'indicatore di attività!):
Questa app è davvero fantastica. Tuttavia, un pulsante di ricarica che consente di visualizzare le tendenze più fresche sarebbe ancora meglio. Fortunatamente, questo è veramente facile.
Mettiamo un pulsante di ricarica nell'angolo in alto a destra dello schermo. Apple in realtà fornisce un pulsante con un'icona di aggiornamento su foramoconvenience, quindi usiamolo. Iniziamo creando un pulsante nel metodo "viewDidLoad:". Aggiungi questa riga prima della chiamata a "loadDataFromTwitter":
button locale = UIBarButtonItem: initWithBarButtonSystemItem_target_action (UIBarButtonSystemItemRefresh, self, "loadDataFromTwitter")
Questo crea un UIBarButtonItem che quando premuto richiama il metodo "loadDataFromTwitter" sull'istanza dell'oggetto corrente. Se vuoi sperimentare con altri stili, puoi trovare un elenco qui.
Ora che abbiamo creato un pulsante, dobbiamo aggiungerlo alla nostra interfaccia. Usando un UITableViewController questo semplifica molto, abbiamo semplicemente bisogno di chiamare il metodo "setRightBarButtonItem:" sull'istanza dell'oggetto barra di navigazione in questo modo (questo va dopo la riga che ho dato sopra):
auto: navigationItem (): setRightBarButtonItem (pulsante)
Ora, le tendenze di Twitter non cambiano nel secondo, quindi potresti non vedere sempre un cambiamento - ma funziona, lo giuro! Se hai fatto tutto correttamente, l'app completata dovrebbe essere simile a questa:
Un'estensione divertente di questo progetto potrebbe essere quella di rendere un indicatore di caricamento più visibile. Ciò potrebbe comportare l'inserimento di UIActivityIndicatorView in uno degli slot dei pulsanti.
Spero tu abbia trovato questo tutorial come un'ottima introduzione a Wax. Se vuoi vedere più tutorial di cera su un certo argomento, assicurati di lasciare un commento e dimmi cosa stai pensando. Chissà, forse prenderò la tua idea e realizzerò un tutorial approfondito!
