Join David Gassner for an in-depth discussion in this video Building a custom data entry form component, part of Flash Builder 4 and Flex 4 Essential Training.
Data-intensive applications typically use data entry forms to collect data from the user. I'm going to show you how to create these data entry forms as custom components. Black-box encapsulated components that collect the data, validate the data, and then returns the data that the user has entered to the rest of the application. For all of the demonstrations in this chapter, I'll work with a project that's included with the Exercise Files. I'll go to the menu and choose File > Import Flex Project. I'll browse, I'll navigate to the folder 14_Forms > begin from the Exercise Files folder and I'll select the file forms.fxp and import it.
I'll then open the project and open its source folder. When you create a Form component, it's just like creating any other MXML component. You should place it in a sub- folder of the project's source code root. I typically place all of my forms into a package or folder named forms. I'll start by right clicking on the package that's already there in the project named forms and choose New > MXML Component.
If you don't already have a forms package, you can instead right-click on the source folder and choose New > MXML Component and then fill the package in here and that will create the folder for you. Now, I typically create the component name, starting with the name of the data entity that I am collecting data for, in this case Category, and ending with the word Form. So I'll name this component CategoryForm. You can name it anything you like, of course. For the Based on attribute, I'll choose the Form component.
I'll click Browse, I'll type form into the Based on dialog and choose this component, the Form component in the mx.containers package, and click OK. Like certain other components, such as the DataGrid, there is no Spark version of the Form container in Flex 4, so we still use the MX version. As with many other containers, you can set the forms dimensions to explicit sizing or if you remove the values from the Width and Height, as I'm doing here, the form will size itself automatically based on its contents.
I'll click Finish and that will result in opening the new Form component. A form starts with an mx:Form begin tag and ends with an /mx:Form end tag. Within the Form, you can add two different kinds of child objects. A FormHeading object, which is a large label that appears in a right column, and a FormItem container, which contains one or more controls. The easiest way to fill in the details of the Form component is to go into Design Mode.
I'll look at the form in Design Mode and then go to the Components view in the lower left corner of Flash Builder. I am going to drag in a Text Input control and place it in the form. As I drag the control into place, notice the blue indicator that shows where the control is going to be dropped. I'll drop the control into place. The selected area is the actual TextInput control. Because I dropped it into the Form container, it's automatically wrapped in an instance of the FormItem container.
Here's, what the generated source code looks like. There's a FormItem container wrapped around the TextInput control. Each FormItem has an optional attribute called Label and that's the value that will be displayed in the left column of the Form. The actual control will be displayed in the right column change. I'll change the value of the Label attribute or property to Category ID with a colon at the end and I'll set the id of the TextInput control to idInput.
You can name the IDs of the Input controls anything you want. They'll only be addressed by ActionScript code and binding expressions within the Form component itself. Now, I'll go back to Design Mode and add two more controls. I'll scroll down again the Components view and locate the TextInput control. I'll drag in another TextInput control. Notice the Width of the blue selector. It shows that I'm dropping this control under the FormItem. I'll drop it into place, I'll double- click the Label and this is another way that you can set the Label of the FormItem container.
I'll set its value to Category with a colon. When I press Enter or Return to save my change, you'll see that Label is right aligned with the other label in the column. I'll click off the FormItem container and then on the TextInput control and then in the Properties view I'll set the ID of this input to categoryInput. Finally, I'll add in a TextArea control, dropping it below the existing FormItems. I'll set the Label of this new FormItem to Description with a colon.
I'll set the ID of the TextArea control to descriptionInput. Finally, the form needs a button. Users click the button in a form to indicate that they want to take some action. I locate the Button control and drag it into the form. I'll make sure that I add it below the existing FormItem containers. I'll double-click the Label for the new FormItem and press Backspace or Delete. Then I'll double-click the button and I'll set its Label to Insert.
So, now I have a data entry form with three fields and one button. I'll save my changes and then I'll go to the source folder or the default package of the Forms project and open the application AppWithForm.mxml. In this application, there is a DataGrid control within a panel. If I'll look at the code, I'll see that DataGrid control is actually a custom component named CategoryGrid and it has an include an attribute set to a value of default.
I'm going to add an instance of my new form. I'll place the cursor after CategoryGrid, I'll type in a less than character and Cat and choose the new category form component. I'll give it an includeIn attribute set to a value of insert. So that the form only shows up when the application is in the insert state. I'll save the changes and now I'll run the application. When the application first opens, it shows the DataGrid.
When I click the Insert Category button, it switches to displaying the new data entry form. So there are a couple of things to notice about the form before I conclude the tutorial. Notice again that the Labels are right aligned. There are styles that you can apply to a form to cause the labels to be left aligned or centered, if you prefer. Also notice that in this simple form, each FormItem container has only one control. You can add multiple controls to a FormItem container. By default those stack from top to bottom.
But if he set the FormItem containers direction property to horizontal, they'll layout from left to right. So this is the beginning appearance of my form. In other videos in this chapter, I'll show you have to add validation. Then how to share data that the user enters into the form with the rest of the application.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?