Using components in a simple application

Using Communication Components > Using components in a simple application

Using components in a simple application

After you have set up your development environment and become familiar with Flash Communication Server and basic ActionScript functions, you're ready to create a communication application using components. In the sample that follows, you create a simple application that uses the PeopleList component to display a list of active users.

To create the sample application:

1

Start Flash Communication Server, if it is not already running.

In Windows, choose Programs > Macromedia Flash Communication Server MX > Start Service.

On UNIX, open a shell window, change to the Flash Communication Server installation directory, and type ./server start. Then, to start the Admin Service, type ./adminserver start.

2

Create a directory named com_test in the Flash Communication Server MX applications directory.

3

In Macromedia Flash MX, select Window > Components, and then select Communication Components from the Components pop-up menu.

4

From the Components panel, drag the PeopleList component onto the Stage.

5

In the Property inspector, name this instance peopleList_mc.

6

To connect to the server, select the first keyframe in the Timeline; in the Actions panel for the frame, provide the following code:

// Create a new network connection and add a stop action nc = new NetConnection(); stop(); // Create a status handler nc.onStatus = function(info) { trace(info.code); } // Optional call to clean up the list peopleList_mc.close(); // Connect to the application and provide a user name nc.connect("rtmp:/com_test","Jane");

Note: If your Flash Communication Server is not running on localhost, you must provide the full Uniform Resource Identifier (URI) of this test application (for example, rtmp://www.myflashcomdomain.com/com_test). For more information on the NetConnection.connect method, see the Macromedia Flash Communication Server MX documentation.

7

Use the nc NetConnection instance to connect the peopleList_mc movie clip to the server by adding the following code to the Actions panel for the first keyframe in the Timeline:

peopleList_mc.connect(nc);

8

After saving your work, you can test it by selecting Control > Test Movie.

The following figure shows the onStatus message, which appears in the Output window when you successfully connect to the server.

You might notice that your user name does not appear in the list. The PeopleList component retrieves the list of users from the server, and you have not yet added the command to retrieve server-side results. By adding a few lines of code to your server-side script file, the component can retrieve the user names from the server.

9

Create a new file in the com_test directory and name it main.asc. In this main.asc file, add the following line of code to load the components.asc file:

load("components.asc");

Note: The server must have access to the scriptlib directory to successfully load the components.asc file. For more information on loading the components.asc file, see Creating your working environment.

10

Create an onConnect handler to set the user name and accept the connection from the client, as shown in the following example:

// Listen for the new connection to this application. // newUserName is a parameter passed in from the client-side nc.connect // call. application.onConnect = function(newClient, newUserName) { // Set the global user name with the user name passed into this function. gFrameworkFC.getClientGlobals(newClient).username = newUserName; // Accept the connection from the user. application.acceptConnection(newClient); // Note that if your application requires additional code following the // explicit acceptConnection, you must place that code in an // application.onConnectAccept statement (required when using components) }

11

Save the changes to your main.asc file.

Note: If you run your application and then make changes to the ASC file, you need to reload your application. You can reload from the Communication App Inspector. In Flash MX (making sure you are in the Flash MX window, not the SWF window), select Window > Communication App Inspector. Log in and select com_test\_definst_ from the Active Apps instances window. Click View Detail, and then click Reload App.

12

In the Flash MX authoring environment, select Control > Test Movie.

The following figure shows the connection values.

This sample was included to show how quickly you can create an application using components. In the next section, you use the SimpleConnect component to further simplify the development process.

Tip: For more information on onConnectAccept and onConnectReject statements and using them with communication components, see Application object.

1	Start Flash Communication Server, if it is not already running.
	In Windows, choose Programs > Macromedia Flash Communication Server MX > Start Service.
	On UNIX, open a shell window, change to the Flash Communication Server installation directory, and type `./server start`. Then, to start the Admin Service, type `./adminserver start`.
2	Create a directory named com_test in the Flash Communication Server MX applications directory.
3	In Macromedia Flash MX, select Window > Components, and then select Communication Components from the Components pop-up menu.
4	From the Components panel, drag the PeopleList component onto the Stage.
5	In the Property inspector, name this instance `peopleList_mc`.
6	To connect to the server, select the first keyframe in the Timeline; in the Actions panel for the frame, provide the following code:
	// Create a new network connection and add a stop action nc = new NetConnection(); stop(); // Create a status handler nc.onStatus = function(info) { trace(info.code); } // Optional call to clean up the list peopleList_mc.close(); // Connect to the application and provide a user name nc.connect("rtmp:/com_test","Jane");
	Note: If your Flash Communication Server is not running on `localhost`, you must provide the full Uniform Resource Identifier (URI) of this test application (for example, rtmp://www.myflashcomdomain.com/com_test). For more information on the `NetConnection.connect` method, see the Macromedia Flash Communication Server MX documentation.
7	Use the `nc` NetConnection instance to connect the `peopleList_mc` movie clip to the server by adding the following code to the Actions panel for the first keyframe in the Timeline:
	peopleList_mc.connect(nc);
8	After saving your work, you can test it by selecting Control > Test Movie.
	The following figure shows the `onStatus` message, which appears in the Output window when you successfully connect to the server.
	You might notice that your user name does not appear in the list. The PeopleList component retrieves the list of users from the server, and you have not yet added the command to retrieve server-side results. By adding a few lines of code to your server-side script file, the component can retrieve the user names from the server.
9	Create a new file in the com_test directory and name it main.asc. In this main.asc file, add the following line of code to load the components.asc file:
	load("components.asc");
	Note: The server must have access to the scriptlib directory to successfully load the components.asc file. For more information on loading the components.asc file, see Creating your working environment.
10	Create an `onConnect` handler to set the user name and accept the connection from the client, as shown in the following example:
	// Listen for the new connection to this application. // newUserName is a parameter passed in from the client-side nc.connect // call. application.onConnect = function(newClient, newUserName) { // Set the global user name with the user name passed into this function. gFrameworkFC.getClientGlobals(newClient).username = newUserName; // Accept the connection from the user. application.acceptConnection(newClient); // Note that if your application requires additional code following the // explicit acceptConnection, you must place that code in an // application.onConnectAccept statement (required when using components) }
11	Save the changes to your main.asc file.
	Note: If you run your application and then make changes to the ASC file, you need to reload your application. You can reload from the Communication App Inspector. In Flash MX (making sure you are in the Flash MX window, not the SWF window), select Window > Communication App Inspector. Log in and select com_test\_definst_ from the Active Apps instances window. Click View Detail, and then click Reload App.
12	In the Flash MX authoring environment, select Control > Test Movie.
	The following figure shows the connection values.