Flex 中如果使用Twitter API

Posted by admin on Aug 22, 2009 in Uncategorized |

原文： http://enigmaticthought.com/2009/08/how-to-flex-the-twitter-api/
Category: Flex / Tag: Flex, Gumbo, programming, Twitter / Add Comment

我呆在Freenode #flex (IRC 频道)一会儿，有人问在Flex中如何使用Twitter。既然我对其他的API已经动手做过我提出了一些建议，但我从来没有亲自处理过Twitter。Douglas Knudsen在他的360 |印度会议指出，没有使用Twitter 的mashup网页不是真正的完整网页，所以在这里教你如何“完成”你自己的项目。

有这个念头之后,（有新的Flash builder4试用版安装）我想有什么比建立一个Twitter的的Flex应用程序更好的了解Spark呢？由于我打算张贴它作为How to 教程，我要保持它是简单而令人愉悦。当然，读者应该可以很容易地获取代码段并将其移动到您自己的大型应用程序中。

我想第一步是了解Twitter的API的，直到我发现已经存在的项目有照顾到这种需要。感谢开源库tweetr ，我只是有一个Twitter模糊的想法，可以让tweetr做繁重的活。不用担心值对象或处理XML的细节，只需一个简单的事件监听器。所以，我把重点放在了Spark(我以前从来没有用它处理过)。

如果你想看到最后输出（和查看源文件）我已经张贴在这里。

搜索代码用起Tweetr是非常简单的。我只添加一个事件监听COMPLETE 事件，结果推送为可绑定的ArrayCollection 。我已经绑定了搜索功能到输入＆单击事件Spark 文字输入框和按钮，但由于他们工作就像他们的MX组件，这还不是真正有趣去研究。
查看代码ACTIONSCRIPT3

[Bindable]
private var _searchResults:ArrayCollection = new ArrayCollection();
private function search():void {
    var tweetr:Tweetr = new Tweetr;
    tweetr.addEventListener(TweetEvent.COMPLETE, searchResults, false, 0, true);
    tweetr.search(searchInput.text);
}
private function searchResults(event:TweetEvent):void {
    _searchResults.source = event.responseArray;
    _searchResults.refresh();
}

使用MX ，我通常绑定这些数据以一定的顺序到DataGrid中或Repeater，Spark 也没有这些。但是，感谢Flash Builder的代码提示，我发现了DataGroup的组件。这有点像repeater，有更多的布局配置.感谢Spark 中布局的工作方式。
查看代码ACTIONSCRIPT3

<s:DataGroup
    dataProvider="{_searchResults}"
    itemRenderer="com.enigmaticthought.components.TweetBox" width="100%">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
</s:DataGroup>

因此，我剩下的工作是建立一个渲染器。这就用TweetBox来发挥。其基类是一个Spark ItemRenderer ，这有一个小技巧来处理，因为我得为它定义一个状态，即使我没有使用任何状态。这是因为ItemRenderer使用状态定义鼠标经过和选择，使组件可以定制。

填写TweetBox中，我只是覆盖了设置数据函数，分配所有值去显示组件。不幸的是， SearchResultData没有绑定时建成，所以我不能只让数据绑定做这项工作。
查看代码ACTIONSCRIPT3

import com.swfjunkie.tweetr.data.objects.SearchResultData;
private var _tweet:SearchResultData;
override public function set data(value:Object) : void {
    super.data = value;
    _tweet = value as SearchResultData;
    if (_tweet) {
        tweetImage.source = _tweet.userProfileImage;
        tweetText.text = _tweet.text;
        tweetAuthor.text = _tweet.user;
    }
}

另外一个需要注意的一点是，文字资料我可以用Spark组件，图片仍然是一个的MX组件。在Spark Image 中没有任何计划，但这是一个很好的混和Spark MX的项目例子。
查看代码ACTIONSCRIPT3

<s:ItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    width="100%">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
——————————————–
…State & Code Removed…
——————————————–
    <mx:Image id="tweetImage" height="48" width="48" scaleContent="true" />
    <s:VGroup id="textGroup" width="100%">
        <s:SimpleText id="tweetText" width="100%" explicitMaxWidth="{textGroup.width}" />
        <s:SimpleText id="tweetAuthor" width="100%" textAlign="right"/>
    </s:VGroup>
</s:ItemRenderer>