Home > Adobe, Flash Builder 4, Flex > Form Generation in Flash Builder 4 (Part I)

Form Generation in Flash Builder 4 (Part I)

The Form Generation feature in Flash Builder helps DCD users to create forms. Form code is automatically generated for the data types or service calls and the controls are bound to the properties of the required data type, saving us a lot of time.

Forms can be generated:

  • For a data type. Controls for each property of a data type are auto generated and bound.
  • For a service operation.  Controls of the form are generated for the input parameters or the return type of the service.
  • For a master-detail view. This refers to the case where there is a control (for eg. List, ComboBox) that displays the instances of a data type and a form is generated which displays the details of the selected item in the control.

Let us take a look at how forms can be generated. This post will talk about form generation for data type and service operation (My next post talks about generating a master detail form). We start off with the following example, which has a service called CarsService.

Form Generation 01

Generating a Form for a data type

First we’ll generate a Form to take in details of an object of type ‘Cat_type’. Go to the Data/Services tab.

Form Generation 11

Right-click on the data type (which is Car_type in this case) and click on ‘Generate Form’.

Form Generation 12

Now you’ll see a window where you can choose what type of form you want. By default it says Generate form for: Data type. And the data type is Car_type. Keep the box checked to keep the form editable. Now click Finish.

Form Generation 13

Run the application. An editable Form is generated with each property of the data type.

Form Generation 14

Generating a Form for a service operation

Now, we want to generate a Form that lets the user give details to add a new Car. Go to the Data/Services tab.

Form Generation 11

Right-click on the operation, which is addCar(Car_type) in this case, and click on ‘Generate Form’.

Form Generation 22

A window appears and you’ll see that all the options we want are selected. Make sure Generate form for: ‘Service Call’ is selected and ‘New Service Call’ is chosen. Since we want the Form to provide us with the argument to the addCar operation, keep ‘Form for input parameters’ checked. And yes, it is obvious, but also ensure that the CarsService service and addCar operation are selected.

Finally, click on Finish.

Form Generation 23

And there you go! Run the application. You have the form you want along with a button. Clicking the button will invoke the addCar operation and take the Form control values as its argument.

Form Generation 24

If you want to check out how to generate a master detail form, check out my next post.

Categories: Adobe, Flash Builder 4, Flex
  1. Tim
    December 5, 2009 at 11:32 am

    Great tutorial – I’ve tried this myself using my own MySql database and Flash Builder Beta 2. The form lets me add one entry to the database, then seems to stop working. The first time I populate the fields with data and click the submit button the cursor-clock appears for a second – I confirmed the entry was added to the database. The next time I click the click the submit button nothing happens – not even the cursor-clock. Any ideas what could be causing this?

    • December 15, 2009 at 2:46 pm

      Hi Tim,
      What you mention is a known issue. You can check out http://bugs.adobe.com/jira/browse/FB-23621
      You can work around this by creating a new instance of the value object to which the form data is bound. And explicitly setting its values in the button click handler.
      For this example, let us say the instance name is ‘myCar’. Add the following code to your click handler BEFORE the call to the addCar method.

      myCar = new Car_type;
      myCar.Company = cOMPANYTextInput.text;
      myCar.Model = mODELTextInput.text;

      Hope this helps.

  1. October 23, 2009 at 10:36 am

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: