Share
In deel een hebben we geleerd wat Wax is en wat het zo geweldig maakt. Nu, in deel 2, gaan we door met het maken van een eenvoudige toepassing in Wax die een lijst weergeeft van actuele trending topics op Twitter die kunnen worden ververst met een knop.
Als je kijkt naar het huidige AppDelegate.lua, zou je een paar dingen moeten opmerken. Eerst moet je de allereerste regel van het Lua-bestand opmerken. Deze regel is de Class-verklaring voor de Doelstelling-C. We maken een klasse genaamd "AppDelegate" die voldoet aan het "UIApplocationDelegate" -protocol. Vervolgens ziet u de enige methode in het bestand: "applicationDidFinishLaunching". Deze beroemde methode wordt elke keer dat de toepassing wordt gestart aangeroepen en de app kan nu dingen op het scherm weergeven. De code in "applicationDidFinishLaunching" is redelijk duidelijk. Het maakt een nieuw venster met een groenblauw achtergrond en wanneer plaatsen wat witte tekst op. We willen echter een Twitter-client, geen "Hallo Lua!" scherm. Laten we beginnen met het maken van onze UITableViewController.
Maak een nieuw bestand in de scriptdirectory "TwitterViewController.lua". Als je een goed geheugen hebt, zul je je herinneren dat om een nieuwe Objective-C-klasse te declareren, we de waxClass-functie moeten gebruiken. Als je een я hebtwerkelijk goed geheugen, je zult je herinneren dat waxClass zo werkt:
waxClass "CLASS NAME", "PARENT_CLASS"
We hebben een klasse nodig die UITableViewController uitbreidt, dus het ziet er als volgt uit:
waxClass "TwitterViewController", UITableViewController
Nu we onze klasse hebben gedefinieerd, laten we de initialisatie uitvoeren. In onze "init" -methode stellen we de tabel in op "gegroepeerd" in plaats van "gewoon", zoals het standaard is. Omdat we ook een tabel met trends weergeven, is het ook logisch dat we een Lua-tabel initialiseren om alle trends vast te houden:
functie init (self) self.super: initWithStyle (UITableViewStyleGrouped) self.trends = retourneren einde zelf
Vrij vanzelfsprekend.
Nu we een gegroepeerde tabel hebben, hebben we een titel nodig. We doen dit in de "viewDidLoad:" methode.
Accentsconagua
function viewDidLoad (self) self: setTitle ("My First Wax Application") self: tableView (): setAllowsSelection (false) end Zeer duidelijk. We plaatsen simpelweg de titel in de balk bovenaan het scherm en voorkomen dan dat de gebruiker een willekeurige tabelrij selecteert. We willen niet dat de gebruiker rijen selecteert, omdat we niet van plan zijn om die actie af te handelen. U kunt zien welke andere methoden u op de documentatiepagina van Apple voor UITableViewController kunt gebruiken. Onthoud dat u in plaats van het gebruik van eigenschappen de methoden ": property ()" en ": setProperty (value)" moet gebruiken. Druk op "Uitvoeren" in de linkerbovenhoek van Xcode en uw toepassing zou er ongeveer zo uit moeten zien:
Onze app wordt gestart, wat geweldig is, maar we willen wat gegevens weergeven. Om deze gegevens weer te geven, zijn er een paar methoden die alle UITableViewController's moeten implementeren om het apparaat te vertellen welke gegevens moeten worden weergegeven. De eerste van deze methoden is "numberOfSectionsInTableView:", waarmee het aantal groepen moet worden geretourneerd dat in de tabel wordt weergegeven. Dit is heel gemakkelijk met deze app, want we hebben slechts één sectie nodig, het gedeelte met de huidige trends:
functienummerOfSectionsInTableView (self, tableView) retourneert 1 uiteinde
Makkelijk, toch? Nu moeten we de "tableView_numberOfRowsInSection" -methode implementeren die het apparaat vertelt hoeveel rijen er voor een specifieke groepering zullen zijn. Dit is weer heel gemakkelijk voor deze app omdat we maar één sectie hebben. Weet je nog hoe we een Lua-tabel initialiseerden in de "init" -methode? We kunnen eenvoudig het aantal items in die tabel tellen en we zullen weten hoeveel rijen deze tabel moet weergeven:
functietabelView_numberOfRowsInSection (zelf, tableView, sectie) return # self.trends end
Hierbij wordt de Lua-methode met de korte hand gebruikt om het aantal items in een tabel te tellen. Als u niet bekend bent met Lua-tabellen, volgen hier een paar tips:
De volgende is de "tableView_titleForHeaderInSection" -methode. Deze methode vertelt het apparaat wat het de titel van een groep moet weergeven. U retourneert eenvoudig een tekenreeks voor de opgegeven groepering en vervolgens verschijnt de titel magisch boven de tabelrijen:
functietabelView_titleForHeaderInSection (zelf, tableView, sectie) als sectie == 0 en vervolgens "Momenteel trending topics" retourneren einde nul einde
Best makkelijk. Nu hoeven we alleen maar de tabel te vullen met de gegevens die we van de servers van Twitter halen. Als u bekend bent met UITableViewControllers in Objective-C, herkent u deze volgende methode:
function tableView_cellForRowAtIndexPath (self, tableView, indexPath) local identifier = "TwitterTableViewControllerCell" local cell = tableView: dequeueReusableCellWithIdentifier (identifier) of UITableViewCell: initWithStyle_reuseIdentifier (UITableViewCellStyleDefault, identifier) local object = self.trends [indexPath: row () + 1] - Moet +1 omdat Lua-arrays een op 1 gebaseerde cel zijn: textLabel (): setText (object) retourneert het einde van de cel
Deze methode is een beetje ingewikkelder. Eerst definiëren we een ID die uniek is voor alle cellen van dezelfde stijl, maar mogelijk met andere inhoud. In dit geval noemen we het "TwitterTableViewControllerCell". Vervolgens krijgen we ons exemplaar van een UITableViewCell met een beetje Lua short-hand. Let op de "of" ingeklemd tussen de twee methodeaanroepen. "cel" is ingesteld op de waarde van de eerste methode-aanroep als het resultaat van de eerste methode-aanroep niet onwaar of nul is. Anders wordt "cel" ingesteld op het resultaat van de tweede methode-aanroep. De reden dat we dit doen is om geheugen te besparen. Hierdoor kan het apparaat slechts geheugen voor de 10 of zo cellen op het scherm in één keer toewijzen, in plaats van de mogelijk duizenden die in de gegevensbron zouden kunnen bestaan. Natuurlijk hebben we geen duizenden rijen te zien, maar het is nog steeds een goede gewoonte om in te loggen. Vervolgens stellen we de inhoud van de cel in op de trend die wordt geplukt uit het juiste deel van de self.trends " matrix". We weten dat deze index nooit buiten het bereik van self.trends komt omdat we het apparaat de grootte van de array hebben verteld in de methode "tableView_numberOfRowsInSection". Ten slotte retourneren we de nieuw gegenereerde cel. Als u nu op "Uitvoeren" drukt, ziet het er ongeveer zo uit:
Nu voor het leuke gedeelte dat echt de kracht van Wax toont: JSON-gegevens laden van internet of, meer specifiek, van Twitter-servers. Laten we beginnen met het maken van een nieuwe methode genaamd "loadDataFromTwitter". Deze methode moet de JSON van de servers van Twitter halen en vervolgens de tabel opnieuw laden met de nieuwe gegevens.
function loadDataFromTwitter (self) UIApplication: sharedApplication (): setNetworkActivityIndicatorVisible (true) - show spinner wax.http.request "http://api.twitter.com/1/trends.json", callback = function (json, response ) UIApplication: sharedApplication (): setNetworkActivityIndicatorVisible (false) - verberg spinner als reactie: statusCode () == 200 then self.trends = - Reset de lijst met trends wanneer de trends worden vernieuwd voor index, waarde in ipairs ( json ["trends"]) do - itereer over een tabel met numerieke sleutels table.insert (self.trends, value ["name"]) - voeg de waarde toe aan het "array" -eind zelf: tableView (): reloadData () einde einde
Ja. Het is echt zo simpel. U definieert de URL die moet worden opgevraagd en een callback die moet worden uitgevoerd wanneer het verzoek is voltooid. Wax identificeert automatisch dat de server JSON retourneert en converteert de JSON-tekst automatisch naar een Lua-tabel. Dit maakt het tonen van de netwerkactiviteitsindicator (het spinny ding in de rechterbovenhoek van het apparaat, in de buurt van de WiFi-signaalmeter) ongelooflijk eenvoudig. De geretourneerde JSON ziet er ongeveer zo uit. De belangrijkste 'trends' bevatten een reeks objecten die de naam van de trend en de URL bevatten om toegang te krijgen tot alle tweets met die trend.
Nadat de trendnamen zijn opgeslagen in de variabele self.trends, wordt de tabelweergave opnieuw geladen en worden alle gegevensmethoden opnieuw opgehaald die we eerder hebben gedefinieerd. Dit resulteert in de trends die in de tabel worden weergegeven, zeer vergelijkbaar met het eindproduct.
Als je de app nu probeert uit te voeren, ziet het er niet anders uit. Dit komt omdat deze methode nooit wordt aangeroepen. Door deze methode vanuit "viewDidLoad:" aan te roepen, kunnen we ervoor zorgen dat we altijd de nieuwste trends weergeven. Voeg deze regel toe net voor het einde van de "viewDidLoad:" methode:
zelf: loadDataFromTwitter ()
Als je op "Uitvoeren" klikt, ziet de app er ongeveer zo uit (je moet misschien een paar seconden wachten voordat de trends zijn geladen, bekijk de activiteitsindicator!):
Deze app is best geweldig. Een herlaadknop waarmee u de nieuwste trends kunt weergeven, zou echter nog beter zijn. Gelukkig is dit echt gemakkelijk.
Laten we een herlaadknop in de rechterbovenhoek van het scherm plaatsen. Apple biedt eigenlijk een knop met een vernieuwingspictogram om erover te hinderen, dus laten we dat gebruiken. Laten we beginnen met het maken van een knop in de "viewDidLoad:" -methode. Voeg deze regel toe vóór de aanroep van "loadDataFromTwitter":
lokale knop = UIBarButtonItem: initWithBarButtonSystemItem_target_action (UIBarButtonSystemItemRefresh, self, "loadDataFromTwitter")
Hiermee wordt een UIBarButtonItem gemaakt dat, wanneer erop wordt gedrukt, de methode "loadDataFromTwitter" voor de huidige objectinstantie gebruikt. Als je met andere stijlen wilt experimenteren, kun je hier een lijst vinden.
Nu we een knop hebben gemaakt, moeten we deze aan onze interface toevoegen. Het gebruik van een UITableViewController maakt dit zeer eenvoudig, we moeten gewoon de "setRightBarButtonItem:" -methode op de navigatiebalk-objectinstantie zo noemen (dit gaat na de regel die ik je hierboven heb gegeven):
zelf: navigationItem (): setRightBarButtonItem (button)
Nu veranderen Twitter-trends niet per seconde, dus je ziet misschien niet altijd een verandering, maar het werkt, ik zweer het! Als je alles goed hebt gedaan, ziet je voltooide app er als volgt uit:
Een leuke uitbreiding van dit project zou kunnen zijn om een meer zichtbare laadindicator te maken. Dit kan inhouden dat u een UIActivityIndicatorView in een van de knoppen slots plaatst.
Ik hoop dat je deze tutorial als een geweldige introductie tot Wax hebt gevonden. Als je meer Wax-tutorials over een bepaald onderwerp wilt zien, laat dan een reactie achter en vertel me wat je denkt. Wie weet, misschien neem ik je idee en maak ik er een diepgaande zelfstudie van!
