Integrate Flex Builder 3.0 & Php easly with the fresh ZendAMF

In this article I will explain how to build a simple adobe flex application that communicates with php using remote objects calls to the new AMF php implementation supported by adobe and called ZendAMF.

In my example I will use Adobe Flex Builder 3, ZendAMF and a Apache web server with php support and mysql server on windows. If you do not have any available server with php (at least) you will need to install one on your machine. It’s easy, nowadays you have many standalone installers that do everything, just look at the wampserver for example.

Requirements

About ZendAMF:

ZendAMF is a new php implementation of Action Message Format (AMF) that allows Adobe Flex and Flash to talk with php. We could use the amfPHP, but because zend it’s a new one, I will use it. You can download it for free. The version that I will use is the ZendAMF 1.7.8 (zip).

About AMF:

AMF is a binary protocol that uses remote procedure calls to connect adobe flash & flex to many languages server-side and databases.

Getting started!

Some initial notes:

From now on I assume you got the wampserver installed on default path (c:wamp), Adobe Flex Builder 3 and have downloaded the ZendAMF 1.7.8 package (Zip File). To work with ZendAMF you don’t need to use the entire Zend Fframework.

1 – Creating the flex Project:

Just open Flex Builder, goto the menu File, select New and then Flex Project, on the screen it will ask you some informations, just write like me:

Project Name: phpintegration

Project Location: Select Default Project Location

Application type: Select Web Application (Runs in Flash Player)

Server Technology: None Click Next, and on the following screen leave the default values:

Output folder: bin-debug

Click next, and again on the screen leave all by default, that sould be:Main source folder: src

Main application file: phpintegration.mxml

Output folder URL: (leave blank) Click finish, your project is now created. It has nothing special, is just another regular flex project.

2 – Configuring ZendAMF

The next thing to do is to go to your web server htdocs path, if you have installed wampserver on default location should be c:wampwww, and extract here the downloaded zendAMF zip file.

It should now appear a folder on c:wampwww called ZendAMF-1.7.8 open it, then open library folder and copy the Zend folder, go back to the server root (c:wampwww) and paste the Zend folder.

This is all we need, you can leave the extracted ZendAMF-1.7.8 folder, it contains amf documentation, but Zend folder is all we need.

2.1 – Creating ZendAMF php files

In this path (c:wampwww), just create 2 files, one called zend_gateway.php and another called test_class.php

The two files have different functions and code:

zend-gateway.php is our gateway to flex, it means that flex will use this file to «find» all amf classes and our class test_class code.

3 – Configuring the Flex Builder

When our php code is done, we just need to inform adobe flex compiler that he should identify this gateway (zend_gateway.php) and allow remote calls to it, for that we need to create a services-config.xml file and load it together with the compiler.

To easily do this, on the Adobe flex builder ‘Flex Navigator’ find the src folder and right-click on it, select New, then File and then just write on file name: services-config.xml and click finish. File will now open on flex builder (empty), just write this on it:

In this code you will just need to modifiy (if necessary) the uri to your wamp server adress, by default this is correct and not need to be changed.

Save the file! (CTRL+S/ File->Save)

Now all we need to finish configuration is to inform the flex compiler that we have remote services by indicating the file services-config.xml as additional compiler arguments, to do this just go to your Adobe Flex Project, select (if not selected) the phpintegration.mxml file, go to flex builder menu: Project and select Properties, on the window opened, click at left on Flex Compiler, and on the right where is: -locale en_US just add: -services “services-config.xml”

It should now be (like the image):

-locale en_US -services “services-config.xml”

Click ok and wait a few seconds! Flex is configured!

4 – Coding our application

Our application is ready to code, we now need to add a few visual elements to our flex phpintegration.mxml file, in my case I will make a simple panel with a few items and 3 functions, one to call the php function, other to handle a success answer and a third to handle a possible error.

It’s done!! Wou will get something like the image: Just run the application and write your name on the text field (or leave blank) and press the button, if everything went good, you will get an alert with the one of the messages:

Hello anonymous user! This is php saying hello! If you did not write anything on the input field

or

Hello ‘name on the text field’ user! This is php saying hello! If you write something on the text field.

Function called by the button, on the fisrt line it defines the argument user with the text contained in the field userName. After that it calls the method from the remote object, that will call the same name function on the php class.

In here we define several things, on the remoteObject tag we define his id as zendAMF, indicating the zend destination (defined in the services-config.xml file loaded as compiler argument), we make it show the busyCursor during the call, and we define the destination class, that is our class name test_class.

On bottom, we define one method for each class function with the same name that our php function has, in this case we just need to call our sayHello function, defining it as is name: name=”sayHello”, we define also the function that will be called when the method responds, named onSayHelloResult, and also the function called when an error ocours, named onError. After that are named the arguments, should be placed by the same order that the php function have. In this caso is just one.

Well, that’s all.

Note

The zip archive FlexPHPSourceFiles.zip contains the flex project (phpintegration.zip) and the zendAMF path files (zendAMF.zip that containes zend_gateway.php and test_class.php)

In a future tutorial i will teach how to make a simple contact manager with all CRUD (Create, Read, Update and Delete) Operations using ZendAMF.

Mário Santos, Portuguese and actually working in Luxembourg on Internet/Intranet Development (some time as free-lancer), is an Adobe Flex 3 with AIR Certified Expert. Works with Flex daily for the past 2 years and with php for almost 8. As a Flex 3 addicted, he have already published for free on his blog 2 e-books about Flex and Action Script 3 written on his native language (PT_pt). Last 8 months started to work also with advertising and design for print. You can follow him on his twitter, facebook or linkedin.

Ever wondered if you could visualize your website in 3D? Well, here’s one such Firefox extension that allows you to do so. Tilt is a Firefox add-on that lets you visualize any web page DOM and provides the relationship between various parts of a website in 3D.

User Interface Design in C# Windows Form Application From Scratch In this C Sharp tutorial you will learn user interface design in C# application. This step-by-step tutorial will help you deeply understand…

In this second part article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

There are many popular open source tweening engines in the Flash community today. Numbered among these are Tweener, TweenLite/Tweenmax, Tweensy, and GTween. This is a short look at the capabilities of newcomer to the scene: BetweenAS3. BetweenAS3 is the tweening engine brainchild of Yoshihiro (yossy) Shindo and is available as part of the Spark project (i.e. it is brought to us by one of the same group that brought the world the FLARToolkit for Augmented Reality in Flash and countless other goodies).

In this article you will learn how to build an image gallery that will load images from a web server. I decide to call it “Intelligent” because you don’t need to configure any XML or flash file. Just put the Flash movie and the images on a server and they will be loaded automatically. Nice ah?

Today we start a 9 part tutorial series on creating a Shoot’em’Up game. We will cover all the necessary topics to create it from scratch, which will help you to understand and apply these guidelines to other projects. Ath this first part. we look at getting the Away3D engine up and running by creating a UIComponent that will contain and initialize the necessary Away3D components.

Flash it’s a powerful application and can be really complex, but even beginners can create a cool menu for demonstration or for use in a personal site. The menu that we will create is simple, but the swirl animation is something that you don’t see everywhere, for that I’ve decided to explain one way to make an animation of growing swirls without any Action Script code.You will also learn how to import artwork from illustrator where I’ve pre-made the graphics, the work is very simple and the result will be very cool.

Possibly the hottest thing to hit the Flash community since the advent of several excellent 3D engines is the recent debut of 3D physics engines. Here we’ll examine a way of using one of the more popular 3D engines, JiglibFlash, in conjunction with the prominent 3D engine Papervision3D to create a bowling game.

Hi,thanks for the tutor,but i can’t get it worked..I got this error message :

[RPC Fault faultString=”Send failed” faultCode=”Client.Error.MessageSend” faultDetail=”Channel.Connect.Failed error NetConnection.Call.BadVersion: : url: ‘http://localhost/zend_gateway.php'”] at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\rpc\AbstractInvoker.as:220] at mx.rpc::Responder/fault()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\rpc\Responder.as:53] at mx.rpc::AsyncRequest/fault()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\rpc\AsyncRequest.as:103] at mx.messaging::ChannelSet/faultPendingSends()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\messaging\ChannelSet.as:1482] at mx.messaging::ChannelSet/channelFaultHandler()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\messaging\ChannelSet.as:975] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at mx.messaging::Channel/connectFailed()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\messaging\Channel.as:997] at mx.messaging.channels::PollingChannel/connectFailed()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\messaging\channels\PollingChannel.as:354] at mx.messaging.channels::AMFChannel/statusHandler()[C:\autobuild\3.2.0\frameworks\projects\rpc\src\mx\messaging\channels\AMFChannel.as:390]

Cool tutorial got me started on the ZendAMF Action Message Format ‘Broker’. I got into a hook though. When you enter the config file in the Flex Complier dialog, you should omit the quotes for the “services-config.xml” so you should have -services services-config.xml. Cool work. It worked like a bluebird (my term for really cool). I’m using the latest version zendamf 1.10.5 with flex sdk 3.5