Professional Documents
Culture Documents
#96
Get More Refcardz! Visit refcardz.com
CONTENTS INCLUDE:
n
n
What is Flex?
Building Applications with
Adobe® Flash® Builder™ 4 and PHP
Getting Started with
Integrating PHP and Flex
n
Connecting to Web Services
n
Developing your Application
n
Hot Tips and more...
By Marco Tabini
real-time analysis, compilation support, live debugging and
WHAT IS FLEX? much more.
Flex is an open-source framework developed and distributed Flash Builder 4 is based on the open-source Eclipse IDE and
by Adobe Systems. It is based on the Adobe® Flash Platform can either be downloaded as a standalone product or as a
and primarily provides a streamlined approach to the plug-in for the latter. Like Eclipse, Flash Builder 4 is also cross-
development of Rich Internet Applications. platform and runs on both Windows and OS X.
Flex is multi-platform—this means that, with some exceptions, Flex uses a language called ActionScript3 (AS3), which is itself
www.dzone.com
you can run a Flex application on any platform that supports derived from the ECMAScript standard. ECMAScript is the
Adobe Flash Player. If your users run on Windows, OS X or same basic definition on which JavaScript is based—therefore,
Linux and their browsers have a recent version of the Flash if you have any familiarity with browser programming, it’s likely
Player plug-in installed, they will also be able to run your Flex that you will find your bearings in AS3 very quickly.
applications without a problem. Flex applications are based on the concept of component. A
Because Flex is open source, there is no cost associated with component defines a container of behaviors and, optionally, of
creating and distribution applications that are based on it. a user interface representation. Components can be visual or
non-visual, depending on whether the provide an interface of
some kind (like a button) or just functionality of some kind (like
Hot You can download Adobe Flex SDK for free directly from the
a library for connecting to a remote server).
Tip Adobe website at http://www.adobe.com/products/flex/
The visual structure of a component can be easily defined
using MXML, Adobe’s specialized brand of XML. Other than
What is Adobe AIR?
the use of specific namespaces, MXML is nothing more than
The Adobe Integrated Runtime (Adobe AIR) is a companion
well-formed XML code; by nesting multiple components, you
technology to the Flex framework that extends the
Getting Started with Integrating PHP and Flex
Creating Flex Applications Flex’s powerful layout capabilities, like the rest of the
Flash Builder 4 makes creating new applications as easy as framework, are also designed to be developer-friendly and are
following the steps of its New Application Wizard. Simple almost entirely based on standard CSS, with a few exceptions
select New ® Flex Project from the File menu, then choose a designed to make automated positioning easier.
name and type for your application. If you intend to write code
Useful Flex Components
that will be executed inside a browser, choose “Web” for your
Flex provides a rich ecosystem of components that can
application type; if, on the other hand, you want to build a
be easily expanded to meet your needs. While many of its
desktop application, choose “Desktop” instead.
components are designed to closely mimic their HTML cousins,
there are also a number that provide unique functionality.
For example:
Once you click Finish, the wizard will create a series of classes
inside your project that provide all the necessary functionality
required to connect to your project and execute your web
service.
At this point, you can click “Validate Configuration” to make
Flash Builder 4 run a simple test to determine whether it can
Hot Remember that it is your responsibility to provide a
access your site as expected, then OK to complete the set up
security layer where required—for example, by passing a
process. Tip secure key to the service as appropriate.
Now, Flash Builder 4 will ask you to choose a PHP class that
will provide the entry point to which your Flex application will Establishing Data Connections
connect. If your code is not encapsulated in classes, you could Your application is now capable of connecting to the PHP
create some simple stubs for the purpose of providing services backend, but the data that the latter provides is not yet wired
to your Flash Builder 4 code. The wizard will automatically fill in to any of the controls.
the defaults for you based on the name of the PHP file that you
Luckily, this, too, is something that can be done without writing
select.
a line of code. You can, instead, use the Data/Services panel,
visible in the bottom tray of the Flash Builder 4 window, where
all the remote data services defined in your application are
visible:
In order for your data to be used in a Flex application, CONNECTING TO WEB SERVICES
it must conform to all the appropriate AS3 rules—for
Hot example, you cannont return objects with properties
Tip whose names are reserved AS3 keywords like protected or SOAP
private, even if those are perfectly acceptable in PHP. AMF is not your only choice when it comes to external
connectivity from Flash Builder 4—almost exactly the same
Your Flex application now has access to all the data returned functionality can just as easily be used to connect to an XML
by your service. If, for example, you drag a service on to a web service powered by SOAP.
DataGrid component, the latter will be automatically populated You can start the process by selecting Connect To Data/
with all the appropriate data columns—all you need to do is Service… from the Data menu and then choosing WSDL as the
remove those you don’t want displayed and rename the header service type. This will bring up a dialog box that asks you to
of the others to the proper human-readable format: provide the URL of the service’s WSDL specification:
The resulting data provider will become available in the Data/ Once you provide the correct information and click on Finish,
Services panel of Flash Builder 4’s GUI, from where you can the wizard will once again create all the infrastructure required
connect it to your components like before. to run your service and make it available as before. The HTTP
Data/Service Connection wizard also supports XML data.
Be mindful of the fact that, when manipulation raw XML,
Flash Builder 4 has no way of determining whether your
Hot service provides data in a consistent format. Therefore, DEPLOYING YOUR APPLICATION
Tip you should ensure that this is the case, or your service call
may unexpectedly fail at runtime. In most cases, you will want to develop your application in
Debug mode. This causes the Flex compiler to add all sorts of
useful information that can be used to debugger to help you
JSON and XML
address any issues that may occur within your application.
JSON (JavaScript Object Notation) has rapidly become a very
popular choice for web service development because of its However, when it comes time to deploy your application for
simplicity, lightweight format and ease of use in a number of production, you will want to switch to a Release build so that
languages. you can end up with the most compact and efficient codebase
possible. You can do so by selecting Export Release Build…
While PHP has had built-in support for JSON since version
from the Build menu.
5.2.0, AS3 does not have any facilities for manipulating JSON
data. Luckily, Flex provides a number of different ways for using Exporting a Release build causes a new directory, called bin-
JSON. release, which contains a number of different files:
To start, you will need a PHP script that takes zero or more
parameters either through a GET or POST HTTP transaction
and outputs JSON-formatted data. For example:
<?php
function getTimeline($user) {
$data = json_decode(
file_get_contents(“
http://api.twitter.com/1/statuses/user_timeline.
json?screen_name=” . urlencode($user)));
foreach($data as $v) {
unset($v->user->protected); Most of these files play a support role to your application—in
}
fact, the only one you will normally interact with is the host
return $data;
}
HTML file that contains the code required to display your
application.
echo json_encode(getTimeline($_GET[‘user’]));
Hot You can change the template used to generate your host
The simplest way of connecting to this service consists of
HTML file by editing the html-template/index.template.
once again using the Data/Service Connector wizard to access Tip html file in your application’s root directory.
arbitrary HTTP-based web services. Choosing “HTTP” from
the Connect To Data/Service… menu will result in this dialog, Passing Data to Your Flex Application
where Flash Builder 4 asks for the URL of the service and its It is sometimes useful to pass data, like request parameters,
parameters: to your Flex application as it is being initialized on the client
browser.
This can be accomplished by introducing a special parameter
in the HTML code that causes the application to be embedded
in the web page. In reality, Flex provides a series of convenient
wrappers that make the job even easier; if you look inside your
HTML template, you will find a portion of code that looks like:
var flashvars = {};
...
swfobject.embedSWF(
“Fle.swf”, “flashContent”,
“100%”, “100%”,
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
The sandbox is turned off during debugging—therefore, you Through a featured called ASDoc, Flash Builder 4 allows you
don’t normally become aware of it until you run your code in to write inline comments that can be used to document your
production mode and find out that your application cannot entire codebase. The syntax used by ASDoc is very similar to
access any of its remote data. the PHPDoc syntax that is commonly used to comment PHP
code; for example:
Flash supports a number of different sandboxes, depending
/**
on what kind of data your application needs to deal with. Most * Performs some important function
of the time, you will want to use the local-with-networking *
* @param event The event dispatched to this method
sandbox, which allows your application to access remote */
protected function handler(event:FlexEvent):void
locations, but denies all access to local files. {
// Do something
By default, the sandbox model prevents an application from }
accessing any resources outside of its own domain, unless that Flash Builder 4 will automatically scan your code and add any
domain specifically grants access with a crossdomain.xml file. information you write as part of your ASDoc blocks to its code
Therefore, it is important to remember that you may not be intelligence features; these, in turn, will display the information
able to access information across different domains. as you use your code, providing you with a handy dynamic
reference for your classes and methods:
Hot Adobe AIR applications usually run in the local-trusted
sandbox and, therefore, are not subject to connectivity
Tip restrictions.
#82
CONTENTS INCLUDE:
■
■
About Cloud Computing
Usage Scenarios Getting Started with
Aldon Cloud#64Computing
■
Underlying Concepts
Cost
by...
■
Upcoming Refcardz
youTechnologies ®
■
Data
t toTier
brough Comply.
borate.
Platform Management and more...
■
Chan
ge. Colla By Daniel Rubio
tion:
dz. com
tegra ternvasll
ABOUT CLOUD COMPUTING one time events. TEN TS
INC ■
HTML LUD E:
us Ind Anti-PPaat
Basics
Automated growthHTM
ref car
nuorn
■
Valid
ation one time events, cloud ML
connected to what is now deemed the ‘cloud’. Having the capability to support
Java EE Security
Usef
Du
ti
■
ul M.
computing platforms alsoulfacilitate
#84
Open the gradual growth curves
n an
Page Source
o
■
s
Vis it
C
faced by web applications. Tools
Core
By Key ■
Elem
Patte
has changed substantially in recent years, especially with Structur
E: al Elem ents
INC LUD gration the entrance of service providers like Amazon, Google and Large scale growth scenarios involvingents
specialized
NTS and mor equipment
rdz !
HTML
CO NTE Microsoft. es e... away by
(e.g. load balancers and clusters) are all but abstracted
Continu at Every e chang
m
About ns to isolat
relying on a cloud computing platform’s technology.
Software i-patter
space
■
n
Re fca
e Work
Build
riptio
and Ant
Desc
These companies have a Privat
are in long deployed
trol repos
itory
webmana applications
ge HTM
L BAS
■
Build
re
Buil Repo
This Refcard active
will introduce are within
to you to cloud riente computing, with an
d units
RATION etc. Some platforms ram support large grapRDBMS deployments.
■
The src
dy Ha
softw
e ine loping and Java s written in hical on of
INTEG attribute
task-o it all
softwar emphasis onDeve es by
Mainl these
ines providers, so youComm can better understand
also rece JavaScri user interfac web develop and the rris
Vis it
Network Security
codel chang desc
INUOU ding Task Level as the
e code
www.dzone.com
Label
Build
manu
al
d tool
depe deplo t need but as if
eve , a ) stalle the same nmen for stan overlap uen
(i.e. , inef Build t, use target enviro Amazon EC2: Industry standard it has
software and uagvirtualization ine. HTM , so <a>< tly are) nest
with terns problem ce pre-in whether dards
ated b></
ory. ns (i.e. Autom Redu ymen
has bec become e with a> is
via pat ticular d deploEAR) in each very little L
Maven 3
reposit -patter s that Pay only cieswhat you consume
tagge or Amazon’s cloud you cho platform
computing
the curr isome
heavily based moron fine. b></ ed insid
lained ) and anti the par solution duce nden For each (e.g. WAR es t
ent stan ose to writ more e imp a></ e
not lega each othe
x” b> is
be exp text to “fi are al Depeapplication deployment
Web ge until t a
librarifew years agonmen
t enviro was similar that will softwaredard
industry standard and virtualization app
e HTM technology.
orta nt,
tterns to pro Minim packa nden
Mo re
CI can ticular con used can rity all depe all targe
s will L or XHT arent. Reg the HTM l, but r. Tags
etimes Anti-pa they
tend
es, but to most phone services:
y Integ alizeplans with le that
late fialloted resources, ts with an and XHT simplify all help ML, und ardless
L VS
XHTM <a><
in a par hes som
Centr
end,
Binar
pro cess. the practic enti ng incurred costgeme
nt
whether e a single
such
temp
resources on
were consumed
t enviro
nmen
orthenot. Virtualization MLaare your
othe
you prov
erst of L
b></
in muchallows physical piece of hardware to
ide be HTM
rily bad
Mana based
approac ed with the cial, but, implem anding
Creat targe es to actually r web
nden
cy rties are nt
of the a solid L has
into differe coding.resources
necessa pared to
chang
efi Depe prope itting utilized by multiple operating
function systems.simplerThis allows foundati job adm been arou
associat to be ben
er
Ge t
te builds commo
are not Fortuna
late Verifi e comm than on
n com Cloud computing asRun it’sremo
known etoday has changed this.
befor alitytohas irably, nd for
They they
etc.
Temp Build (e.g. bandwidth, n memory, CPU) be allocated exclusively to tely exp that som
lts whe
ually,
appear effects. Privat y, contin Every elem mov used
to be, HTML
ecte job e time
ed resu The various resourcesPerfo rm a
consumed by webperio applications
dicall (e.g. nt team
pag
individual operating entsinstances. ed to CSS
system Brow d. Earl
y HTM has expand . Whi
gration
opme because
adverse unintend d Builds sitory Build r to devel common e (HTML . ser ed far le it has don
ous Inte web dev manufacture L had very
Stage Repo
e bandwidth, memory, CPU) areIntegtallied
ration on a per-unit CI serve basis or XHT
produc tinu e Build rm an from
extensio .) All are limited more than e its
e.com
ard ML shar
tern.
ack elopers rs add
Con Refc Privat
(starting from zero) by Perfo all majorated cloud
feedb computing platforms. As a user of Amazon’s esse
term e, this
on
n. HTM EC2 cloud
ntiallycomputing es certplatform, you are result
is a lack came up ed many com
layout anybody
the pat
occur
gration as based
of the ” cycl such Build Send
autom as they builds pr L plain ain elem supp
ous Inte tional use and test concepts
soon with clev ort.
Integ
ration ors as ion with text ents in of stan peting
entat
tinu dar er wor standar
ven “build include
docum
Con kar
the con s to the
oper
to rate devel
While efer of CI Gene
notion
DZone, Inc.
Cloud Computing
the
s on
expand
ISBN-13: 978-1-934238-96-7
140 Preston Executive Dr. ISBN-10: 1-934238-96-1
Suite 100
50795
Cary, NC 27513