在《開發(fā)憤怒的小鳥的Lua語言：Wax框架詳解》中51CTO介紹了Wax及其優(yōu)點(diǎn)。在本文中我們首先為大家準(zhǔn)備了Wax框架的下載包，您可以把Wax下載下來，與我們一起完成用Wax構(gòu)建一個(gè)簡(jiǎn)單的應(yīng)用程序的過程。

這個(gè)應(yīng)用程序顯示Twitter上的當(dāng)前趨勢(shì)話題列表，可以用按鈕來更新內(nèi)容。當(dāng)完成整個(gè)過程之后沒準(zhǔn)一個(gè)創(chuàng)意就能讓你開發(fā)出自己的《憤怒的小鳥》。最后的結(jié)果：

第一步：分析AppDelegate.lua

如果你看一下當(dāng)前的AppDelegate.lua，會(huì)注意到幾個(gè)方面。首先，你會(huì)注意到這個(gè)Lua文件的第一行。這一行是Objective-C類聲明。我們創(chuàng)建了一個(gè)名為“AppDelegate”的類，它符合“UIApplocationDelegate”協(xié)議。接下來，你會(huì)看到文件中唯一的一個(gè)方法：“applicationDidFinishLaunching”。每當(dāng)應(yīng)用程序啟動(dòng)，就調(diào)用這個(gè)有名的方法。應(yīng)用程序現(xiàn)在可以在屏幕上顯示內(nèi)容。“applicationDidFinishLaunching”里面的代碼基本上不需要加以說明。它建立了一個(gè)藍(lán)色背景的新窗口，然后將一些白色文本放在上面。不過，我們需要的是一個(gè)Twitter客戶程序，而不是“Hello Lua!”屏幕。不妨先從創(chuàng)建UITableViewController入手。

第二步：熟悉的UITableViewController

在名為“TwitterViewController.lua”的腳本目錄中創(chuàng)建一個(gè)新文件。如果你記性很好，會(huì)記得為了聲明新的Objective-C類，我們需要使用waxClass函數(shù)。如果你記性超好，會(huì)記得waxClass工作起來像這樣：

waxClass{"CLASS NAME", "PARENT_CLASS"}  

我們需要擴(kuò)展UITableViewController的一個(gè)類，所以它看起來像這樣：

waxClass{"TwitterViewController", UITableViewController}  

我們已定義了類，現(xiàn)在處理初始化。在我們的“init”方法中，我們把表設(shè)成“grouped”，而不是默認(rèn)狀況下的“plain”。由于我們還要顯示趨勢(shì)表，所以也有必要對(duì)容納所有趨勢(shì)的Lua表進(jìn)行初始化：

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

 基本上不需要加以說明。

第三步：準(zhǔn)備表

我們已有了一張分組表，就需要一個(gè)標(biāo)題。我們用“viewDidLoad:”方法來實(shí)現(xiàn)這一步。

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

完全不需要加以說明。我們只要把標(biāo)題放到屏幕頂部的那個(gè)條上，然后防止用戶選擇表里面的任何行。我們不想用戶選擇任何行，是因?yàn)槲覀儾幌胩幚磉@個(gè)操作?？梢栽谔O果的UITableViewController說明文檔頁面上看到，你能調(diào)用哪些其他方法。只要記?。耗愕檬褂?ldquo;:property()”和“:setProperty(value)”方法，而不是使用屬性。按Xcode左上角的“Run”，應(yīng)用程序看起來應(yīng)該像這樣：

#p#

第四步：UITableViewController數(shù)據(jù)方法

我們的應(yīng)用程序可以啟動(dòng)，這很好，但我們想要顯示一些數(shù)據(jù)。為了顯示這些數(shù)據(jù)，所有UITableViewController必須實(shí)施幾個(gè)方法，告訴設(shè)備顯示什么數(shù)據(jù)。其中第一個(gè)方法是“numberOfSectionsInTableView:”，它會(huì)返回將在表中顯示的群組數(shù)量。對(duì)該應(yīng)用程序來說，這一步很容易，因?yàn)槲覀冎恍枰粋€(gè)表段，即擁有當(dāng)前趨勢(shì)的那個(gè)表段。

function numberOfSectionsInTableView(self, tableView)  
        return 1  
end  

是不是很容易?現(xiàn)在我們得實(shí)施“tableView_numberOfRowsInSection”方法，它告訴設(shè)備某個(gè)特定的分組會(huì)有多少行。對(duì)該應(yīng)用程序來說，這同樣很容易，因?yàn)槲覀冎挥幸粋€(gè)表段。記得我們?nèi)绾斡?ldquo;init”方法對(duì)Lua表進(jìn)行初始化嗎?只要計(jì)數(shù)該表中的表項(xiàng)數(shù)量，就知道該表需要顯示多少行：

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

這使用Lua簡(jiǎn)寫方法來計(jì)數(shù)表中的表項(xiàng)數(shù)量。如果你不熟悉Lua表，下面有幾個(gè)要點(diǎn)：

1. 大多數(shù)語言中被稱為詞典的東西在Lua中被稱為表。

2. 大多數(shù)語言中被稱為數(shù)組的東西被稱為帶有序數(shù)字鍵的表。

3. “數(shù)組”使用從1開始的索引，而幾乎其他每種語言使用從0開始的索引。

接下來是“tableView_titleForHeaderInSection”方法。該方法告訴設(shè)備顯示什么作為某群組的標(biāo)題。你只要返回某個(gè)指定群組的字符串，標(biāo)題之后會(huì)神奇地出現(xiàn)在表行上方：

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

相當(dāng)簡(jiǎn)單?，F(xiàn)在我們只要往表格填充從Twitter的服務(wù)器取來的數(shù)據(jù)。如果你熟悉Objective-C中的UITableViewControllers，就會(huì)認(rèn)識(shí)這下一個(gè)方法：

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，因?yàn)長(zhǎng)ua數(shù)組從1開始  
cell:textLabel():setText(object)  
        return cell  
end  

這個(gè)方法要復(fù)雜一點(diǎn)。首先，我們定義了對(duì)同一種類型，但可能有不同內(nèi)容的所有表格單元(cell)來說很獨(dú)特的標(biāo)識(shí)符。這種情況下，我們稱之為“TwitterTableViewControllerCell”。接下來，我們使用Lua簡(jiǎn)寫方法，獲得UITableViewCell的實(shí)例。注意夾在這兩個(gè)方法調(diào)用之間的“or”。如果第一個(gè)方法調(diào)用的結(jié)果不是false或nil， “cell”就被設(shè)成第一個(gè)方法調(diào)用的值。否則，“cell”會(huì)被設(shè)成是第二個(gè)方法調(diào)用的結(jié)果。我們這么做是為了節(jié)省內(nèi)存。這樣一來，設(shè)備每次只要為屏幕上10個(gè)左右的表格單元分配內(nèi)存，而不是為數(shù)據(jù)源里面可能擁有的數(shù)千個(gè)表格單元分配內(nèi)存。當(dāng)然，我們不會(huì)有數(shù)千行要顯示，但這仍是個(gè)有必要養(yǎng)成的好習(xí)慣。接下來，我們把表格單元的內(nèi)容設(shè)成從self.trends“數(shù)組”的合適部分獲取的趨勢(shì)。我們知道，該索引從來不會(huì)超出self.trends的范圍，因?yàn)槲覀兺ㄟ^方法“tableView_numberOfRowsInSection”，將數(shù)組大小告訴給了設(shè)備。最后，我們返回剛創(chuàng)建的表格單元。如果你現(xiàn)在按“Run”，它應(yīng)該看起來像這樣：

第五步：從Twitter裝入數(shù)據(jù)

現(xiàn)在說說真正展現(xiàn)Wax魅力的好玩部分：從互聯(lián)網(wǎng)、或者更準(zhǔn)確地說從Twitter的服務(wù)器裝入JSON數(shù)據(jù)。先不妨創(chuàng)建一個(gè)名為“loadDataFromTwitter”的新方法。該方法會(huì)從Twitter的服務(wù)器獲取JSON數(shù)據(jù)，然后為表重新裝入新數(shù)據(jù)。

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  

是的，就這么簡(jiǎn)單。你定義了請(qǐng)求的URL以及請(qǐng)求完畢后執(zhí)行的回調(diào)。Wax自動(dòng)確認(rèn)服務(wù)器在運(yùn)行JSON后，會(huì)將JSON文本自動(dòng)轉(zhuǎn)換成Lua表。這使得顯示網(wǎng)絡(luò)活動(dòng)指示器(設(shè)備右上角靠近無線信號(hào)指示器的圖標(biāo))異常容易。返回的JSON看起來像這樣。鍵“trends”保存一組對(duì)象，這些對(duì)象包含趨勢(shì)名稱和訪問提到該趨勢(shì)的所有Twitter消息的URL。

趨勢(shì)名稱存儲(chǔ)到self.trends變量里面后，重新裝入tableView，它可以再次調(diào)用我們之前定義的所有數(shù)據(jù)方法。這導(dǎo)致趨勢(shì)在表中顯示，非常類似最終產(chǎn)品。

如果你立即試圖運(yùn)行該應(yīng)用程序，看上去沒什么不同。那是因?yàn)樵摲椒◤奈凑{(diào)用。如果從“viewDidLoad:”里面調(diào)用該方法，我們就能確保總是可以顯示最新趨勢(shì)。把這行添加到“viewDidLoad:”方法末行的前一行：

self:loadDataFromTwitter()  

如果你點(diǎn)擊“Run”，應(yīng)用程序看起來有點(diǎn)像這樣(你得等幾秒鐘裝入趨勢(shì)，請(qǐng)留意那個(gè)活動(dòng)指示器!)：

第六步：添加重新裝入按鈕

該應(yīng)用程序相當(dāng)棒。不過，要是有重新裝入按鈕讓你可以顯示最新趨勢(shì)，就更好了。幸好，這很容易實(shí)現(xiàn)。

不妨把重新裝入按鈕放到屏幕的右上角。蘋果其實(shí)提供了上面有刷新圖標(biāo)的按鈕，以圖方便，就用這個(gè)按鈕吧。先開始用“viewDidLoad:”方法創(chuàng)建一個(gè)按鈕。把下面這行添加到“loadDataFromTwitter”調(diào)用的前面。

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

這創(chuàng)建了一個(gè)UIBarButtonItem：一旦按下按鈕，就會(huì)對(duì)當(dāng)前對(duì)象實(shí)例調(diào)用“loadDataFromTwitter”方法。如果你想嘗試其他風(fēng)格，可以在這里找到列表。

我們已創(chuàng)建好了按鈕，現(xiàn)在需要把它添加到我們的界面上。使用UITableViewController使得這項(xiàng)工作輕而容易，我們只要對(duì)導(dǎo)航欄對(duì)象實(shí)例調(diào)用“setRightBarButtonItem:”方法，就像這樣(這行位于上面給出的那一行后面):

self:navigationItem():setRightBarButtonItem(button)  

如果你各方面都做好了，完成的應(yīng)用程序應(yīng)該看起來像這樣：

第七步：額外好處

這個(gè)項(xiàng)目一個(gè)有意思的擴(kuò)展就是制作更顯眼的裝入指示器。這可能需要把UIActivityIndicatorView放到其中一個(gè)按鈕位置。

結(jié)論

我希望你覺得這篇教程深入淺出地介紹了Wax。如果你想看到有關(guān)某個(gè)課題的更多Wax教程，歡迎給我留言。