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阅读器的步骤与代码。

发表评论

发表评论