1.mobl上的twitter trends例子
mobl上关于twitter trends的这个例子，还是蛮好玩的。通过调用twitter的API，得到当下twitter上流行的话题。然后再根据每个话题，显示出最近这个话题的tweets。
2.mobl上的twitter trends例子
照猫画虎，来试试做一个新浪微博的类似应用。查了一下微博的API，遗憾的发现关于话题的API还都处于beta状态。而且要用户登录以后才能调用，不像twitter在不登录的情况下就能调用trends类的API。
新浪微博只有Search类的API有不登录调用的API，我们就拿search模拟一下吧。
[source lang=”js”]
http://api.t.sina.com.cn/search.json?source=xxx&rpp=100&q=sugarcrm
[/source]
3.使用mobl的服务调用json
mobl提供了一个服务service接口，可以通过URL调用json服务。
修改后的新浪search的服务代码如下：
[source lang=”js”]
service Twitter {
resource trends() : JSON {
uri = "http://me.leonzhang.com/mobl/weibotrends/trendsjson.php"
encoding = "jsonp"
mapper = trendsMapper
}
resource search(query : String) : JSON {
//主要要把xxx改成你自己的api key
uri = "http://api.t.sina.com.cn/search.json?source=xxx&rpp=200&q=" + query
encoding = "jsonp"
mapper = tweetsMapper
}
}
[/source]
4.构造mobl界面
还后通过上面的trends服务，构造话题首页：
[source lang=”js”]
header(_("Twitter trends"))
var trends = async(Twitter.trends())
whenLoaded(trends) {
group {
list(topic in trends) {
item(onclick={ search(topic.name); }) {
label(topic.name)
}
}
}
}
[/source]
在通过search服务，构造微博结果显示页。
[source lang=”js”]
screen search(query : String) {
header(query) {
backButton()
}
var results = async(Twitter.search(query))
whenLoaded(results) {
list(tweet in results) {
block(tweetStyle) {
image(tweet.profile_image_url,
style=tweetIconStyle)
<b>label(tweet.from_user) ": "</b>
label(tweet.text)
}
}
}
}
[/source]
基本上就搞定了，打包上传到PhoneGap，一个微博应用就新鲜出炉了。
通过浏览器，可以在这里试用一下。在Andriod上跑的界面大概是这个样子。
全部代码如下：
[source lang=”js”]
application weibotrends
import mobl
import mobl::ui::generic
import mobl::ui::stylemixin
// STYLES
style tweetStyle {
padding: 10px;
margin: 5px;
min-height: 50px;
background-color: white;
border: 1px solid #444;
borderRadiusMixin(10px);
}
style tweetIconStyle {
float: left;
margin: 0 10px 0 0;
}
// TYPES
type Trend {
name : String
url : String
}
type Tweet {
profile_image_url : String
created_at : String
from_user : String
text : String
}
// LOGIC
function trendsMapper(json : JSON) : [Trend] {
return json.trends;
}
function tweetsMapper(json : JSON) : [Tweet] {
return json.results;
}
// SERVICE
service Twitter {
resource trends() : JSON {
uri = "http://me.leonzhang.com/mobl/weibotrends/trendsjson.php"
encoding = "jsonp"
mapper = trendsMapper
}
resource search(query : String) : JSON {
//注意要换成自己的新浪微博API key
uri = "http://api.t.sina.com.cn/search.json?source=xxx&rpp=200&q=" + query
encoding = "jsonp"
mapper = tweetsMapper
}
}
// UI
screen root() {
script {
fetchLanguageBundle("zh.json");
}
header(_("Twitter trends"))
var trends = async(Twitter.trends())
whenLoaded(trends) {
group {
list(topic in trends) {
item(onclick={ search(topic.name); }) {
label(topic.name)
}
}
}
}
}
screen search(query : String) {
header(query) {
backButton()
}
var results = async(Twitter.search(query))
whenLoaded(results) {
list(tweet in results) {
block(tweetStyle) {
image(tweet.profile_image_url,
style=tweetIconStyle)
<b>label(tweet.from_user) ": "</b>
label(tweet.text)
}
}
}
}
[/source]
更新：
@很潮的猪头哥贡献了一张在iphone上访问的效果图片。
