Combine the PHP application with Flex!

This paper is from abroad: http://www.sitepoint.com/article/pimp-php-app-flex/

Flex is Adobe's Open source Web application framework for fast development of Web or desktop applications. Flex lets you make software that is then programmed into a flash (SWF) file that can be run in any browser after the Flash plugin is installed. Best of all, it's very interesting to use. You can easily write an interface-dazzle application: An impressive effect that you can add to your application with just a few more lines of code. That way, you can write cool apps in just a few minutes. Wow, did I say this is fun to use?

If you've never been in touch with Flex before, read the Flex tutorial in front of us. You can learn about the entire installation environment of Flex Builder and some key concepts of flex development.

In this article, we'll learn more about combining PHP with Flex: In Flex with PHP, create a widget for product information to extract product information. Before you start, get a demo version of Flex Builder 3 from Adobe-we're going to use it to make our widgets.

Example Widget

The widget we'll be making will display an image of the product with a link to the description and the Product information page. It is composed of these basic elements:

· A flex application to render widgets;

· An HTML page that contains flash;

· Then, a PHP script will display the product data in XML or JSON format

First, we embed the product information into the Flex application and build our widget. Once we've sorted out the Flex section, we'll change the code to learn to extract the data from the XML file.

To begin, we use Flex Builder to create a new Flex project. Enter Productwidget as the name of the project, make sure that the application's type adapts to the Web application, and then press the finish key.

This builds a basic project that includes a template HTML file upload and display application, and a bare bone application-productwidget.mxml. Unless you have changed Flex Builder layout, you can see the main application files in the text editor on the right side of the screen. Make sure the Productwidget.mxml file is displayed in the editor. If you are not sure, look for a file named Productwidget.mxml in the left file tree, and then double-click the file to make sure the correct file is uploaded.

In the file, you will see the Flex application launch, contained in the mx:application tag. We'll add a box to the widget, add a placeholder for the image, and a button that contains the link. Between the mx:application tags, add the following code:

<mx:vbox top= "0" left= "0" right= "0" bottom= "0" > <mx:image id= "Image" width= "he"/> <mx:linkbutton-label= "LinkButton" id= "link" width= ","/> </mx:VBox>

Mx:vbox is a layout layout component to ensure that images and link buttons are displayed under them. Both items are 150 pixel wide.

Click the Run button on the toolbar (green button with a white arrow inside) to make sure everything works. The browser should open and display the more blank page, in the upper left corner is the LinkButton we created earlier.

Next, we will enter product images, button text, and button links to the Flex application.

Passing parameters

The most basic way to pass parameters to flex is to add parameters to the HTML template that contains our widget. For example, we need to provide three values:

· Displays the URL of the image (ImageURL)

· Product Description (ProductTitle)

· Links to more information about the product (Productlink)

We need to change the HTML template located in the Html-template file to achieve this. By default, if the client needs to install the Flash plugin, the file contains code to detect the Flash plug-in and install the link. Once completed, it also contains code that passes parameters to the flex application.

In the file, there are two calls for the function ac_fl_runcontent. One is to make sure that you are using it to call your SWF file (the other is to update Flash Player after an expired version is detected). In my template, it's about 77 lines. The call contains all the templates that are passed to the flex application. To pass data to your flex application, you need to add an additional parameter flashvars that can contain several other parameters encoded as HTML URLs, like variables in a get call. I am using a free image from Stock.xchng by Nitewind23, and the detailed screen of the image is used as a product in this presentation.

else if (hasrequestedversion) {//If we ' ve detected an acceptable version//embed the Flash Content SWF as all tests are passed ac_fl_runcontent ("src", "${swf}", "width", "${width}", "Height", "${height}", "Align", "Middle", "id", "${app Lication} "," Quality "," High "," bgcolor "," ${bgcolor} "," Name "," ${application} "," allowScriptAccess "," Samedomain "," Type "," Application/x-shockwave-flash "," pluginspage "," Http://www.adobe.com/go/getflashplayer "," Flashvars "," Imageurl=http://www.sxc.hu/pic/m/n/ni/nitewind23/638995_dead_rubber_ducky.jpg&producttitle=rubber%20duck &productlink=http://www.sxc.hu/photo/638995 "); ... }

If the user starts JavaScript on the browser, it will be fully operational. For users who do not use JavaScript to start a browser, you also need to add parameters to the NoScript column of the template.

Our application receives parameters from the HTML template--now we need to tell the application how to use them.

Code requirements in the. mxml file are placed in the Mx:script column. We add the column after the Mx:vbox: closing parenthesis.

<mx:Script> <!--[cdata[private var linkurl:string = "; Private function Oncreationcomplete (): void {SetData ( Application.parameters.imageURL, Application.parameters.productTitle, Application.parameters.productLink); Private Function SetData (imageurl:string, Producttitle:string, productlink:string): void {image.source = ImageURL; li Nk.label = ProductTitle; Linkurl = Productlink; Private Function onlinkclicked (): void {Navigatetourl (new URLRequest (Linkurl));}] --> </mx:Script>

Private Function serviceloaded (event:resultevent): void {var rawdata:string = String (Event.result); var data:object = J Son.decode (RawData); SetData (Data.imageurl, Data.producttitle, Data.productlink); }

The completion source of the last example, see Listing 3.

Parameters used for HTTP requests

Now all of our examples are directly requesting data. In real use, it is possible that you need to pass parameters, such as search words or tags, to related services. To set the parameters in the Httpservice, you add a mx:request tag that contains the parameters you want to pass, and a request method. If we want to pass a search parameter, that is:

<mx:httpservice id= "Personrequest" url= "http://www.example.com/service_json.php" "resultformat=" text "result=" Serviceloaded (event) "fault=" Serviceerror (event) "method=" get "> <mx:Request> <search>duck</ Search> </mx:Request> </mx:HTTPService>

Let's go.

As you can see, it's very easy to combine flex with PHP. If your PHP application exposes a service that returns XML or JSON data, Flex can instantly crawl that data. Interesting coding.

Oncreationcomplete reads the arguments passed from the HTML file and calls another function SetData, which occupies the variable with the parameters we receive from the HTML template. Given that this method is called immediately after the application is created, we can determine that the data was set at the outset.

The SetData function takes three parameters: ImageURL, ProductTitle, and Productlink. We will use ImageUrl to set the source of the image and use ProductTitle to set the label displayed on the link button. Productlink need to be kept in the Linkurl variable we just defined so that we can use it when the user clicks on the link.

Finally, the onlinkclicked function jumps to the link defined in the variable Linkurl. We will attach the function to the button on the next step.

We go back to the Mx:vbox tag we created before to find the link button. As shown below, we will add a click handler:

<mx:linkbutton label= "LinkButton" id= "link" click= "onlinkclicked ()"/>

Finally, once the application is uploaded, we need to do this. We will add a handler creationcomplete the application to run the Oncreationcomplete function immediately after the element is created. Look for the Mx:application label at the top and add handler:

<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml"
layout= "Absolute"
Creationcomplete= "Oncreationcomplete ()" >

The complete. mxml file should be the same as the code in Listing 1.

All done. Press the Run button and try it. The results are as follows:

Add a little spice to it.

It's too easy. Let's add a little eye candy to the application and fade into the image. is to add completeeffect= "Fade" to the mx:image tag:

<mx:image id= "Image" height= "completeeffect=" Fade "/>"

Now, run the program again-you should make sure that the image of the duckling will fade. There are a lot of predefined effects in flex; it's easy to customize or create your own effects. For more information, see the use effects working with effects for Adobe Livedocs.

Now we have a basic framework to provide flex applications based on data. The next step should be to provide this kind of data in a more exciting way: Let's use PHP to create XML and use our program.

Using XML data

If your application generates XML data, the next half of the tutorial will show you how to handle such data in Flex. We can easily create XML, read XML, and flex support for XML is also concise and effective. That's why we want to use it. Let's take a look at the work we need to do.

Before we get started: The point is that we should keep in mind that Flash is very strict about obtaining data from another domain for SWF storage. You either need to run the Flex application in the PHP script domain or create a cross-domain policy on the PHP server. For more information about Cross-domain policies and flash security mode, read the Adobe Developer Forum (Adobe Developer Connection) article.

Since we're going to use HTTP to extract the data, we'll use the Flex class named Httpservice to handle all the important things. We will tell Httpservice where to connect and how to process the returned data.

To try, we need to encode a simple PHP data. In real life, you're going to extract information from a database. But in the example here, we're simply, hard-coded these values. Here is a PHP script that uses functions to read data, create a variable to keep the data, and then output the data in XML format:

<?php header ("Content-type:text/xml"); function GetData () {$data ["productlabel"] = "rubber duck"; $data ["productlink"] = "http://www.sxc.hu/photo/638995"; $ data["ImageURL"] = "Http://www.sxc.hu/pic/m/n/ni/nitewin