My First Flex Project

Two weeks ago, Vises, my work mate is busy creating something. I made an attention of what he busy for, and I found that he is recreating an absence application that I have made 6 months ago. I have created this absence application using Java Swing as a client and J2EE with Spring Framework as its server. I made this application because the HRD and Finance division of my office wanted me to create an application that able to log staff absences, so the finance division can pay the meal allowance for the staff based on its log every day.

The unique thing of this friend activity is, he tried to rebuild this absence application by using Adobe Flex. Well, I was interested with this Adobe Flex, my interest is more to Adobe Flex ability to create a pretty GUI design. By using Adobe Flex Builder, the making of design a GUI application is just simple drag and drop. It looks like creating a GUI application in Java by using the Netbeans and its Matisse Builder plug in. Actually there’s a little disappoint of mine, when I’m using Netbeans to create a Java GUI application. Sometimes the release build of my Java GUI application is not appropriate with the design of development. After seeing this Adobe Flex, I thought I should change my presentation layer of an application especially Desktop Application by using this Adobe Flex.

For about one weeks and three days, I search reference and then try to use this Adobe Flex as a presentation layer of my created application. And indeed, I have found that I easier to use Adobe Flex as a presentation layer of my application. And its looks like that I will decide to use Adobe Flex as a presentation layer of applications that I will create in the future.

Adobe Flex supported 3 Remote Application methods, which is:

1.    RPC Method (Remote Procedure Call).

2.    HTTP Service Method (read Web Application return using XML format).

3.    Web Service Method.

From those methods, the most preferred method of mine is the second method which is HTTP Service method. Adobe Flex can read a Web Application XML formatted return value, and then the value can be inserted into components that exist on Adobe Flex framework.

And I thought, because I have searched for about one week and three days about this Adobe Flex, it has to be at least one application that I can make using this Adobe Flex framework. Hmmm…… I thought what simple application that I can make with my limited knowledge of this Adobe Flex Framework. I got an idea; I will create a simple RSS Reader application. Why should RSS Reader? I thought a RSS reader is XML formatted, so it will be easier to make, because I don’t have to design the XML format for my first simple Flex application.

And after one day in front of my laptop try to create this application, finally my First Adobe Flex project created. Here are screenshot of my Flex RSS Reader Application.

Picture-1:

rssreader-tab1Picture-2:

rssreader-tab2

Let me try to describe here about the concept of my flex RSS Reader application. This RSS Reader application has 2 tabs. The first tab is RSS Reader, this is the main function of this application as it’s seen on picture-1, while the 2nd tab contains an form that have functions that can manage RSS link to be added, updated, or deleted by using this tab as it’s seen on picture -2.

On screenshot of picture-1, we can see there’s a combo box that user can choose, from what resource of the news that he would like to read. When user clicks one of the sources from the combo box, this application will try to request RSS Feeder to a link that became a value data on the combo box. After all the result of the request done, this application will automatically load the result of news items to Data Grid component on RSS List Panel, and when one of the news item on Data Grid component clicked by the user, this application will also automatically load the short description of the news to Text Area component on the Description panel. When user interest to read the full article of the news that selected, user can click Read This button. When this button clicked, then the default browser of user’s computer will show and directly open the page containing the news that he would love to read.

While on the screenshot of picture-2, is a view of RSS Entry tab, which on this tab, user can manage the sources of the RSS Reader on this application. When user wants to add a new source of RSS Feeder, he just needs to enter each text boxes on Add RSS Entry Panel and then click Add button. And when he needs to update or delete one of sources that already loaded on Data Grid on the Listed RSS Entry panel, all he needs is just click the item on the Data Grid and the application will automatically fill up the text boxes on the Edit RSS Entry panel, and then he click the update or delete button depends on what he want to do with the source item. And then we also can see on the both picture there’s an Exit button on the right top of the form. The function of this button is to close this Flex RSS Reader application.

This simple Flex RSS Reader application actually has a Back-End Application that I have created using PHP and MySQL Database. The Back-End Application will produce a web page XML Formatted result containing a list of RSS Reader sources that stored on MySQL Database table. Just because I don’t understand yet about how to use the property file on Flex Development, I do hardcode to write a link of this RSS Reader Back-End Application.  The Link of this RSS Reader Back-End Application is: http://localhost/flex_xml_lab/rss/rss_feeder.php. If you are interested of this application, then you also have to create this RSS Reader Back-End Application, and the link must be same with above Back-End Link that I have hardcode on this application.

And the XML formatted result that produced by the Back-End Application must have a pattern below:

 

<rss_list>
     <RSS>
        <RSS_ID>1</RSS_ID>
        <label>Detik</label>
        <data>http://rss.detik.com/index.php/detikcom</data>
     </RSS>
     <RSS>
         <RSS_ID>2</RSS_ID>
         <label>Detik Inet (local sample)</label>
         <data>http://localhost/flex_xml_lab/rss/rss_detikinet.xml</data>
     </RSS>
     <RSS>
        <RSS_ID>3</RSS_ID>
        <label>Google News (local sample)</label>
        <data>http://localhost/flex_xml_lab/rss/rss_google.xml</data>
     </RSS>
     <RSS>
        <RSS_ID>10</RSS_ID>
        <label>Detik Inet</label>
        <data>http://www.detikinet.com/feed</data>
     </RSS>
     <RSS>
         <RSS_ID>11</RSS_ID>
         <label>Antara Terkini</label>
         <data>http://www.antara.co.id/rss/news.xml</data>
     </RSS>
     <RSS>
         <RSS_ID>12</RSS_ID>
         <label>Antara Sains Dan Teknologi</label>
         <data>http://www.antara.co.id/rss/tek.xml</data>
      </RSS>
</rss_list>

 

On the Back-End Application, I made a table on MySQL Database named flex_project and the table name is rss_feeder, and the detail of the table shown below:

desc_rss_feeder

Or you also can make the table with this MySQL Syntax:

 

CREATE TABLE `rss_feeder` (
  `RSS_ID` int(100) NOT NULL AUTO_INCREMENT,
  `RSS_NAME` varchar(100) NOT NULL,
  `RSS_LINK` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`RSS_ID`)
);

 

And then, to create a Back-End Application using php, I have created a simple PHP CRUD (Create, Read, Update, and Delete) application to do select, insert, update, and delete database operation on to the table. I simplified this Back-End Application by creating only one php file. And the interaction between the database and php file can be recognized by a parameter named action for each database operation. I choose HTTP GET methods for interaction between a PHP and Flex RSS Reader Application, so the each database operation on the php file can be executed by detail below:

·      Action Read rss_feeder

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=read

·      Action Insert rss_feeder

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=add&rss_name=[name_of_rss_source]&rss_link=[link_of_rss]

·      Action Edit rss_reader

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=add&rss_id=[id_of_rss]&rss_name=[name_of_rss_source]&rss_link=[link_of_rss]

·      Action Delete rss_reader

http://localhost/flex_xml_lab/rss/rss_feeder.php?action=delete&rss_id=[id_of_rss]

To accommodate above methods, then I created one php file only, and the source of the php file is below:

 

<?php
//define database paramater
define( "DATABASE_SERVER", "localhost" );
define( "DATABASE_USERNAME", "root" );
define( "DATABASE_PASSWORD", "9mtouche9" );
define( "DATABASE_NAME", "flex_project" );
$conn = mysql_connect(DATABASE_SERVER,DATABASE_USERNAME, DATABASE_PASSWORD);
mysql_select_db( DATABASE_NAME );
//define HTTP GET paramater
$action = $_GET['action'];
$return="";
//action read
if($action=="read"){
    $query = "select * from rss_feeder";
    $res = mysql_query($query);
    //return list of rss link
    $return = "<rss_list>";
         while ($result = mysql_fetch_object($res)) {
                   $return .="<RSS>
              <RSS_ID>$result->RSS_ID</RSS_ID>
              <label>$result->RSS_NAME</label>
              <data>$result->RSS_LINK</data>
              </RSS>";
         }
    $return .= "</rss_list>";
    mysql_close();
}
//action add
if($action=="add"){
    $rss_name = $_GET['rss_name'];
    $rss_link = $_GET['rss_link'];
    $query = "insert into rss_feeder(RSS_NAME,RSS_LINK) values('$rss_name','$rss_link')";
    $res = mysql_query($query);
    //$result = mysql_fetch_row($res);
    //return list of rss link
    $return = "<action_result>";
       if($res){
         $return .= "true";
       }else{
         $return .= "false";
       }
    $return .= "</action_result>";
}
//action edit
if($action=="edit"){
    $rss_id = $_GET['rss_id'];
    $rss_name = $_GET['rss_name'];
    $rss_link = $_GET['rss_link'];
    $query = "update rss_feeder set RSS_NAME='$rss_name', RSS_LINK='$rss_link' where RSS_ID='$rss_id'";
    $res = mysql_query($query);
    //$result = mysql_fetch_row($res);
    //return list of rss link
    $return = "<action_result>";
       if($res){
         $return .= "true";
       }else{
         $return .= "false";
       }
    $return .= "</action_result>";
}
//action delete
if($action=="delete"){
    $rss_id = $_GET['rss_id'];
    $query = "delete from rss_feeder where RSS_ID='$rss_id'";
    $res = mysql_query($query);
    //$result = mysql_fetch_row($res);
    //return list of rss link
    $return = "<action_result>";
       if($res){
         $return .= "true";
       }else{
         $return .= "false";
       }
    $return .= "</action_result>";
}
//print out result
print($return);
?>

 

 

On the script, indeed there’s another action instead read, another action also return XML formatted result, just because the return of another action is boolean type, so let’s just ignore it.

That’s it, a short description of this simple RSS Reader application that I have made by using Adobe Flex. I’m quite satisfied, because this Adobe Flex is so easy to design and to create a GUI application. And for the result the output of the GUI is prettier than Java Swing Application. And for the release build, Adobe Flex Builder has also owned it by using wizard, it’s really simple at least for me.

And for you, who wants to learn or maybe modified and learning together with me, below is the sources link of My First Flex Project

1.    RSS Reader Source (Zip File)

2.    PHP Back-End Application

3.    MySQL source file.

And Please feel free to rebuild and modify with your own need and desired, and don’t forget to give back your comment through this post.

 

Menteng, March 7th 2009.

I hope this will helpful

 

Josescalia

One thought on “My First Flex Project

  1. Pingback: My First Flex Project | XML Developer

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s