In part 1 of this article, I showed you how to create a data service using the new Data Service Wizard. While the solution is not ideal for all situations, it is helpful to use when you have the PHP classes already built or use their Sample Class feature for fast prototyping. (Emphasis on the word prototype)

Data services by themselves however aren’t that useful. It is only when you connect one to data enabled components that you really begin to see why the wizard makes life easier. Up to this point it’s been fun to use but not really essential.

Working with our sample database of a WordPress install, I wanted to build a user editor. To make things easy, I’m ignoring inserting and deleting users and just displaying them and allowing them to be edited.

Starting with a blank slate, the first thing we do is add a VGroup to our application.

<s:VGroup width="100%" height="100%">

</s:VGroup>

If you are not familiar with VGroup and HGroup then you have not done much with Flash Builder 4 yet. You will quickly learn that they are your best friends when it comes to building UIs. This one takes up the entire design surface so that it will handle layout for any components we drop in there.

Now in the VGroup, drop a Data Grid. Go ahead and set the X and Y to 0 and the height and width to 100%. This will cause the Data Grid to take up all available space but since we are inside of a VGroup, if we drop something else on the VGroup, the grid will make room.

Also, you will want to give the Data Grid an id property so you can address it later. You can name it whatever you want, I named mine dataGrid. (I’m creative like that)

Now for the fun part, let’s wire the Data Grid to the data service we created in the last article.

Right click anywhere on your blank Data Grid and select the “Bind To Data” option.

Figure 1: Bind to Data

Select New service call. From the service dropdown, if it is not already selected, choose the data service we created, in my case, I used the default service name, WpusersService. The operation we want is getAllWp_users.

Up to this point, everything has been pretty mundane. However here is where the data wizard really starts to shine. Remember we discussed that the data wizard uses PHP reflection to inspect the class to which you are talking? Even if it is a prototype class that it generated, it then turns around and inspects the class. It gathers all the parameters necessary to make a call to a method and it gathers the return type data. All of this is in the docBlocks so it is important to properly document your methods. In this case, it recognized that the return value (For some reason called the data provider) will be an array called Wp_users.

Clicking OK will modify your grid giving you one column for each field in the return value array. In most cases, this isn’t want you want in a finished product, however, it is better to get all of them and delete the ones you don’t want.

This is the magic of the data service wizard, because it does the introspection and knows the values coming back,  it can pre-populate all of this for you and save you the hassle of having to type it in manually. For those of you who suffer from a dysfunctional keyboard, like myself, and regularly have misspelled words creep into you code, letting FB4 pre-populate the grid with all of the fields saves a lot of time in debugging as well.

Figure 2: Configure Columns

To modify our columns, add, delete edit and rearrange, we simply right click on the grid and select “Configure Columns”. This screen gives up all of the columns that the wizard just created for us and allows up to manipulate them and their meta data. In my case, I want to delete everything but display_name, user_login, user_nicename and user_email.  Once you have the columns the way you like them go ahead and click OK.

You now have a functioning AIR application that will display the users in your database. Assuming you have more than just the admin account, you should be able to press F11 and get something that resembles this.

Figure 3: Basic data grid AIR application

Assuming you had a functioning WordPress install handy and you already knew your database credentials, working through part 1 and to this point in part 2 should have taken about five minutes. That is the power of data services. You can go from nothing more than a data model to a functional application in very little time.  If all you needed to do was list the data, you would be done now. However, very few applications just list data as their primary function.  So let’s power on and do a little more.

Another great little feature of FB4 is that it will automatically build edit forms for you from a connected Data Grid.  Right click on the Data Grid and select “Generate Details Form”.

Figure 4 Generate Form

There are 3 types of form that you can generate, for our purposes; we will generate a Master-Detail. We of course want our form editable so make sure that box is checked  and since we don’t need to make a detail call in this instance, we will leave that box unchecked. Clicking next will give us a list of the fields that are available for us to edit. Like the Data Grid, I don’t want to deal with most of these but let’s pick a few. You can also change the control that will be used to display/edit the field. In our case, all the fields selected are TextInput fields.

Figure 5 Generate Form – 2  Property Control Mapping

Once you have everything the way you want it, click the Finish button and the wizard will generate your form. Since we have everything wrapped in a VGroup, FB4 puts our form below the grid and resizes the grid for us.

Congratulations, you now have a functional editor for browsing and editing records in a database. Mine looks something like this.

Scrolling up and down in the Data Grid will change the data in the form. Editing the form and clicking Submit will submit the changes back up to the database via the Data Service we created.

There is, however, the matter of the glaring blank space to the right of the form. Not being a designer, white space needs to be filled. So let’s fill it. In the database is a field for the user’s URL. FB4 has an HTML control that will render a site, so let’s fill that space. [Note: this control is only available if you are building an AIR application.]

We’ve done enough with the visual designer; let’s turn our attention to the actual code for this one. The first thing we are going to have to do if we want to display something to the right of the form is to put the form in an HGroup.

<s:HGroup width="100%">

I didn’t set the height because the grid is already set to height=”100%”. Not setting a height will allow it to remain the max height that it needs for the form but no higher.  Now we add our HTML Control.

<mx:HTML width="100%" height="250" location="{wp_users2.user_url}"/>

In this case, we do add a height. If we don’t, since everything else is dynamically sized, the height of the HTML control will vary depending on the web site being displayed. Obviously, this is not a desired behavior.

Location is the property where we store the URL in the HTML control. We set that to the field user_url. This way, as we scroll up and down in the grid, the display will change to the web site specified. Even though we are not displaying the URL in the grid, nor are we editing the URL in the form, the URL,  along with all the rest of the fields in the database row, are still available to us via the wp_users2 object.

Figure 6 Final working application

Once again, clicking F11 will run our application, fetch our data and once a row is selected, fetch the web site associated with that user.  Note: Since the HTML control fetches it each time (we are not implementing caching) there will be a pause while the page is being fetched and rendered. Since ActionScript is an event driven language,  it will allow you to continue to scroll up and down in the list while the HTML is requesting the web site. However, each time you change the record, the current request is abandoned and a new one is made.  Also, because it is making a http request every time the row changes (we are not implementing local caching) there will be a delay between when the record changes and when the site is displayed. The delay will depend on your connection to the Internet.

I hope these two articles have helped you understand the Data Services wizard provided by Flash Builder 4. As I started at the beginning, I normally dislike wizards in programming. However Adobe has done a good job of making sure that their wizards make life easier and the end result is easily read and understood by developers. There is no hidden magic behind what they do.

I still however, dislike Harry Potter.