b-log – betriebsraum weblog

Software Development, Human-Computer Interaction, Projects…

Dynamic Flash Forms

November 8, 2005

Home » Dynamic Flash Forms

If you have to create a flash application with lots of forms, here’s is one possible solution that helps you to render many different forms for all your crud needs (create-read-update-delete). It should be pointed out that this is a flash only solution and that you’re definitely faster if you use flex, coldfusion (provided that you have the licenses) or a good html/php framework.

Have a look at this gModeler class diagram of our last application (at the bottom there’s a forms-package) and you can get the idea of how the classes work together. Here’s a short explanation:
The most important class is the FormElement which extends mx.core.UIComponent. The FormElement encapsulates the behaviour of one form “row”. It renders the most types of UIComponents, adds a nice background graphic and has a set and get method which populates the corresponding UIComponent with values (so no matter if your form element contains a textfield or a combobox you just call myElement.value to display the data. The class then decides based on the type of the element how to add the data).

The FormGui class takes a form description class, renders the whole form based on the data in the description class with single FormElements and adds the buttons (submit, cancel etc.). It also has set and get methods to set and get the data for the form elements all at once.

All classes in the data package implement the IForm interface which contains just a getFormData() method. getFormData() returns an array that consists of objects that describe a single form element (name, type, width, height and validation flags) similar to an xml document (we didn’t use xml because it was easier and faster to just put the data into different classes. Adding a new form is as simple as creating a new data class…).

To create a new form you just write myFormGui.createForm(new LoginForm(), dataObj). FormGui also has a method for setting different button configurations via bitwise operations (see my post on “Binary arithemtic with static varibles”) so you can display a submit and cancel button or just a submit button (with different labels of course) etc..FormCreator is a factory class to simplify the process of creating new forms even more (FormCreator.create(“LoginForm”, …) – all FormGui creation configurations for the different forms are encapsulated here).

A form would be pretty useless without data validation so there are two more classes dealing with validation: FormController and FormValidator. FormValidator contains general validation methods for different purposes (isBlank(), isEmail(), isUrl()…) that basically just return true or false. FormController takes all fields from the FormGui class and validates the fields based on the type and the validation flags of the field (set in the data description classes) via the FormValidator class.

If it encounters an error the showError() method on the FormGui in called which shows a popup message and highlights the corresponding fields.
The onSubmit event of the FormGui is only fired if the fields are successfully validated so you can be sure that all data is ok before sending it to the server.

So, that’s it. New forms can be easily added and reading and filling the form is as easy as calling the get and set methods to pass proper data objects from your backend classes to the form or vice versa. The rest is managed by all the form classes.
As I said at the beginning this is just one possible solution. Of course you could abstract the whole thing more, add more features, use xml etc. but then you soon get to a level where it would be better to use flex instead (which would be better for crud-applications anyway). But we had to do it entirely in Flash and in the end it worked quite well for our purposes.

FON theme by Leon Paternoster. Powered by WordPress.