|
|
When you click the Load Blog Entries button my RSS feed entries are loaded into the datagrid. When you click on a row in the datagrid the corresponding entry is loaded into the text area.
Step 1 - XML and Application declaration
Start your XML file with a XML declaration, and an mx:Application tag:
Step 2 - Define your HTTPService
Our first step is to define the HTTPService that we will use to connect to my RSS feed. We will give an id of httpRSS so we can refer back to it
Step 3 - Enclose your controls within a panel
A panel is simply a container to put controls (the DataGrid, TextArea, and Button) into. We are going to set some attributes on the panel as well, it should be pretty easy to figure out what they mean:
Step 4 - Define your DataGrid
We are using the DataGrid component to display the list of blog entries in my RSS feed, along with their date.
This step is probably the most complicated step because we have to bind our RSS xml data to the datagrid, and define an event handler when the rows are clicked.
In the attributes of the DataGrid we are using dynamic variables or expressions denoted by the curly braces {variable}.We are using the DataGrid component to display the list of blog entries in my RSS feed, along with their date.
This step is probably the most complicated step because we have to bind our RSS xml data to the datagrid, and define an event handler when the rows are clicked.
In the attributes of the DataGrid we are using dynamic variables or expressions denoted by the curly braces {variable}.
Ok so there is a lot going on there, first so I'll break it down a bit:
width
We are setting the width dynamically based on the size of its parent panel reader, specifically we set it to be 15 pixels narrower than its panel.
dataProvider
In the dataProvider attribute we are binding the data for this grid to the result of our HTTPService named httpRSS. More specifically we want to bind each item tag in our XML file to a row in the datagrid. Since the item tags are inside the rss and channel tags we refer to it the array of items as httpRSS.result.rss.channel.item.
cellPress
Next we want to create an event handler that will display the contents of the description tag inside the item that is clicked on. Using the variable entries.selectedIndex we know which item was clicked on, and we can refer to the description (the entry body) of that item as: httpRSS.result.rss.channel.item[entries.selectedIndex].description.
Now we just need to set the value of our TextArea which we will define in the next step to the rss item description, so we simply assign that value to the htmlText property of the TextArea (whose name will be body).
columns
Now we need to define which columns we are to display in the datagrid. The columnName must match the tag name that we want it to correspond to.
Step 5 - Define the TextArea
Use the mx:TextArea tag to define the text area where the entry body will go:
Step 6 - Create a Button
Our last control to define is a Button which will simply tell the HTTPService to make the request.
In the click event handler we call the send() method on our HTTPService object.
Step 7 - Close Panel and Application
Simply close some tags, and your done!
One Caveat
Flex 1.5 uses a proxy to invoke HTTPService calls, and other remote service calls, and for security reasons the proxy will block the HTTP call. You add the RSS feed url (or simply http://*) to the proxy whitelist in your flex-config.xml.
Complete MXML source code:
