Thursday, October 16, 2008

Flex Tutorial

Flex Tutorial

Flex is an open source program designed to automatically and quickly generate scanners, also known as tokenizers, which recognize lexical patterns in text. Flex is an acronym that stands for "fast lexical analyzer generator. " It is a free alternative to Lex, the standard lexical analyzer generator in Unix-based systems. Flex was originally written in the C programming language by Vern Paxson in 1987.

Lex is proprietary but versions based on the original code are available as open source. These include not only Flex but components of OpenSolaris and Plan 9. Lexical analysis is the processing of character sequences such as source code to produce symbol sequences called tokens for use as input to other programs such as parsers.

What is Flex? Why Use It?

There seems to be some confusion as to why anyone would bother using Flex. I can understand this to a degree since I felt the exact same way when I first heard about Flex. But logically, there must be a reason why Adobe decided to continue it as one of their products; and that is exactly what I plan to explain here.

In a nutshell, Flex was designed in order to give Flash Developers an edge when developing Rich Internet Applications (RIAs). Although RIAs can be built from within Flash, there are various limitations, especially when it come to a developers time. I’m not going to get into the specifics, but as you become familiar with Flex, you’ll begin to understand why this is.

What makes a up a Flex Application?

A Flex application at it’s very basic level is a Flash .swf file embedded in a generated HTML file. Since Flex outputs it’s data as a .swf, this allows you to utilize everything that Flash Player is famous for; dynamic animations, sound and video handling, and of course, the Flash Drawing API. The HTML that Flex spits out has the necessary JavaScript code in order to detect whether the user has the Flash Player installed, or whether they need to update to the current player.

One of the major reasons why Flex is becoming more and more popular is because it utilizes ActionScript 3.0. In fact, developers we’re creating AS 3.0 applications in Flex even before AS 3.0 was released for Flash Developers. But, since Flash CS3 was released, AS 3.0 has become the new standard, and for me at least, is why developing in Flex has become even more exciting.

How is a Flex Application created?
One important thing to note, is that the Flex environment does not use a Timeline. This does not mean that it is limited. Rather, Flex has been developed more for programmers and less for designers. It ends up meeting somewhere in the middle, which is exactly where I found myself as a Designer/Programmer, whatever. Again, this will become apparent as you begin actually developing in Flex.

You design a Flex Application by selecting pre-defined visual components (i.e. Button, ComboBox, ListBox, DataGrid, etc) that you’re most likely familiar with from Flash. If you’ve never used components before, they’re wonderful. Although some will tell you that you can create far smaller (in size) components by developing them on your own, and while that may actually be true, the pre-defined components work well and are highly customizable – especially the latest set released with Adobe Creative Suite 3:

You then arrange your components on the stage in a orderly, easy to use, manageable user interface. There are various Containers that allow you to align your components however you’d like. As an example of one of these containers, there is one named the VBox. This Container tells everything that lives within it to align vertically to one another – extremely usefully when developing Forms.

You’ll then use be able to use styles and skins that will customize the entire look and feel of your application. CSS Formatting and the complete customization of the visual components (as I mentioned above) will make your Flex Application stand out above the rest.

Now that you have your visuals in place and you like the way your application looks, you can start to utilize ActionScript 3.0. Assign event handlers and create or import ActionScript functions or classes to make your Flex Application live up to it’s full potential. This will allow you to react to what the user does and to events that are generated by Flex itself. Also, and this is a HUGE also, you’re able to connect to ColdFusion and other Flex Data/Communication Services. Remember this one thing when you’re contemplating whether or not Flex is right for you: Flex and ColdFusion are meant for each other.

Now it’s time to publish your application and present it to your client or the world.
Honestly, there is so much more that could have been elaborated on in this article, but that’s what the later tutorials are there for. This was meant as an introduction or sorts to Flex in a Flash world. If you haven’t given it a shot, why not test it out for yourself. Until more tutorials are released here on Kirupa.com, please visit the following links in order to satisfy your curiosity.


With Web users expecting richer and more complex interfaces, Rich Internet Applications (RIAs) are seeing a huge increase in popularity. Adobe Flex is the tool of choice for many web developers when it comes to building RIAs.

Flex used to be one of those technologies that was only used by large corporate organisations -- the first release of Flex was priced at around US$15,000 per CPU (a tad expensive for most developers) Since then, Flex has been released as open source software. Talk about a complete turnaround!

Flex is now in version 3.0, and runs on the Adobe Flash Player 9 runtime. Flex 3.0 has been such a success that Flex 4.0 has been announced for release in 2009. As a developer, getting in early and learning all you can now is a good idea -- standing out in the Flex community will soon become extremely difficult.

Developers are picking up Flex with great speed. One of the reasons for this is that Flex programming is relatively easy to learn if you're already familiar with XHTML. Of course, there's always a transition period when you're getting used to a new environment, but learning Flex won't take long!

Another drawcard is that Flex applications can be developed to run on a user's desktop thanks to the wonders of the Adobe AIR (Adobe Integrated Runtime) platform. Now you can develop and launch an RIA that runs in a web browser and as a desktop application. Deploying an application to a user's desktop with Adobe AIR is easy -- all that users need to do is click a link in the web browser to install the AIR runtime and your RIA on their machine. Now that's quick deployment!

That's enough rambling; let's learn the basics of what Flex is all about.
Why Use Flex?

If you're considering building a RIA, you have a few choices of technology, including Flex, Ajax, and Microsoft Silverlight. If you look at these options objectively, the development effort required for each (and the resulting user experience) is roughly the same. One of the benefits of Flex is its reach -- the Adobe Flash Player, upon which Flex applications run, is already installed on about a billion computers wordwide!

Of course, Ajax also uses technologies that are installed on almost every computer in the world -- JavaScript, XHTML, and CSS. One of the downfalls of Ajax, however, is that cross-browser compatibility can be difficult to achieve. What might work in one browser (for example, Firefox) might not work in another (such as Internet Explorer), so the debugging process has the potential to become difficult and long-winded.

Microsoft Silverlight, on the other hand, is similar to Flex in that it runs on a browser plugin. Silverlight, however, has yet to reach the installed userbase of the Flash player.

If you're just starting out with building RIAs, you should definitely try all of them to see which one you like best and find easiest to work with -- each of Flex, Silverlight and Ajax has its advantages and disadvantages. In my opinion, though, Flex is definitely the best RIA development technology available. Additionally, if you're a fan of the Adobe Creative Suite, it's good to know that many of these tools (Flash, Photoshop, Illustrator, Fireworks and so on) have Flex component integration built into them, which is a bonus no matter how you look at it.
Overview of the Flex Framework

A lot of people steer clear of the Flex framework because they think it's complicated. But generally speaking, a framework is just a set of reusable classes that can work together to provide a base for an application.

Take a house as an analogy: every house on the planet has a framework. Each house has a foundation and walls, and those walls can't stand without the foundation. Once the foundation has been laid and the walls are up, a roof can be applied and the interior designed and implemented, while work continues on the initial foundation.

If we apply this analogy to the Flex framework, we have a stack of logic -- the controller logic -- that has been made available for communicating with a database, handling security, writing to the file system, and so on. There are also the user interface elements -- buttons, canvases, dropdown lists, and so on. All of these also form the foundation of your Flex application -- the concrete slab, the timber beams and the bricks with which to build your house.

Flex is easy for web developers to learn because, at its core, it has a lot in common with (X)HTML, CSS, and JavaScript. Suppose you wanted to create a simple web page with a form button. In XHTML you'd type the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button Example</title>
</head>

<body>
<form method="post" id="example" action="http://www.example.com/">
<input type="button" name="newButton" id="newButton" value="This is a button" onclick="checkForm()" />
</form>
</body>
</html>

When you view this markup in a web browser, you'll see a button displayed with the label "This is a button".

The XHTML button (click to view image)

To display something similar in Flex we use a form of markup called MXML. Here's the MXML markup for our previous example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Button x="10" y="10" label="This is a button"
id="newButton"
click="checkForm()"/>

</mx:Application>

An Absolute Beginner's Tutorial On Flex 3

To run this simple page as a Flex application, we need to compile our MXML code using the Flex SDK. The result is shown below:


The first thing you'll notice is that MXML is an XML format. To indicate to the Flex compiler that we're defining an application, we use the <mx:Application/> element, in the same way we use the <html></html> tags to define a web page. We can then add other elements within the <mx:Application/> tag. In the above example, we've added a <mx:Button/> tag to create a button, just as we'd use an <input type="button" /> tag in a web page form.

As you can see, this is all very similar to constructing a traditional web page, and the framework provides you with everything you might use in XHTML (buttons, lists, etc.) and more. All you have to learn is the properties, methods and the names of the components in the framework, all of which are available from the Adobe Flex 3 language reference.

Of course, the Flex framework doesn't just consist of user interface components; it also contains actions that your application can utilise. For instance, there's a component called HTTPRequest, which your application can use to send and receive data from a server-side service (PHP, ASP.NET, etc.). When you run your application, you don't actually see the HTTPRequest, as it works in the background.

All these components have been bundled together by Adobe to form the Flex framework, so you don't have to create them from scratch.

Eventually, as you become more experienced with Flex, you'll want to create your own components that you'll use over and over. After a while, you'll have created a little library of your own that extends the Flex core framework to meet your individual needs.
What Do I Need to Get Started?

With the open sourcing of Flex 3, it's never been easier to begin building RIAs. To get started, you can use one of two options:

* The tool of choice for most serious Flex developers is Adobe Flex Builder 3, the official Flex IDE from Adobe. Flex Builder is also available as a professional version, which includes a Flex charting component. Flex Builder 3 retails for around US$376.00, and the professional version sells for around US$900.00.
* You'll also need your own programming editor, combined with the Flex 3 SDK, which is free. Yes: free as in beer.

Installing Flex Builder 3 is quite straightforward, as it comes with a user-friendly installer.

The Flex SDK, on the other hand, is a little trickier. To install the Flex SDK, download the zip file and extract it to a folder of your choice. The trick is that that folder should be in your path (meaning you should be able to execute files in that folder from the command prompt, regardless of your current location).

If you're planning on taking your Flex development seriously, I recommend you go ahead and purchase the Flex Builder 3 IDE. Flex Builder is based on the open-source Eclipse editor, which alone is an extremely powerful IDE. If you want to try before you buy, Flex Builder 3 is available for a 30-day trial. While it's great that the Flex 3 SDK is free, the benefits that Flex Builder 3 provides for Flex development over a standard text editor are many.
MXML is Easy!

Unlike other markup language acronyms, MXML doesn't actually stand for anything specific. (Although some people, and I'm one of them, like to think that it should stand for Magic eXtensible Markup Language.)

Macromedia created MXML in March 2004 before the organization was acquired by Adobe. MXML is primarily used to lay out a Flex application. Being a dialect of XML, standard validity rules apply: tags must be closed, and all the other XML rules apply.

Every component in MXML follows the same pattern:

1. You declare a namespace that tells Flex where to find a particular component.

2. You declare the component class you wish to use (e.g. Button) from that namespace.

3. You modify the available properties and methods using attributes, as illustrated below.


Because they're defined in the class structure of the component, the properties and methods that can be used from within each component vary.

You style the visual components of your application with Flex Cascading Style Sheets. These styles can be added in the same location as the properties and methods of a component, but discussing Flex Cascading Style Sheets is beyond the scope of this article.

MXML components can have child elements (just like XML). For instance, a container element such as Canvas can have child elements like a Button or a Label. The code below demonstrates this point:

<mx:Canvas x="53" y="64" width="192" height="94"
cornerRadius="20" borderStyle="solid"
backgroundColor="#A9A9A9" id="mainCanvas">

<mx:Button x="10" y="10" id="newButton"
label="This is a button"/>

<mx:Label x="10" y="57" id="newLabel"
text="This is a label"/>
</mx:Canvas>

If you compile and run this code, you'd see this web page:


By combining layout containers, such as Canvas, with other components, such as buttons and lists, it's possible to create great application designs in no time at all.

While MXML defines the structure of your Flex application, ActionScript 3.0 defines your application's behaviour.

Now, you may be thinking, "Hang on. If I can do so much with MXML, why do I need ActionScript 3.0?" Well here's the confusing part; MXML is actually a pretty form of ActionScript 3.0. In fact, MXML is converted to ActionScript 3.0 when you compile it. Let's look at an example that shows how similar MXML and ActionScript 3.0 are. The following code creates the same component (a Button), first in MXML, and then in ActionScript 3.0:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="init()">
<mx:Button label="This one is done by MXML" x="10" y="10" /> <mx:Script>
<![CDATA[
import mx.controls.Button;
//Init Function is executed when the application boots
private function init():void {
//Create a new button
var newButton:Button = new Button();
//Modify Properties
newButton.label = "This one is done by ActionScript";
newButton.x = 10;
newButton.y = 40;
//Add the new button to the stage (Screen)
this.addChild(newButton);
}
]]>
</mx:Script>
</mx:Application>

The application that results when you compile this file will look like this:

MXML and ActionScript 3.0 buttons (click to view image)

As you can see, both approaches for creating a button produce the same result -- but there's far less typing involved with MXML than with ActionScript 3.0. Designing an application with ActionScript 3.0 would be a nightmare. MXML was created to simplify the work for you.

You still need to use ActionScript in your application, however; you'll need to define what happens when that button is clicked, for example. Look at it in this way: you design your application with MXML, and you make it work with ActionScript 3.0. By using MXML and ActionScript, you're separating the structural code from the programming logic. This is an important philosophy to remember when building Flex applications -- especially when you're building complex components down the track.

ActionScript 3.0 is an ECMAScript-based scripting language, which means that it adopts the ECMA scripting language standards. ActionScript 3.0 is a giant leap forward from is predecessor, ActionScript 2.0. The reason for this is that ActionScript 3.0 is now a truly object oriented programming (OOP) language. In fact, the entire framework of Flex is made up of object classes that have been written by Adobe.

If you want to develop complex RIAs, I'd recommend that you invest some time in understanding OOP. Most of the programming done in Flex is event-driven, which means that functions are run when a component triggers an event (for example, when a mouse clicks a button on the page). The Adobe Livedocs site has some great examples of object-oriented ActionScript.

The full details of ActionScript 3.0 syntax and OOP are beyond the scope of this article, but if you've done any JavaScript programming before, you are certainly well on your way.
Resources

Flex 3.0 is rapidly gaining steam; as a result there are some fantastic resources out there for anyone who wants to get started in building RIAs with Flex. Here's a sample:

<a href="http://livedocs.adobe.com/flex/" target="_blank">* Flex Livedocs</a>
<a href="http://flex.org/" target="_blank">* Flex.org</a>
<a href="http://tech.groups.yahoo.com/group/flexcoders/" target="_blank">* FlexCoders</a>
<a href="http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK" target="_blank">* Open Source Flex </a>
<a href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=2" target="_blank">*The Flex CookBook</a>
<a href="http://learn.adobe.com/wiki/display/Flex/Getting+Started" target="_blank"> * Flex 3 Getting Started</a>

Summary

This article barely skimmed the surface of the Flex framework, although we did cover the basics of what the framework provides, and how MXML and ActionScript 3.0 work together. While this was a very gentle introduction to the concepts behind Flex, it should give you enough grounding in the concepts to go forth and experiment on your own.

Now that you've taken your first step in Flex development, the next step is to actually understand the components, play around with them to build your first application, and apply some ActionScript to really give it some life.

No comments: