在《開發憤怒的小鳥的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教程，歡迎給我留言。