`
Virgo_S
  • 浏览: 1153648 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex 创建简单的RIA

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

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

学习要点
一个简单的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.  自定义程序的显示

代码文件
这部分将提供完成的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>


今天先写到这里,明天继续
分享到:
评论

相关推荐

    Flex_4.0_RIA开发详解.pdf

    Flex 4.0是Adobe公司推出的一套富互联网应用(RIA)开发解决方案,它允许开发者构建强大的交互式web应用程序。Flex使用MXML(一种基于XML的标记语言)和ActionScript(基于ECMAScript的编程语言)作为开发语言,具有...

    Flex 3 RIA开发详解与精深实践

    Flex 3 RIA(Rich Internet Application)开发是构建富互联网应用程序的一种技术,它允许开发者创建交互性强、用户体验丰富的Web应用程序。Adobe Flex 3是这一系列技术的一个重要版本,提供了更加强大和灵活的工具集...

    Flex 3 RIA 开发详解与精深实践

    4. Flex Framework:包含了事件模型、数据绑定机制、状态管理等功能,使得组件间的通信和状态转换更加简单。 三、Flex 3开发流程 1. 设计阶段:使用MXML和CSS设计界面布局和样式。 2. 编码阶段:通过ActionScript...

    flex 3 RIA 开发详解与精深实践 Source

    Flex 3 RIA 开发详解与精深实践是关于创建富互联网应用(Rich Internet Applications,简称RIA)的专业指南,尤其侧重于使用Adobe Flex 3框架。这个资源包含第1章到第6章的源代码,这为我们提供了深入理解Flex编程...

    Flex3.0RIA开发详解电子教程22

    Flex3.0是Adobe公司推出的一种富互联网应用(Rich Internet Application, RIA)开发框架,它基于ActionScript编程语言和MXML标记语言,为开发者提供了创建动态、交互性丰富的Web应用程序的强大工具。本教程“Flex3.0...

    Flex_4:开发RIA_应用程序.pdf

    随着版本4的发布,Flex提供了更强大的功能来创建动态且交互丰富的Internet应用程序(RIA)。 - **RIA(富互联网应用)定义**: - 富互联网应用(Rich Internet Applications, RIA)是指一类提供类似桌面应用程序用户...

    《Flex 3 RIA开发详解与精深实践》

    3. 事件驱动编程:Flex 3的事件模型使得用户交互和程序响应变得更加简单,通过监听和处理事件,可以实现动态和响应式的应用程序。 4. 嵌入式字体和图形:Flex 3支持嵌入字体和矢量图形,使应用程序具备高质量的视觉...

    Flex_4.0_RIA开发详解

    Flex 是 Adobe 公司推出的一系列工具和技术集合,旨在支持开发人员创建并部署可升级的富互联网应用程序 (RIA)。Flex 提供了一个现代化的标准语言支持,包括通用模板设计、客户端运行环境、编程模型、开发模型以及...

    Flex3.0RIA开发详解电子教程3

    通过本教程,开发者可以学习到如何利用Flex3.0的特性和工具来创建功能丰富的RIA应用,理解其背后的架构原理,提升在前端开发中的专业素养。无论你是初学者还是有经验的开发者,这个教程都将是你深入Flex3.0世界的...

    FLEX入门新手篇..创建HelloWorid.doc

    本文将引导初学者通过简单的步骤创建第一个Flex应用——经典的"Hello, World"。 1. **启动Flex Builder** 首先,你需要安装并运行Adobe Flex Builder。这是一个集成开发环境(IDE),提供了图形化工具来帮助你构建...

    Flex入门教程-Web和RIA工程实例

    Flex入门教程——Web和RIA...通过这个教程,你将逐步熟悉Flex的开发流程,掌握基本的Flex编程技巧,并能够创建简单的Web和RIA应用。同时,解决常见问题的能力也会得到提升,这对于成为一个合格的Flex开发者至关重要。

    Flex3 RIA开发详解与精深实践

    Flex3为开发者提供了强大的界面构建工具和丰富的组件库,使得创建交互性强、用户体验良好的Web应用变得更加简单。本教程“Flex3 RIA开发详解与精深实践”旨在帮助初学者快速入门并深入理解Flex3的开发技术。 一、...

    Flex + Java简单例子

    【Flex + Java简单例子】是关于使用Flex与Java进行跨域数据交互的一个基础教程,主要涉及Flex客户端和Java服务器端的配置与开发。这个例子旨在展示如何通过BlazeDS库在Flex前端和Java后端之间建立通信。 首先,我们...

    flex画板简单版

    标题中的“flex画板简单版”指的是一个基于Adobe Flex技术实现的在线绘画应用程序。Flex是一种开源的、基于ActionScript的框架,用于构建富互联网应用程序(RIA)。它允许开发者使用MXML和ActionScript来构建交互式...

    flex air简单的通讯录

    标题 "flex air简单的通讯录" 暗示了这是一个基于Adobe Flex和Adobe AIR技术开发的简单通讯录应用程序。Flex是用于构建富互联网应用程序(RIA)的开源框架,它使用MXML和ActionScript作为主要开发语言。AIR(Adobe ...

    Flex3.0RIA开发详解电子教程18

    综上所述,“Flex3.0 RIA开发详解电子教程18”将深入剖析上述知识点,帮助开发者掌握Flex3.0的核心技术和实践应用,从而更好地利用这一工具创建出高质量的RIA应用。通过学习和实践,开发者将能够提升自己的技能,为...

Global site tag (gtag.js) - Google Analytics