Section 14.4. Creating a Container Component: SharedAddressForm

14.4. Creating a Container Component: SharedAddressForm

The previous section described how to turn a simple UI component into a multiuser communication component using shared objects and event broadcasting. Using very similar code, you can turn other existing UI components into communication components . Once that is done, building multiuser, real-time online forms and a wide variety of other applications becomes very easy.

Some sections of forms appear in many different applicationsyou've seen them all over the Internetthings like a set of fields for a user 's address, billing information, and shipping information.

In this section, we will create a SharedAddressForm component, which is just a container of a few labels and instances of SharedTextInput.

The main goal of this section is to show you how to include communication components inside of other components, which we call "containers."

14.4.1. The .fla File

By now, you should be familiar with all the steps involved in creating a new component. Just place a few labels on the Stage (" Name ", "Address", "City", etc.) and don't forget to include an instance of SharedTextInput in frame 2 of your component (we will attach and place all the instances programmatically). At the end, your component should look something like Figure 14-3.

Figure 14-3. The .fla file for the SharedAddressForm component

Once you have set the linkage name for the class to SharedAddressForm , you're ready to create the SharedAddressForm.as class file, which implements the client-side behavior.

14.4.2. The Client-Side Code

As before, the SharedAddressForm class extends MovieClip for the sake of simplicity. Example 14-4 shows the code for the SharedAddressForm.as file (the client-side SharedAddressForm class).

Example 14-4. The client-side code for the SharedAddressForm class

 import SharedTextInput; class SharedAddressForm extends MovieClip {   private var m_name:String;   private var m_prefix:String;   function SharedAddressForm (Void) {     m_name = _name;     if ((m_name == null)  (m_name == ""))       m_name = "_DEFAULT_";     m_prefix = "SharedAddressForm." + m_name + ".";     attachMovie("SharedTextInput", m_name + "_name_st", 0, {_x:164, _y:0});     this[m_name + "_name_st"].setSize(178, 22);     attachMovie("SharedTextInput", m_name + "_address1_st", 1, {_x:164, _y:27.5});     this[m_name + "_address1_st"].setSize(178, 22);     attachMovie("SharedTextInput", m_name + "_address2_st", 2, {_x:164, _y:55});     this[m_name + "_address2_st"].setSize(178, 22);     attachMovie("SharedTextInput", m_name + "_city_st", 3, {_x:164, _y:82.5});     this[m_name + "_city_st"].setSize(178, 22);     attachMovie("SharedTextInput", m_name + "_state_st", 4, {_x:164, _y:110});     this[m_name + "_state_st"].setSize(104, 22);     attachMovie("SharedTextInput", m_name + "_zip_st", 5, {_x:164, _y:137.5});     this[m_name + "_zip_st"].setSize(104, 22);     attachMovie("SharedTextInput", m_name + "_country_st", 6, {_x:164, _y:165});     this[m_name + "_country_st"].setSize(178, 22);   }   function onUnload (Void):Void {     this.close( );   }   function connect (p_nc:NetConnection):Void {     this[m_name + "_name_st"].connect(p_nc);     this[m_name + "_address1_st"].connect(p_nc);     this[m_name + "_address2_st"].connect(p_nc);     this[m_name + "_city_st"].connect(p_nc);     this[m_name + "_state_st"].connect(p_nc);     this[m_name + "_zip_st"].connect(p_nc);     this[m_name + "_country_st"].connect(p_nc);     p_nc.call(m_prefix + "connect", null);   }   function close (Void):Void {     this[m_name + "_name_st"].close( );     this[m_name + "_address1_st"].close( );     this[m_name + "_address2_st"].close( );     this[m_name + "_city_st"].close( );     this[m_name + "_state_st"].close( );     this[m_name + "_zip_st"].close( );     this[m_name + "_country_st"].close( );   }   function setSize (p_w:Number, p_h:Number):Void {     // do nothing   } } 

First, the SharedAddressForm class imports the SharedTextInput class (so make sure that SharedTextInput.as is in the classpath, which can be modified under Edit Preferences ActionScript Language ActionScript 2.0 Settings Classpath). The class then defines two variables that we're going to need (the usual m_name and m_prefix ).

In the class constructor, we determine the values for m_name and m_prefix and attach the SharedTextInput component instances that we need. Notice how we prefix their instance names with m_name , such as:

 attachMovie("SharedTextInput", m_name + "_name_st", 0, {_x:164, _y:0}); 

This makes each instance unique, so that you can have two SharedAddressForm components on the Stage without conflict. The only drawback of this is that to address an asset, you need to use the this["..."] notation, as we do in the different setSize( ) calls:

 this[m_name + "_name_st"].setSize(178, 22); 

After the usual onUnload( ) method, we define the connect( ) method, which simply calls connect( ) on all the child SharedTextInput component instances, and calls connect( ) on its server-side counterpart to instantiate it lazily.

The close( ) function simply invokes close( ) on all the SharedTextInput children of the component. The setSize( ) function, for simplicity, doesn't do anything in this example.

You can see why we call this a container componentall it does is attach some children and pass the calls ( connect( ) , close( ) ) along to them when needed. SharedAddressForm doesn't have any shared objects or other resources of its own; it lets the different SharedTextInput components get their own.

14.4.3. The Server-Side Code

The server-side code for the SharedAddressForm class, shown in Example 14-5, is the simplest server-side communication component script you can imagine. This code belongs in a file named SharedAddressForm.asc , which should be loaded for any server-side application that uses the component.

Example 14-5. The server-side implementation of the SharedAddressForm class

 try {var dummy = SharedAddressForm;} catch (e) { // #ifndef SharedAddressForm   load("components/component.asc");   load("SharedTextInput.asc");   SharedAddressForm = function (p_name) {     this.init(p_name);   };   SharedAddressForm.prototype = new FCComponent("SharedAddressForm",                                 SharedAddressForm);   // This will instantiate this class.   SharedAddressForm.prototype.connect = function (p_client) {     // trace("SharedAddressForm.connect!");   };   trace("SharedAddressForm loaded successfully."); } // #endif 

The SharedAddressForm class loads SharedTextInput.asc , just as we imported the SharedTextInput class on the client side. The SharedAddressForm class defines minimal constructor and connect( ) functions. As you can see, this component's server-side implementation doesn't do much, but it's set up to make the client-side companion work properly.

14.4.4. Using the SharedAddressForm Component

Using the SharedAddressForm component is really easy. Your server-side code should include the following load( ) commands:

 load("components.asc"); load("SharedAddressForm.asc"); 

Then, simply drag an instance of the SharedAddressForm component onto your Stage in the Flash movie client. Set its instance name and connect it to SimpleConnect (or call connect( ) on it manually), and you're good to go.

One last interesting note: if you look at the shared objects through the Communication Application Inspector, you'll see the name of the TextInput shared objects being prefixed with the name of the SharedAddressForm instance you put on the Stage. This is expected and assures us that the two instances of SharedAddressForm on stage at the same time will not conflict.