开发愤怒的小鸟的Lua语言：Wax框架详解（二）

在《开发愤怒的小鸟的Lua语言：Wax框架详解》中51CTO介绍了Wax及其优点。在本文中我们首先为大家准备了Wax框架的下载包，您可以把Wax下载下来，与我们一起完成用Wax构建一个简单的应用程序的过程。

这个应用程序显示Twitter上的当前趋势话题列表，可以用按钮来更新内容。当完成整个过程之后没准一个创意就能让你开发出自己的《愤怒的小鸟》。最后的结果：

第一步：分析AppDelegate.lua

如果你看一下当前的AppDelegate.lua，会注意到几个方面。首先，你会注意到这个Lua文件的第一行。这一行是Objective-C类声明。我们创建了一个名为“AppDelegate”的类，它符合“UIApplocationDelegate”协议。接下来，你会看到文件中唯一的一个方法：“applicationDidFinishLaunching”。每当应用程序启动，就调用这个有名的方法。应用程序现在可以在屏幕上显示内容。“applicationDidFinishLaunching”里面的代码基本上不需要加以说明。它建立了一个蓝色背景的新窗口，然后将一些白色文本放在上面。不过，我们需要的是一个Twitter客户程序，而不是“Hello Lua!”屏幕。不妨先从创建UITableViewController入手。

第二步：熟悉的UITableViewController

在名为“TwitterViewController.lua”的脚本目录中创建一个新文件。如果你记性很好，会记得为了声明新的Objective-C类，我们需要使用waxClass函数。如果你记性超好，会记得waxClass工作起来像这样：

waxClass{"CLASS NAME", "PARENT_CLASS"}  

我们需要扩展UITableViewController的一个类，所以它看起来像这样：

waxClass{"TwitterViewController", UITableViewController}  

我们已定义了类，现在处理初始化。在我们的“init”方法中，我们把表设成“grouped”，而不是默认状况下的“plain”。由于我们还要显示趋势表，所以也有必要对容纳所有趋势的Lua表进行初始化：

function init(self)  
    self.super:initWithStyle(UITableViewStyleGrouped)  
    self.trends = {}  
   
    return self  
end 

 基本上不需要加以说明。

第三步：准备表

我们已有了一张分组表，就需要一个标题。我们用“viewDidLoad:”方法来实现这一步。

function viewDidLoad(self)    
        self:setTitle("My First Wax Application")    
        self:tableView():setAllowsSelection(false)    
end  

完全不需要加以说明。我们只要把标题放到屏幕顶部的那个条上，然后防止用户选择表里面的任何行。我们不想用户选择任何行，是因为我们不想处理这个操作。可以在苹果的UITableViewController说明文档页面上看到，你能调用哪些其他方法。只要记住：你得使用“:property()”和“:setProperty(value)”方法，而不是使用属性。按Xcode左上角的“Run”，应用程序看起来应该像这样：

#p#

第四步：UITableViewController数据方法

我们的应用程序可以启动，这很好，但我们想要显示一些数据。为了显示这些数据，所有UITableViewController必须实施几个方法，告诉设备显示什么数据。其中第一个方法是“numberOfSectionsInTableView:”，它会返回将在表中显示的群组数量。对该应用程序来说，这一步很容易，因为我们只需要一个表段，即拥有当前趋势的那个表段。

function numberOfSectionsInTableView(self, tableView)  
        return 1  
end  

是不是很容易?现在我们得实施“tableView_numberOfRowsInSection”方法，它告诉设备某个特定的分组会有多少行。对该应用程序来说，这同样很容易，因为我们只有一个表段。记得我们如何用“init”方法对Lua表进行初始化吗?只要计数该表中的表项数量，就知道该表需要显示多少行：

function tableView_numberOfRowsInSection(self, tableView, section)  
        return #self.trends  
end  

这使用Lua简写方法来计数表中的表项数量。如果你不熟悉Lua表，下面有几个要点：

1. 大多数语言中被称为词典的东西在Lua中被称为表。

2. 大多数语言中被称为数组的东西被称为带有序数字键的表。

3. “数组”使用从1开始的索引，而几乎其他每种语言使用从0开始的索引。

接下来是“tableView_titleForHeaderInSection”方法。该方法告诉设备显示什么作为某群组的标题。你只要返回某个指定群组的字符串，标题之后会神奇地出现在表行上方：

function tableView_titleForHeaderInSection(self, tableView, section)   
            if section == 0 then   
                return "Currently Trending Topics"   
end        
            return nil   
end   

相当简单。现在我们只要往表格填充从Twitter的服务器取来的数据。如果你熟悉Objective-C中的UITableViewControllers，就会认识这下一个方法：

function tableView_cellForRowAtIndexPath(self, tableView, indexPath)  
local identifier = "TwitterTableViewControllerCell"  
local cell = tableView:dequeueReusableCellWithIdentifier(identifier) or  
      UITableViewCell:initWithStyle_reuseIdentifier(UITableViewCellStyleDefault, identifier)  
local object = self.trends[indexPath:row() + 1] -- 必须是+1，因为Lua数组从1开始  
cell:textLabel():setText(object)  
        return cell  
end  

这个方法要复杂一点。首先，我们定义了对同一种类型，但可能有不同内容的所有表格单元(cell)来说很独特的标识符。这种情况下，我们称之为“TwitterTableViewControllerCell”。接下来，我们使用Lua简写方法，获得UITableViewCell的实例。注意夹在这两个方法调用之间的“or”。如果第一个方法调用的结果不是false或nil， “cell”就被设成第一个方法调用的值。否则，“cell”会被设成是第二个方法调用的结果。我们这么做是为了节省内存。这样一来，设备每次只要为屏幕上10个左右的表格单元分配内存，而不是为数据源里面可能拥有的数千个表格单元分配内存。当然，我们不会有数千行要显示，但这仍是个有必要养成的好习惯。接下来，我们把表格单元的内容设成从self.trends“数组”的合适部分获取的趋势。我们知道，该索引从来不会超出self.trends的范围，因为我们通过方法“tableView_numberOfRowsInSection”，将数组大小告诉给了设备。最后，我们返回刚创建的表格单元。如果你现在按“Run”，它应该看起来像这样：

第五步：从Twitter装入数据

现在说说真正展现Wax魅力的好玩部分：从互联网、或者更准确地说从Twitter的服务器装入JSON数据。先不妨创建一个名为“loadDataFromTwitter”的新方法。该方法会从Twitter的服务器获取JSON数据，然后为表重新装入新数据。

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) -- hide spinner  
            if response:statusCode() == 200 then  
                self.trends = {} -- Reset the list of trends when the trends are refreshed  
                for index,value in ipairs(json["trends"]) do -- iterate over a table with numerical keys  
                    table.insert(self.trends, value["name"]) -- append the value to the "array"  
    end  
 end  
            self:tableView():reloadData()  
   end}  
end  

是的，就这么简单。你定义了请求的URL以及请求完毕后执行的回调。Wax自动确认服务器在运行JSON后，会将JSON文本自动转换成Lua表。这使得显示网络活动指示器(设备右上角靠近无线信号指示器的图标)异常容易。返回的JSON看起来像这样。键“trends”保存一组对象，这些对象包含趋势名称和访问提到该趋势的所有Twitter消息的URL。

趋势名称存储到self.trends变量里面后，重新装入tableView，它可以再次调用我们之前定义的所有数据方法。这导致趋势在表中显示，非常类似最终产品。

如果你立即试图运行该应用程序，看上去没什么不同。那是因为该方法从未调用。如果从“viewDidLoad:”里面调用该方法，我们就能确保总是可以显示最新趋势。把这行添加到“viewDidLoad:”方法末行的前一行：

self:loadDataFromTwitter()  

如果你点击“Run”，应用程序看起来有点像这样(你得等几秒钟装入趋势，请留意那个活动指示器!)：

第六步：添加重新装入按钮

该应用程序相当棒。不过，要是有重新装入按钮让你可以显示最新趋势，就更好了。幸好，这很容易实现。

不妨把重新装入按钮放到屏幕的右上角。苹果其实提供了上面有刷新图标的按钮，以图方便，就用这个按钮吧。先开始用“viewDidLoad:”方法创建一个按钮。把下面这行添加到“loadDataFromTwitter”调用的前面。

local button = UIBarButtonItem:initWithBarButtonSystemItem_target_action(UIBarButtonSystemItemRefresh, self, "loadDataFromTwitter")  

这创建了一个UIBarButtonItem：一旦按下按钮，就会对当前对象实例调用“loadDataFromTwitter”方法。如果你想尝试其他风格，可以在这里找到列表。

我们已创建好了按钮，现在需要把它添加到我们的界面上。使用UITableViewController使得这项工作轻而容易，我们只要对导航栏对象实例调用“setRightBarButtonItem:”方法，就像这样(这行位于上面给出的那一行后面):

self:navigationItem():setRightBarButtonItem(button)  

如果你各方面都做好了，完成的应用程序应该看起来像这样：

第七步：额外好处

这个项目一个有意思的扩展就是制作更显眼的装入指示器。这可能需要把UIActivityIndicatorView放到其中一个按钮位置。

结论

我希望你觉得这篇教程深入浅出地介绍了Wax。如果你想看到有关某个课题的更多Wax教程，欢迎给我留言。