Flex Tutorials

Flex is the an open source framework developed by Adobe for creating rich internet applications. Flex based applications provide real time rich experience to the user which is not possible in traditional html based applications. Currently, Flex is most popular choice because of its cross browser and cross platform features. It runs consistently among all major browsers having flash player installed in it. Developers feels very easy to develop the flex application using Adobe flex builder application development tool. Developers can concentrate and spend more time on business logic and work flow rather than consuming time on developing User Interfaces.

Benefits of flex:

1. Its free and open source framework

2. Used to develop cross platform rich internet applications based on flash platform.

3. Flex applications provide real time rich user-experience.

4. Much more faster than traditional html based applications.

5. Loads only the required content from the server hence reduces the load on servers a lot.

6. Flex puts very less overhead to the database, and network.

7. Developing user interfaces are now easy using Adobe Flex Builder.

8. Unlike AJAX, flex applications looks and reacts the same way on each browser and platform.

1. Introducing Flex
   Flex is a programming language developed on adobe technology to enhance the users capability in building rich internet applications. This latest adobe technology possesses all flash features.
                   
2. Downloading and Installing Flex
   Flex technology is built with earlier scripting language technologies and now it has become an adobe's open source product.
                    
3. Downloading and Installing Flex Builder
   In this tutorial you will learn the complete downloading and installing procedure of adobe flex builder.
               
4. Compiling MXML application
   In this tutorial you will be provided two ways to compile you flex source file. First one is very easy and in this you all have to just put or directly save your .mxml file in the bin directory of your flex folder. Here the bin directory is the place where the flex compiler is located.
            
5. Eclipse flex ant coding example
   Inside the tutorial, demonstration regarding using eclipse as an editor for creating flex and ant projects is given. Also, the coding of  flex and apache ant applications and compiling flex application with ant build.xml file is illustrated very nicely inside the tutorial.
   
6. Compiling MXML files with FlexBuilder
   On this page, you will be guided, to code and compile a flex application on adobe Flex Builder. This adobe product is eclipse based therefore many of eclipse features can be seen inside the flex builder.
                                                   
7. Flex Combo Box example
   In this tutorial page you will be taught to utilize ComboBox control inside your flex file. In the example you will learn to build two ComboBox controls.
            
8. Flex Combo Box selecteditem 
   In this tutorial page you will learn how to utilize the selectedItem property in flex, for getting the details associated to items inside the flex combo box control. Below example contains a flex combo box control with id value combo. 
              
9. Flex Check Box control example
   The page provides illustration about the working of flex checkbox control. Example is based on registration for online training courses. On the registration form, trainee check marks the courses in which he/she is interested.
                           
10. Flex wipe behavior example
    Code below shows the implementation of wipe behavior in buttons through its rollOverEffect property. The first button wipes from left to right and the second one from right to left.
                  
11. Flex Alert Box example
    Alert box is a dialog box that appears on window with some message and stays rigid until the event associated with it is not done. Alert Box is also referred to as pop-up window.
              
12. Flex Validator example
    Code below shows Flex validator component example. With these components different types of data are get validated with appropriate validators. The provided flex feature is mostly used in validating the user ids,  email addresses and passwords. 
             
13. Flex Tab Navigator example
    Under mx.containers package TabNavigator class is present and under this class TabNavigator container is present.
    Tab Navigators are Navigator containers of flex.
            
14. Flex Cascading Style Sheets example
    Following code demonstrates the use of <mx:Style> tag.  Style definitions of this tag are implemented on other GUI components like on Button controls. This implementation is done by using the class selector, here class selector is used with name Alexander.
             
15. Action Script 'source' attribute example
    In the example below an action script file with .as extension has been imported in the main Operations.mxml file. This .as file instance is brought through the source attribute in <mx:Script> tags.
              
16. Action Script 'include' statement example
    Example below shows two consequent action script files: GeometricalFigures.as and Sqrt.as, and the third example, i.e. Figure.mxml is our main flex file inside which the working of  include statement has been demonstrated.
              
17. Flex addEventListener example
     The example below shows the working of the addEventListener method . As the name suggests, the method adds events in flex components. 
                 
18. Flex removeEventListener example
    In the example below flex removeEventListener method working is demonstrated. This method removes the events from the flex components. Here mouse click event are removed by the method.
               
19. Flex dispatchEvent example
    The example below demonstrates the working of flex dispatchEvent() method. Method works like a driver that drives the event mentioned in its constructor. This method is used to manually dispatch or run away an event.
                 
20. Flex custom mxml tags example
    Flex .mxml files, whose functionalities are extended in to other Flex .mxml files are called custom mxml components. Custom mxml components are also referred to as custom mxml tags in the flex .mxml files in which their functionality is imported.
                 
21. Flex current target property example
    The example below describes the working flex currentTarget property. Code below shows a method .setSelection which is used to highlight the text letters as per defined closed indexes.
                             
22. Flex single event on varied components
    In the example below, listeners for a single event MouseEvent.MOUSE_DOWN, are created on two flex check boxes controls, due to which whenever the check boxes are clicked the  second argument of the .addEventListener method is get switched.
                
23. Flex Circle drawing example
    Example below draw circles on the panel background of your application. Circles drawn and its properties like color, size and dimensions will completely depend on you as here you are both the artist and the button operator.
              
24. Flex target property example
    In coding the below flex application we have use an event object property  target . We also have another event object property currentTarget. 
                            
25. Flex event phase detection example
    With example below an introduction of phases in flex is demonstrated. In flex there are three phases. capturing, targeting and bubbling. 
               
26. Flex terminating event flow example
    In the example below, how to terminate an event flow is demonstrated. With this example the motive of previous event phase detecting example as well as a new flex feature zooming components are also demonstrated.
              
27. Flex data binding example
    In the example below, data binding in flex is demonstrated. Here data binding means binding or connecting the properties or attributes of flex controls to each other.
                
28. Flex KeyboardEvent properties
    In this example working of properties charCode and keyCode of KeyboardEvent class under flash.events package is demonstrated.
         
29. Flex Handling KeyboardEvents
    Following tutorial describes KeyboardEvent class defined under flash.events package. Class is associated with the keyboard keys  pressed on the keyboard. It is commonly used for detecting the key pressed on the keyboard.
            
30. Flex KeyboardEvent Listener
    Example below demonstrates the working of KeyboardEvent listeners. In the example when certain specific keys are pressed the function eventListener invokes the functions neo and trinity. 
               
31. Explore key & mouse with Flex
    On this web page you will to know how to determine for a key, is pressed or not when an event occurs. In the example below two flex controls CheckBox and Button and two flex containers HBox and VBox are created.
    
    
32. Hslider
    In this tutorial you'll come to know about the horizontal slider option of flex.
    
    
33. Conversion of temperature from kelvin to Celsius
    It is a very famous example and almost everyone of us have done this example once in any language.
    
    
34. For..in loop
    In this tutorial we will study for..in loop which is similar to for each loop of C#, Java and other popular languages, in this example you will see how to display a list on a textbox on click event.
    
    
35. How to display on textbox using ObjectUtil class
    In this tutorial we will see how to display a text in textbox using ObjectUtil class.
    
    
36. Login.mxml
    This is a small example of Login screen in flex, we assume that the userid should be roseindia and password is abc, if someone enter wrong id or password or just hit the submit button, an alert message will be displayed, if both the userid and password would correct then an welcome message in alert box will be displayed.
    
    
37. Event.mxml
    This tutorial will help you to learn event handling on mouse click.
    
    
38. Simple Text display
    In this tutorial we will come to know that how to display any text in a text input box using a button click.
    
    
39. Change button's text:
    This tutorial will help you to learn how to change the label of a button on clicking on itself.
    
    
40. Change panel height, width and title
    With the help of a button's click we can change the height, width , and title of a panel.
    
    
41. Change the text of a button whenever you clicked
    In the current tutorial we'll study that how to change the label of a button on clicking on itself.
    
    
42. Performing Object Introspection
    In OOP based programming language object introspection is a technique to determining the elements(properties and methods) of a class at run time.
    
    
43. Using the interospection API:
    In the present API, we will describeType() method which will return an E4X XML object, this kind of object contains the description of the target object in XML format.
    
    
44. Difference between Flex and Flash
    There is not big difference between the flex and flash. Flash is more oriented or specially designed software for designer because they can create anything without using any code.
    
    
45. How to design Form Layout in Flex Using Container
    The Adobe Flex is the combination of several languages designed for developing attractive projects without wasting so much time in coding or designing.