Flex Blog Reader Implementation code _flex

Based on "Flex Chinese Help" translated by Liu

To complete this project, the following steps are performed:
1. Set up Project
2. Check the remote data source you want to access
For security reasons, the application running in Flash Player on the client computer only satisfies the following
In the case of one of the conditions, you can access remote data:
A. The application's SWF file is in the same domain as the remote data source.
B. Use the proxy, while the SWF file is on the same server as the agent.
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 to create a blog reader.
1. Select the lessons item in the Navigation view, select File > New > MXML application and create a
A file called Blogreader.mxml.
2. Set the Blogreader.mxml as the default file to be compiled.
3. In the design mode of the Mxml editor, drag a panel container from the component view and set its phase
Expected property Value:
Title:blog Reader
width:475
height:400
X:10
Y:10
4. In design mode, drag the following components from the component view into the Panel container:
Datagrid
TextArea
LinkButton
5. Use the mouse to lay the control in a vertically aligned, left-aligned column.
6. Select the DataGrid control and set the appropriate properties:
Id:dgposts
X:20
Y:20
width:400
7. Select the textarea control and set the appropriate properties:
X:20
y:175
width:400
8. Select the LinkButton control and set the appropriate properties:
Label:read Full Post
X:20
y:225
The layout of the interface 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:
<?xml version= "1.0" encoding= "Utf-8"?>
<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml"layout=" Absolute ">
<mx:panel x= "Ten" y= "width=" 475 "height=" layout= "Absolute"
title= "Blog Reader" >
<mx:datagrid x= "y=" id= "dgposts" width= ">"
<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= "y=" label= "Read full Post"/>
<mx:textarea x= "y=" 175 "width="/>
</mx:Panel>
</mx:Application>
10. Save the file and run it after compiling. 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 a call
Httpservice RPC Service component to get information about the blog.

Insert Httpservice
for this project, the data source for the blog reader is from the http://www.adobe.com/go/ Mchotinblog . You
Use the Httpservice component to access the XML of the blog. The component sends an HTTP GET or POST request and gets the data returned by
.
1. In source code mode, enter <mx:HTTPService> tags in <mx:Application> tags:
<mx:httpservice
id= " Feedrequest "
url=" http://weblogs.macromedia.com/mchotin/index.xml The "
useproxy= false"/>
URL property indicates the location of the requested file. In this case, the URL is always valid, but you still
need to determine if it has changed. The
UseProxy property indicates that you do not intend to use proxies on the server. Because Matt's blog has the
crossdomain.xml setting, Flash Player can access remote data on that server. The
then prompts the application to send the request to the specified URL.

2. After the <mx:Application> tag, add the Creationcomplete property (bold display):
<mx:application xmlns:mx= "http://www.adobe.com/2006/mxml" layout= "Absolute"
creationcomplete= "Feedrequest.send ()" >
Each time your application starts, the Send () method of the Httpservice component is invoked. The method to the specified
URL sends an HTTP GET or POST request and gets an HTTP response. In this case, the RSS feed will return
XML data.
Next, check to see if the RSS feed is getting successful. Then bind the data to the label control, like this:

3. In the <mx:Panel> tab, replace the value of the title property with a subsequent expression:
Title= "{FeedRequest.lastResult.rss.channel.title}"
When the Httpservice component returns XML, it is parsed in the ActionScript object named Lastresult.
The structure of the Lastresult object reflects the structure of the XML document.

The structure of the XML 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= "Ten" y= "width=" 475 "height=" layout= "Absolute"
Title= "{FeedRequest.lastResult.rss.channel.title}" >
<mx:datagrid x= "y=" id= "dgposts" width= ">"
<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= "y=" label= "Read full Post"/>
<mx:textarea x= "y=" 175 "width="/>
</mx:Panel>
</mx:Application>
4. Save the file, compile and run.

assemble the DataGrid control
In your application, use the DataGrid control to display the title of the newly posted posts.
1. In source code mode, enter the following Dataprovider attribute in the <mx:DataGrid> tab:
<mx:datagrid x= "y=" id= "dgposts" width= "400"
dataprovider= "{FeedRequest.lastResult.rss.channel.item}">
The XML node with the name item provides data for the DataGrid control. In XML, this node is duplicated, and the
It is also duplicated in the DataGrid.
2. In the first <mx:DataGridColumn> tag, type HeaderText and DataField as shown later
Property value:
<mx:datagridcolumn headertext= "Posts"datafield= "title"/>
The first column of the DataGrid control is used to display the caption. To implement it is by determining the word in the XML that contains the header data
Segment, and then enter the field as the property value for the DataField. The XML specified in the Dataprovider property (item)
node, the child node named title contains the required information.
3. In the Second <mx:DataGridColumn> tab, enter the Headertext,datafield as shown later and
Width Property Value:
<mx:datagridcolumn headertext= "Date"datafield= "pubdate" width= "/>
The second column in the DataGrid is used to display dates. In this case, the field that contains the data is called pubdate.
4. Delete the third <mx:DataGridColumn> tag, because we don't need the third column here.
<mx:DataGrid> tags look like this:
<mx:datagrid x= "y=" 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= ""/>
</mx:columns>
</mx:DataGrid>
5. Save the file and run it after compiling.

Display the selected item
When a user makes a selection in the DataGrid control, you want the application to display only posts in the textarea control
The first few lines of content. In the XML provider's entry node, this information is contained in a word called description.
Paragraph.
1. In source code mode, enter the HTMLText property as shown later in the <mx:TextArea> tab:
<mx:textarea x= "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 made
Used as an attribute of HTMLText, this property allows you to display HTML-formatted text.
2. Save the file and run it after compiling. Click the columns in the DataGrid control and the first few lines of each post will be
Now textarea the control.

Create a dynamic connection
RSS feeds do not provide the full text of the posts, but you can still enable users to read these posts, if
If they are interested. RSS feeds do not provide information that can be achieved by connecting URLs to individual posts.
In the item node of the XML feeder, this information is contained in a field called link.
You can create a dynamic connection to display the entire contents of the selected posts in the DataGrid.
1. In the source code mode, enter the Click Property shown in the <mx:LinkButton> tab as follows:
<mx:linkbutton x= "y=" label= "Read full Post"
click= "Navigatetourl (New URLRequest (DgPosts.selectedItem.link));" />
The value of the selected connection field in the DataGrid control, DgPosts.selectedItem.link by Navigatetourl ()
method is invoked whenever the user clicks on the LinkButton control, as specified by the parameter of the Navigatetourl () method in a
A newly opened browser window to load the document from the specified URL.
2. Save the file and run it after compiling.

These are the steps and code to make a Bolg reader.