Space of Flex/AIR technologies

In this tutorial I will explain how to configure a development environment to work with PHP and Flex projects in one tool. In order to do that I will use Eclipse PDT 2.1 (PHP Eclipse plugin), Flash Builder 4 Plug-in Beta 2 and the latest Eclipse IDE for Java EE Developers package, which is eclipse-jee-galileo-SR1-macosx-carbon (of course if you are on Windows you should get the proper Windows version instead) at the moment. Additionally I will use MAMP (Mac, Apache, MySQL, PHP stack), of course there are other possible solutions like WampServer for Windows, multiplatform XAMPP, or Zend Server.

Download links:

- Eclipse IDE for Java EE Developers – http://www.eclipse.org/downloads/

- Eclipse PDT 2.1 (pdt-Update-2.1.2.zip) – http://www.eclipse.org/pdt/downloads/

- Java SE Development Kit (JDK 6 Update 17 – at the moment) – http://java.sun.com/javase/downloads/index.jsp

- Flash Builder 4 Plug-in Beta 2 – https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4 (you need to login with a free Adobe ID account)

- ZendDebugger (download latest version depending your operating system) – http://downloads.zend.com/pdt/server-debugger/

- MAMP, WAMP, XAMPP, or Zend Server
http://www.mamp.info/
http://www.wampserver.com/
http://www.apachefriends.org/en/xampp.html
http://www.zend.com/en/products/server-ce/

Installation steps:

Step 1) Start with Eclipse IDE for Java EE Developers installation, it is as simple as unpacking it to some folder on your drive. If you are on Windows make sure you have the JDK (Java Development Kit) installed on your system. Without that Eclipse will not run.

Step 2) Run Eclipse from the folder you installed it in. A clean installation will start with welcome screen; select Workbench option in the right upper corner to go directly to the development environment.

Step 3) Install PDT 2.1 as described in the following section of the PDT installation wiki: http://wiki.eclipse.org/PDT/Installation#Eclipse_3.5_.2F_Galileo_.2F_PDT_2.1

IMPORTANT DON’T INSTALL PDT 2.2 AT THE MOMENT as it has some bugs that are causing PHP scripts to crash. Go to the link  at the top and download one marked on a picture below (pdt-Update.2.1.2.zip):

As described in the wiki link above, in Eclipse go to Help > Install New Software… > Add… > Name: PDT, Location: jar:file:/path/to/pdt-Update-2.1.2.zip!/

Step 4) Install Flash Builder 4 Plug-in Beta 2 pointing to the Eclipse installation that was unpacked earlier, as shown below:

Step 5) Now you are ready to run your PHP/Flex development environment. Just remember NOT TO run it with the links provided by the Flash Builder 4 Plug-in installation. IMPORTANT: Directly start Eclipse from the folder you unpacked it into.

You can switch to the PHP or Flash perspective in upper right corner of your Eclipse Workbench by selecting it from the list in the Other option.

Step 6) Install the Apache, MySQL, PHP stack. Unpack ZendDebugger downloaded from one of the links above. Follow the instructions in README file to install it on your system.

Alternatively you can use ZendExtensionManager and configure it this way in your php.ini file:

zend_extension_manager.debug_server=/Applications/MAMP/bin/php5/zend/lib/ZendDebugger-5.2.15
zend_debugger.allow_hosts=127.0.0.1
zend_debugger.expose_remotely=always

IMPORTANT: ZendDebugger-5.2.15 is the unzipped ZendDebugger package and its subfolders need to be renamed to follow this schema: php-5.2.x. For example: 5_2_x_comp => php-5.2.x

Just remember to drop dummy.php into your website public root folder on your dev environment.

Step 7) Create your PHP project and give it a Flex Project nature by right clicking on your PHP project and selecting option Add/Change Project Type > Add Flex Project Type. This way you can have all your code in one single project. Of course you can have two separate projects for PHP and Flex but this is your decision. Do what will be more convenient for you.

And now you can Rock & Roll with PHP and Flex!

It was actually published last week but I just found some time to write about it on my blog. Its a part 2 of my ADC series about Zend Framework for Flex developers:

Recording is also available directly on Adobe TV website and iTunes.

It was just published on ADC, it’s a first recording of two part series. You can find more details on one of my previous blog posts: Zend_Amf with full Zend Framework

Recording is also available directly on Adobe TV website and iTunes.

Last night on a way back from Katowice (spodek20.pl – barcamp event) I found some time to put my ZendAmfDs project together into distributable package. I created a zendamfds project  on Google Code to host source files. Okay now couple of words what’s it all about…

ZendAmfDs is an extension to Zend_Amf (it actually extends Zend_Amf_Server class). It allows developers to configure and execute on the server side database queries against model classes that extend Zend_Db_Table_Abstract  (SELECT, INSERT statements are supported with this release, I’m also planning to add in the future UPDATE statements – I encourage anyone from the community to help me on this ). As part of this project I also created very simple AS3 helper library that makes it very simple to use it from Flex side. With just a single line of code it is possible to execute queries plus register result and fault handlers, look further for more explanation.

To start playing with quickstart package you need to do couple of necessary steps:

1. Download ZendAmfDsQuickstart package from here: http://code.google.com/p/zendamfds/downloads/list
2. Download Zend Framework (Minimal is enough) from here: http://framework.zend.com/download/latest
3. Unzip both archives and copy Zend library to ZendAmfDsQuickstart\library folder.
4. Register your quickstart application in httpd.conf – Apache configuration file (there are probably couple of other ways to do that but that is something that works for me and I found it useful when working on multiple projects on the same Apache instance). My httpd.conf configuration looks like this:
   
   

   Alias /quickstart /Users/pwalczys/Workspaces/Zend_Amf_Ds/ZendAmfDsQuickstart/public
   <Directory "/Users/pwalczys/Workspaces/Zend_Amf_Ds/ZendAmfDsQuickstart/public">
       AllowOverride all
       Options None FollowSymLinks
       Order allow,deny
       Allow from all
   </Directory>

   What it does it points requests from http://localhost/quickstart to web root folder that is in my case placed in /Users/pwalczys/Workspaces/Zend_Amf_Ds/ZendAmfDsQuickstart/public. Make sure you modify this according to your folders structure!!! Also important to note here is that under public folder there is a hidden .htaccess file that assumes that your application will have quickstart as web root folder. If you want to run it directly under http://localhost/ make sure you change /quickstart/index.php => /index.php at the bottom of .htaccess file. Make sure you restart Apache server after changes made in httpd.conf.

5. Next step is to create database, this example assumes that you will be using MySQL with ZEND_AMF_DS database and and FOOS_TABLE in it. There is a schema.mysql.sql file under scripts folder that will help you creating proper table structure with some sample data. Another important thing is to configure database access. In order to do that go to application/config/app.ini file and set property values for host, user and password. You may also want to change adapter if using different database engine.

   // application/config/app.ini

   [production]
   database.adapter       		=	"PDO_MYSQL"
   database.params.dbname		=	"ZEND_AMF_DS"
   database.params.host		=	"127.0.0.1"
   database.params.username	=	"USERNAME"
   database.params.password    = 	"PASSWORD"
   ...
   

6. Finally we are ready to run it, simply go to http://localhost/quickstart/ and you should see something like this:

   

   You can play with this by using form that adds new records into FOOS_TABLE that are displayed in the DataGrid above.

If you had any problems with steps above you may want to refer to one of my previous posts where I explained how to configure Zend_Amf with full Zend Framework.

Okay now lets have a look how it works. Whole ZendAmfDsQuickstart package is a PHP/PDT project with Flex nature so if you are using Flex Builder or Eclipse with Flex Builder plugin you can download PDT from eclipse.org site to have also PHP editor in place.

1. On PHP side it all starts with MessageBrokerController class (its in application/controllers/MessageBrokerController.php file). Major difference here is that I’m using ZendAmfDs class to instantiate AMF service that is located in library/ZendAmDs/ZendAmfDs.php. This class actually extends Zend_Amf_Server so you can use functions like addDirectory, setClassMap as you would do with Zend_Amf_Server itself. ZendAmfDs class constructor requires parameter with path to data-services.xml file that contains all SELECT, INSERT statements definitions.

   <?php
   class MessageBrokerController extends Zend_Controller_Action 
   { 
   	public function init()
   	{
   		$this->_helper->viewRenderer->setNoRender(true);
   	}
    
   	public function amfAction()
   	{
   		require_once 'ZendAmfDs/ZendAmfDs.php';
   		$server = new ZendAmfDs(APPLICATION_PATH . '/config/data-services.xml');
   		$server->addDirectory(APPLICATION_PATH . '/services/');		
   		echo($server->handle());
   	}
   }

2. Configuration file data-services.xml (its in application/config/data-services.xml) contains information about SELECT, INSERT statements and also where model classes are placed. In case of quickstart project there is only one model class called Foo that maps to FOOS_TABLE. There is one more thing to point here is that underscore notation (_) can be used when naming table columns and ZendAmfDs will convert these to camelCase property names on ActionScript class side (columnNameCamelSeparator element defines what is default separator in your column names, in case this is omitted it will map one-to-one column names to property names).

   <?xml version="1.0" encoding="utf-8"?>
   <service>
    
   	<destination id="ZendAmfDs">
   		<properties>
    
   			<defaults>
   				<columnNameCamelSeparator>_</columnNameCamelSeparator>
   				<modelsPath>models</modelsPath>
   			</defaults>
    
   			<select id="findFooById">
   				<asClass>Foo</asClass>
   				<modelClass>Foo</modelClass>
   				<where>ID = 1</where>
   			</select>
    
   			<select id="findAllFoos">
   				<asClass>Foo</asClass>
   				<modelClass>Foo</modelClass>
   				<order>NAME</order>
   			</select>
    
   			<insert id="insertFoo">
   				<asClass>Foo</asClass>
   				<modelClass>Foo</modelClass>
   			</insert>
    
   		</properties>
   	</destination>
    
   </service>

3. Now if you take a look into Flex code there are two things to note here. I’m using ZendAmfDs.swc library that brings single helper class that is instantiated in MXML with following line: <zendAmfDs:Service id="zendAmfDs" remoteObject="{remoteObject}" /> and later on it is used by calling query method like this: zendAmfDs.query("findAllFoos", null, allFoosResultHandler);. This way it is possible to execute findAllFoos query on the server side without any parameters with allFoosResultHandler method as a result handler. If query requires any parameters null value should be exchanged with an array of objects that will be passed to PHP and used in WHERE part of the query statement. Additionally it is possible to register fault handler that can be specified after result handler, in this particular case I’m using default fault handler registered during RemoteObject initialization.

   <?xml version="1.0" encoding="utf-8"?>
   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
   	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" xmlns:models="quickstart.models.*"
   	xmlns:zendAmfDs="net.riaspace.zendAmfDs.*" initialize="findAllFoos()">
    
   	<mx:Script>
   		<![CDATA[
   			import mx.collections.ArrayCollection;
   			import mx.rpc.events.ResultEvent;
   			import mx.controls.Alert;
    
   			[Bindable]
   			private var allFoos:ArrayCollection;
    
   			private function findAllFoos():void
   			{
   				zendAmfDs.query("findAllFoos", null, allFoosResultHandler);
   			}
    
   			private function allFoosResultHandler(event:ResultEvent):void
   			{
   				allFoos = new ArrayCollection(event.result as Array);
   			}
    
   			private function insertFoo():void
   			{
   				zendAmfDs.query("insertFoo", [foo], insertFooResultHandler);
   			}
    
   			private function insertFooResultHandler(event:ResultEvent):void
   			{
   				findAllFoos();
   			}
    
   		]]>
   	</mx:Script>
    
   	<mx:RemoteObject id="remoteObject" endpoint="http://localhost/quickstart/MessageBroker/amf" 
   		destination="zend" fault="Alert.show(event.message.toString())"/>
    
   	<zendAmfDs:Service id="zendAmfDs" remoteObject="{remoteObject}" />
    
   	<mx:DataGrid dataProvider="{allFoos}">
   		<mx:columns>
   			<mx:DataGridColumn headerText="ID" dataField="id"/>
   			<mx:DataGridColumn headerText="NAME" dataField="name"/>
   			<mx:DataGridColumn headerText="FOO_NUMBER" dataField="fooNumber"/>
   		</mx:columns>
   	</mx:DataGrid>
    
   	<models:Foo id="foo" 
   		name="{txtName.text}" 
   		fooNumber="{Number(txtFooNumber.text)}" />
    
   	<mx:Form>
   		<mx:FormItem label="NAME">
   			<mx:TextInput id="txtName"/>
   		</mx:FormItem>
    
   		<mx:FormItem label="FOO_NUMBER">
   			<mx:TextInput id="txtFooNumber"/>
   		</mx:FormItem>
    
   		<mx:FormItem>
   			<mx:Button label="Insert" click="insertFoo()" />
   		</mx:FormItem>
   	</mx:Form>
    
   </mx:Application>

This just couldn’t be simpler!!! Of course I’m waiting for the feedback and if anyone feels like adding UPDATE support please let me know…

This Saturday (24.01.2009) I will be talking about Zend_Amf at Adobers.org Flex User Group in Kraków/Poland. Anyone in the area is invited (maybe if you are visiting Kraków), during the meeting I’m planning to do first public release of my Zend_Amf library that I named Zend_Amf_Ds. I will keep the details about it till Saturday but stay tunned for this on my blog next week

It will take place in one of my most favorite places in Kraków called Pauza that is located on Floriańska 18/3.

More info (in Polish) you can find here: http://adobers.org/wydarzenia/spotkanie-w-styczniu

Mihai has posted announcement about our very strong support for PHP user groups, if you are a PHP developer you should defenitly know about it: http://corlan.org/2009/01/07/2009-php-ug-europe-tour/

There are many examples on the web how to use Zend_Amf as a standalone component but couldn’t find one that actually shows how you can run it with the rest of the Zend Framework. Main benefit of running it in a way I will demonstrate in this post is that requests to AMF service classes are automatically bootstrapped with configuration, database initialization and other Zend components.

Here is how I use Zend_Amf with the full framework. First we have to setup whole environment as it is in ZendFrameworkQuickstart (there is also already preconfigured archive available there).

Read the rest of this entry »