flash builder flex php

8/6/2019 Flash Builder Flex PHP

http://slidepdf.com/reader/full/flash-builder-flex-php 1/6

DZone, Inc. | www.dzone.com

GetMoreRefcardz!Visitrefcardz.com

96

F

lash

Builder4.5

forP

HP

CONTENTS INCLUDE:

n Key Features

n A Tour o Flash Builder 4.5n Setting Up Your Projectn Creating a Data Servicen Connecting Flash to PHPn

Hot Tips and more... By Marco Tabin

Adobe® Flash® Builder™ 4.5 for PHP

Adobe/Zend Tools or the PHP Proessiona

ABOUT THIS REFCARD

Over the past ew years, Adobe Flash has grown to encompass aamily o technologies whose abilities go well beyond the browser.Today, Flash is a platorm that can be used to build and deliverspeedy, highly unctional applications capable o running on a varietyo dierent systems, rom desktop OSs to mobile devices.

Thanks to the joint eorts o Adobe and Zend and with the help o many members o an enthusiastic community, Flash and PHP enjoy asynergistic relationship, which means that developers who know bothlanguages nd themselves empowered to build complex, verticallyintegrated applications that go well beyond the realm o the Web.

Flash Builder 4.5 or PHP is a new oering rom Adobe and Zendthat combines the two companies’ knowledge in Flash and PHP intoa single development environment that makes building integratedapplications easy and ast.

KEY FEATURES

Flash Builder 4.5 or PHP is built on Eclipse, an IDE technology thatrelies on Java. As a result, nearly identical versions o the applicationare available or both Windows and OS X.

Support for Flash and Flex

As part o the Flash Builder amily, the IDE provides you with allthe power o Adobe’s best-o-breed Rich Internet Applicationdevelopment eatures. These include the ability to write applicationsthat can be deployed on the Web, on the desktop, and on severalmobile platorms.

You can nd out more about Adobe Flex at http://www.adobe.com/products/fex/ and about Adobe AIR at http://www.adobe.com/products/air/.

Support for Data Exchange

Because it is built specically with Flash in mind, one o Flash Builderor PHP’s best eatures is its ability to interact with remote dataservices.

Through its data connection and service manipulation wizards, FlashBuilder or PHP makes it easy to discover services based on mostInternet standards like AMF, XML-RPC, REST, and SOAP. It thencreates object proxies or them, which makes them accessible to yourcode as i they were local Flash objects.

Best o all, it can marshal the data exchanged between yourapplication and the services it consumes in a mostly automatedashion, reducing your time to market and improving the overallstability o your applications.

HotTip

You can nd out more about the Action Message Format—theoptimized data interchange ormat built natively into Flash—and itsintegration within Zend’s products athttp://ramework.zend.com/manual/en/zend.am.html.

Support for Mobile Applications

As part o its support or multiple platorms, Flash Builder or PHPis also capable o building applications that can run on multipleplatorms, including Apple’s iOS, Google’s Android, and evenResearch in Motion’s BlackBerry Tablet OS.

Integration with PHP

Because Flash Builder 4.5 or PHP incorporates the unctionality o Zend Studio, it eatures a rich environment or the production o complex and highly interactive PHP-based applications.

The built-in debugger allows you to step through your Rich InternetApplications end to end, maintaining complete control over both throntend and backend portions o your code.

Thus, you can initiate an action on the client side, watch it work itsway through the Flash rontend, examine the data it exchanges withthe backend, and debug your PHP code, all through the Flash BuildIDE.

Integration with Zend Technologies

Flash Builder 4.5 or PHP is designed to work equally well across anyPHP-centric environment, with support or strong debugging, codemanagement, and cross-integration with Adobe’s Flash platorm.

However, Adobe’s latest oering or PHP is also ully integrated withseveral Zend technologies, including Zend Framework, Zend Server,and Zend Studio. This allows you to take advantage o advanced PHcoding techniques and capabilities that increase your productivityand the quality o your code.

Note: This Recard assumes that you are amiliar with both PHP and Adobe Flex concepts, including AMF, MXML and ActionScript.

brought to you by...

HotTip

You can download a 60-day trial copy o Flash Builder 4.5 or PHProm the Adobe Website at http://www.adobe.com/go/fashbuilder.

https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&sdid=IECSN



2 Flash Builder 4.5 for PHP: Adobe/Zend Tools or the PHP Proessional


A TOUR OF FLASH BUILDER 4.5

Users o an Eclipse-based IDE will nd Flash Builder or PHP’sinterace, pictured below, extremely amiliar:

The let portion o the screen is dedicated to your project’sworkspace. Here, you can explore the various les and packages thatmake up the projects loaded into Flash Builder or PHP.

The central space gives you access to the contents o your les,

the help system, and various consoles that can be used or errorchecking, data manipulation, and debugging.

Setting Up

Beore you start using Flash Builder or PHP, it’s a good idea to set upyour environment so that it can take ull advantage o the product’scapabilities.

When you rst start Flash Builder or PHP, it will notiy that you do nothave Zend Server installed:

Zend Server is a product developed by Zend that combines abusiness-grade version o PHP with several deployment anddebugging acilities designed to make the management o PHPapplications easier.

Although not necessary, installing Zend Server makes it easierto access some o Flash Builder 4.5 or PHP’s more advancedunctionality by providing a simplied installation mechanism andmaking the deployment o Websites easier.

Together with the server components, Zend Server also installs a copyo Zend Framework, Zend’s own application development ramework.

Zend Framework, one o the most popular and widely usedrameworks in the PHP market, eatures built-in support or AMF

communication, which is essential to building advanced services thatFlash applications can easily consume.

Flash Builder or PHP relies on some eatures o Zend Framework tointrospect your code and provide support or the automated creationand discovery o services you create.

The next time you launch Flash Builder or PHP, it will alsoautomatically detect Zend Server and make it your deault PHP server:

What i you do not have Zend Server or use a dierent deploymentenvironment or ramework? No problem! Although Zend Servermakes getting up and running quick and easy, and Zend Framework isneeded to enable some o the AMF data exchange unctionality, youdo not need to rely on either product or your Websites. Flash Builder4.5 or PHP will work equally with applications written using otherrameworks or deployed on any kind o server.

Building Your First Application

Beore you can dive into creating code or your Web application, you

need to gure out where Zend Server expects the root o your site tobe located.

The exact location depends on the operating system on which yourcopy o Zend Server is running; you can nd more inormation onguring out this path in the Zend Server FAQ at http://www.zend.com/products/server/aq#aq1 .

The creation o a new project can take many routes, depending onthe kind o application you intend to build.

For example, you can create a Flash-only project or either desktopor mobile deployment or a PHP project that takes advantage o ZendStudio and Zend Framework or easy deployment.

Where Flash Builder or PHP really shines, however, is in the creationo projects that integrate both Flash and PHP. Let’s take a look at howthose are created and managed. You start by selecting New > Flex

and PHP Project rom the File menu; this will bring up a dialog boxlike the ollowing:

I you have already installed and congured Zend Server or anotherPHP server, most o this inormation will be lled in automatically oryou. You only have to worry about coming up with a unique name orthe PHP portion o your project.

HotTip

Don’t orget to click on the “Validate Conguration” button beoreproceeding. Flash Builder or PHP will ensure that your Web site’sroot is reachable and properly congured.





Next, you will need to speciy the metadata required to create theFlex side o your project:

Flash Builder or PHP will ll out more o your required elds here,too.

You’ll notice, however, that I’ve had to use a dierent name; this isbecause the two separate PHP and Flex projects are created and arelinked to each other.

Once this last step is completed, Flash Builder or PHP will add thetwo projects to the Package Explorer:

SETTING UP YOUR PROJECT

Now that you have created your projects, you will need to perorm anal step to make sure that Flash Builder or PHP can interact with itproperly.

As mentioned earlier in this document, Flash Builder or PHP requiresa copy o Zend Framework to understand how your backend isstructured and build AMF proxies or any o your services.

Since Zend Server comes with a built-in copy o Zend Framework, youneed to make a small change to your project so that the Flash Builderor PHP engine knows where to look or it.

In the build-debug directory o your Web project, change the

am_cong.ini le so that the zend_path setting points to the locationwhere Zend Framework is installed.

The template that Flash Builder or PHP generates when you createyour project contains several helpul hints on the deault locationwhere Zend Server installs Zend Framework. For example, on a Mac,you will normally set up your INI setting like this:

<zend_path =/user/apache/PHPFrameworks/ZendFramework/library

HotTip

I you skip this step, Flash Builder or PHP will attempt to downloadand install another copy o Zend Framework or you when you startusing the AMF data connector. I you use Zend Server, this is notdesirable, because it leads to duplication and makes deploymentmore dicult.

CREATING A DATA SERVICE

Now that everything is set up, we can move on to building ourapplication.

In a real-world project, you will typically want to design your systemsso that they can interact with the user through multiple interaces—or example, you could build a traditional Web site or Flash-basedapplication or general access, and then use AIR or mobile usage.

Thus, i you think o your overall application as using a model-view-controller architecture, PHP always provides your model, while yourcontroller and view can be provided by dierent technologies,depending on the particular platorm you’re targeting.

It’s very advantageous to adopt this development rom the very starto your project or two reasons. First, it separates the various layerso your application neatly, which makes the duplication o code lesslikely and its reusability much higher. Second, it simplies the processo building each rontend by ensuring that all the business logic isstashed away in a single place.

For our example, we will start by creating a simple data service in PHPand make our Flex application interact with it.

Thanks to the way Zend Framework works, this is a very simpleprocess that starts with the creation o a new le, which we’ll call

clock.php, in the services directory o your Web project. To get ourexample started, we’ll create a very simple service that returns thetime o day:

<?php

class Clock {

function clock() {return date(“Y/m/d H:i:s”);

} }

As you can see, there is nothing special about this short snippet o code. Our AIRTest class simply eatures a unction, called clock(), thatreturns the current date and time ormatted as a string. Rememberthat, i you are using a recent version o PHP, you need to set yourtimezone properly or the call to the date unction will issue a warningand cause your service calls to ail.

Interestingly, this is all we need to do to create a data service! Theonly real requirement is that the name o the le in which we havestored our code and the name o the class it contains match. Clearly,this means that we can only store one class per le.

HotTip

This is obviously a contrived example, kept simple or the sake o clarity. A real-lie application would require a proper security andinrastructure to be built around your data services to ensure properaccess control.

CONNECTING YOUR FLASH FRONTEND TO PHP

We can now move on to the rontend, where Flash Builder or PHPwill take care o most o the hard work or us.

The rst step is to make our Flash application aware o the dataservice’s existence. To do so, we use a eature in Flash Builder or PHPthat helps us connect to and introspect PHP services.

From the Data menu, select “Connect to PHP…“





This pulls up the Data Connection Wizard, which guides you throughthe process o creating ActionScript classes or connecting to thePHP service and value objects. The rst step consists o telling FlashBuilder or PHP where your data service is located:

As you can see, all you really need to do is point the wizard to thelocation o your le (and, because you set the site location when youcreated the project, it already knows its root directory).

The wizard is capable o automatically identiying the class containedin your le and building a corresponding Flash package inside yourrontend project.

Clicking on Next will bring up a list o available method calls insideyour service class:

In this case, we only have the clock method, which returns a string.

HotTip

Flash Builder or PHP relies on Zend Framework’s introspectionramework to use your code’s docblocks and annotation tags todetermine the data types associated with the parameters andreturn the values o your method. You can nd more inormation athttp://ramework.zend.com/manual/en/zend.refection.reerence.

You can now complete the wizard by clicking the Finish button. Thiswill cause the Data Connection Wizard to create a number o classes

inside your rontend project that automatically marshal calls and theexchange o data between Flash and PHP:

The service is also available in the Data/Services panel:

From here, you can create service calls directly in your code. Selectthe main MXML le o your rontend project, then right click on theclock method in the Data/Services panel, and choose “Generate

Service Call” rom the resulting pop-up menu.

This causes an instance o your service call to appear in your code:

<?xml version=”1.0” encoding=”utf-8”?><s:Application xmlns:fx=”http://ns.adobe.com/mxml/2009”xmlns:s=”library://ns.adobe.com/fex/spark”xmlns:mx=”library://ns.adobe.com/fex/mx”xmlns:clock=”services.clock.*”minWidth=”955” minHeight=”600”>

<fx:Script><![CDATA[import mx.controls.Alert;

protected function clock2():void{clockResult.token = clock.clock();}]]></fx:Script>

<fx:Declarations><s:CallResponder id=”clockResult”/>

<clock:Clock id=”clock”fault=”Alert.show(event.fault.faultString + ‘\n’ +event.fault.faultDetail)”showBusyCursor=”true”/>

<!—Place non-visual elements (e.g., services, value objects) here-->

</fx:Declarations></s:Application>

As you can see, our service call is implemented as a customclass, which is imported and instantiated into our MXML le. Theinstance o the clock service is then connected to an instance o CallResponder, which is responsible or marshaling the actual servicecall in an asynchronous ashion.

We can now bind controls to our service in such a way that we canexecute the service call and display its results to the user.

HotTip

By deault, Flash Builder or PHP creates a method that callsyour data services on launch by binding to the Application’screationComplete event. html.

Let’s start with the execution process; we’ll pick a button and drop itsomewhere on our application’s canvas. In MXML, it will looksomething like this:

<s:Button id=”button” x=”529” y=”485” label=”Get Time” />

Next, we can switch to Design Mode, where we see a visualrepresentation o our code. To cause the button to call our servicewhen it is clicked, we just need to drag the clock method rom theData/Services panel onto the button.

This will cause our code to change as such:

<s:Button id=”button” x=”551” y=”521” label=”Button”click=”button_clickHandler(event)”/>

The Data Connector also added a method that is called whenever thebutton is clicked:

protected function button_clickHandler(event:MouseEvent):void{clockResult.token = clock.clock();}

Our nal step is to set up a way or the application to display theservice’s return value. We can add a label to our canvas, which willlook similar to this:

<s:Label id=”label2” x=”501” y=”445”text=””/>





We can now bind the service call using the same process that weused or the button. From the Design view, just drag the clockmethod onto the label. Flash Builder or PHP will show a dialog boxthat gives you the option o creating a new service call or using anexisting one:

Since we have already created a service call, we simply point tothat one and click on the OK button; the label is now bound to theresponder o our service. You can test the project by instantiating itin your browser (select “Run” rom the Run menu) and clicking on thebutton. You should see something like this:

As you can see, the service is working perectly—and we didn’t evenhave to write a single line o code!

DEBUGGING

One o the most interesting eatures o Flash Builder or PHP is end-to-end debugging.

Whereas both the traditional versions o Flash Builder and ZendStudio allow you to debug your Flash and PHP individually, with FlashBuilder or PHP you can actually debug your code all the way rom therontend to the backend in a single operation.

Once you start building complex applications that involve multipledata services and subsystems, this eature will become extremelyvaluable by improving your eciency and productivity.

Like many o Flash Builder or PHP’s other eatures, end-to-enddebugging “just works” once you have congured your projectproperly.

HotTip

I your site runs on a server technology other than Zend Server, youcan still access the debugging unctionality o Adobe Flash Builderor PHP 4.5 by installing Zend Debugger, which can be downloadedrom http://www.zend.com/en/products/studio/downloads

In most cases, this means ensuring that Flash Builder knows thatyour project should be debugged as a PHP-powered Rich InternetApplication. This can be accomplished by right-clicking on yourront-end project in the Package Explorer, then select “Web (PHP)Application” rom the Debug As menu:

At this point, you can start the debug process by launching therontend project by selecting “Debug” rom the Run menu. This willbring up your browser and load the SWF le associated with yourapplication.

You can now start interacting with your Web-based application asyou normally would; you can observe your code as it is executed bysetting a breakpoint. The easiest way to do so is to double-click inthe gutter next to the line where you want the execution to pause. Abreakpoint is represented by a blue dot:

When the execution reaches this point (in our case because the userhas clicked on the button in our sample application), Flash Builder orPHP will regain ocus and switch to the Debug perspective or Flash,which looks like this:

As you can see, two new panels have appeared at the top o thewindow. On the let is the Debug panel, where you can see the callstack that has led to the current execution point. On the right-handside are several panels that let you interact with breakpoints, perormlive operations against an interactive console, and observe variousvalues in your application in real time.

I you now set a breakpoint in your backend, Flash Builder or PHP willollow the execution o code rom Flash to PHP, allowing you to moverom one side o your application the other in a s ingle sweep:




DZone, Inc.

140 Preston Executive Dr.

Suite 100

Cary, NC 27513

888.678.0399

919.678.0300

Refcardz Feedback Welcome

[email protected]

Sponsorship Opportunities

[email protected]

Copyright © 2011 DZone, Inc. All rights reserved. No part o this publication may be reproduced, stored in a

retrieval system, or transmitted, in any orm or by means electronic, mechanical, photocopying, or otherwise,without prior written permission o the publisher. Version 1

DZone communities deliver over 6 million pages each month to

more than 3.3 million software developers, architects and decision

makers. DZone offers something for everyone, including news,

tutorials, cheat sheets, blogs, feature articles, source code and more.

“DZone is a developer’s dream,” says PC Magazine.

RECOMMENDED BOOK ABOUT THE AUTHOR

As you can see, the Debug perspective on the PHP side is very similarto its counterpart on the rontend. You also have ull access to all yourPHP runtime inormation, including the various superglobals.

Once you have stepped through the PHP portion o your codeexecution, control reverts to the Flash side, where you can continueto ollow the debugging process until control is yielded back to theuser.

HotTip

You can switch rom the Debugging perspective back to the Flash orPHP perspective by clicking the appropriate button on the top-rightcorner o Flash Builder or PHP’s window.

WHERE TO GO FROM HERE

Space constraints have made it possible or us to only explore a smallportion o the unctionality that Flash Builder or PHP provides. Thereare many other areas o the product that can signicantly increaseyour productivity—both independently as a PHP or Flash/Flexdeveloper and jointly as the two sides o a Rich Internet Application.

You can nd more inormation about the Flash Builder amily and its

integration with PHP at http://www.adobe.com/go/fashbuilder.

Marco Tabini is the co-ounder o “php|architect”:http://phparch.com/ and CEO o “Blue Parabola,LLC”: http://blueparabola.com/, a consulting rm thatspecializes in PHP-related knowledge products.

He is a requent speakers at PHP conerencesworldwide, including php|tek, the Dutch PHPConerence, Enterprise LAMP Camp and many more.Marco is also the author o two books on computerprogramming and the “long-running exit(0)”column on php|architect. Marco blogs regularly at“The Accidental Businessman”: http://blog.tabini.ca and is a requent collaborator at “Macworld”:http://macworld.com/

Adobe Flex: Training rom the Source is the best-selling and most trusted resource or learningabout Adobe Flex. Written by a team o authorswith practical experience as consultants, mentorsand developers o courseware, this book/CD usesproject-based tutorials, and is designed to teachbeginning Flex developers the details o building and architecting real-world rich internet applications usingFlash Builder incorporating MXML and ActionScript 3.0. The book includes a CD that contains all thefles used in the lessons, plus completed projectsor comparison. This latest edition includescomplete coverage o new Flex 4.5 eatures, suchas new enhancements to the Spark architectureand component set. It will also show you how totake advantage o the improvements to core Flex inrastructure or large application development.

flash builder flex php

Documents