Flex 创建简单的RIA

在这部分里，你将学习到怎么创建一个简单的RIA，根据用户输入的关键字，从the Flickr提供给用户的API取回并且显示图片。创建这个程序你将会用到Flex Builder，Flex的组件，和Flex HTTP服务。
这部分的资源是按一下顺序组织的(from least detail to most detail，在最后的章节指导你添加的资源)。
内容包括：
[color=red]学习要点[/color]：对创建一个简单的RIA的信息和概念的概述
[color=red]代码文件[/color]：对Flickr的RIA的完整代码
[color=red]代码剖析[/color]：通过一个交互式方式，理解Flick的RIA（Rich International Application）代码
[color=red]学习体验[/color]：一步步的说明如何创建FlickrRIA的。

下面的程序用FlexBuilder创建，是一个已经嵌入的SWF文件。输入一个搜索项，像Adobe，在文本框里，并且点击提交按钮，就可以从FlickrAPI获取并且显示数据。

[color=red]学习要点[/color]：
一个简单的FlickrAPI程序的目的是让编程人员了解MXML和ActionScript的语法，和
Flex的开发过程。
与Flickr简单的RIA相关的信息
下面的列表概述了帮助你定位于AdobeFlex技术的要点
1. Flex程序是Flash程序
1.1 Flex是以编程为核心方式去创建基于Flash的富网络程序。
1.2 Flex程序用Flash Player 9展示
1.3 像所有的Flash的RIA一样，FlexSWF文件也是在客户端进行的，而不是在服务器端。
2. Flex框架包含了预定义类库，和创建Flex程序必要的程序服务。
2.1 框架在免费的SDK和基于Eclipse以FlexBuilder命名的IDE中都有效
2.2 框架包括一个编译器，他可以作为单独的工具或者FlexBuilder的一部分。
2.3 类库和应用服务提供为了快捷程序开发给开发者标准的组件和工具。
标准UI组件可以被扩展和自定义。
3. Flex程序是用MXML或者ActionScript写的。
3.1 MXML是一种基于XML的标记语言，它主要是用于放置程序要显示的元素
3.2 ActionScript是一种面向对象的编程语言，主要用于程序的逻辑。
3.3 MXML和ActionScript被编译成二进制的SWF文件


你们在Flickr简单的RIA中学到什恶魔？
当你学习Flickr简单RIA代码的时候，你将学会怎样去：
1. 用MXML接受用户提供的关键字并且显示照片来创建用户接口
2. 用ActionScript写方法和事件处理
3. 用Flex HTTP服务请求和处理RSS来自Flickr数据
4. 创建一个绑定XML的变量，它用于罗列出列表数据
5. 为XML数据创建命名空间
6. 创建一个可以显示图片的位置和描述在组件中
7. 创建自定义组件
8. 自定义程序的显示

[color=red]代码文件[/color]：
这部分将提供完成的FlickrRIA的代码

Main Application (FlickrRIA.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[0xFFFFFF, 0xAAAAAA]"
    horizontalAlign="left"
    verticalGap="15"
    horizontalGap="15">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var photoFeed:ArrayCollection;

            private function requestPhotos():void {
                photoService.cancel();
                var params:Object = new Object();
                params.format = 'rss_200_enc';
                params.tags = searchTerms.text;
                photoService.send(params);
            }

            private function photoHandler(event:ResultEvent):void {
                 photoFeed = event.result.rss.channel.item as ArrayCollection;
            }
         ]]>
    </mx:Script>

    <mx:HTTPService id="photoService"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)" />

	<mx:HBox>
		<mx:Label text="Flickr tags or search terms:" />
		<mx:TextInput id="searchTerms" />
		<mx:Button label="Search"
			click="requestPhotos()" />
	</mx:HBox>

	<mx:TileList width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail">
	</mx:TileList>

</mx:Application>

Custom component item renderer (FlickrThumbnail.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
	width="125" height="125"
	horizontalAlign="center"
	paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">

	<mx:Image
		width="75" height="75"
		source="{data.thumbnail.url}" />

	<mx:Text width="100" text="{data.credit}" />

</mx:VBox>

今天先写到这里，明天继续