Connecting to HelloWorld with Flex
I made an assumption in this topic that the typical Flex developer could take a little bit of information and apply all of the existing concepts to Flex. The biggest difference between Flash and Flex is that Flex has a fantastic class called RemoteObject. Ifyou spend a lot of time in Flash, you will find yourself writing your own implementation of RemoteObject because it adds several useful utilities. In this section, I will walk you through the two examples from the previous section and show how to implement them in Flex. This will give you the basics that you need in order to get started. Make sure you review the supplied Flex examples.
Let’s get started with AMFPHP in Flex Builder. Open Flex Builder, and start a new Basic Flex project, as shown in the following screenshot.
Name the Flex project product, and create it in your default workspace, as shown in the following screenshot. Click Finish to build the project.
You should now have an open project called product in your Navigator panel. Right-click the product name, and select Properties. In the project’s properties dialog box, go to the Flex Build Path menu, select the Library path tab, and be sure the rpc. swc file is added to your project’s path, as shown in the following screenshot. Click OK to close the window.
You now need to tell Flexwhich services configuration file to use for inspecting your remote methods. For this reason, create a new services-config.xml file in your Flex project’s root folder. To do this, right-click the product project folder, and select New File, which will pop up a new window. Select the product folder, and then name the file services-config.xml. Finally, click Finish.
Flex has created the new services-config.xml file and has it open. Use the following example text for your services-config.xml file. Make sure you update your endpoint to match that of your testing server like you did in the Flash examples. Make sure you save the file.
Now open your project’s properties dialog box again by right-clicking the project folder in the Navigator panel and selecting Properties. From the properties pop-up menu, select Flex Compiler, and add the string -services "services-config.xml". Click Apply and then OK to return to update the option. Whatyou have just done is told the Flex compiler to look to the services-config.xml file for runtime variables that will be used by the RemotingService class.
For this example, I’ll show how to connect to the HelloWorld service that you created earlier in this topic. Open the Source view of product.mxml, and add the following MXML code for defining the user interface:
As you can see, the interface is similar to what you created in Flash. As a reference, I have used the same variable names as in the first example. Run the application by clicking the green play button to see the interface (shown in the following screenshot).
You now need to add the code to handle your connection to AMFPHP. Return to the Source view of product.mxml, and add the following code:
Looking through the MXML, the first new addition is the RemoteObject tag. RemoteObject is used in Flex to make the connection to the server. Let’s look through the variables that are part of the RemoteObject tag:
■ Id is the variable name that will be used throughout the rest of the application to reference this RemoteObject.
■ Fault defines the method that should be used when there is an unsuccessful connection to the server or service.
■ showBusyCursor changes the cursor to a busy icon while data is being sent to the remote server and is removed when data is returned to Flex, keeping the user from interacting with the application.
■ Source is the name of the remote service for this RemoteObject ID.
■ Destination is the same name as the destination name that you placed in the services-config.xml file. The Destination tag is what makes the connection to the config file so that RemoteObject can load its endpoint.
■ On line 3, there is one mx:method tag that defines the name of the remote method and what local method should be executed when the result comes back from the server. We will see in the next example that there is an mx:method tag for every remote method. RemoteObject uses the NetConnection class but adds some functionality for developers. One of those features is used in this first tag called showBusyCursor. This automatically puts up the hourglass cursor when a remoting call is fired until Flex gets a response. This is a great way to keep users from clicking other buttons or hitting the Send to Server button multiple times.
In the Script section of the MXML code, you import the cursor manager and ResultEvent and FaultEvent to handle the data being returned from the AMF 3 call to AMFPHP. You have two methods, faultHandler and resultHandler, that were defined in the RemoteObject tags as the methods to handle results. faultHandler was defined as the method to be run for any fault that occurs with the myservice RemoteObject, and resultHandler was defined as the method to be run on the successful result of the HelloWorld.say method. I am just tracing out debugging information in faultHandler that will help if you are having difficulties without your server connection. On line 18 inside resultHandler, we are taking the event.result from the server, converting it to a String, and then applying that data to the text property of response_txt. This is what makes the result display.
The last thing that was added with this new MXML code was the click event on the send_btn. The click event references the myservices RemoteObject and calls the say method. It passes the text that was typed into the server_txt component.
Run the application again, and you now have your first Flex-to-AMFPHP connection! You now know that you have your Flex environment set up properly. In the next example, you’ll build the CRUD interface for the product database in Flex.
