当mobl遇上新浪微博

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上跑的界面大概是这个样子。
mobl with weibo 01
mobl with weibo 02
mobl with weibo 03

全部代码如下:
[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上访问的效果图片

leon

每天进步一点点
Close Menu