注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

云水禅心

淡若秋菊何妨瘦, 清到梅花不畏寒.

 
 
 

日志

 
 

开发愤怒的小鸟的Lua语言:Wax框架详解(二)  

2011-08-11 13:01:16|  分类: iphone |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
英文原文:http://mobile.tutsplus.com/tutorials/iphone/iphone-wax-part-2/  

Building Native iOS Apps with Wax: Creating a Sample Application

http://mobile.51cto.com/hot-270208.htm

在《开发愤怒的小鸟的Lua语言:Wax框架详解》中51CTO介绍了Wax及其优点。在本文中我们首先为大家准备了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工作起来像这样:

  1. waxClass{"CLASS NAME""PARENT_CLASS"}  

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

  1. waxClass{"TwitterViewController", UITableViewController}  

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

  1. function init(self)  
  2.     self.super:initWithStyle(UITableViewStyleGrouped)  
  3.     self.trends = {}  
  4.    
  5.     return self  
  6. end 

 基本上不需要加以说明。

第三步:准备表

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

  1. function viewDidLoad(self)    
  2.         self:setTitle("My First Wax Application")    
  3.         self:tableView():setAllowsSelection(false)    
  4. end  


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

准备表

第四步:UITableViewController数据方法

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

  1. function numberOfSectionsInTableView(self, tableView)  
  2.         return 1  
  3. end  

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

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

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

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

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

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

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

  1. function tableView_titleForHeaderInSection(self, tableView, section)   
  2.             if section == 0 then   
  3.                 return "Currently Trending Topics"   
  4. end        
  5.             return nil   
  6. end   

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

  1. function tableView_cellForRowAtIndexPath(self, tableView, indexPath)  
  2. local identifier = "TwitterTableViewControllerCell"  
  3. local cell = tableView:dequeueReusableCellWithIdentifier(identifier) or  
  4.       UITableViewCell:initWithStyle_reuseIdentifier(UITableViewCellStyleDefault, identifier)  
  5. local object = self.trends[indexPath:row() + 1] -- 必须是+1,因为Lua数组从1开始  
  6. cell:textLabel():setText(object)  
  7.         return cell  
  8. 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数据,然后为表重新装入新数据。

  1. function loadDataFromTwitter(self)  
  2. UIApplication:sharedApplication():setNetworkActivityIndicatorVisible(true) -- show spinner  
  3.         wax.http.request{"http://api.twitter.com/1/trends.json", callback = function(json, response)  
  4. UIApplication:sharedApplication():setNetworkActivityIndicatorVisible(false) -- hide spinner  
  5.             if response:statusCode() == 200 then  
  6.                 self.trends = {} -- Reset the list of trends when the trends are refreshed  
  7.                 for index,value in ipairs(json["trends"]) do -- iterate over a table with numerical keys  
  8.                     table.insert(self.trends, value["name"]) -- append the value to the "array"  
  9.     end  
  10.  end  
  11.             self:tableView():reloadData()  
  12.    end}  
  13. end  

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

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

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

  1. self:loadDataFromTwitter()  

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

请留意那个活动指示器

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

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

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

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

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

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

  1. self:navigationItem():setRightBarButtonItem(button)  

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

完成的应用程序

第七步:额外好处

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

结论

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

  评论这张
 
阅读(989)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018