Building forms in the Flash IDE using the Flash RAD framework

This chapter describes the eight basic steps to build a working form in the Flash RAD framework. The main assumption is that you:

  1. Have a database with database tables
  2. Have the server side scripts to recieve XML or a plain http: Post

1: Create your MVC definition
Each form uses the MVC design pattern to deal with data, presentation and behavior.

2: Create your XHTML definitions
The XHTML will tell the Flash RAD framework what to do with the objects it will find inside the Form MovieClip: bind data to it, turn it into text fields, select lists, and so on. Unless specified explicitly in the XHTML, the postioning and size of all objects the Flash RAD framework will use will be exactly as the objects you placed in your form.

3: Create your Form Container and assign the Form class to it
Create a MovieClip to contain your form elements. Check the properties of the MovieClip that contains your form and assign the Form-class to it.

4: Create and name your objects in the Flash IDE
Create new items, or place Flash GUI objects where you need them. Assign the proper names to those elements and make sure these names reflect the names in your dataset. So the field “firstname” in your XML data will be reflected with the name “firstname” you asign to the form field in your form.

You can use and mix:

  1. Text fields
  2. MovieClips without any intellience / class attached to it
  3. Flash GUI components

5: Place a Submit button in your form
As with HTML, the Flash RAD framework expects an Submit button.

6: Flash RAD: mapping fields and behaviors
Using your XHTML defintion, the Flash RAD framework will map behaviors to the elements you dragged into your form. Unless the names do not match or the component is unknown to the Flash RAD framework, they will become “alive”.

7: Flash RAD: Loading the form definition
The Flash RAD framework will first load the XHTML. By default it uses the same name you gave to your form as the name to load your definition, with the prefix directory “forms/” So when you called the form “person” it will try to load “forms/{your formname}_mvc.xml” = “forms/person_mvc.xml”.

This definition contains all the links and references to logics and behaviors the form will use to work, including the base-link to the form XHTML and the base links to load data from and save data to the server.

8.a: Posting your data using http: POST
When you want to use Http: POST to send your data, state so as <form method=”POST“> in the XHTML form definition. The Flash RAD framework will deal with the rest.

8.b: Using XML – Map your data in the MVC Form definition
When you want to post your data as XML, state so as <form method=”XMLPOST“> in the XHTML form definition. Default the form will use the plain POST action.

When you submit your form and use XML to transfer data, the server on the other side will expect a specific structure that the Flash RAD framework can not predict. So you use the “mapping” option in the MVC form definition. In the tag designed for that, you paste the XML structure the server requires and put the referrers to your form data between brackets. Like this: [myfield]. Again, the name of this tag HAS to be an exact match with that of your source XML and the form field. The Flash RAD framework simply loops thorugh an array with all fields in the form and applies a replace(“[“+fieldname+”]”, fieldValue) action to parse the data in your XML.

Done
These are the eight basic steps to make your Flash movie into a working form that loads and saves data. Naturally your server needs to be prepared to recieve the data as well.

Advertisements
Be the first to start a conversation

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: