Build a Master-Detail Flex-ColdFusion Application without writing a line of code!
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”!
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.
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/’ and click ‘Validate Configuration’. The wizard should now look like:
e) Click FINISH.
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:
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:
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:
Note: All note the Actionscript service wrappers and valueObjects get generated as shown above.
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:
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:
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!