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模拟一下吧。


http://api.t.sina.com.cn/search.json?source=xxx&rpp=100&q=sugarcrm

3.使用mobl的服务调用json

mobl提供了一个服务service接口,可以通过URL调用json服务。
修改后的新浪search的服务代码如下:

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
  }
}

4.构造mobl界面

还后通过上面的trends服务,构造话题首页:

  header(_("Twitter trends"))
  var trends = async(Twitter.trends())
  whenLoaded(trends) {
    group {
      list(topic in trends) {
        item(onclick={ search(topic.name); }) {
		  label(topic.name)
		}
      }
    }
  }

在通过search服务,构造微博结果显示页。

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)
      }
    }
  }
}

基本上就搞定了,打包上传到PhoneGap,一个微博应用就新鲜出炉了。
通过浏览器,可以在这里试用一下。在Andriod上跑的界面大概是这个样子。
mobl with weibo 01
mobl with weibo 02
mobl with weibo 03

全部代码如下:

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)
      }
    }
  }
}

更新:
@很潮的猪头哥贡献了一张在iphone上访问的效果图片

相关文章

    共享到: