11 million installations can't be wrong

MySQL Journal

Subscribe to MySQL Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get MySQL Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


MySQL Journal Authors: Jnan Dash, Dynatrace Blog, Stackify Blog, Sematext Blog, OnPage Blog

Related Topics: RIA Developer's Journal, ColdFusion on Ulitzer, MySQL Journal

RIA & Ajax: Article

Web and Mobile Convergence Sharing Data Between Flex 2 and Flash Lite

Developing a blog aggregator

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>


More Stories By Marco Casario

Marco Casario is CEO of Comtaste, a company devoted to develop Rich Internet Applications on the Web and for mobile devices.

He collaborates intensively with Adobe Italy as a speaker at conferences and as a consultant for Flash, Flex, and Flash Lite.

Learn more about Marco Casario at his blog http://casario.blogs.com. In 2005, Marco has founded Comtaste, a company dedicated to exploring new frontiers in Rich Internet Applications and the convergence between the web and the world of mobile devices — MobyMobile and YouThru are representative of their recent work. He is founder of the biggest worldwide Flash Lite User Group and of www.augitaly.com, a reference point for the Italian community of Adobe users, in which he carries out the role of Channel Manager for the section dedicated to Flex.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
Motorola Krzr K1 12/04/06 08:36:50 PM EST

Here is the page that you asked me to find. It is 3 reviews about Motorola Krzr K1 in it.
http://skyhaifa.com/reviewes.php?cat_id=19&model=nokia-n93
Motorola Krzr K1

Motorola Krzr K1 12/04/06 08:36:02 PM EST

Here is the page that you asked me to find. It is 3 reviews about Motorola Krzr K1 in it.
http://skyhaifa.com/reviewes.php?cat_id=19&model=nokia-n93
Motorola Krzr K1