The event flow is conceptually divided into three parts.
Capturing phase:
The first part of the event flow is called the capturing phase, which comprises all of the nodes from the root node to the parent of the target node. During this phase, Flash Player examines each node, starting with the root, to see if it has a listener registered to handle the event. If it does, Flash Player sets the appropriate values of the Event object and then calls that listener. Flash Player stops after it reaches the target node’s parent and calls any listeners registered on the parent.
Targeting phase:
The second part of the event flow is called the targeting phase, which consists solely of the target node. Flash Player sets the appropriate values on the Event object, checks the target node for registered event listeners, and then calls those listeners.
Bubbling phase:
The third part of the event flow is called the bubbling phase, which comprises all of the nodes from the target node’s parent to the root node. Starting with the target node’s parent, Flash Player sets the appropriate values on the Event object and then calls event listeners on each of these nodes. Flash Player stops after calling any listeners on the root node.
Events in Flex
Events let a developer know when something happens within a Flex application. They can be generated by user devices, such as the mouse and keyboard, or other external input, such as the return of a web service call. Events are also triggered when changes happen in the appearance or life cycle of a component, such as the creation or destruction of a component or when the component is resized.
Any user interaction with our application can generate events. Events can also occur without any direct user interaction, such as when data finishes loading from a server or when an attached camera becomes active. You can “handle” these events in our code by adding an event handler. Event handlers are the functions or methods that you write to respond to specific events. They are also sometimes referred to as event listeners.
The Flex event model is based on the Document Object Model (DOM) Level 3 Events Model. Although Flex does not adhere specifically to the Document Object Model standard, the implementations are very similar.
Components generate and dispatch events and consume (listen to) other events. An object that requires information about another object’s events registers a listener with that object. When an event occurs, the object dispatches the event to all registered listeners by calling a function that was requested during registration. To receive multiple events from the same object, you must register our listener for each event.
Components have built-in events that you can handle in ActionScript blocks in our MXML applications. You can also take advantage of the Flex event system’s dispatcher-listener model to define our own event listeners outside of our applications, and define which methods of our custom listeners will listen to certain events. You can register listeners with the target object so that when the target object dispatches an event, the listeners get called.
You can instruct any container or control to listen for events dispatched by another container or control. When Adobe Flash Player dispatches an Event object, that Event object makes a round-trip journey from the root of the display list to the target node, checking each node for registered listeners. The target node is the node in the display list where the event occurred.
For example, if a user clicks a Button control named Child1, Flash Player dispatches an Event object with Child1 defined as the target node.
Any user interaction with our application can generate events. Events can also occur without any direct user interaction, such as when data finishes loading from a server or when an attached camera becomes active. You can “handle” these events in our code by adding an event handler. Event handlers are the functions or methods that you write to respond to specific events. They are also sometimes referred to as event listeners.
The Flex event model is based on the Document Object Model (DOM) Level 3 Events Model. Although Flex does not adhere specifically to the Document Object Model standard, the implementations are very similar.
Components generate and dispatch events and consume (listen to) other events. An object that requires information about another object’s events registers a listener with that object. When an event occurs, the object dispatches the event to all registered listeners by calling a function that was requested during registration. To receive multiple events from the same object, you must register our listener for each event.
Components have built-in events that you can handle in ActionScript blocks in our MXML applications. You can also take advantage of the Flex event system’s dispatcher-listener model to define our own event listeners outside of our applications, and define which methods of our custom listeners will listen to certain events. You can register listeners with the target object so that when the target object dispatches an event, the listeners get called.
You can instruct any container or control to listen for events dispatched by another container or control. When Adobe Flash Player dispatches an Event object, that Event object makes a round-trip journey from the root of the display list to the target node, checking each node for registered listeners. The target node is the node in the display list where the event occurred.
For example, if a user clicks a Button control named Child1, Flash Player dispatches an Event object with Child1 defined as the target node.
Application tag in Flex
The tag defines the Application container that is always the root tag of a Flex application. In addition to being the root tag of a Flex application, the tag represents an Application container. A container is a user-interface component that contains other components and has built-in layout rules for positioning its child components. By default, an Application container lays out its children vertically from top to bottom. We can write an MXML application in a single file or in multiple files. We typically define a main file that contains the tag. From within our main file, we can then reference additional files written in MXML, ActionScript, or a combination of the two languages.
In Flex, we can divide our application into separate MXML files and ActionScript files, where each file corresponds to a different module. By dividing our application into modules we provide many benefits, including the following:
Ease of development: Different developers or development groups can develop and debug
modules independently of each other.
Reusability: We can reuse modules in different application so that we do not have to
duplicate our work.
Maintainability: We can isolate and debug errors faster than we could if we application was developed in a single file.
In Flex, we can divide our application into separate MXML files and ActionScript files, where each file corresponds to a different module. By dividing our application into modules we provide many benefits, including the following:
Ease of development: Different developers or development groups can develop and debug
modules independently of each other.
Reusability: We can reuse modules in different application so that we do not have to
duplicate our work.
Maintainability: We can isolate and debug errors faster than we could if we application was developed in a single file.
How do we use a repeater?
< mx:repeater id="rp" dataprovider="{dp}">
< height="49" width="50" click="Alert.show(String(event.currentTarget.getRepeaterItem())+ ' pressed')"
label="{String (rp.currentItem)}">
< /mx:repeater>
< height="49" width="50" click="Alert.show(String(event.currentTarget.getRepeaterItem())+ ' pressed')"
label="{String (rp.currentItem)}">
< /mx:repeater>
I need to load an image from flickr into my application. Do I need a crossdomain.xml file on flickr?
When we load images at run time, we should be aware of the security restrictions of Flash Player. For example, we can reference an image by using a URL, but the default security settings only permit Flex applications to access resources stored on the same domain as our application. To access images on other servers, we must use a crossdomain.xml file.
Every SWF file we view runs locally on our machine. This means that a SWF would have HTTP access to all machines behind the company firewall. To prevent this, every server other than the one the SWF is loaded from, needs to have a crossdomain.xml file in its root, listing all domains that have access to that particular server.
NOTE
We can use relative URLs for images hosted on the same web server as the Flex application, but we must load these images over the Internet rather than access them locally.
Loading Remote Style Sheets
If the style sheet is local(from the same domain as the loading application), we can load it without any additional settings. If the location of the style sheet is remote (in any domain that is not an exact match of the loading application’s domain), we must set the third parameter of the loadStyleDeclarations() method, trustContent, to true. Loading remote style sheets does not require a crossdomain.xml file that gives the loading application permission to load the SWF file.
StyleManager.loadStyleDeclarations("assets/ButtonStyles.swf", true, false)
Also, to use remote style sheets, we must compile the loading application with network access (have the use-network compiler property set to true, the default). If we compile and run the application on a local file system, we might not be able to load a remotely accessible SWF file.
The loadStyleDeclarations() method returns an instance of the IEventDispatcher class.
We can use this object to trigger events based on the success of the style sheet’s loading. We have access to the StyleEvent.PROGRESS, StyleEvent.COMPLETE, and StyleEvent.ERROR events of the loading process.
We can unload a style sheet that we loaded at run time. We do this by using the
StyleManager’s unloadStyleDeclarations() method. The result of this method is that all
style properties set by the specified style SWF files are returned to their defaults.
StyleManager.unloadStyleDeclarations("assets/ButtonStyles.swf", true);
Every SWF file we view runs locally on our machine. This means that a SWF would have HTTP access to all machines behind the company firewall. To prevent this, every server other than the one the SWF is loaded from, needs to have a crossdomain.xml file in its root, listing all domains that have access to that particular server.
NOTE
We can use relative URLs for images hosted on the same web server as the Flex application, but we must load these images over the Internet rather than access them locally.
Loading Remote Style Sheets
If the style sheet is local(from the same domain as the loading application), we can load it without any additional settings. If the location of the style sheet is remote (in any domain that is not an exact match of the loading application’s domain), we must set the third parameter of the loadStyleDeclarations() method, trustContent, to true. Loading remote style sheets does not require a crossdomain.xml file that gives the loading application permission to load the SWF file.
StyleManager.loadStyleDeclarations("assets/ButtonStyles.swf", true, false)
Also, to use remote style sheets, we must compile the loading application with network access (have the use-network compiler property set to true, the default). If we compile and run the application on a local file system, we might not be able to load a remotely accessible SWF file.
The loadStyleDeclarations() method returns an instance of the IEventDispatcher class.
We can use this object to trigger events based on the success of the style sheet’s loading. We have access to the StyleEvent.PROGRESS, StyleEvent.COMPLETE, and StyleEvent.ERROR events of the loading process.
We can unload a style sheet that we loaded at run time. We do this by using the
StyleManager’s unloadStyleDeclarations() method. The result of this method is that all
style properties set by the specified style SWF files are returned to their defaults.
StyleManager.unloadStyleDeclarations("assets/ButtonStyles.swf", true);
What is e4X and XML?
E4X means "ECMAScript For XML. Using E4X, we can develop code with XML data faster than was possible with previous programming techniques. E4X provides a set of classes and functionality for working with XML data. ActionScript 3.0 includes the following E4X classes: XML, XMLList, QName, and Namespace.
What is cairngorm? How do we use it? or Explain the lifecycle of a Cairngorm action?
Some of the frameworks in Flex are : EasyMVC, Cairngorm, Mate, Swiz. I had worked only on cairngorm and so putting down its details:
Overview of Cairngorm
What is Cairngorm? Cairngorm is fundamentally a methodology for breaking up our application code by logical functions; by data, by user views, and by the code that controls everything. This is routinely referred to as MVC, or Model, View, and Control.
The Pieces of Cairngorm
•Model Locator: Stores all of our application’s Value Objects (data) and shared variables, in one place. Similar to an HTTP Session object, except that its stored client side in the Flex interface instead of server side within a middle tier application server.
• View: One or more Flex components (button, panel, combo box, Tile, etc) bundled together as a named unit, bound to data in the Model Locator, andgenerating custom Cairngorm Events based on user interaction (clicks, rollovers, dragndrop.)
• Front Controller: Receives Cairngorm Events and maps them to Cairngorm Commands.
• Command: Handles business logic, calls Cairngorm Delegates and/or other Commands, and updates the Value Objects and variables stored in the ModelLocator
• Delegate: Created by a Command, they instantiate remote procedure calls(HTTP, Web Services, etc) and hand the results back to that Command.
• Service: Defines the remote procedure calls (HTTP, Web Services, etc) to connect to remote data stores.
How the Pieces Fit Together
Cairngorm basically works like this: Our client interface is comprised of Views. The Views use Flex binding to display data contained in the Model Locator. The Views generate Events based on user gestures such as mouse click, button press, and drag & drop. Those Events are “broadcast” and “heard” by the Front Controller, which is a map of Events to Commands. Commands contain business logic, create Delegates to perform work, handle responses from Delegates, and update the data stored in the ModelLocator. Since Views are bound to the data in the ModelLocator the Views automatically update when the ModelLocator data is changed. Delegates call Services and hand results back to Commands, and are optional but recommended. Services make remote data calls and hand the results back to Delegates.
Overview of Cairngorm
What is Cairngorm? Cairngorm is fundamentally a methodology for breaking up our application code by logical functions; by data, by user views, and by the code that controls everything. This is routinely referred to as MVC, or Model, View, and Control.
The Pieces of Cairngorm
•Model Locator: Stores all of our application’s Value Objects (data) and shared variables, in one place. Similar to an HTTP Session object, except that its stored client side in the Flex interface instead of server side within a middle tier application server.
• View: One or more Flex components (button, panel, combo box, Tile, etc) bundled together as a named unit, bound to data in the Model Locator, andgenerating custom Cairngorm Events based on user interaction (clicks, rollovers, dragndrop.)
• Front Controller: Receives Cairngorm Events and maps them to Cairngorm Commands.
• Command: Handles business logic, calls Cairngorm Delegates and/or other Commands, and updates the Value Objects and variables stored in the ModelLocator
• Delegate: Created by a Command, they instantiate remote procedure calls(HTTP, Web Services, etc) and hand the results back to that Command.
• Service: Defines the remote procedure calls (HTTP, Web Services, etc) to connect to remote data stores.
How the Pieces Fit Together
Cairngorm basically works like this: Our client interface is comprised of Views. The Views use Flex binding to display data contained in the Model Locator. The Views generate Events based on user gestures such as mouse click, button press, and drag & drop. Those Events are “broadcast” and “heard” by the Front Controller, which is a map of Events to Commands. Commands contain business logic, create Delegates to perform work, handle responses from Delegates, and update the data stored in the ModelLocator. Since Views are bound to the data in the ModelLocator the Views automatically update when the ModelLocator data is changed. Delegates call Services and hand results back to Commands, and are optional but recommended. Services make remote data calls and hand the results back to Delegates.
How do we call JavaScript from Flex?
The ExternalInterface API makes it very simple to call methods in the enclosing wrapper. We use the static call() method, which has the following signature:
flash.external.ExternalInterface.call(function_name:
String[, arg1, ...]):Object;
The function_name is the name of the function in the HTML page’s JavaScript. The arguments are the arguments that we pass to the JavaScript function. We can pass one or more arguments in the traditional way of separating them with commas, or we can pass an object that is deserialized by the browser. The arguments are optional.
The following example script block calls the JavaScript f() function in the enclosing wrapper by using the call() method:
import flash.external.*;
public function callWrapper():void {
var f:String = "changeDocumentTitle";
var m:String = ExternalInterface.call(f,"New Title");
trace(m);
}
On our HTML page, we define a function as we would any other JavaScript function. We can return a value, as the following example shows:
This feature requires that the embedded movie file have an id attribute. Without it, no call from our Flex application will succeed.
The call() method accepts zero or more arguments, which can be ActionScript types. Flex serializes the ActionScript types as JavaScript numbers and strings. If we pass an objct, we can access the properties of that deserialized object in the JavaScript, as the following example shows:
public function callWrapper():void {
var o:Object = new Object();
o.lname = "Danger";
o.fname = "Nick";
var f:String = "sendComplexDataTypes";
ExternalInterface.call(f,o);
}
Flex only serializes public, nonstatic variables and read-write properties of ActionScript objects. We can pass numbers and strings as properties on objects, simple objects such as primitive types and arrays, or arrays of simple objects.
The JavaScript code can then access properties of the object, as the following example shows:
We can also embed objects within objects, as the following example shows. Add the following code in our Flex application’s block:
public function callWrapper():void {
var f:String = "sendComplexDataTypes";
var o:Object = new Object();
o.lname = "Danger";
o.fname = "Nick";
o.b = new Array("DdW","E&T","LotR:TS");
var m:String = ExternalInterface.call(f,o);
}
The code triggers the following JavaScript in the wrapper:
Flex and Flash Player have strict security in place to prevent cross-site scripting. By default, we cannot call script on an HTML page if the HTML page is not in the same domain as the Flex application. However, we can expand the sources from which scripts can be called.
We cannot pass objects or arrays that contain circular references. For example, we cannot pass the following object:
var obj = new Object();
obj.prop = obj; // Circular reference.
Circular references cause infinite loops in both ActionScript and JavaScript.
flash.external.ExternalInterface.call(function_name:
String[, arg1, ...]):Object;
The function_name is the name of the function in the HTML page’s JavaScript. The arguments are the arguments that we pass to the JavaScript function. We can pass one or more arguments in the traditional way of separating them with commas, or we can pass an object that is deserialized by the browser. The arguments are optional.
The following example script block calls the JavaScript f() function in the enclosing wrapper by using the call() method:
import flash.external.*;
public function callWrapper():void {
var f:String = "changeDocumentTitle";
var m:String = ExternalInterface.call(f,"New Title");
trace(m);
}
On our HTML page, we define a function as we would any other JavaScript function. We can return a value, as the following example shows:
This feature requires that the embedded movie file have an id attribute. Without it, no call from our Flex application will succeed.
The call() method accepts zero or more arguments, which can be ActionScript types. Flex serializes the ActionScript types as JavaScript numbers and strings. If we pass an objct, we can access the properties of that deserialized object in the JavaScript, as the following example shows:
public function callWrapper():void {
var o:Object = new Object();
o.lname = "Danger";
o.fname = "Nick";
var f:String = "sendComplexDataTypes";
ExternalInterface.call(f,o);
}
Flex only serializes public, nonstatic variables and read-write properties of ActionScript objects. We can pass numbers and strings as properties on objects, simple objects such as primitive types and arrays, or arrays of simple objects.
The JavaScript code can then access properties of the object, as the following example shows:
We can also embed objects within objects, as the following example shows. Add the following code in our Flex application’s
public function callWrapper():void {
var f:String = "sendComplexDataTypes";
var o:Object = new Object();
o.lname = "Danger";
o.fname = "Nick";
o.b = new Array("DdW","E&T","LotR:TS");
var m:String = ExternalInterface.call(f,o);
}
The code triggers the following JavaScript in the wrapper:
Flex and Flash Player have strict security in place to prevent cross-site scripting. By default, we cannot call script on an HTML page if the HTML page is not in the same domain as the Flex application. However, we can expand the sources from which scripts can be called.
We cannot pass objects or arrays that contain circular references. For example, we cannot pass the following object:
var obj = new Object();
obj.prop = obj; // Circular reference.
Circular references cause infinite loops in both ActionScript and JavaScript.
Explain how binding works
Data binding is the process of copying the data from one object to another object. It provides a convenient way to pass data around in an application. Adobe Flex 2 provides three ways to specify data binding: the curly braces ({}) syntax and the tag in MXML and the BindingUtils methods in ActionScript.
Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. To use a property as the source of a data binding expression, the component must be implemented to support data binding, which means that the component dispatches an event when the value of the property changes to trigger the binding.
At compile time, the MXML compiler generates code to create ActionScript Watcher and Binding objects that correspond to the binding tags and expressions found in an MXML document. At run time, Watcher objects are triggered by change events that come from the constituent parts of binding source expressions; the Watcher objects then trigger Binding objects to execute bindings.
When we specify a property as the source of a data binding, Flex monitors not only that property for changes, but also the chain of properties leading up to it. The entire chain of properties, including the destination property, is called a “bindable property chain“. In the following example, firstName.text is a bindable property chain that includes both a firstName object and its text property:
{firstName.text}
It’s not necessary that the binding executes automatically. In the following case the binding wont execute automatically as expected.
1. Binding does not execute automatically when we change an entire item of a dataProvider property.
2. Binding also does not execute automatically for subproperties of properties that have [Bindable] metadata.
3. Binding also does not execute automatically when we are binding data to a property that Flash Player updates automatically, such as the mouseX property.
The executeBindings() method of the UIComponent class executes all the bindings for which a UIComponent object is the destination. All containers and controls, as well as the Repeater component, extend the UIComponent class. The executeChildBindings() method of the Container and Repeater classes executes all of the bindings for which the child UIComponent components of a Container or Repeater class are destinations. All containers extend the Container class. However, we should only use the executeBindings() method when we are sure that bindings do not execute automatically.
Data binding requires a source property, a destination property, and a triggering event that indicates when to copy the data from the source to the destination. To use a property as the source of a data binding expression, the component must be implemented to support data binding, which means that the component dispatches an event when the value of the property changes to trigger the binding.
At compile time, the MXML compiler generates code to create ActionScript Watcher and Binding objects that correspond to the binding tags and expressions found in an MXML document. At run time, Watcher objects are triggered by change events that come from the constituent parts of binding source expressions; the Watcher objects then trigger Binding objects to execute bindings.
When we specify a property as the source of a data binding, Flex monitors not only that property for changes, but also the chain of properties leading up to it. The entire chain of properties, including the destination property, is called a “bindable property chain“. In the following example, firstName.text is a bindable property chain that includes both a firstName object and its text property:
It’s not necessary that the binding executes automatically. In the following case the binding wont execute automatically as expected.
1. Binding does not execute automatically when we change an entire item of a dataProvider property.
2. Binding also does not execute automatically for subproperties of properties that have [Bindable] metadata.
3. Binding also does not execute automatically when we are binding data to a property that Flash Player updates automatically, such as the mouseX property.
The executeBindings() method of the UIComponent class executes all the bindings for which a UIComponent object is the destination. All containers and controls, as well as the Repeater component, extend the UIComponent class. The executeChildBindings() method of the Container and Repeater classes executes all of the bindings for which the child UIComponent components of a Container or Repeater class are destinations. All containers extend the Container class. However, we should only use the executeBindings() method when we are sure that bindings do not execute automatically.
Is it possible to make httpService Requests synchronous?
RPC communications, including RemoteObject, are asynchronous. In other words, we don’t exactly call a remote method, but rather send a message to the server, requesting a call of the specific Java method. Not only is the client’s request(s) executed asynchronously, but even sending to the server is done asynchronously. And if we need to do multiple RemoteObject invocations in our script, Flex will batch them together and send in the end of the script execution. The results of remote invocations are returned via events. RemoteObject provides the result event for success or fault for failures. We should write the corresponding handler functions. Flex will call these methods, supplying an Event object as a parameter. It’s our responsibility to get the information from the event and act accordingly. Friendly advice: we will save ourself hours of time if we supply a fault handler.
What is dynamic keyword used for? or What is the difference between sealed class and dynamic classes?
Dynamic Keyword is used to make a class dynamic. A dynamic class defines an object that can be altered at run time by adding or changing properties and methods. We create dynamic classes by using the dynamic attribute when we declare a class. For example, the following code creates a dynamic class named Protean:
dynamic class Protean {
private var privateGreeting:String = "hi";
public var publicGreeting:String = "hello";
function Protean () {
trace("Protean instance created");
}
}
If we subsequently instantiate an instance of the Protean class, we can add properties or methods to it outside the class definition. For example, the following code creates an instance of the Protean class and adds a property named aString and a property named aNumber to the instance:
var myProtean:Protean = new Protean();
myProtean.aString = "testing";
myProtean.aNumber = 3;
trace (myProtean.aString, myProtean.aNumber); // output: testing 3
Properties that we add to an instance of a dynamic class are run-time entities, so any type checking is done at run time. We cannot add a type annotation to a property that we add in this manner.
We can also add a method to the myProtean instance by defining a function and attaching the function to a property of the myProtean instance. The following code moves the trace statement into a method named traceProtean():
var myProtean:Protean = new Protean();
myProtean.aString = "testing";
myProtean.aNumber = 3;
myProtean.traceProtean = function () {
trace (this.aString, this.aNumber);
}
myProtean.traceProtean(); // output: testing 3
Methods created in this way, however, do not have access to any private properties or methods of the Protean class. Moreover, even references to public properties or methods of the Protean class must be qualified with either the this keyword or the class name. The following example shows the traceProtean() method attempting to access the private and public variables of the Protean class.
myProtean.traceProtean = function () {
trace(myProtean.privateGreeting); // output: undefined
trace(myProtean.publicGreeting); // output: hello
}
myProtean.traceProtean();
dynamically added or redefined functions can’t access private members of the dynamic
class
Sealed Class
A class that is not dynamic, such as the String class, is a sealed class. We cannot add properties or methods to a sealed class at run time.
dynamic class Protean {
private var privateGreeting:String = "hi";
public var publicGreeting:String = "hello";
function Protean () {
trace("Protean instance created");
}
}
If we subsequently instantiate an instance of the Protean class, we can add properties or methods to it outside the class definition. For example, the following code creates an instance of the Protean class and adds a property named aString and a property named aNumber to the instance:
var myProtean:Protean = new Protean();
myProtean.aString = "testing";
myProtean.aNumber = 3;
trace (myProtean.aString, myProtean.aNumber); // output: testing 3
Properties that we add to an instance of a dynamic class are run-time entities, so any type checking is done at run time. We cannot add a type annotation to a property that we add in this manner.
We can also add a method to the myProtean instance by defining a function and attaching the function to a property of the myProtean instance. The following code moves the trace statement into a method named traceProtean():
var myProtean:Protean = new Protean();
myProtean.aString = "testing";
myProtean.aNumber = 3;
myProtean.traceProtean = function () {
trace (this.aString, this.aNumber);
}
myProtean.traceProtean(); // output: testing 3
Methods created in this way, however, do not have access to any private properties or methods of the Protean class. Moreover, even references to public properties or methods of the Protean class must be qualified with either the this keyword or the class name. The following example shows the traceProtean() method attempting to access the private and public variables of the Protean class.
myProtean.traceProtean = function () {
trace(myProtean.privateGreeting); // output: undefined
trace(myProtean.publicGreeting); // output: hello
}
myProtean.traceProtean();
dynamically added or redefined functions can’t access private members of the dynamic
class
Sealed Class
A class that is not dynamic, such as the String class, is a sealed class. We cannot add properties or methods to a sealed class at run time.
What is the difference between Flex and AIR application?
The “Flex Framework” is a collection of AS3 classes and components used in developing RIAs. “Flex Builder” is an IDE used to develop “Flex Applications.” If we use something other than Flex Builder to develop in Flex, we need to download the Flex SDK to compile. The end result of a compiled Flex Application is an SWF file (Same as Flash). With the compiled SWF file, a user only needs to have Flash Player installed to run the application. Most Flex apps are developed, deployed to a server and then a web browser is used to serve the application to the user for use.
AIR is an alternative delivery system for Flex Applications, replacing the web server and browser so to speak. It’s primary purpose is for deploying RIAs to a user’s desktop, independent of an internet connection. AIR, also allows for the use of HTML, AJAX etc. So an AIR Application could be a collection of all these things, compiled together. To run an AIR Application, we need AIR Runtime installed on our computer.
AIR is an alternative delivery system for Flex Applications, replacing the web server and browser so to speak. It’s primary purpose is for deploying RIAs to a user’s desktop, independent of an internet connection. AIR, also allows for the use of HTML, AJAX etc. So an AIR Application could be a collection of all these things, compiled together. To run an AIR Application, we need AIR Runtime installed on our computer.
What is AMF?
AMF is a binary format based loosely on the Simple Object Access Protocol (SOAP). It is used primarily to exchange data between an Adobe Flash application and a database, using a Remote Procedure Call. Each AMF message contains a body which holds the error or response, which will be expressed as an ActionScript Object. AMF was introduced with Flash Player 6, and this version is referred to as AMF 0. It was unchanged until the release of Flash Player 9 and ActionScript 3.0, when new data types and language features prompted an update, called AMF 3.
Give similarities btw Java and Flex
Both are object Oriented, Encapsulation, Inheritance, Abstraction and Polymorphism are implemented in both of the technologies.
*The package like imports
*Availability of Classes in the scripting language
*Capabilities Arrays & ArrayCollections
*On the UI end, similarities to SWING
*The package like imports
*Availability of Classes in the scripting language
*Capabilities Arrays & ArrayCollections
*On the UI end, similarities to SWING
How do we call a method in particular ItemRenderer. Also the ItemRenderer is our own Custom Component?
.
.
< id="comboBox" dataprovider="{statesXMLList}" labelfield="@name" itemrenderer="ComboBoxItemRenderer">
.
.
< /mx:Application>
View ComboBoxItemRenderer.mxml
< ?xml version="1.0" encoding="utf-8"?>
.
<.. text="{data.@name}" onclick="MyOwnMethodThatIWantToCall()">
.
What is Layout Manager and explain the Properties and Methods?
The LayoutManager is the engine behind Flex's measurement and layout strategy. Layout is performed in three phases; commit, measurement, and layout.
The commit phase begins with a call to validateProperties(), which walks through a list (sorted by nesting level) of objects calling each object's validateProperties()method.
The objects in the list are processed by nesting order, with the most deeply nested object accessed first. This can also be referred to as bottom-up inside-out ordering.
The measurement phase begins with a call to validateSize(), which walks through a list (sorted by nesting level) of objects calling each object's validateSize() method to determine if the object has changed in size.
The layout phase begins with a call to the validateDisplayList() method, which walks through a list (reverse sorted by nesting level) of objects calling each object's validateDisplayList() method to request the object to size and position all components contained within it (i.e. its children).
Property of LayoutManager
usePhasedInstantiation : Boolean
A flag that indicates whether the LayoutManager allows screen updates between phases.
The commit phase begins with a call to validateProperties(), which walks through a list (sorted by nesting level) of objects calling each object's validateProperties()method.
The objects in the list are processed by nesting order, with the most deeply nested object accessed first. This can also be referred to as bottom-up inside-out ordering.
The measurement phase begins with a call to validateSize(), which walks through a list (sorted by nesting level) of objects calling each object's validateSize() method to determine if the object has changed in size.
The layout phase begins with a call to the validateDisplayList() method, which walks through a list (reverse sorted by nesting level) of objects calling each object's validateDisplayList() method to request the object to size and position all components contained within it (i.e. its children).
Property of LayoutManager
usePhasedInstantiation : Boolean
A flag that indicates whether the LayoutManager allows screen updates between phases.
Explain Metadata
We insert metadata tags into our MXML and ActionScript files to provide information to the Adobe Flex compiler. Metadata tags do not get compiled into executable code, but provide information to control how portions of our code get compiled.
What are the factory classes?
Factory class the factory class creates an object of the instance class to perform the effect on the target. We create a factory class instance in our application, and configure it with the necessary properties to control the effect, such as the zoom size or effect duration.
Explain ContainerCreationPolicy?
This is used with the containers like Accordian, ViewStack etc. depending upon the ContainerCreationPolicy we have set accordingly the child pages will be loaded.
ALL Immediately create all descendants.
AUTO: Delay creating some or all descendants until they are needed.
NONE: Do not create any children.
QUEUED: Add the container to a creation queue.
ALL Immediately create all descendants.
AUTO: Delay creating some or all descendants until they are needed.
NONE: Do not create any children.
QUEUED: Add the container to a creation queue.
What type of images can be loaded?
PNG, GIF, JPEG, SWF at run time and
PNG, GIF, JPEG, SWF, SVG at compile time
PNG, GIF, JPEG, SWF, SVG at compile time
What is the problem with calling setStyle()?
When we are instantiating an object and setting the styles for the first time, we should try to apply style sheets rather than use the setStyle() method because it is computationally expensive. This method should only be used when we are changing an object's styles during run time.
What does calling preventDefault() on an event do? How is this enforced?
Prevent defaults helps skipping the default behaviour on any component. Like in radio Button when we will click it will get selected, but if we want only the skin to be changed we can use preventDefault().
What is state? What is the difference between states and ViewStack?
View Stack is to handle different MXML file e.g. TAB control. And states is the transition within single MXML file ViewStack should be used where there is complete change in the controls used and States should be used when we just want to add or remove a few components based on certain conditions. Login/Registration/Forgot password is the best example for using States as each page will either add or remove to the already existing one.
What is the difference between sealed class and dynamic classes?
Sealed Classes: ActionScript 3.0 introduces the concept of sealed classes. A sealed class possesses only the fixed set of properties and methods that were defined at compile time; additional properties and methods cannot be added. This enables stricter compile-time checking, resulting in more robust programs. It also improves memory usage by not requiring an internal hash table for each object instance. Dynamic classes are also possible using the dynamic keyword. All classes in ActionScript 3.0 are sealed by default, but can be declared to be dynamic with the dynamic keyword.
Dynamic classes A dynamic class defines an object that can be altered at run time by adding or changing properties and methods. A class that is not dynamic, such as the String class, is a sealed class. We cannot add properties or methods to a sealed class at run time.
Dynamic classes A dynamic class defines an object that can be altered at run time by adding or changing properties and methods. A class that is not dynamic, such as the String class, is a sealed class. We cannot add properties or methods to a sealed class at run time.
What is the difference between httpService and Data Service?
Basically, Flex allows three types of RPC services: HttpService, WebServices, and RemoteObject Services.
In Flex, using the “RemoteObjects specifies named or unnamed sources and connects to an Action Message Format (AMF) gateway, whereas using the HTTPService and WebService use named services or raw URLs and connect to an HTTP proxy using text-based query parameters or XML”. Specifically, HTTPServices use raw HTTP requests, WebServices use the SOAP protocol and RemoteObjects uses AMF3.
The Flex presentation layer communicates with the business layer by using Flex data services, which are objects we insert in a Flex file. Specifically, we can use Flex data services to interact with the following:
* Web services
* HTTP services
* Remote objects
A Flex data service is an object we insert in an MXML file to communicate with the business layer of a multi-tier application. We use data services to send and receive data from web services, HTTP URLs, and remote objects such as server-based Java objects. An HTTP service is nothing more than an HTTP request to a URL. The primary purpose of HTTP services is to retrieve XML data from an external source.
“RemoteObject provides two advantages over HTTP or SOAP.
First, while the AMF protocol uses HTTP to transfer packets, the data is transferred in a binary format that is natively understood by the Flash Player. As a result, data can move across the network more quickly and it can be deserialized more rapidly than text-based formats such as XML. Both of these result in performance gains, particularly where large sets of data are involved.
Secondly, RemoteObject provides significant productivity advantages. The remoting service, which runs on our server, automatically marshals data between AMF and our server-side language (e.g., PHP, Java, C#). As a result, we can directly call methods on our PHP objects without having to write an XML REST interface or create web service interfaces”.
There are other ways to pass the data from Flex to a server-side Web application. For example, we can create an instance of the URLVariables object, create the data to be passed as its properties,attach URLVariables to URLRequest.data, and call navigateToURL().
In Flex, using the “RemoteObjects specifies named or unnamed sources and connects to an Action Message Format (AMF) gateway, whereas using the HTTPService and WebService use named services or raw URLs and connect to an HTTP proxy using text-based query parameters or XML”. Specifically, HTTPServices use raw HTTP requests, WebServices use the SOAP protocol and RemoteObjects uses AMF3.
The Flex presentation layer communicates with the business layer by using Flex data services, which are objects we insert in a Flex file. Specifically, we can use Flex data services to interact with the following:
* Web services
* HTTP services
* Remote objects
A Flex data service is an object we insert in an MXML file to communicate with the business layer of a multi-tier application. We use data services to send and receive data from web services, HTTP URLs, and remote objects such as server-based Java objects. An HTTP service is nothing more than an HTTP request to a URL. The primary purpose of HTTP services is to retrieve XML data from an external source.
“RemoteObject provides two advantages over HTTP or SOAP.
First, while the AMF protocol uses HTTP to transfer packets, the data is transferred in a binary format that is natively understood by the Flash Player. As a result, data can move across the network more quickly and it can be deserialized more rapidly than text-based formats such as XML. Both of these result in performance gains, particularly where large sets of data are involved.
Secondly, RemoteObject provides significant productivity advantages. The remoting service, which runs on our server, automatically marshals data between AMF and our server-side language (e.g., PHP, Java, C#). As a result, we can directly call methods on our PHP objects without having to write an XML REST interface or create web service interfaces”.
There are other ways to pass the data from Flex to a server-side Web application. For example, we can create an instance of the URLVariables object, create the data to be passed as its properties,attach URLVariables to URLRequest.data, and call navigateToURL().
Difference between Flex 2.0 and Flex 3.0
• Native support for Adobe AIR – Flex 3 introduces new components and incorporates the Adobe AIR development tools into the SDK and Flex Builder.
• Persistent framework caching – We can make Flex 3 applications as small as 50K when leveraging the new Flash Player cache for Adobe platform components. In fact the size of the resulting swf size had reduced for a larger bit.
• Flex Builder productivity enhancements – Flex Builder 3 introduces refactoring support, new profilers for performance and memory tuning, and code generation tools for data access.
• Integration with Creative Suite 3 – The Flex Component Kit for Flash CS3 allows Flash CS3 users to build components that can be seamlessly integrated into a Flex application, while Flex Builder 3 adds new wizards for importing assets from CS3 applications as skins.
• Advanced DataGrid – The Advanced DataGrid is a new component that adds commonly requested features to the DataGrid such as support for hierarchical data, and basic pivot table functionality.
• First steps toward open source flex. As a first step toward making Flex an open source project, Adobe have opened up the Flex and Flex Builder bug tracking system to the public, as well as published detailed roadmap information.
Enhanced Features like Faster compilation time, SWF file size reduction, Flex/Ajax Bridge, Advanced DataGrid, Interactive debugging, Cross-Domain, Versionable, Easy to Use, Security and Code Signing, Failover and Hosting, Cross-Domain RSL, Advanced DatagridDeep Linking, Resource Bundles and Runtime Localization, Flex Component Kit for Flash CS3, Compilation, Language IntelligenceRefactoring, Class Outline, Code Search, Profiler, Module Support, Multiple SDK Support, Skin Importer, Design View Zoom/Pan, Design Mode support for ItemRenderers, Advanced Constraints, CS3 Suite integration, CSS Outline, CSS Design View, Flex 3 SDK Skinning/Style Enhancements
• Persistent framework caching – We can make Flex 3 applications as small as 50K when leveraging the new Flash Player cache for Adobe platform components. In fact the size of the resulting swf size had reduced for a larger bit.
• Flex Builder productivity enhancements – Flex Builder 3 introduces refactoring support, new profilers for performance and memory tuning, and code generation tools for data access.
• Integration with Creative Suite 3 – The Flex Component Kit for Flash CS3 allows Flash CS3 users to build components that can be seamlessly integrated into a Flex application, while Flex Builder 3 adds new wizards for importing assets from CS3 applications as skins.
• Advanced DataGrid – The Advanced DataGrid is a new component that adds commonly requested features to the DataGrid such as support for hierarchical data, and basic pivot table functionality.
• First steps toward open source flex. As a first step toward making Flex an open source project, Adobe have opened up the Flex and Flex Builder bug tracking system to the public, as well as published detailed roadmap information.
Enhanced Features like Faster compilation time, SWF file size reduction, Flex/Ajax Bridge, Advanced DataGrid, Interactive debugging, Cross-Domain, Versionable, Easy to Use, Security and Code Signing, Failover and Hosting, Cross-Domain RSL, Advanced DatagridDeep Linking, Resource Bundles and Runtime Localization, Flex Component Kit for Flash CS3, Compilation, Language IntelligenceRefactoring, Class Outline, Code Search, Profiler, Module Support, Multiple SDK Support, Skin Importer, Design View Zoom/Pan, Design Mode support for ItemRenderers, Advanced Constraints, CS3 Suite integration, CSS Outline, CSS Design View, Flex 3 SDK Skinning/Style Enhancements
different ways of using Style sheet in Flex
Using external style sheets, Using local style definitions, Using the StyleManager class ,Using the setStyle() and getStyle() methods, Using inline stylesLoading style sheets at run time.
How many events are fired when your focus goes in one text box, you enter some text and then press tab.
PreinitializeHandler(),
initializeHandler(),
itemEditBegin,
itemEditEnd,
creationComplete()
initializeHandler(),
itemEditBegin,
itemEditEnd,
creationComplete()
Types of Binding in Flex
Using the curly braces ({}) syntax
Using ActionScript expressions in curly braces
Using the tag in MXML
Using bindings in ActionScript(BindingUtils)
Using ActionScript expressions in curly braces
Using the tag in MXML
Using bindings in ActionScript(BindingUtils)
Life cycle of Flex Application/Component
Preinitialize: The application has been instantiated but has not yet created any child components.
Initialize: The application has created child components but has not yet laid out those components.
creationComplete: The application has been completely instantiated and has laid out all components
Initialize: The application has created child components but has not yet laid out those components.
creationComplete: The application has been completely instantiated and has laid out all components
Subscribe to:
Posts (Atom)
