I love the definition in Wikipedia of Media convergence: "Media convergence is a theory in communications where every mass medium eventually merges to the point where they are indistinguishable to each other due to the advent of new communication technologies."

According to the theory of media convergence, very soon, there will be no more need to have a television and a computer separate from each other, since both would be able to do the job of the other, ultimately making both extinct and creating a new medium from the synthesis."

Even though the prospect of a complete merger among "traditional" media is still far away, the fact that we have access to content on multiple devices (internet, cellular phone, PDA, television) already enhances the usefulness that such content provides to users.

Adding to Wikipedia's definition, convergence also involves the possibility of deploying content through different channels from a unique source in a simple, quick, and cost-effective way, such as the one allowed by the use of Flex, which I attempt to describe in this article.

Nowadays, we have all the technologies that permit developers to create cross-device applications. By sharing and accessing the same remote data (via a database connection, using simple text file or feeding XML), it's possible to have interchangeable content and use them via a mobile phone rather than via a Web application.

Flex 2 and Flash Lite Together
Soon the next generation of Adobe's technology will allow developers to deploy their Flex (under SWF format) applications out of the browser, directly through the desktop.

For those who have never heard about Apollo, this is the definition given by Adobe: "Apollo is the code name for a cross-operating system run-time being developed by Adobe that allows developers to leverage their existing Web development skills (Flash, Flex, HTML, JavaScript, Ajax) to build and deploy Rich Internet Applications (RIAs) to the desktop" (http://labs.adobe.com/wiki/index.php/Apollo:developerfaq).

While waiting for this killer application, we can now use Flex 2 to create a rich interactive Web application that will add and edit remote data. The same remote data is then served and consumed by a mobile application developed in Flash Lite. In this article, we'll see how to create a Flex 2 blog aggregator where users will be able to add, view, and save their favorite RSS feeds.

Each blog post can be bookmarked and stored by users and then viewed under a Flash Lite application. Let's see how it works.

The Database and the PHP Remote Services
To start, create the database that you'll use to store all the blog feeds data saved by the user. I chose MySql database, but you can use whatever you like. I called my db "rssimport". Next, create three tables that will hold the user data. Here is the SQL structure for our tables:

CREATE TABLE `bookmarks` (
    `id` int(11) NOT NULL auto_increment,
    `id_news` int(11) NOT NULL,
    PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

This table contains a reference to the news table:

CREATE TABLE `rss_news` (
    `id` bigint(20) NOT NULL auto_increment,
    `id_sito` int(11) NOT NULL default '0',
    `category` varchar(20) default '0',
    `title` varchar(255) NOT NULL default '',
    `summary` text,
    `pub_date` int(11) NOT NULL default '0',
    `link` varchar(255) NOT NULL default '',
    `creator` varchar(100) NOT NULL default '',
    PRIMARY KEY (`id`),
    KEY `link` (`link`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=36;

This table is populated by a Cron service. Cron is the name of a program that enables UNIX users to execute commands or scripts (groups of commands) automatically at a specified time/date. It's normally used for sysadmin commands. In our example, we use a Cron service to retrieve blog posts from the different blogs found on "testate" table:

CREATE TABLE `testate` (
    `id` int(11) NOT NULL auto_increment,
    `nome_testata` varchar(50) NOT NULL default '',
    `preview` varchar(255) default NULL,
    `url` varchar(100) NOT NULL default '',
    PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

The database is done. We've got our tables, so now create the PHP scripts that will add blogs to the database, retrieve information over blogs, save posts, and export all the data in the XML that the Flex application will consume. The PHP services are pretty simple, but they're large. You can download all the files here:

http://88.149.156.198/develop/rssToDb/phpservices.zip

This package contains four PHP files. These are the files called by the Flex's RPC service. All PHP files return values in a proper XML format. In fact, data must be encoded in XML in order to pass them to Flex.

Commenting the PHP file is out of the scope of this article, but if you develop in PHP, the code should be self explanatory. If you're not a PHP developer, don't worry - you'll be able to finish the application and make all the code work anyhow.

Developing the Flex 2 Blog Aggregator
It's now time to start building the Web interface that will allow users to add and save their favorite blogs. Create a new Flex project in Flex Builder 2 (File > New > Flex Project) and give it a name. I've called mine "BlogRoll."

Automatically, some files and folders have been created by Flex Builder 2. The most important ones are the bin folder, where Flex Builder puts all the compiled code and the main MXML application file.

We need to create another folder and name it "components." This is the folder where external MXML Components will be stored. To create a new folder in the context of the project, go to File > New > Folder. Our main application is made up of a TabNavigator container that houses two states for adding and viewing blogs. The TabNavigator is a navigation container that creates and manages the set of tabs used to navigate among its children. The children of a TabNavigator container are other containers.

The container automatically creates a tab for each of its children and determines the tab text from the label property of the child, and the tab icon from the icon property of the child.

When a TabNavigator gets the focus, the Flash Player processes keystrokes as described in Table 1 (see the Flex 2 LiveDocs to learn more):

Let's write some MXML code to create our interface. Use the BlogRoll.mxml file that Flex Builder has previously created when you defined your project. Let's examine in detail the code for the main application file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    xmlns:cust="components.*"
    creationComplete="hs.send()"
    themeColor="haloSilver"
    pageTitle="Blog Aggregator - Developed by Marco Casario for WebDDJ" >

We start creating the application tag where we defined a customized namespace:

xmlns:cust="components.*"

This is the package where we'll insert our MXML components (it points to the folder we previously created). Then we call the send() method of the HTTPService to populate the Datagrid. The method triggers after all the user interface elements are loaded on the creationComplete event, as shown in Listing 1.

This is where we set up the HTTPService and call two PHP remote services: rss.php and add.php. The former returns all the posts that users saved. It accepts one parameter defined inside the <mx:request xmlns=""> tag to indicate the quantity of posts returned by the function: 10, 20 or 30 posts. Then on the result event, it populates the "listAC" ArrayCollection with data returned by the response.

The second PHP service - add.php - receives the name and the URL of the blog inserted by the user. The two variables - blog_name and url_blog - are set to the text attribute of the two TextInput with id "frm_name" and "frm_url". The HTTPService handles the result and the fault events. For both services, we use the POST method to send data, as shown in Listing 2.

I strongly commented the Actionscript code, as shown in Listing 3, so we could go ahead.

We put a <mx:TabNavigator> inside a panel. The TabNavigator has two children. On the first Vbox child, we need to create a simple form that contains the two Text Input elements: frm_name and frm_url.

At the end of the form, we placed a Submit button that calls the send() method of the HTTPService with the addBlog id. This remote service stores the name and the URL of the blog added by the users and puts it into the MySQL database (see Figure 1).

The second child of the TabNavigator is made up of a simple Label, a Combo Box, and an MXML Component. The ComboBox is populated by the ArrayCollection "myArray" defined as a nested tag:

<mx:ComboBox id="myCombo" change="changeHandler()" creationComplete="init();myCombo.selectedIndex=0" >
    <mx:ArrayCollection id="myArray">
       <mx:Object label="20 posts" data="20"/>
       <mx:Object label="30 posts" data="30"/>
    </mx:ArrayCollection>
</mx:ComboBox>

When the user selects an option from the combo box, the changeHandler() function is called. The creationComplete event triggers the init() function and the the index of the combobox is set up to the first element.

The MXML Component's invocation uses the "cust" namespace defined on the application tag. The "lista" property is passed to the component, and it contains the data returned by the HTTPService request:

<cust:custBlogData width="100%" lista="{hs.lastResult.rss.channel.item}" />

The code of the custBlogData.mxml file saved in the "components" folder is shown in Listing 4.The file's role is to display the titles and links of all blogs added by the users. The DataGrid populates itself with the lista property (data typed as ArrayCollection) that we get from the HTTPService. It shows two columns that display the title and link property contained into the complex lista object:

<mx:DataGridColumn headerText="Posts" dataField="title" width="150" />
<mx:DataGridColumn headerText="Link" dataField="link" />

At the end, a Hbox container surrounds a label and a Button that, if clicked, calls the send() method of the HTTPService:

<mx:HTTPService
    id="saveHS"
    url="http://88.149.156.198/develop/rssToDb/savenews.php"
    useProxy="false"
    method="POST"
    result="linkHandler(event)"
    fault="faultHandler(event)">

    <mx:request xmlns="">
    <url>{myDG.selectedItem.link}</url>
    </mx:request>
      </mx:HTTPService>