The Flex side of Hello World!

Now that you have the PHP to output the "Hello world!" text, you need to create a client to request, accept, and display it. Create a new project in the Flex Builder IDE by selecting File > New > Flex Project. In the dialog box, type helloWorld as the project name, and specify a project directory called helloWorld under your web root—just as you did when creating the PHP portion of the example. Select Web application option as the application type, and then select an application server type of PHP. The appropriate settings for a Windows machine running a default WAMP installation appear in Figure 14. If your setup differs, enter the correct file path for your web server.

Figure 14. Creating a new Flex project

Click Next. Now you need to enter some information about your web server. Figure 15 shows the appropriate settings for a default WAMPServer installation on Windows.

Figure 15. PHP Server settings

Once you complete the first two fields, click Validate Configuration to test the settings. In the Output Folder field, type bin-debug, and then click Next.

In the New Flex Project dialog box, check that your output folder URL is under your web root and that it corresponds to the Output Folder value you entered in the previous step—as shown in Figure 16.

Figure 16. Entering the project's build path, source folder, and output folder URL

Click Finish. Your new project is generated and shows up on the list in the upper left pane of the IDE. The main pane of the window displays a new helloWorld.mxml file. If you are within the Design View, click the Source button in the upper left of the main pane. Inside the <mx:Application> tag, change layout="absolute" to layout="vertical".

Next, add an <mx:HTTPService> to the MXML code by placing the following code just below the <mx:Application> tag, on the third line:

<mx:HTTPService id="phpService"
     url="http://localhost/helloWorld/helloWorld.php"
     resultFormat="object" result="showResult()"/>

The code above creates an HTTPService and defines some of its properties. The service has an ID of phpService, a URL pointing to your helloWorld.php file, and a result format of a generic object. The service is also set to call the showResult() function when it gets a result.

To actually use the service, its send method needs to be called. Add an <mx:Button> control beneath your <mx:HTTPService> with this code:

<mx:Button label="Call PHP" click="phpService.send()"/>

The new button, Call PHP, calls the HTTPService's send method when clicked.

Now, you need to create the showResult() function in an <mx:Script> block. Place the following code below your <mx:HTTPService> tag.

<mx:Script>
     <![CDATA[
     import mx.controls.Alert;
     private function showResult():void {
     Alert.show(phpService.lastResult as String,'Message from PHP');
     }
     ]]>
</mx:Script>

The above ActionScript code first declares an Import statement, which allows your application to use the Alert class from the mx.controls package. Secondly, it creates the showResult() function. This function displays an alert pop-up with the title "Message from PHP." The text within the alert box is the result from the HTTPService call to the helloWorld.php file. In this case, the result should be the string "Hello world! It's me, PHP!" Save the file, and click the green Run arrow to test the application. Figure 17 shows the alert that appears when the Call PHP button is clicked.

Figure 17. The alert showing the result of the call to PHP

Now that you've established communication between Flex and PHP, it's time to take it to the next level.

Page 4 of 5

Previous Page

Next Page