We write RSS reader on Flex
Let's try to make a simple application with Flex. However, it will not be the usual Hello World, it will be something more useful.
But before you try to do something with Flex, let's see what opportunities have appeared in the new version.
Now we’ll finally start developing something with Flex. To work, we need a Flex SDK or Flex Builder. In principle, you can configure any other development environment for working with the SDK. For Eclipse, there is also a plugin for developing in Flex.
Our application will be quite simple shell for Twitter . It will receive feeds from friends using RSS.
Our example will be based on the Adobe Flex Builder, so not everything in the text should be taken literally.
To begin with, as usual, create a new Flex Project (in the menu File-> New, of course). Specify the name and location of the project, and for now we will not touch other settings. Click Finish.
If you look at the folder structure, you'll see these:
In the src folder you will find a file with the name of your project and the extension MXML. If you switch to Source mode, you can see the following code:
Let's start creating the interface of our application. From the panel of components transfer to the Label and List application.
Label will serve as a regular title, select it and in the Property Inspector panel, enter the values you like.
List will be filled with posts from Twitter when downloading the application. Make it bigger, and adjust it so that it does not stand on the very edge and stretch along with the application. Another List you need to assign a name, let it be, for example, "tweets". This can be done by writing id = "tweets" to the component tag.
Assigning a name to a component is necessary in order to further access it from ActionScript code. The component name must be unique.
Now your MXML code should look something like this:
Data from Twitter is conveniently obtained using an RSS feed. There are a few more ways to communicate with the Twitter API, but for now, let's choose this one.
To get to the data from Flex, you will need to use the HTTPService component. It allows you to send HTTP requests and receive data. To connect it, add the following code:
As can be seen from the code, we also assign an id to this component. In the URL parameter, we tell it at what address it will be necessary to take data. However, before you can see the data in your application, you will need to do two more things:
It is logical to assume that the data you want to receive at the time of downloading the application. For this you need to make some changes in the announcement of the application:
As you can see, we have assigned execution of the send () function of the twitterFeed component to the creationComplete application event. Now we need to process the received data and put it in the List.
Before the advent of ActionScript 3.0, processing XML was sheer agony. Now this problem is solved with the help of a powerful tool called E4X.
E4X allows you to access an XML document in a simpler way. For example, having this document:
... we can refer to the property property like this:
Now, in order for the data to be displayed in the list, we will need to inform the list of this. A list as a component can receive information from a data source, which is essentially a collection of objects. To specify the data source for the list, we need the following code:
Now when you start the application, you will see that the list is filled with several items that look like [object Object]. This is data from our RSS feed. They are complex objects, and the list component does not know how to display them.
Each element in the RSS feed has several sub-elements - title, description, date and link. This means that such an item cannot be displayed in the list without our intervention.
One of the solutions to this problem could be the DayaGrid component, which would display these elements in separate columns, but this is not our way.
We will connect the item display handler to the list. It allows you to specify how to display items in the list. The advantage of this approach is that, firstly, the handler will be saved as a separate MXML element, and secondly, we will have much more control over the way the elements are displayed.
Using the File-> New menu, create a new MXML component. Let's call it Tweet, we will not change the other settings.
Drag and drop into the form several text fields and indicate what data they will display. To do this, in the text property of the first field, we specify {data.pubDate} (curly brackets indicate a link to the data), and in another - {data.title}.
Now we need to connect the handler to the list. To do this, we fix the List component in the main form:
Now when you start the application, you will see that the entries from the RSS feed have been successfully downloaded and displayed in your application. Elementary, is not it?
Thanks fzn7 for an example and source codes .
But before you try to do something with Flex, let's see what opportunities have appeared in the new version.
- Now with Flex you can develop AIR applications that run locally and without launching a web browser.
- Expanded options for changing skins and styles of Flex, now they can be edited using the built-in editor Flex Builder
- There are new components, including for working with data.
- Development tools now include memory and performance profilers.
- Now you do not need to create multiple versions of the application for several languages, since localization is done on the fly
- Improved performance, speed of applications, lowered memory costs
Now we’ll finally start developing something with Flex. To work, we need a Flex SDK or Flex Builder. In principle, you can configure any other development environment for working with the SDK. For Eclipse, there is also a plugin for developing in Flex.
Our application will be quite simple shell for Twitter . It will receive feeds from friends using RSS.
Our example will be based on the Adobe Flex Builder, so not everything in the text should be taken literally.
Create a new Flex project.
To begin with, as usual, create a new Flex Project (in the menu File-> New, of course). Specify the name and location of the project, and for now we will not touch other settings. Click Finish.
If you look at the folder structure, you'll see these:
- bin - the compiled version of your application is stored here.
- html-template - here is an HTML template where your application will be placed
- libs - there will be libraries created in the process
- src - here, as you can see, is the source code of the application. In this folder we will work.
Announcement of the application
In the src folder you will find a file with the name of your project and the extension MXML. If you switch to Source mode, you can see the following code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
</mx:Application>
Let's start creating the interface of our application. From the panel of components transfer to the Label and List application.
Label will serve as a regular title, select it and in the Property Inspector panel, enter the values you like.
List will be filled with posts from Twitter when downloading the application. Make it bigger, and adjust it so that it does not stand on the very edge and stretch along with the application. Another List you need to assign a name, let it be, for example, "tweets". This can be done by writing id = "tweets" to the component tag.
Assigning a name to a component is necessary in order to further access it from ActionScript code. The component name must be unique.
Now your MXML code should look something like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Label x="10" y="10" text="My Super Twitter Application!"
fontFamily="Arial" fontWeight="bold"
fontSize="15"/>
<mx:List left="10" right="10" top="41" bottom="10" id="tweets">
</mx:List>
</mx:Application>
Data connection
Data from Twitter is conveniently obtained using an RSS feed. There are a few more ways to communicate with the Twitter API, but for now, let's choose this one.
To get to the data from Flex, you will need to use the HTTPService component. It allows you to send HTTP requests and receive data. To connect it, add the following code:
<mx:HTTPService id="twitterFeed"
url="https://twitter.com/statuses/friends_timeline/25883.rss" />
As can be seen from the code, we also assign an id to this component. In the URL parameter, we tell it at what address it will be necessary to take data. However, before you can see the data in your application, you will need to do two more things:
- Ask HTTPService to retrieve data from an RSS feed.
- Put the data in the List
It is logical to assume that the data you want to receive at the time of downloading the application. For this you need to make some changes in the announcement of the application:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="twitterFeed.send()" >
As you can see, we have assigned execution of the send () function of the twitterFeed component to the creationComplete application event. Now we need to process the received data and put it in the List.
Before the advent of ActionScript 3.0, processing XML was sheer agony. Now this problem is solved with the help of a powerful tool called E4X.
E4X allows you to access an XML document in a simpler way. For example, having this document:
<?xml version="1.0" encoding="UTF-8"?>
<parent>
<child>
<property>value</property>
</child>
<child>
<property>value</property>
</child>
</parent>
... we can refer to the property property like this:
parent.child[0].property
Now, in order for the data to be displayed in the list, we will need to inform the list of this. A list as a component can receive information from a data source, which is essentially a collection of objects. To specify the data source for the list, we need the following code:
<mx:List left="10" right="10" top="41" bottom="10" id="tweets"
dataProvider="{twitterFeed.lastResult.rss.channel.item}" >
</mx:List>
Now when you start the application, you will see that the list is filled with several items that look like [object Object]. This is data from our RSS feed. They are complex objects, and the list component does not know how to display them.
Each element in the RSS feed has several sub-elements - title, description, date and link. This means that such an item cannot be displayed in the list without our intervention.
One of the solutions to this problem could be the DayaGrid component, which would display these elements in separate columns, but this is not our way.
We will connect the item display handler to the list. It allows you to specify how to display items in the list. The advantage of this approach is that, firstly, the handler will be saved as a separate MXML element, and secondly, we will have much more control over the way the elements are displayed.
Using the File-> New menu, create a new MXML component. Let's call it Tweet, we will not change the other settings.
Drag and drop into the form several text fields and indicate what data they will display. To do this, in the text property of the first field, we specify {data.pubDate} (curly brackets indicate a link to the data), and in another - {data.title}.
Now we need to connect the handler to the list. To do this, we fix the List component in the main form:
<mx:List left="10" right="10" top="41" bottom="10" id="tweets"
dataProvider="{twitterFeed.lastResult.rss.channel.item}"
itemRenderer="Tweet">
</mx:List>
Now when you start the application, you will see that the entries from the RSS feed have been successfully downloaded and displayed in your application. Elementary, is not it?
Thanks fzn7 for an example and source codes .
')
Source: https://habr.com/ru/post/40727/
All Articles