Adobe Flex

First of all let me tell you that you can communicate from Flex over HTPP or HTTPS. It depends on your need.

Second, when it comes to user authentication you can use basically the same workflow you use in HTML/PHP apps. For example suppose you authenticate the user from the client (could be an HTML form or could be a form from the Flex application itself). Back on the server, you validate the credentials and if correct you set some flags in session. All the calls you make from the Flex client to PHP scripts (using REST services, web services, remoting or XML-RPC) will append the session id to the request, and as a result the PHP will be executed with the same session information. And based on the session information you can check if the user has the rights to do what the operation is trying to do.

When it comes to code execution loaded after the application was initialized (for example your Flex application loads some widgets from other servers), Flash Player offer sandboxes as a way to ensure that foreign code (and potentially dangerous from the point of view of the security) is not accessing the variables from the main Flex application. This is done by default. For example if you have a Flex application that loads a weather widget from another domain, you don’t want the weather widget code to find what is the user name or his bank account is (suppose that the info is part of the Flex app).

If you trust the code you loaded (although this is a security risk) you can “import” instead of loading, and the widget code from the above example could execute in the same application domain as the Flex application code.

If you keep the loaded code in a separate domain (you don’t “import” the code), you can communicate from one domain to another using Local Connection. You can read more about these here. HP created a free application called SWFScan that scans Flash applications for a number of vulnerabilities. This is a good way to ensure that you don’t make mistakes.

The asynchronous nature of Flex is something rather different from anything in PHP. It is important to understand this, stop fighting it, and go with the flow.

What does it mean that Flex is asynchronous? Suppose you create a Flex application, and after the application is loaded in the browser, the user can choose to load pictures from another site. You might use a URLLoader class for this task. When you execute the load() method, on the next line of code you won’t have the data. The script doesn’t pause after the load() call waiting for the data to be loaded. Instead the execution of the script is resumed. As a programmer you deal with this asynchronous nature using the built-in AS3 events system. If you’re familiar with AJAX programming, this is similar to what you do when you make an AJAX call: you provide a callback function, and when the data arrives the callback function is called and you can access the loaded data.

Suppose you have a Flex application that loads a picture from a web server. In order to deal with the asynchronousity, you would add an event listener for the result event. This is the function that will be called once the data is loaded. Here is an example of how the code might look:
function loadPic():void {
var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
//adding the event handlers or listeners
loader.addEventListener(EventComplete, picLoaded);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, picError);
//starting the loading
loader.load(new URLRequest("http://some_url"));
}
//event handler for the result event
function picLoaded(event:Event):void {
//get the data from the loader object
//use the target property to get the loader object
(event.target as URLLoader).data;
}
//event handler for the error event
function picError(event:IOErrorEvent):void {
//displays the error id in a pop-up windonw
Alert.show(event.errorID);
}

I can summarize it like this: Don’t call us, we’ll call you!

As I said, AS3 has a built-in event system. The top class of all events is Event. All objects that work asynchronously have an addEventListner() method, and the first two arguments are the event type and the name of the function to be called when the event occurs. You might think that only objects that deal with retrieving remote data are subject to this event model. Actually that is not the case; all components or objects that are visual also have events. For example, every Flex application has a creationComplete event. This event is triggered once all the required components from the application are processed and drawn on the screen.

Although you might feel that such code is not as straightforward as PHP, there is a good reason for having asynchronous calls scattered around in Flex (and Flash Player): Flex is a client-side technology. If all calls were synchronous, the user interface of the application would stop being responsive for any call that involved loading data, for example. And users hate unresponsive user interfaces.

You can cancel some events and even change the default behavior. I’ll let you explore these details on your own if you need to; for now you should have a fairly good idea of what events and event listeners are all about.

As a PHP developer, you have a very direct way to read data, parse them, and display them on the screen. Connecting to a MySQL database is one of the first things any PHP developer learns.

What about Flex? I have to disappoint you, because you don’t have direct access to data stored in a database. Why is there no direct way of reading data from a database? Because of the old saying “You should never trust the client!” Suppose the client is a Flex component that knows how to connect to the MySQL server. How do you store the credentials so that it wouldn’t be easy to steal them and have the database compromised? Set a different user/password for each user and give them this information? This is just one of the reasons why it is not a good idea to have a client technology that can connect directly to a database server, without using an application server in the middle.

Basically, in Flex applications you rely on server-side scripts to manage the databases. Flex offers you a way to call the server pages and get back the answer in Flex. Basically, you can connect a Flex client to a PHP back-end in two ways: over HTTP or using sockets.

Over HTTP, there are four different ways to connect to a server data source: REST style services, web services (WSDL/SOAP), remoting (or RPC), and XML-RPC.

You can use the HTTPService class to use REST style services. You can send POST variables when you do a request, and the response can be XML, JSON (there is a third-party library for parsing JSON), or custom formatting.

If you have web services on the server (SOAP/WSDL), you can use the WebService class.

But the most interesting method is remoting (using the RemoteObject class). There are three reasons why I think it is the coolest method. First, using remoting you can leverage any PHP class you have on your server by calling any public method. Basically, from the Flex side you use an instance of RemoteObject as if it were the remote PHP class. Second, you can map the data model from the PHP side to an ActionScript data model, and have the conversion done automatically. This is extremely important, because when you use typed objects, you get the benefits of compile-time error checks and code completion. This means code that is easier to read and less prone to bugs. And third, the messaging format for this method, AMF3 (Action Message Format) is a binary format, which can be much faster and smaller compared to SOAP/XML/JSON, especially for big sets of data. The format itself is open, and anyone can read the white papers and implement programs that use it.

AMF3 is faster because it encodes data. For example, if the same string is repeated in a data set, it is encoded one time, and all other occurrences of the string are references. If a number is smaller than four bits, only the minimum number of bytes required are used.

Remoting is natively supported by Flex, however on the server side the story is not the same. PHP doesn’t support remoting and AMF3 natively. This is why you need a server side library to enable remoting for a PHP web server. There are four available libraries, all are free, and I wrote tutorials about how to use each of them: Zend AMF, AMFPHP, WebORB for PHP, and SabreAMF.

The last method used by people for integrating Flex with PHP is the light-weight web services XML-RPC. This is for example what Drupal offers out-of-the-box if you want to create modules that uses Flex or AJAX. In order to use XML-RPC you need a library for both the client (xmlrpcflash) and the server (phpxmlrpc).

If you want to connect using your own protocol built on top of sockets, you can use sockets communication. You can create a socket server on the PHP side, and from the client you can connect to this server and exchange data. Just a reminder―when creating Flex applications that target the desktop (running on Adobe AIR and not in the browser) you can create socket servers on the client side too.

Client/server architecture

If you want to categorize Flex applications, you can say that Flex applications follow SOA architecture model, where Flex is used to create the client and you connect the client to data using services.

Let’s go back to browsers and how web applications are delivered. When the browser makes a request, the server uses a combination of static content (HTML/CSS/JS code) and scripts (these scripts may query a database or call other scripts, but in the end they output HTML/CSS/JS) to prepare a page. This page gets loaded and rendered by the browser. A key element here is that, usually this page (or response) has the presentation markup and the data baked into the same message.

When a new state of the application is to be presented, the browser makes a new request and the server prepares the page. The client “just” renders the data.

Flex applications works differently. The server sends the compiled Flex application (the SWF file) that runs inside the browser using the Flash Player plug-in. Usually, this SWF file holds only the client-side business logic. If data are need (from a database for example) the Flex application makes a request for those data. The server sends only the data (this can be in XML, JSON, AMF3 format), and the client knows how to represent this data visually. What we have here is a service oriented architecture: The Flex application is the client―a client that can consume data services from the server. The application can change state without refreshing the page or reloading the SWF file in the browser. The application is a client that can do more than “just” render data. Thus using Flex and Flash Player it is possible to create almost anything that makes sense to deploy on the web, from games to applications, to widgets that are integrated within “classic” web applications, and more.

Both Flex and AJAX are client-side technologies and both can be used to create RIAs or to “augment” existent web applications. Like in the case of Flex, typically an AJAX application makes a request to server after the initial response was rendered, and injects the response into the existing page once the servers sent the answer to that call.

While Flex is an application framework to build apps for Flash Player or Adobe AIR, AJAX is a term that refers to a collection of technologies and techniques that include JavaScript, HTML, and CSS. Typically when you work with AJAX you use a framework (Ext JS, Dojo, jQuery, Prototype and so on). The reason you are doing this is mainly to cope with the differences between browsers implementations for JavaScript/HTML/CSS.

Having said that, in the end it is really up to you what technology to choose. If you prefer to work with a dynamic, weak-type, prototype-based language, you will probably favor AJAX. If you have experience with JavaScript and you don’t want to learn a new language, again AJAX is the answer for you. If you prefer strong-type, OOP languages, modern IDEs features you’d probably prefer Flex. Arguably Flex (and Flash Player) offers more flexibility and features when compared to what is possible with AJAX (even with the new additions of HTML 5). But again, there is no such thing as one is better than the other. It really depends on the nature of the project you are working on, your experience, etc.

In fact, there are people using both technologies to do things that would be impossible to do with only one of them.

What is Flex?

Enough digressions! Let’s start from the beginning: what is actually Flex (I assume by now everyone knows what PHP is)?

The simplest answer is: Flex is just another way of creating an application authored in Adobe Flash Professional on Adobe Flash Player. A Flex application gets compiled into a SWF file, which is played inside of the browser by Flash Player. Why did we need another way of creating applications authored in Adobe Flash Professional on Adobe Flash Player? Traditionally those applications were created using the Flash Professional authoring tool. If you take a look at this tool, you’ll notice that it is oriented primarily for designers. There is a stage, a timeline, drawing tools, and so on.

When you are developing applications and you care about productivity, you want components, you want to be able to streamline development as much as possible by reusing code, and not last but not least, you want a modern IDE.

Thus a revised answer could be: Flex is an open source framework that helps developers to quickly create Rich Internet Applications (RIAs) that run inside Flash Player or Adobe AIR (see Figure 1 for a list of built-in UI components). The framework was shaped pretty much as it is today with the arrival of Flex 2, Flash Player 9, and ActionScript 3. The current version is Flex 4.

Why Flex?

So using Flex you can create applications for Flash Player (web apps) or Adobe AIR (desktop apps). But what is so cool about building applications for Flash Player or Adobe AIR?

Well, at least there are two reasons: RIA and Contextual Applications.

If you compare the web applications with the desktop ones you can draw these points:

• Web applications are cool because you can use them wherever you have a browser and an Internet connection. They have lower costs for distribution and maintenance because all you have to do is to update the server with the new version and all the clients are updated.
• Desktop applications are cool because they offer great UI experience and at the same time are very responsive to the user actions.

Each of these two categories has its own strengths. Wouldn’t be cool to have a third category that combines the reachness and availability of web apps with the richness and responsivness of desktop apps? Actually this category already exists (since 2002 when Macromedia used for the first time this term) and it’s called Rich Internet Applications. With Flex you can build RIAs easily.

From its inception in 2002, RIA came a long way. The first use cases were public facing applications. In the last couple of years we’ve seen an increasing usage of RIAs behind the firewall, in the enterprise world. Using the RIA approach in enterprise means bigger ROI. In Figure 2 and Figure 3 you can see how a simple form for gathering data about car crashes can be implemented using RIAs. Instead of having a bunch of text areas that force the user to type in a lot of information, you can create a user interface that lets the user pick up the car, describe the damages, and “draw” the accident scene.

One may think that if you build your application with Flex you’ll have problems with users not being able to consume your application because they don’t have Flash Player installed. This is not true, because for years 98% of all connected computers have Flash Player installed.

And the beauty of it is this: as a Flex developer you don’t have to care about browsers with different implementations of JavaScript and CSS or about differences between the same browser on different operating systems. By targeting Flash Player you leverage its consistency across OSs and browsers.

What about Contextual Applications? Contextual applications “are characterized by their ability to adapt presentation and performance to different application contexts, including multiple operating systems, platforms, and devices; diverse and changing types of networks; and unique user expectations and personalization“.

And finally I want to add to the case I’m building the Mobile world. More and more people have smartphones and use these devices for activities that not so long ago were possible only with laptop or desktop connected to a wire. And this trend is going in only one direction: UP! Soon there will be more people accessing the Internet from mobile devices than from computers. What about building applications for these devices? Well, to put it mildly is a nightmare. And it really isn’t someone’s fault! Having many companies building so many devices it is only natural to have specific ways for each platform (Symbian, Web OS, BlackBerry, Android, Windows Mobile, and iPhone).

2010 is the year when Adobe releases Flash Player 10.1 and Adobe AIR 2 for mobile devices (the first to receive this will be Android and BlackBerry; for iPhone you can use the next version of Flash Professional to package Flash apps as a native app). We are still working to create a Flex framework suited for mobile devices. Once you have this, you will be able to leverage your current Flex experience on mobile world.

You will learn about the Adobe Flash Platform, Adobe Flex and how Flex fits into the world of an Adobe ColdFusion developer. This is a high level discussion that will explain what Flex is and two ways that it is commonly used with ColdFusion.

Understanding the Adobe Flash Platform

The Adobe Flash Platform is an integrated set of technologies for creating rich, compelling applications, content and video. As an experienced web developer, you have probably heard of Adobe Flash and visited sites created with Adobe Flash Professional. However, this tool is only one technology in the platform.

You can use any of the professional tools to create rich media, content and applications that are played back in the Flash Player or AIR runtimes. You can also add enterprise-level functionality with the server products, but this is outside the scope of the article.

Let me focus for a minute on the professional tools and web development:

• Flash Builder has helpful designer-developer workflow tools, but is largely geared towards developer productivity for Flex application development.
• Flash Catalyst is a new interaction design tool for creating interfaces and content without writing code.
• Flash Professional is an authoring environment to create content, animation, applications, and more using visual tools, a timeline or programming.

What they all have in common is that they can compile SWF application files (among other file types), which can then be wrapped in HTML and displayed in a browser that has Flash Player installed.

Understanding the Flex framework and Flash Builder

Flash Catalyst and Flash Builder are based on the Flex 4 framework, which is a free, open source library of classes and UI components that can greatly improve your ability to create applications that deploy consistently on all major browsers, desktops and operating systems. Note that the framework provides two programming languages, MXML and ActionScript, which you can learn about in the related article Introducing the MXML and ActionScript Languages.

You can also create Flex applications using the free Flex SDK, which packages the Flex framework, along with a compiler and a debugger, in a free software development kit.

If you use the Flex SDK, you would write your MXML and ActionScript code in any code or text editor and then use the command-line compiler to compile the application.

Flash Builder 4, formerly known as Flex Builder, is the Adobe commercial product geared towards developers building applications using the Flex framework. This tool includes everything in the Flex SDK plus many features to improve your productivity.

Flash Builder is based on the non-profit, open-source Eclipse development platform and application framework for building software. For developers who are already working with Eclipse, you can use the plug-in installer for Flash Builder. Developers who have never used Eclipse can use the standalone installer which is a customized package of Eclipse that includes the Flash Builder plug-in.

The new ColdFusion Builder tool is also based on the Eclipse software environment, which means that you can do both your Flex and ColdFusion development within the same Eclipse-based environment.

Understanding how Flex applications work with ColdFusion

In this last section, I will discuss two ways that Flex applications are often used with ColdFusion:

• Application or widget embedded in a CFML page
• Application or widget directly accessing CFCs to retrieve data or use other ColdFusion services

Adobe® Flash® Builder™ 4 (formerly Adobe Flex® Builder™) software is designed to help software developers rapidly develop cross-platform rich Internet applications (RIAs) and content using the open source Flex framework. It includes support for intelligent coding, debugging, and visual design and features powerful testing tools that speed up development and lead to higher performing applications.

Data-centric development

Introspect Java™, PHP, Adobe ColdFusion®, REST, and SOAP services to display methods and properties in the new Data/Service Explorer. Bind methods to UI components using a simple drag-and-drop approach.

Integration with Adobe Flash Catalyst

Import Flex Projects (FXPs) created using Adobe Flash Catalyst™ software, saving time and improving the quality of the user experience. FXPs contain functional UI elements, including MXML, ActionScript® language coding, component skins, and graphical assets, enabling developers to focus on core application logic.

Network Monitor (Premium edition only)

Generate a detailed audit trail of all data passed between the local Flex application and the back end, assisting with debugging and performance tuning.

Command line build (Premium edition only)

Use the new command line build capability to automate your build process.

Flex unit testing integration (Premium edition only)

Automate functional testing using the Flex unit testing framework.

Automatic generation of common code

Automatically generate code for accessor functions (getters and setters) and event handlers to speed up development of commonly used functions.

Debugger improvements enhanced

Set conditional breakpoints, evaluate expressions, and set watchpoints on variables to halt execution on value change. Use the Expressions view to watch variables selected in the Variables view and to add/evaluate watch expressions. Break out of a loop during a debugging session using run to line.

Custom templates

Customize default information contained in new MXML, ActionScript, and CSS files, such as author and date, introductory comments, copyright information, opening and closing tags and attributes, ActionScript declarations, namespace prefixes, and more.

Flex Theme Browser

Easily browse and import Flex themes and apply them to your project.

ASDoc support

Display comments in MXML and ActionScript editors using ASDoc.

Adobe Flash Professional workflow

Import and update custom Flex components using the new workflow between Adobe Flash Professional software and Flash Builder 4.

BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe® Flex™ and Adobe AIR™ applications for more responsive rich Internet application (RIA) experiences.

The evolution to more engaging RIAs has created the need for better data connectivity options. Remoting simplifies the reuse of existing server logic automatically marshalling calls between the Flash client and the Java methods on the server. In addition, the use of a AMF binary data transfer format increases performance, allowing applications to load data up to 10 times faster than with text-based formats such as XML or SOAP.

Previously available only as part of Adobe LiveCycle® Data Services ES, Adobe is contributing the proven BlazeDS technologies to the community under the LGPL v3. BlazeDS gives the rapidly growing Adobe developer community free access to the powerful remoting and messaging technologies developed by Adobe.

Reasons to Adopt BlazeDS

The following are the top reasons to adopt BlazeDS:

1. Easily connect Flex and Adobe AIR™ applications built using Flex and Ajax to existing Java server logic
2. High performance data transfer for more responsive applications
3. Real-time server push over standard HTTP
4. Full pub/sub messaging that extends existing messaging infrastructure
5. Free and Open source

Adobe has published the AMF binary data protocol specification, on which the BlazeDS remoting and messaging implementation implementation is based, and is committed to partnering with the community to make this protocol available for every major server platform. Please read the FAQ for further details on BlazeDS and Adobe’s open source plans.

Range of Data Services Solutions Available from Adobe

Adobe Systems offers industry leading solutions focused on the development of rich internet applications that include high levels of data integration. Adobe offers LiveCycle Data Services ES2 for those customers who require a commercially licensed version of BlazeDS or who wish to go beyond the infrastructure features of BlazeDS by adding higher level data functionality such as data synchronization, offline support for Adobe AIR, portal integration, RIA integration with LiveCycle Enterprise Suite business processes and document services, as well as more advanced deployment options for maximum scalability.

BlazeDS

Open source Java remoting and web messaging for Flex & AIR applications

• Simplifies integration with existing Java code
• Increases performance
• Enables pub/sub and push over standard HTTP
• For a complete description of the BlazeDS features, please refer to the BlazeDS Feature List

LiveCycle Data Services ES2

LiveCycle Data Services ES2 is a complete data infrastructure for enterprise Flex and AIR applications

• Reduced dev & maint. costs for complex DB applications
• High performance data streaming, paging, and data synchronization requirements
• Integration with portals
• LiveCycle connectivity
• Advanced deployment options for maximum scalability
• Access to developer and enterprise support resources
• See comparison chart for more details

Using the open source Flex framework, developers can create more intuitive and engaging web applications that enable customers, partners, and employees to manage and interpret data more effectively. The results are increased productivity and greater user satisfaction. Embed micro-applications or components within existing websites, or revolutionize your entire web experience with immersive, single-screen applications built with Flex.

Flex is a free, open source framework for building highly interactive, expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

Flex provides a modern, standards-based language and programming model that supports common design patterns. MXML, a declarative XML-based language, is used to describe UI layout and behaviors, and the object-oriented ActionScript® 3.0 programming language is used to create client logic. Flex also includes a rich component library with more than 100 proven, extensible UI components for creating rich Internet applications (RIAs), as well as an interactive Flex application debugger.

Flex framework

RIAs created with Flex can run in the browser using Adobe Flash Player software or outside the browser on Adobe AIR®, the cross-operating system runtime, enabling them to run consistently across all major browsers and on the desktop. Installed on more than 98% of Internet connected computers, Flash Player is an enterprise-class client runtime with advanced vector graphics capable of handling the most demanding, data-intensive applications while performing at desktop application speeds. By leveraging AIR, Flex applications can have access to local data and system resources. Both runtimes are available as free downloads on Adobe.com.

You can accelerate Flex application development with Adobe Flash Builder 4 software, a highly productive, Eclipse™ based development environment, and Adobe LiveCycle® Data Services software, a set of advanced data services that can be used in Flex development. Both of these products are available for purchase.

Advanced data services and servers

Adobe LiveCycle Data Services ES2 is server software that provides critical data services enabling Flex applications to talk to back-end data and business logic in a faster, more efficient operating model. It supports messaging, publish/subscribe, and real-time data push, providing a robust solution for your most critical applications. LiveCycle Data Services also enables seamless integration with other LiveCycle business processes and document services.