Flex : Exploiting Data Bindings for CRUD Based Applications
Its been sometime I have been writing CRUD based application and I always wished how can I get rid of so much of actionscript code. The pain points while writing CRUD based application is collection of data and submitting the data , another two features make coding unclean is the clear and reset functionality of the form, also another pain point is using only one form for create , read and update. This article gives insight of how to write least of the actionscript code to exploit the power of data binding.
Smart Collection of the Form Data
Often i come across the following code in a CRUD applications
|
1 2 3 4 5 6 7 |
private function getUserDetails():UserVO{ var user:UserVO = new UserVO(); user.name = userName.text; user.email = email.text } |
In this case once the user clicks on submit button you write a function to get the user details from the form.
This approach is a little error prone also it has an overhead of collection data from the right text field.
I have seen very few applications declaring the VO in mxml. Declaring VO in mxml can help you avoid the dirty data collection function as we saw above.With effective use of binding collect the data from the form.
Following is the way you define the object in mxml to bind the fields data to VO object.This I personally feel is more cleaner and readable than the above mentioned approach
|
1 |
<local:UserVO id="updatedVO" username="{username.text}" firstName="{firstName.text}" lastName="{lastName.text}" email="{email.text}" /> |
As any other binding rules you can also have expressions in the mxml declaration of VO in case the assignments are complex.
Cleaner Clear and reset functionality in Form
The simplest way of clearning and reset the form can be done in the following way
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
private function clear():void{ username.text = ""; Firstname.text = ""; Lastname.text = ""; email.text = ""; } private function reset(user:UserVO):void{ username.text = user.name; Firstname.text = user.firstName; Lastname.text = user.lastName; email.text = user.email; } |
However your QA might just log a bug that you missed one property to be reset 
.
As i have already binded the user object to my custom fields i use this.executebindings(true); to force the
controls to reflect the values they were binded to.
|
1 2 3 4 5 6 7 8 |
private var clear():void{ localUser = new UserVO(); this.executebindings(true) \\ to be on a safer side } private var reset(user:UserVO):void{ this.localUser = user; \\ to be on a safer side } |
Here I assign the values to a private variable localUser and executeBindings on the Form to make the bindings effective.
Well these are just the basic idea to explain my point. I have attached the application files to the blog. This is more generalized application and uses mode & data binding in the ManageUser component for create , update , read. It's a simple application that demonstrates how to exploit flex data bindings
Following is a video explanation of the topic
video explanation of application
Filed under: Flex, Uncategorized
