Home > Uncategorized > Build a Master-Detail Flex-ColdFusion Application without writing a line of code!

Build a Master-Detail Flex-ColdFusion Application without writing a line of code!

Hello All,

I know the title seems too ‘Assertive’ but Yes this is a FACT! Flash Builder BETA2 now can generate ColdFusion/PHP code for a given datasource and one can easily bind them to the Flex controls in building a Flex application. This is a new enhancement added to the Data-Centric application development supported natively within Flash Builder.

I will try to explain this using a simple use-case:

UseCase: Charan is a Flex developer who is quite new to ColdFusion. He wants to create an application which can display the list of employees from an external datasource/xml file and populate these data in the application. He also wants a master-detail form which gets filled with the details of a particular employee and  controls for creating, updating and deleting a employee from the database.

I would assume this would require an effort of a day or two. But here, this usecase can be accomplished within 15-30 minutes.

Surprised? , “wait n watch”!

Pre-requisites:

a) Download and install Adobe Flash Builder BETA2 from  http://labs.adobe.com/technologies/flashbuilder4/

b) Download and install ColdFusion server from http://www.adobe.com/products/coldfusion/.

c) Import the MySQL database file from here and dump it into a new database ‘fb_tutorial_db’. Please install MySQL( v 5.0 or above) and import the above file using the command ‘mysql -u username -p password database_name < filename.sql’ in your MySQL prompt.

d) Create a datasource in CF9 by following  the http://livedocs.adobe.com/coldfusion/8/htmldocs/index.html.

FYI,  section ‘Adding datasources’ under DataSource Management->Configuring and administering coldfusion’.

Note: This workflow supports both CF8 and CF9.

Workflow:

Project Creation:

a) Go to D:\ColdFusionCentaur\bin (relative to the CF installation directory) and run cfstart.bat

b) Open Flash Builder and create a new Flex project.

i) File -> New- > Flex Project

ii)Name the project as “MasterDetailApplication”, select the “Application server type” as ‘ColdFusion’ and select ‘ColdFusion Flash Remoting’ in the radio button group.

c) Click NEXT.

d) Select the ‘ColdFusion Installation type’ as ‘Standalone’  and fill the following details :

ColdFusion root folder: ‘D:\ColdFusionCentaur’

Web root: ‘D:\ColdFusionCentaur\wwwroot’

Root URL:’http://localhost:8500/&#8217; and click ‘Validate Configuration’. The wizard should now look like:

Project Server settings

Project Server settings

e) Click FINISH.

Service Creation:

a) Go to Window -> Data/Services and click on ‘Connect to Data/Services’.

b) In the ‘Connect to Data/Service’ wizard select ‘ColdFusion’ and click NEXT.

c) Click on the link ‘click here to generate a sample’, this will open up ‘Generate Sample CFC’ dialog as shown below:

Sample CFC dialog

Sample CFC dialog

d) Select ‘Generate from RDS datasource’ which would pop-up a RDS Authentication dialog.

e) Enter the appropriate credentials or select ‘No password'(If there is no RDS configured for server) and click OK.

f) This should populate all the datasources configured in server. No select ‘fb_tutorial_db’ so that ’employees’ table shows up in ‘Tables’ combo-box. Also note the primary key auto-filled.

Note: If there is no primary key in the database table the combo-box for ‘Primary key’ would pull-down all the column available in the table so that you could select the desired one as primary key.

g)Leave the default and click OK. This should bring up a ‘Security Information’ dialog as shown:

RDS AUthentication dialog

RDS AUthentication dialog

Warning!

Warning!

Note: Please read the dialog carefully if you are planning to use the code generated for production. This is a security dialog which informs the user to secure the code from any potential risk/hack.

h) Click OK in the security dialog.

Note : This should have created a file ’employeeService.cfc’ in the ‘MasterDetailApplication’ folder under ‘D:ColdFusionCentaur\wwwroot’. This file would contain 7 functions for CRUD and a function getemployees_Paged and count for pagination. Also by default client-side ‘Data Management’ and ‘Pagination‘ will be enabled.

i) Click ‘NEXT’ in the ‘Connect to Data/Service’ wizard to view all the function after FB introspects the CFC generated.

j) Click FINISH. This should have generated the service which you can view from Data/Services panel as shown:

View of the Service and the AS Wrapper classes

View of the Service and the AS Wrapper classes

Note: All note the Actionscript service wrappers and valueObjects get generated as shown above.

Front-End creation:

a) Switch to the Design View in FB.

b) Drag the following controls onto the design view

i) DataGrid , can be located from Components panel under ‘Controls’

ii)2 buttons and name them ‘Update’ and ‘Delete’.

c) Now simply drag-drop getAllemployees() function from Data/Service panel and drop it on the data grid.

d) Right click on data grid and select ‘Generate details form’. This should generate a form over-lapping on the data grid. Kindly drag the generated form next to the data grid so that they look neat.

e) Drag the operation deleteemployees() from Data/Service panel and drop it on the button named ‘Delete’. This should open the ‘Source’ view with the parameter of the event handler highlighted.

Kindly type ‘dataGrid.selectedItem.emp_no’ in the parameter.

f) Switch back to design view.

g) Right click on the button ‘Update’ and select ‘Generate Click Handler’, this should open the event handler code in ‘Source View’.

Kindly type ’employeesService.commit();’ and switch back to the design view.

h) Now right click on createemployees() and select ‘Generate Form’. A dialog as shown would open up:

Generation Of Form!

Generation Of Form!

i) Unselect the checkbox for ‘Form for return type’ and Click FINISH. Kindly layout the generated open so that it does not over-lap with the other controls.

The design view should look like this after all the above actions:

Final view of Design view

Final view of Design view

Now launch the application.

Perform the following tasks to ensure you have an working application:

a) The data grid should display all the employees from the database.

b) Now click on an employee from the data grid, the details form should show the details of the employee.

c) Edit the first name field and click on ‘Update’, the form and the database should be updated with the update value(since data management is enabled).

d)Select an employee and click on ‘Delete’ button. The selected employee must be deleted from the data grid and the data base.

e)Enter appropriate values in the Create form and click on ‘Create employees’ button. This should generate an employee with the given values in database.

Note: In the attached database the primary is set to be auto-generated, hence do not enter the value for ’emp_no’ in the ‘Createemployees’ form.

Now you have created a fully functional ‘Master-Detail’ application.

BTW, We have not written a single line of code and have accomplished this application. I am not sure if any of us can do the same in a much shorter span!

FYI, Obviously this is just a starting point, for more complicated application involving complex server side logic one still needs to write his server side code. Also, to generate such complex code involving tight relationship between tables, BOLT(ColdFusion Builder) can be used. It now ships with a fully functional code generation tool which is very friendly with Flash Builder’s Data Centric Development:)  Please refer to my previous post for more details.

Note: MSSQL, MYSQL and Apache Derby databases are supported.

Hope this article is helpful!

Enjoy 🙂


Advertisements
Categories: Uncategorized
  1. Jeff Weinberg
    October 17, 2009 at 10:33 pm

    Hello,

    I am trying to create paging for a cf function that has 3 arguments: gender, start index and number items. This is to be able to page a list that returns only the males or females in the table. However, when i try to enable paging, it says that “Count operation parameters should match the paged operation parameters list”. If I get rid of the gender argument, it works fine. How can I create a count function to use in this scenario? Thank you for you help.

    Best,
    Jeff

  2. October 20, 2009 at 11:41 am

    Are you a professional journalist? You write very well.

  3. October 24, 2009 at 8:31 pm

    Yo.
    I i saw yer post on balajisridhar.wordpress.com
    Very well presented
    In fact I have been researching for something like this for yonks
    balajisridhar.wordpress.com will see me back again
    Great effort keep up the good work !
    John
    New Holland Tractor Parts

  4. Valy
    November 17, 2009 at 4:33 pm

    Can you help me understand why create doesn’t works for the “second or more” time. the first time it create the employee beautiful, at the 2nd time the emp_no which was 0 gets the creation autonumber from the db. any attempt to, change/++/and so on, will result in a fault event. the others works fine. I’m testing with the wamp.

    • Valy
      November 18, 2009 at 8:49 pm

      I found the problem. Maybe I did something wrong somewhere, but I end up with [createEmployees(item:int):int].

      I went to the generated php code and I saw at [public function createEmployees($item)] that this function is not expecting an [int] but the “whole”. So, in [Data/Services] I right-click on createEmployees and change the input item to [Employees].

      In my case, I already changed the php code for some other tests and that’s why I have my return set to [Object]. {/even though…, it will work/}

      [Create] will work faultless if it looks like this: [createEmployees(item:Employees):Object] in the [Data/Services].

      The time is almost right.
      And then: –Visual Studio, please step aside–

  5. December 14, 2009 at 3:03 pm

    Great blog its very helpful and easy to understand. For more ideas or just to add links check out http://www.mofikiworldwide.com/blog.php There are blogs there about website design, development, Search engine optimization, and hosting. Most of these blogs are tutorials that you can repost just be sure to reference the page you get them from if adding them to your blog. Again thank you for this blog.

  6. Chaz
    December 23, 2010 at 4:42 pm

    Hi,

    I am trying to use this example, but when I get to the part to connect to my RDS I get this error:

    The following error occurred while getting datasource details. Check your RDS server and datasource setting and try again.

    Permission denied: connect

    I am using windows 7, IIS, ColdFusion 8, Flash Builder 4 Standard, SQL Server 2008 RS.

    ColdFusion root folder: c:\inetpub
    Web root: c:\inetpub\wwwroot
    Root URL: http//{name of my computer}

    I have RDS in ColdFusion Admin set to no password needed.

    Thanks for your help.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

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

%d bloggers like this: