Friday, June 4, 2010

My First Project in Adobe flex...!!

Recently I have started my project works in adobe flex. For me it is a new technology..!! But it is very interesting and easy to learn technology for all... We can create both web and desktop applications in adobe flex.. Here I am mentioning a simple web application.

So let us start our study with adobe flex..

My first assignment was to retrieve some data from a mysql database using the technique of LCDS( Live Cycle Data Services). There are some more options for the users to select their web server option like PHP, Asp.Net, J2EE..etc.

The pre-requirements for this simple web application are

1. Create a MySQL database. Here I have used SQLyog application to create databases in MySQL. It is very easy to create db here..

2. Before starting the project using LCDS technique, we have to run LCDS application, which is installed in the local system.. If we don't do..then it won't be able to run the application..

It will show a prompt like follows,




The error will be shown, if you don't run LCDS like,




To avoid this situation, take Start->Adobe->LiveCycle Data Services<>-> start LCDS.

Then, we have to select the application server as: J2EE

Step 1:

So we selected J2EE option, then enable Use "remote object access service" button.. Then go to "next"..

Step 2:


If the LCDS is running properly, then if you press the validate configuration button.. It shows the message root folder and root url are valid.. If every thing is proper move on to next..

Step 3:




Here no need for change the options.. our project source pages will store in the default src folder.

Flex provides us an interactive environment for creating applications. Let us start with a simple log in application. Ok, then now we have a database with a table log_in_details which contains usernames and passwords of different users.

As I have mentioned before I created a database table in MySQL using SQLyog application. It is very easy to handle SQLyog. If you have any difficulty with this application, go through (http://www.webyog.com/en/screenshots_sqlyog.php) ..



Step 4:


Select view to Design ( There are two types of views are given Source and Design).



Step 5:


Drag and drop a Panel from the list given left side.






Step 6:


Now we can add Labels, TextInputs and Button into the panel.. so as to make that as a formal log in window.





Our new log in window will appear in browser like as follows.




Step:7


We need a java class that helps to retrieve data from MySQL database. It has to execute the SQL queries similarly we do in PHP-MySQL applications. To make class file, just run this example java code in Eclipse IDE and from there you can obtain its class file.

So you have to be aware of JDBC (http://www.java-tips.org/other-api-tips/jdbc/how-to-retrieve-data-using-jdbc.html)


Before all, we have to copy this class file to LCDS folder. By default it will be “C:\lcds\jrun4\servers\default\samples\WEB-INF\classes”. When we run the application the J2EE server will execute this class file in LCDS.

Next important step is to set destination for the remote object to respective class file. For that we need to make a change in remoting-config.xml file. By default it will be in "C:\lcds\jrun4\servers\default\samples\WEB-INF\flex"

I just included a new tag in existing xml file.


destination id="mysqladmin">

properties

sourceMySQLAdmin_class/source

/properties

/destination

Save this.
. So we are ready to do coding..!! Let us start..!!

Now take the source view, and create remote object..

There you can create remote object and set its destination to destination id in the XML file. Here it is mysqladmin. There after we can start and create database applications with Flex and MySql.
eg:


Data base connection can be established and we can retrive values like this,

var user_query:String="SELECT * from table name";
rm_Object1.executeSQL(Database name,user_query);

Useful Links for you:


http://www.adobe.com/devnet/flex.html


http://www.adobe.com/devnet/flex/tourdeflex.html

2 comments:

  1. gopkumare............
    will it be enough if we just have the connector to establish a connection and query execution or do we need to write some explicit code for that in flash?

    ReplyDelete
  2. KK, we have to include a connection class in LCDS folder.. that i have mentioned above..

    ReplyDelete