Connecting Flex 4 and Zend using Flash Builder 4

[Flep]

With the release of Flash Builder 4, Adobe and Zend have greatly improved the integration between Flex and the Zend PHP framework.

The primary key of this collaboration is the integration of Action Message Format (AMF) supported by Zend Framework.

AMF is an open format, high-speed rail that allows the Flash Player (Flash, Flex, Air) to exchange multimedia content and other data with servers.

Flex is a highly productive free open source framework for building and maintaining web applications that run in all major browsers and operating systems using Adobe ® Flash ® Player and desktop applications using Adobe ® AIR ™.

Zend Framework is an open source PHP framework best known for its support for flexible, efficient creation of web applications.

AMF support in Zend Framework optimizes the communication between the server side (Zend Framework) components and client-side Adobe Flex.

Now Flash and Flex developers will be able to exploit the fast and reliable transfer of data between servers and clients.

More information about AMF support is available at http://framework.zend.com and http://developer.adobe.com/flex/

This tutorial explains how to create a connection between Flex and Zend and maintain data exchange.

Requirements:

• Adobe Flash Builder 4


• Zend Framework


• MAMP ( for MAC users ) or WAMP ( for windows users ) or have already installed on your machine mySQL, PHP and Apache.

Installing Adobe Flash Builder

Download the trial version or buy it from the following link: Adobe Flash Builder 4

Installatelo sulla vostra macchina.

Installing MAMP or WAMP

A good tutorial: http://www.sawmac.com/mamp/

Installing Zend Framework

Download Zend here

Copy the folder
ZendFramework in /Applications/MAMP/htdocs/ for MAC, I don't know for Windows, get a MAC :))))

Create DataBase and "clients" table

With MAMP and phpMyAdmin, create a database called "fb4".

A table that I call "clients" with the following structure:

-- phpMyAdmin SQL Dump
-- version 2.11.7.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: May 19, 2010 at 11:34 AM
-- Server version: 5.0.41
-- PHP Version: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `fb4`
--

-- --------------------------------------------------------

--
-- Table structure for table `clients`
--

CREATE TABLE `clients` (
  `id` int(11) NOT NULL auto_increment,
  `name` text NOT NULL,
  `surname` text NOT NULL,
  `address` text NOT NULL,
  `email` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=16 ;

--
-- Dumping data for table `clients`
--

INSERT INTO `clients` VALUES(12, 'tytytytytytytytytT', 'tty', 'tyty', 'tytytyty');
INSERT INTO `clients` VALUES(15, 'zxzxzx', 'xzx', 'zxzx', 'zxzxzxxz');
INSERT INTO `clients` VALUES(11, 'dfdfdf', 'dfdfdf', 'dfdfdfd', 'fdfdfdfdf');
INSERT INTO `clients` VALUES(14, 'hjhjhj', 'hjhjhj', 'hjhjh', 'hjhjhj');

Step 1 - Create a new Flex project

File>New>Flex Project

project name: FlexZend and save it in/Applications/MAMP/fb4/FlexZend

Application type: Web

Flex SDK version: Use default SDK

Application server type: PHP

click Next >

Now we have to declare to Flex where is the root of our server:

• Web root: /Applications/MAMP/htdocs


• Root URL: http : // localhost:8888/ ( for MAMP PRO, for MAMP I think it's http : // localhost/ )

Click Validate Configuration and make sure that Flex tells you they are valids.

Now select an output folder where Flex saves debug files:

/Applications/MAMP/htdocs/FlexZend-debug

click Next >

Now if you have external ActionScript libraries or SWC that want to use you can add it in this screen.

For this tutorial I suggest to jump and immediately click Finish.

Step 2 - Create a Data/Service

Flex provides us with the window Date / Services to create the connection with Zend quickly and easily.

Also it will create the PHP script to query the database.

Click Connect to Data / Service ... and select PHP as service type

click Next >

Now we have to configure the PHP and the database connection.

Need to tell Flex where is the PHP class of our project.

No problem, we create him.

click "click here to generate a sample".

Select Generate from database.

Fill in the fields for the database connection, as shown in the image above for MAC users and MAMP.

Click Connect to Database and select the table clients from the pulldown menu.

Use default location selected.

Click OK

It shows a dialog alert.

No worries, it says that Flex creates a file ClientsService.php and some safety informations.

Click OK

Now the PHP class has been generated.

Click Next >

This screen above shows the possible operations that have been created

• getAllClients - get all records from table "clients"


• getClientsByID - get a record from table "clients" passing an ID as parameter


• createClients - create a new record in table "clients" passing an Object as parameter


• updateClients - update a record in table "clients" passing an Object as parameter


• deleteClients - cdelete a recrod in table "clients"passing an ID as parameter


• count - get the length of records in table "clients"


• getClients_paged: get a number of records ( from... to... ) in table "clients"

Click Finish

Now Flex has created 3 files:

1. gateway.php in /Applications/MAMP/htdocs/FlexZend-debug - This file access / connect to the Zend Framework


2. amf_config.ini in /Applications/MAMP/htdocs/FlexZend-debug/ - This file contains the location of all directories that contain the import / php generated by the service


3. ClientsService.php in /Applications/MAMP/htdocs/FlexZend-debug/services/ - This file contains the database connection and all the methods described above to query the database

Step 3 - Using Flex Components

getAllClients

Drag a DataGrid component from the Components panel to the Stage

Drag getAllClients panel Date / Service to the DataGrid

it shows a new screen

We are now assigning the method to the DataGrid getAllClients.

Click OK

Save and then test: Run> Run FlexZend

Now the DataGrid displays all records in the table "clients".

createClients

Now we see how to create the form to insert new records in the table "clients".

Select the DataGrid, right-click> Generate Form Details ..

it shows another screen

Generate form for: DataType

Click Next >

Let selected all the properties and click Finish

Now it shows the entry form for the DataGrid.

It 's time to assign to the button the command module createClients

Select the Submit button and drag createClients panel Date / Service to the button.

At this time Flex changes the view from Design to Source and see the following lines:

protected function button_clickHandler(event:MouseEvent):void
{
    clients.id = parseInt(idTextInput.text);
    clients.name = nameTextInput.text;
    clients.surname = surnameTextInput.text;
    clients.address = addressTextInput.text;
    clients.email = emailTextInput.text;
    createClientsResult.token = clientsService.createClients(/*Enter value(s) for */ item);
}

change the line

createClientsResult.token = clientsService.createClients(/*Enter value(s) for */ item);

to

createClientsResult.token = clientsService.createClients(clients);

so we pass the Object clients to PHP.

If we test the application now, by filling out the form and clicking Submit, Flex will add a new record in table "clients".

To update the DataGrid in real time, just add the following line to the file FlexZend.mxml button_clickHandler method:

getAllClientsResult.token = clientsService.getAllClients();

So the method button_clickHandler becomes:

protected function button_clickHandler(event:MouseEvent):void
{
    clients.id = parseInt(idTextInput.text);
    clients.name = nameTextInput.text;
    clients.surname = surnameTextInput.text;
    clients.address = addressTextInput.text;
    clients.email = emailTextInput.text;
    createClientsResult.token = clientsService.createClients(clients);
    getAllClientsResult.token = clientsService.getAllClients();
}

If we test the application now, by filling out the form and clicking Submit, Flex will add a new record in table "clients" and also updates our DataGrid.

deleteClients

We work now to create a form that removes a record from the table "clients".

Right click on DataGrid> Generate Form Details ..

This opens the usual screen form configuration

In the field generated form for: Select Service Call.

In the Operation field, select deleteClients.

Click Next >

in this screen leave the itemID parameter selected.

Click Finish

If we test the newly created form, inserting an id in the text field at the click of a button DeleteClients see that the record with this id in the table "clients" is eliminated.

Try also to refresh the browser page in which we are testing the application and note that the records no longer exist.

Also check the database and the table "clients" for verification.

I leave to you to create other modules for other calls.

[cancerinform]

Great tutorial! That is what I was looking for some time. Thanks.

[rexonms]

Thanks for the great tutorial.... But I have problem send the information or createClients.

When I run a debug.. it says that clients value is null.. the exact error is

TypeError: Error #1009: Cannot access a property or method of a null object reference.

at myEmployee/button_clickHandler()[/Applications/XAMPP/xamppfiles/htdocs/xampp/Flash Builder Cook Book/src/myEmployee/src/myEmployee.mxml:20]
at myEmployee/__button_click()[/Applications/XAMPP/xamppfiles/htdocs/xampp/Flash Builder Cook Book/src/myEmployee/src/myEmployee.mxml:51]

....
This thing is killing been 3 days trying to solve it....

Following is the whole code...
*************************

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:employeservice="services.employeservice.*" xmlns:valueObjects="valueObjects.*">
	<fx:Script>
		<!&#91;CDATA&#91;
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			import mx.utils.ObjectUtil;
			
			protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
			{
				getAllEmployeResult.token = employeService.getAllEmploye();
			}
			
			
			protected function button_clickHandler(event:MouseEvent):void 
			{				
				employe.firstName = firstNameTextInput.text;
				employe.lastName = lastNameTextInput.text;
				createEmployeResult.token = employeService.createEmploye(employe);
				getAllEmployeResult.token = employeService.getAllEmploye();
			}
			
		&#93;&#93;>
	</fx:Script>
	<fx:Declarations>
		<s:CallResponder id="getAllEmployeResult"/>
		<employeservice:EmployeService id="employeService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
		<valueObjects:Employe id="employe"/>
		<s:CallResponder id="createEmployeResult"/>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Binding source="dataGrid.selectedItem as Employe" destination="employe"/>
	<mx:DataGrid x="102" y="124" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{getAllEmployeResult.lastResult}">
		<mx:columns>
			<mx:DataGridColumn headerText="id" dataField="id"/>
			<mx:DataGridColumn headerText="firstName" dataField="firstName"/>
			<mx:DataGridColumn headerText="lastName" dataField="lastName"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Form defaultButton="{button}" x="112" y="318">
		
		<mx:FormItem label="FirstName">
			<s:TextInput id="firstNameTextInput" text="{employe.firstName}"/>
		</mx:FormItem>
		<mx:FormItem label="LastName">
			<s:TextInput id="lastNameTextInput" text="{employe.lastName}"/>
		</mx:FormItem>
		<s:Button id="button" label="Submit New" click="button_clickHandler(event)" width="184"/>
	</mx:Form>
</s:Application>

*****************

thanks in advance...