Flex blog reader implementation code

According to the "flex Chinese help" Translated by Liu Gang

To complete this project, perform the following steps:
1. Set the project
2. Check the remote data source to be accessed
Applications Running in flash player on the client computer for security reasonsProgramOnly when the following conditions are met:
To access remote data:
A. the SWF file of the application is located in the same domain as the remote data source.
B. Use a proxy, and the SWF file and proxy are located on the same server.
C. Install the crossdomain. XML (Cross-Domain Policy) file on the host Web server of the data source.
The example in this section uses the third method.
Insert and configure a blog reader
In this section, you will learn how to create a blog reader.
1. Select the lessons project in the navigation view, select File> New> mxml application, and create
A file called blogreader. mxml.
2. Set blogreader. mxml to the default compiled file.
3. In the design mode of the mxml Editor, drag a panel container from the component view and set its phase
Attribute Value:
Title: blog reader
Width: 475
Height: 400
X: 10
Y: 10
4. In the design mode, drag the following components from the component View to the Panel container:
DataGrid
Textarea
Linkbutton
5. Use the mouse to place the control in vertical and left-aligned columns.
6. Select the DataGrid Control and set the corresponding properties:
ID: dgposts
X: 20
Y: 20
Width: 400
7. Select the textarea control and set the corresponding properties:
X: 20
Y: 175
Width: 400
8. Select the linkbutton control and set the corresponding properties:
Label: Read full post
X: 20
Y: 225
The interface Layout looks like this:

9. Click the Source button on the toolbar to switch to the Editor Source Code mode. In the blogreader. mxml file
, enter the following mxml Code :


Title = "blog reader">











10. save the file and run it after compilation. A browser window will open, as shown below.

In this step, the application has not displayed any blog information. The next step is to use
Httpservice RPC service component to obtain the blog information.

Insert httpservice component
For the blog reader project, the data source is http://www.adobe.com/go/mchotinblog. You
Use the httpservice component to access the XML of the blog. This component sends an http get or POST request and obtains
The data returned.
1. in source code mode, enter the <mx: httpservice> tag in the <mx: Application> tag:
<Mx: httpservice
Id = "feedrequest"
Url ="Http://weblogs.macromedia.com/mchotin/index.xml"
Useproxy = "false"/>
The URL attribute specifies the location of the requested file. In this example, the URL is always valid, but you still
Determine whether it has changed.
The useproxy attribute indicates that you do not intend to use a proxy on the server. Because there is a Matt's blog on it.
Crossdomain. xml settings, so Flash Player can access remote data on the server.
Next, the application is prompted to send a request to the specified URL.

2. After the <mx: Application> label, add the creationcomplete attribute (shown in bold ):
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute"
Creationcomplete = "feedrequest. Send ()">
Each time your application is started, the send () method of the httpservice component will be called. This method is
And get an HTTP response. In this example, RSS feed returns
XML data.
Next, check whether the RSS feed is obtained successfully. Then, bind the data to the label control, as shown in the following figure:

3. In the <mx: Panel> label, replace the value of the title attribute with the following expression:
Title = "{feedrequest. lastresult. RSS. Channel. Title }"
When the httpservice component returns XML, it analyzes it in The ActionScript object named lastresult.
The structure of the lastresult object reflects the structure of the XML document.

The XML structure is usually as follows:
<RSS>
<Channel>
<Title>
Other child nodes of <channel>
<Item>
<Title>
Other child nodes of <item>
</Item>
...
The lastresult object of the httpservice component reflects this structure, and your code looks like this:
<? 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. Save the file and compile and run it.

Assemble the DataGrid Control
In the application, use the DataGrid Control to display the title of the new post.
1. in source code mode, enter the following dataprovider attributes in the <mx: DataGrid> tab:
<Mx: DataGrid x = "20" Y = "20" id = "dgposts" width = "400"
Dataprovider = "{feedrequest. lastresult. RSS. Channel. Item }" >
The XML node named item provides data for the DataGrid Control. In XML, this node is repeated.
It is also repeated in the DataGrid.
2. In the first <mx: datagridcolumn> label, type headertext and datafield, as shown in the following figure.
Property value:
<Mx: datagridcolumn headertext = "posts" Datafield = "title" />
The first column of the DataGrid control is used to display the title. To achieve this, determine the words in XML that contain the title data.
And then enter this field as the datafield attribute value. XML specified in the dataprovider attribute (item)
Node. The subnode named title contains the required information.
3. Enter headertext, datafield, and
Width property value:
<Mx: datagridcolumn headertext = "date" Datafield = "pubdate" width = "150" />
The second column in The DataGrid is used to display the date. In this example, fields containing data are called pubdate.
4. Delete the third <mx: datagridcolumn> label because the third column is not required here.
<Mx: DataGrid> the tag looks like this:
<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. Save the file and run it after compilation.

Show selected items
When you select the DataGrid Control, you want the application to display only the posts in the textarea control.
. In the item node of the XML supplier, this information is contained in a word called description.
.
1. in source code mode, enter the following htmltext attribute in the <mx: textarea> label:
<Mx: textarea x = "20" Y = "175" width = "400"
Htmltext = "{dgposts. selecteditem. Description }"/>
For each item selected in the DataGrid component (named dgposts), the value of the description field is
HTML text. This attribute enables you to display HTML text.
2. Save the file and run it after compilation. Click the column in The DataGrid Control. The first few lines of content of each post are displayed.
In the textarea control.

Create a dynamic connection
The RSS feed does not provide the complete text of the post, but you can still enable users to read the Post. If
If they are interested. The RSS feed does not provide information. You can connect to the URLs of each post.
In the item node of the XML supplier, this information is contained in a field called Link.
You can create a dynamic connection to display all the content of the selected post in the DataGrid.
1. in source code mode, enter the click attribute shown in the following figure in the <mx: linkbutton> tag:
<Mx: linkbutton x = "20" Y = "225" label = "read full Post"
Click = "navigatetoURL (New URLRequest (dgposts. selecteditem. Link ));"/>
The value of the connection field to be selected in the DataGrid Control. dgposts. selecteditem. Link is set by navigatetoURL ()
The method parameter is specified and is called whenever you click the linkbutton control. The navigatetoURL () method is in
In a new browser window, load the documents from the specified URL.
2. Save the file and run it after compilation.

The above is the process and code for creating a Bolg reader.