Share
Dans la première partie, nous avons appris ce qu'est Wax et ce qui le rend si génial. Dans la deuxième partie, nous allons maintenant créer une application simple dans Wax, qui affiche une liste des sujets actuellement en vogue sur Twitter, qui peuvent être actualisés avec un bouton..
Si vous regardez l'actuel AppDelegate.lua, vous devriez remarquer quelques petites choses. Tout d’abord, vous devriez remarquer la toute première ligne du fichier Lua. Cette ligne est la déclaration de classe Objective-C. Nous créons une classe appelée "AppDelegate" conforme au protocole "UIApplocationDelegate". Ensuite, vous devriez voir la seule méthode dans le fichier: "applicationDidFinishLaunching". Cette méthode célèbre est appelée chaque fois que l'application est lancée et qu'elle peut maintenant afficher des éléments à l'écran. Le code dans "applicationDidFinishLaunching" est assez explicite. Il crée une nouvelle fenêtre avec un arrière-plan bleu sarcelle et lorsque du texte blanc est placé dessus. Cependant, nous voulons un client Twitter, pas un "Hello Lua!" écran. Commençons par créer notre UITableViewController.
Créez un nouveau fichier dans le répertoire de script appelé "TwitterViewController.lua". Si vous avez une bonne mémoire, vous vous souviendrez que pour déclarer une nouvelle classe Objective-C, nous devons utiliser la fonction waxClass. Si vous avez unvraiment bonne mémoire, vous vous souviendrez que waxClass fonctionne comme ceci:
waxClass "NOM DE CLASSE", "PARENT_CLASS"
Nous avons besoin d'une classe qui étend UITableViewController, elle a donc l'aspect suivant:
waxClass "TwitterViewController", UITableViewController
Maintenant que notre classe est définie, manipulons l’initialisation. Dans notre méthode "init", nous avons défini la table sur "groupé" au lieu de "brut", comme c'est le cas par défaut. Étant donné que nous allons également afficher un tableau des tendances, il est également judicieux d'initialiser un tableau Lua pour contenir toutes les tendances:
function init (self) self.super: initWithStyle (UITableViewStyleGrouped) self.trends = retourne la fin de soi-même
Assez explicite.
Maintenant que nous avons une table groupée, nous avons besoin d’un titre. Nous faisons cela dans la méthode "viewDidLoad:".
Accentsconagua
function viewDidLoad (self) self: setTitle ("Ma première application de cire") self: tableView (): setAllowsSelection (false) end Très explicite. Nous définissons simplement le titre dans la barre en haut de l'écran, puis empêchons l'utilisateur de sélectionner des rangées de tableau. Nous ne voulons pas que l'utilisateur sélectionne de lignes car nous n'avons pas l'intention de gérer cette action. Vous pouvez voir quelles autres méthodes vous pouvez appeler sur la page de documentation d'Apple pour UITableViewController. N'oubliez pas qu'au lieu d'utiliser des propriétés, vous devez utiliser les méthodes ": property ()" et ": setProperty (value)". Appuyez sur "Exécuter" dans le coin supérieur gauche de Xcode, et votre application devrait ressembler à ceci:
Notre application est lancée, ce qui est excellent, mais nous souhaitons afficher certaines données. Pour afficher ces données, il existe quelques méthodes que tout UITableViewController doit implémenter pour indiquer au périphérique les données à afficher. La première de ces méthodes est "numberOfSectionsInTableView:", qui doit renvoyer le nombre de groupes qui seront affichés dans la table. C'est très facile avec cette application car nous n'aurons jamais besoin que d'une section, la section présentant les tendances actuelles:
numéro de fonctionOfSectionsInTableView (self, tableView) return 1 end
Facile, non? Nous devons maintenant implémenter la méthode "tableView_numberOfRowsInSection" qui indique au périphérique le nombre de lignes qu'il y aura pour un groupe spécifique. C'est encore très facile pour cette application car nous n'avons qu'une seule section. Rappelez-vous comment nous avons initialisé une table Lua dans la méthode "init"? Nous pouvons simplement compter le nombre d'éléments dans cette table et nous saurons combien de lignes cette table devra afficher:
function tableView_numberOfRowsInSection (self, tableView, section) return # self.trends end
Cette méthode utilise la méthode abrégée Lua pour compter le nombre d'éléments dans un tableau. Si vous n'êtes pas familier avec les tables Lua, voici quelques indications:
Suivant est la méthode "tableView_titleForHeaderInSection". Cette méthode indique à l'appareil ce qu'il doit afficher comme titre pour un groupe. Vous renvoyez simplement une chaîne pour le groupe spécifié, puis le titre apparaît comme par magie au-dessus des lignes du tableau:
function tableView_titleForHeaderInSection (self, tableView, section) si section == 0, puis retourne "Sujets de tendances en cours" end retourne nil end
Assez simple. Il ne nous reste plus qu'à remplir la table avec les données extraites des serveurs de Twitter. Si vous connaissez UITableViewControllers dans Objective-C, vous reconnaîtrez cette méthode suivante:
fonction tableView_cellForRowAtIndexPath (self, tableView, indexPath) identifiant local = "TwitterTableViewControllerCell" local cell = tableView: dequeueReusableCellWithIdentifier (identificateur) ou Doit +1 car les tableaux Lua sont constitués d'une cellule: textLabel (): setText (object) return cell end
Cette méthode est un peu plus complexe. Tout d'abord, nous définissons un identifiant unique pour toutes les cellules du même style, mais éventuellement avec un contenu différent. Dans ce cas, nous l'appelons "TwitterTableViewControllerCell". Ensuite, nous obtenons notre instance d'un UITableViewCell en utilisant un peu de Lua. Notez le "ou" pris en sandwich entre les deux appels de méthode. "cellule" est définie sur la valeur du premier appel de méthode si le résultat du premier appel de méthode n'est pas faux ou nil. Sinon, "cellule" sera défini sur le résultat du second appel de méthode. La raison pour laquelle nous faisons cela est d'économiser de la mémoire. Cela permet à l'appareil d'allouer de la mémoire pour la dizaine de cellules à l'écran en même temps, au lieu des milliers qui pourraient éventuellement exister dans la source de données. Bien sûr, nous n’aurons pas des milliers de lignes à afficher, mais c’est quand même une bonne habitude. Ensuite, nous définissons le contenu de la cellule comme étant la tendance extraite de la partie appropriée de self.trends " tableau ". Nous savons que cet index ne sera jamais en dehors de la plage de self.trends car nous avons indiqué au périphérique la taille du tableau dans la méthode "tableView_numberOfRowsInSection". Enfin, nous retournons la cellule nouvellement générée. Si vous appuyez sur "Exécuter" maintenant, cela devrait ressembler à ceci:
Passons maintenant à la partie amusante qui met vraiment en valeur le pouvoir de Wax: charger des données JSON depuis Internet, ou plus précisément depuis les serveurs de Twitter. Commençons par créer une nouvelle méthode appelée "loadDataFromTwitter". Cette méthode devrait extraire le JSON des serveurs de Twitter, puis recharger la table avec les nouvelles données..
function loadDataFromTwitter (self) UIApplication: sharedApplication (): setNetworkActivityIndicatorVisible (true) - show spinner wax.http.request "http://api.twitter.com/1/trends.json", callback = function (fonction, réponse ) UIApplication: sharedApplication (): setNetworkActivityIndicatorVisible (false) - masque le spinner si réponse: statusCode () == 200 then self.trends = - Réinitialise la liste des tendances lorsque les tendances sont actualisées pour index, valeur en ipairs ( json ["trends"]) do - itere sur une table avec des clés numériques table.insert (self.trends, value ["name"]) - ajoute la valeur à "array" end end self: tableView (): reloadData () fin fin
Oui. C'est vraiment aussi simple. Vous définissez l'URL à demander et un rappel à exécuter lorsque la demande est terminée. Wax identifie automatiquement que le serveur renvoie JSON et convertit automatiquement le texte JSON en une table Lua. Cela permet d'afficher l'indicateur d'activité du réseau (le truc qui tourne en haut à droite de l'appareil, près du compteur de signal WiFi) est extrêmement facile. Le JSON renvoyé ressemble à ceci. La clé "tendances" contient un tableau d'objets contenant le nom de la tendance et l'URL permettant d'accéder à tous les tweets contenant cette tendance..
Une fois les noms de tendance stockés dans la variable self.trends, la table est rechargée, laquelle appelle à nouveau toutes les méthodes de données que nous avons définies précédemment. Les tendances affichées dans le tableau sont très similaires au produit final..
Si vous essayez de lancer l'application tout de suite, cela ne sera pas différent. C'est parce que cette méthode n'est jamais appelée. En appelant cette méthode depuis "viewDidLoad:", nous pouvons être sûrs de toujours afficher les dernières tendances. Ajoutez cette ligne juste avant la fin de la méthode "viewDidLoad:":
self: loadDataFromTwitter ()
Si vous cliquez sur "Exécuter", l'application devrait ressembler un peu à ceci (vous devrez peut-être attendre quelques secondes pour que les tendances se chargent, regardez l'indicateur d'activité!):
Cette application est vraiment géniale. Cependant, un bouton de rechargement permettant d'afficher les dernières tendances serait encore mieux. Heureusement, c'est vraiment facile.
Mettons un bouton de rechargement dans le coin supérieur droit de l'écran. Apple fournit en fait un bouton avec une icône d'actualisation pour plus de commodité, alors utilisons-le. Commençons par créer un bouton dans la méthode "viewDidLoad:". Ajoutez cette ligne avant l'appel à "loadDataFromTwitter":
bouton local = UIBarButtonItem: initWithBarButtonSystemItem_target_action (UIBarButtonSystemItemRefresh, self, "loadDataFromTwitter")
Cela crée un UIBarButtonItem qui, lorsqu'il est pressé, appelle la méthode "loadDataFromTwitter" sur l'instance d'objet en cours. Si vous voulez essayer d'autres styles, vous pouvez trouver une liste ici.
Maintenant que nous avons créé un bouton, nous devons l’ajouter à notre interface. Utiliser un UITableViewController rend cela très facile, nous devons simplement appeler la méthode "setRightBarButtonItem:" sur l'instance d'objet de barre de navigation comme suit (ceci suit la ligne que je vous ai donnée ci-dessus):
self: navigationItem (): setRightBarButtonItem (bouton)
Maintenant, les tendances sur Twitter ne changent pas à la seconde, vous ne verrez donc peut-être pas toujours de changement - mais ça marche, je le jure! Si vous avez tout fait correctement, votre application terminée devrait ressembler à ceci:
Une extension amusante de ce projet pourrait consister à créer un indicateur de chargement plus visible. Cela peut impliquer de placer un UIActivityIndicatorView dans l’un des emplacements de bouton..
J'espère que vous avez trouvé ce tutoriel une excellente introduction à Wax. Si vous voulez voir plus de tutoriels sur la cire sur un certain sujet, assurez-vous de laisser un commentaire et dites-moi ce que vous pensez. Qui sait, peut-être que je prendrai votre idée et rédigerai un tutoriel en profondeur!
