Notice how all you specify is the field name in each dataField parameter? You’ll see how easy it is to switch out your class file underneath the app and change the columns that are used to populate the table. We’ll also change the update and delete methods so you can get an idea how those actions work as well.
Here is how the process works: when you select an item in the datagrid, it sends a record up to the edit form:
<mx:TextInput x="113" y="312"
(note: the code above was only allowed to
wrap for display in this article)
The datagrids id is dgUserRequest, so the selectedItem object native to Flex handles this event for you. Sweet! So all you do is give your form field the relevant field from the datagrid, and you’re good to go.
Now that we have a good idea what’s going on in the Flex, let’s add a new class of our own to the weborb services folder. Create a a new folder next to the adobe demo folder (/libraries/weborb/services/adobe_php_sdk) and name it test. Copy the class file from the Adobe folder into the new folder. Name it whatever you want, but make sure to match the classname in the file to the name of the file, otherwise weborb will return an error on you.
For instance, if your classname is DbHandler, name the file DbHandler.php.
Now change line 23 in the mxml file to this:
remoteObject.source = "test.DbHandler";
Don’t do anything to the new class file yet, (besides renaming the class name and the filename, and placing it in a new folder). Just re-build the project and make sure it works ok. Once you have that all in order, we want to pull data from another table, so let’s run the northwind sql file from the weborb package (found under /services/weborb/test). Just add it as a table to the same database that your are using for the other example. This way we don’t have to change any of the credentials for the database in the new class file, only the queries.
Now go ahead and modify the queries in the getUsers, UpdateUsers, and DeleteUser methods to be relevant to the new table you are querying. for the update users, since for this example we don’t want to have to change the form, just pick two values you want to pull back to populate the form, and use those fields. I chose the company name and the contact name fields.
Now is where we get to see the true power of the Flex front end. I was amazed at how easy it was to convert this application to point to another table. Going from not having any idea how to do this, to figuring it out and then updating the relvant code literally took me 20 minutes. So imagine having a Flex app like this and needing to make it talk to a new table! Flex’s re-usability is very high for implementation across many projects.
First off, you need to do nothing to the getUsers method! All you need to do is update your datagrid columns to match the titles you want, and the relevant column names from the database. It’s really that easy. The update method is a little more involved however, but not much.
We will have to update the id references of the fields for the update user form first to match the column names of the database table, then update the new fieldnames as well in the updateUser() method. So, for instance, we want username to be company name, which is Company_Name in the northwind customers table. We change line 60 to this:
notice how you don’t need to name the form field the same as your db column name; the variable inside the updateUser method takes care of this.
Go ahead and update all the fields on the form to send back to the update method correctly, and re-build the project. If you did it correctly, when you call in a record and update the user, their info should update in the datagrid. If you are having trouble, you should notice that you get nice alerts in the flash file with your errors. Here’s how it’s working: notice that inside the php class we have a line like this:
throw new Exception($msg);
This is written into weborb to produce a nice clean error message as an alert box right in Flex for you. Very nice!
I hope you’ve enjoyed this tutorial. It can be a little frustrating to get all this set up and working correctly, but trust me, it’s worth it! Flex is an awesome framework for letting us coders into the flashy world withought having to be a great designer. You get all that high end polish of a Flex app with very little work, and as you can see, switching things out is very painless. So what are you waiting for? Go forth and Flex!