Folks,

Thanks for your interest Here we will be explaining the Very Basic Starter of Flex Application. "Hello World!" Application. Follow the below steps to build this App.

//Note:- This Tutorial is based on FLEX 3.
Step 1: Open Flex Software and Create a New Project. File-> New Flex Project.

Step 2: Enter Project Name ex:- "Hello" and Click on Finish button.

Now you can see the hello.mxml with some XML code. This is nothing but basic code to initialize the application. You will have two views "Source View" and "Design View"

Step3: Click on the Source View and copy the below code and replace with the existing code.

// Save this as Greeter.as //

package
{
public class Greeter
{
   public function sayHello():String
   {
       var greeting:String;
       greeting = "Hello World!";
       return greeting;
   }
}
}

Step 4: save it as Greeter.as

Step 5: Overwrite the code from "Helloworld.mxml" in the below zip file into the Newly created page and drag and drop the Greeter.as file into the lib folder of the project.

Step6: Click on Run to see the Output.

Explanation:
-------------
1) In Greeter.as file we are just writing a class to initiate a variable called "greeting" and assigning some value "Hello World!" to it.

2) In the Helloworld.mxml code what we did is, we just created few basic components.
they are

2 text Labels just to write some intro text and 1 text area and we set the text area name to "maintxt" and in runtime we are calling "creationComplete = "initApp()" . This will call the function initApp() once it loads the Flex application. So the value in the variable will appear on the text area.

Conclusion:

Here we have worked with

1) How to create a simple class in Flex and initiate values to the variables
2) Calling simple functions in the MXML Application
3) How to use Text Labels, Text areas.

Hope you like the tutorial. Please download the Sources files for practice. Please send us your comments / questions to help you.

Download Source files

All though this is a late post on Flex Introduction, This Article has much importance and difference than the other ones.

I am a web developer working with various Softwares and i came to know about the Latest Software Flex from Adobe labs. I have studied completely about the origin of the Flex, Importance and all the features and did some applications as well.

Now Flex will be going to rule the Web World!! Don't You Believe this?? Yes You should!!

I have prepared a clear PPT on Flex Introduction. Flex Architecture and basic examples to start learning Flex. Please go through the PPT and start learning Flex.

In Future i will be writing more articles on Flex. Please send your comments/questions and get answers.

Click Here to Dowload PPT

Subscribe to this Blog to get Latest Updates to your Mail.

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:

[ an example of a few controls arranged in Flex Builder 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 object-web.blogspot.com, please visit the following links in order to satisfy your curiosity.

Download the latest Flex Builder 3:
http://www.adobe.com/products/flex/

The Adobe Flex Developers Center:
http://www.adobe.com/devnet/flex/

The Official Adobe Flex Overview:
http://learn.adobe.com/wiki/display/Flex/Animated+overview

Please don't forget to post your comments.