flex 博客阅读器 实现代码_Flex

根据由 刘刚 翻译的“flex中文帮助”整理而来

为了完成这个项目,执行的步骤如下:
1. 设置项目
2. 检查要访问的远程数据源
    出于安全的原因,在客户端计算机上Flash Player 中运行的应用程序,只有在满足如下
    条件之一的情况下,才能访问远程的数据:
    a. 应用程序的SWF 文件与远程数据源位于同一个域中。
    b. 使用代理,同时SWF 文件与代理位于同一个服务器中。
    c. 在数据源的宿主web 服务器上安装crossdomain.xml(跨域策略)文件。
    本节中例子使用的是第三种方法。
插入并配置 blog 阅读器
在本小节,你将学习创建一个blog 阅读器。
1. 在导航视图中选择Lessons 项目,选择File > New > MXML Application 并创建一个
    叫BlogReader.mxml 的文件。
2. 将BlogReader.mxml 设置为被编译的默认文件。
3. 在MXML 编辑器的设计模式下,从组件视图中拖拉出一个面板容器,并设置它的相
    应属性值:
    Title: Blog Reader
    Width: 475
    Height: 400
    X: 10
    Y: 10
4. 在设计模式下,从组件视图中拖拉出如下组件到面板容器里:
    DataGrid
    TextArea
    LinkButton
5. 使用鼠标将控件布置成垂直排列的、左对齐的列。
6. 选择DataGrid 控件并设置相应属性:
    Id: dgPosts
    X: 20
    Y: 20
    Width: 400
7. 选择TextArea 控件并设置相应属性:
    X: 20
    Y: 175
    Width: 400
8. 选择LinkButton 控件并设置相应属性:
    Label: Read Full Post
    X: 20
    Y: 225
    界面布局看起来就象这样:

   

9. 点击工具条上的Source button 切换成编辑器源代码模式。在BlogReader.mxml 文件
   中输入如下MXML 代码:
   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" layout="absolute">
         <mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
                           title="Blog Reader">
               <mx:DataGrid x="20" y="20" id="dgPosts" width="400">
                      <mx:columns>
                            <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
                            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
                            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
                      </mx:columns>
               </mx:DataGrid>
              <mx:LinkButton x="20" y="225" label="Read Full Post"/>
               <mx:TextArea x="20" y="175" width="400"/>
         </mx:Panel>
    </mx:Application>
10. 保存文件, 完成编译后运行。一个浏览器窗口将打开, 如下所示。

到这一步,应用程序还没有显示任何blog 信息。接下来的一步是使用一个称之为
HTTPService 的RPC 服务组件来获取blog 的信息。

插入 HTTPService 组件
对于 blog 阅读器这个项目,其数据源来自于http://www.adobe.com/go/mchotinblog。你
使用HTTPService 组件来访问blog 的XML。该组件发送HTTP GET 或POST 请求,并获取
反馈回来的数据。
1. 在源代码模式下,在<mx:Application>标签中输入<mx:HTTPService>标签:
<mx:HTTPService
id="feedRequest"
url="
http://weblogs.macromedia.com/mchotin/index.xml"
useProxy="false"/>
url 属性指明了被请求文件所在的位置。在本例中,该URL 一直是有效的,但是你仍然
需要确定它是否已经发生改变。
useProxy 属性表明你并不打算在服务器上使用代理。因为Matt's blog 上面有
crossdomain.xml 设置,所以Flash Player 可以访问该服务器上的远程数据。
接下来提示应用程序向指定的URL 发送请求。

2. 在<mx:Application>标签后,添加creationComplete 属性(粗体显示):
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="feedRequest.send()" >
你的应用程序每次启动时,HTTPService 组件的send()方法将被调用。该方法向指定
的URL 发出HTTP GET 或POST 请求,并得到HTTP 回应。在本例中,RSS feed 将返回
XML 数据。
接下来,检测RSS feed 的获取是否成功。然后将数据绑定到Label 控件上,就象这样:

3. 在<mx:Panel>标签中,将title 属性的值用随后的表达式替换:
title="{feedRequest.lastResult.rss.channel.title}"
当HTTPService 组件返回XML 时,在名叫lastResult 的ActionScript 对象中进行剖析。
lastResult 对象的结构反映了XML 文档的结构。

XML 的结构通常如下所示:
<rss>
<channel>
<title>
other child nodes of <channel>
<item>
<title>
other child nodes of <item>
</item>
...
HTTPService 组件的lastResult 对象反映了这种结构,你的代码看起来就象这样:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="feedRequest.send()" >
<mx:HTTPService
id="feedRequest"
url="http://weblogs.macromedia.com/mchotin/index.xml"
useProxy="false" />
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
title="{feedRequest.lastResult.rss.channel.title}">
<mx:DataGrid x="20" y="20" id="dgPosts" width="400">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
<mx:LinkButton x="20" y="225" label="Read Full Post"/>
<mx:TextArea x="20" y="175" width="400"/>
</mx:Panel>
</mx:Application>
4. 保存文件,编译完运行。

组装 DataGrid 控件
在应用程序中,使用DataGrid 控件显示新近贴子的标题。
1. 在源代码模式下,在<mx:DataGrid>标签中输入随后的dataProvider 属性:
<mx:DataGrid x="20" y="20" id="dgPosts" width="400"
dataProvider="{feedRequest.lastResult.rss.channel.item}" >
名称为item 的XML 结点为DataGrid 控件提供数据。在XML 中这个结点是重复的,所
以它在DataGrid 中也是重复的。
2. 在第一个<mx:DataGridColumn>标签里,键入如随后所示的headerText 和dataField
属性值:
<mx:DataGridColumn headerText="Posts" dataField="title" />
DataGrid 控件的第一列用来显示标题。实现它是通过确定包含标题数据的XML 中的字
段,然后输入这个字段作为dataField 的属性值。在dataProvider 属性(item)中指定的XML
结点,名为title 的子结点中包含了所需的信息。
3. 在第二个<mx:DataGridColumn>标签中,输入如随后所示的headerText,dataField 和
width 属性值:
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />
DataGrid 中的第二列用来显示日期。在本例中,包含数据的字段被称之为pubDate。
4. 删除第三个<mx:DataGridColumn>标签,因为我们在这里并不需要第三列。
<mx:DataGrid>标签看起来就象这样:
<mx:DataGrid x="20" y="20" id="dgPosts" width="400"
dataProvider="{feedRequest.lastResult.rss.channel.item}">
<mx:columns>
<mx:DataGridColumn headerText="Posts" dataField="title" />
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />
</mx:columns>
</mx:DataGrid>
5. 保存文件,编译后运行。

显示所选的项
当用户在DataGrid 控件中进行选择时,你希望应用程序在TextArea 控件中只显示贴子
的头几行内容。在XML 供给器的项结点中,这个信息被包含在一个称之为description 的字
段里。
1. 在源代码模式中,在<mx:TextArea>标签中输入如随后所示的htmlText 属性:
<mx:TextArea x="20" y="175" width="400"
htmlText="{dgPosts.selectedItem.description}" />
对于在DataGrid 组件中所选择的每个项(名称为dgPosts),description 字段的数值被使
用作为htmlText 的属性,该属性使你可以显示HTML 格式的文本。
2. 保存文件,编译后运行。点击 DataGrid 控件中的分列,每个贴子的头几行内容将出
现在TextArea 控件中。

创建一个动态连接
RSS 供给器并不提供贴子的完整文本,但是你还是可以使用户能够读到这些贴子,如果
他们有兴趣的话。RSS 供给器没有提供的信息,可以通过连接到各个贴子的URLs 来实现。
在XML 供给器的item 结点中,这个信息被包含在一个称之为link 的字段中。
你可以创建一个动态连接来显示在DataGrid 中被选贴子的全部内容。
1. 在源代码模式里,在<mx:LinkButton>标签中输入如随后所示的click 属性:
<mx:LinkButton x="20" y="225" label="Read Full Post"
click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" />
DataGrid 控件中被选项的连接字段的值,dgPosts.selectedItem.link 由navigateToURL()
方法的参数所指定,每当用户点击LinkButton 控件时被调用。navigateToURL() 方法在一
个新打开的浏览器窗口中,加载从指定URL 传来的文档。
2. 保存文件,编译后运行。

以上就是制作一个bolg阅读器的步骤与代码。

时间: 2024-10-05 00:44:57

flex 博客阅读器 实现代码_Flex的相关文章

Ajax -- 困惑者指南,第2部分:开发基于Dojo的博客阅读器

Atom 协议对让网络资源(比如新闻.社区站点和博客)的提供者能够通过 Web 连锁其内容.在 Atom 的典型应用中,内容提供者一般会连锁一个文件或一个 Web 提要,并让其在 Web 上可用.提要的表示在 Atom Syndication Format 中定义,它提供了新添加的资源的一个概要.发布了的提要可随后由 Atom 客户软件使用,例如由博客阅读器使用,后者使用 Atom Publishing Protocol 发现新添加的内容并加以呈示. 本文通过展示如何开发一个基于 Ajax 和

基于flex4技术从零开发flex博客系统:1 开发环境配置与hello world

一,如何学好flex 学习技术,最好的方法莫过于边学边用,一边阅读官方文档,一边在项目中实践.但是官方文档太过乏味:若是没人带,从头做项目又不知从何下手.若是有这么一个人,从他最初学习到最后学有所成,这个过程一一被记录下来,别人沿着他这个轨迹学习,一定会更容易入门. 对于初学者,学习内容若太难了,不易理解:若太容易了,又丧失了学习的兴趣与动力.cookbook居说很好,例子很丰富,无论什么问题都能找到答案.但CookBook只是只是针对简单.单一问题的解答集合,很松散,问题与问题之间没有联系,解

基于flex4技术从零开发flex博客系统:8 using jsp and jstl

一,using jsp App Engine java提供对JSP,JSTL的几乎完全支持.本课主要介绍如何在GAE for java中使用jsp及jstl. 打开eclipse菜单->Preferences->Java->Installed JREs,添加jdk安装目录,并设为默认.默认eclipse仅指向了jre目录. 开发flex博客系统:8 using jsp and jstl-jsp 页面引入 jstl">打开gapp_flexblog项目,在war目录下添加j

提高博客阅读体验的六种技巧

博客的阅读体验有很多方面,如果您要建立一个受欢迎的博客,那么,你可能要善待你的读者,提高阅读体验,这样会提高他们再次访问你博客的机会,让他们成为你的博客或网站的常客之一,当然你的网站如果可以注册的话,还可以成为你的注册用户之一,下面我就提供较为实用的六种方法. 1.简短明了的博客介绍. 这通常被大家认为是没用的,或者说不必要的,但不然,其实这样可以让访问者可以清楚的知道你的网站或博客的类型.总结一下格式大致为: 第一部分:网站的目标,即网站的主题内容,比如月光博客在刚建站是写的一篇介绍,月光博客

新人求助,写csdn博客的时候插入代码显示行号

问题描述 新人求助,写csdn博客的时候插入代码显示行号 这是我自己写博客时候插入的代码,但是不显示行号,请问怎么才能显示呢 解决方案 我明白了,原来保存之后就有行号了,被自己蠢哭了(┬_┬) 解决方案二: 解决方案三: markdown好像没有这个功能.

腾讯博客幻灯片效果js代码

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3c.org/tr/1999/rec-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>腾讯博客幻灯片效果js代码</t

csdn 博客中实现运行代码功能实现_javascript技巧

因为没有运行功能,所以想在页面中实现运行代码功能,下面的代码是个不错的实现方法,当然你也可以任何你想实现代码运行功能的地方使用. 复制代码 代码如下: <p> <script type="text/javascript"><!-- function viewPage(html) {     var page = window.open('', '', '');     page.opener = null;     page.document.write(

利用Python爬虫代理IP快速增加博客阅读量的教程

写在前面 题目所说的并不是目的,主要是为了更详细的了解网站的反爬机制,如果真的想要提高博客的阅读量,优质的内容必不可少. 了解网站的反爬机制 一般网站从以下几个方面反爬虫: 1. 通过Headers反爬虫 从用户请求的Headers反爬虫是最常见的反爬虫策略.很多网站都会对Headers的User-Agent进行检测,还有一部分网站会对Referer进行检测(一些资源网站的防盗链就是检测Referer). 如果遇到了这类反爬虫机制,可以直接在爬虫中添加Headers,将浏览器的User-Agen

通过Python爬虫代理IP快速增加博客阅读量_python

写在前面 题目所说的并不是目的,主要是为了更详细的了解网站的反爬机制,如果真的想要提高博客的阅读量,优质的内容必不可少. 了解网站的反爬机制 一般网站从以下几个方面反爬虫: 1. 通过Headers反爬虫 从用户请求的Headers反爬虫是最常见的反爬虫策略.很多网站都会对Headers的User-Agent进行检测,还有一部分网站会对Referer进行检测(一些资源网站的防盗链就是检测Referer). 如果遇到了这类反爬虫机制,可以直接在爬虫中添加Headers,将浏览器的User-Agen