Wednesday, February 15, 2012

Good Flex Interview Questions [Flex Basics]

Well let me clarify one thing: This post is not exhaustive list of Flex interview questions. Rather there can be no post covering all possible interview questions for any technology. I have experienced the lack of good interview questions for Flex on web, so I have created this post.

I have taken interview of Flex developers (ranging 3 to 8 years experience) and have asked different questions (obviously based on experience things change). I too have attended many interviews so thought about writing-down some good flex interview questions. So Lets start :).

Question: What is Flex? 
Answer: Flex is an application framework (yes it is a framework!!) that allows developers to build rich applications for desktop (using AIR), web, mobiles and tablets (iOS, android, blackberry etc). The web applications (SWF Files) run in Flash Player which is available in more than 90% computers across the world. For desktop-based applications AIR is needed. There are two main building blocks for development in Flex: ActionScript (used mainly for Logic part) and MXML (used mainly for declaration of tags and components etc). More can be read here:
http://en.wikipedia.org/wiki/Adobe_Flex
http://flex.org/what-is-flex/
http://stackoverflow.com/questions/59083/what-is-adobe-flex-is-it-just-flash-ii
http://www.adobe.com/devnet/flex/videotraining.html

Question: What are the differences between Flex 3 and Flex 4?
Answer: There can be lot of syntactic or other differences between the two, but major difference is: In Flex 4 the architecture of components (most of) have got changed. These components (called Spark the older ones in Flex 3 are called Halo) have separated the role of developer and designer. Spark components have one main core component class (written in actionscript) that contains the main logical part and one Skin class that handles all the visual aspects. We can say core component is skeleton and skin is its visual appearance. For example spark button has one core Button class and one skin class for it. More can be read here:
http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html
http://blog.everythingflex.com/2009/05/12/flex-3-vs-flex-4-state-management/

Question: What are the advantages and disadvantages of using Flex? And why Flex wins over other technologies?
Answer: Flex is very mature component-based development framework that reduces the development time and gives very good results. There are plenty of advantages: Easy to learn, Flash Player available widely, Works really well with other back-end technologies (specially with java), based on components so very easy to debug and fix, also has a very good IDE etc. The disadvantages are: applications used to be slightly heavy etc. But all of them can be handled to a good extent by following up best-practices and good application architecture. More can be read here:
http://www.anandvardhan.com/2007/06/26/top-10-reasons-why-flex-wins-against-silverlight/
http://techadam.wordpress.com/2009/07/08/advantages-and-disadvantages-of-flex/

If you want to read about Flex architecture then there are some good posts already on the net:
http://www.dehats.com/drupal/?q=node/32
http://www.adobe.com/devnet/flex/architecture.html

Well now we will move to other basic questions about Flex.

Question: What are the characteristics of a constructor in action script?
Answer: The main characteristics are:
1. No return Type
2. Should be declared public
3. Might have optional arguments.
4. Cannot have any required arguments if we use it as an MXML tag
5. Calls the super() method to invoke the superclass’s constructor.
If we do not define a constructor, the compiler inserts one for us and adds a call to super().
However, it is considered a best practice (not compulsion) to write a constructor and to explicitly
call super(), unless the class contains nothing but static members. If we define the constructor,
but omit the call to super(), Flex automatically calls super() at the beginning of our constructor.

Question: What is the difference between Viewstack vs Viewstate?
Answer: Actually ViewStack and ViewState are not related. View states give one way to change
the look and feel of a component in response to user action. We can also use navigation
container e.g. Acordion, ViewStack, Tab navigator etc. Choice of selecting navigation container or
states depends upon requirement of application.
1. View stack is a component used to display different views (normally different data), one
at a time. View states are related views of a single set of data. For example normal view
and advanced view for a image.
2. In ViewStack components can not be shared easily between the different views, they had
to be created each time view is changed. For example if we want a search box in every
view, then it has to be created in every view. States work with transitions. We can apply
various changes to a same component in various states. They will appear according to
states.

Question : Can we have overloading in action script?
Answer: Overloading is not allowed in action script. What we can do is to use – default argument
or rest (….) parameter.
public function foo(arg1:Object = null, arg2:Object = null)
{
}
public function foo(arg1:String, ...args)
{
}

Question : What are the differences and similarities in Action script and Java?
Answer:
Similarities: Both Action Script and Java are
Object Oriented
Use Single Inheritance
Have a Base Object Class
Use strongly typed variables
Have Packages, Classes and interfaces
Support Public, Protected and Private methods and variables
Support static functions and variables
Support try/ catch/ finally blocks for exception handling
Differences: Action Script Java
AS has get/set methods.
AS supports dynamic classes.
AS supports closure functions.
AS supports optional functional arguments.
AS doesn’t allow private classes or constructors.
AS doesn’t have any support for overloading but Java has good support for it.

Question: What is a metadata tag?
Answer: These tags provide information to Flex compiler regarding the usage of our component. Examples are Bindable, Event, DefaultProperty, Inspectable etc.

Question: Does Exclude or ExcludeClass really excludes the data or class?
Answer: Exclude(and ExcludeClass) tags simply influence the set of choices that are available
in Flex Builder. They don’t exclude the classes from linking, which is a general misconception.
There are MXML options to say “I want to treat this symbol as exteranally defined” . Depending
on how we compile our application, generally the classes that are included are those that are
referenced from the root application or classes, either directly or via some other class that is
referenced directly or not from the root application or classes. The -link-report mxmlc option is
very useful in that it tells us 1) what all is in our swf, and 2) who depended on each class to cause
it to be included.

Question: Can we define a constructor for MXML?
Answer: NO, if we do compiler throws an error. For many components we can write event
listeners and we can use them instead of constructor. For example depending upon the
component we can write listener for preinitialize, initialize and creationComplete.
These events are defined by UIComponent class and inherited by all its sub classes. If we
create an MXML component then that is not a sub class of UIComponent. Therefore we cannot
take advantage of that. But we can implement IMXMLObject interface and then implement the
IMXMLObject.initialized() method. Flex calls this method after it initializes the properties
of the component.

<!-- mxmlAdvanced/myComponents/ObjectComp.mxml -->

<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml"

implements="mx.core.IMXMLObject">

<mx:Script>

<![CDATA[

// Implement the IMXMLObject.initialized() method.

public function initialized(document:Object, id:String):void

{

trace("initialized, x = " + x);

}

]]>

</mx:Script>

<mx:Number id="y"/>

<mx:Number id="z"/>

<mx:Number id="x"/>

</mx:Object>

Question: Give some idea of Class Hierarchy Diagram? (Yet to update)
Answer: The class hierarchy diagram is shown below. One point that needs attention is
UIComponent inherits from FlexSprite class (not shown) which adds nothing more than a
toString() method.



Question: What is a filter function?
Answer: We use this function to limit the data view in the collection to a subset of source data
object. The function must take a single Object parameter, which corresponds to a collection item,
and must return a Boolean value specifying whether to include the item in the view.

Question: What is a view cursor?
Answer: A cursor is a position indicator; it points to a particular item in the collection. We use
view cursor to traverse items in a collection’s data view and modify the data in collection. A view
cursor includes following methods –
1. The moveNext() and movePrevious() to move the cursor forward or backward. Use
beforeFirst or afterLast properties to check whether we have reached the bounds.

2. The findAny(), findFirst() and findLast() methods move the cursor to an item
that matches the parameter.


Question: What events are used by the Collections?
Answer: Collections dispatch CollectionEvent, PropertyChangeEvent and FlexEvent objects.
 Collections dispatch a CollectionEvent when there is a change in collection. The
property kind for a CollectionEvent object can be used to find which kind of change
occurred. This property is compared against CollectionEventKind constants to find
what the change was for example, UPDATE etc.
 The CollectionEvent object includes an items property that is an array of objects. For
ADD and REMOVE kind events this contains added or removed items, but for UPDATE it
contains an array of PropertyChangeEvent objects.
 PropertyChangeEvent class has kind property to indicate the way in which property
changed. This can be determined by comparing kind property with
PropertyChangeEventKind constants, for example UPDATE. This event object also has
properties to indicate the values before and after the change.
 View cursor objects dispatch a FlexEvent with type property
mx.events.FlexEvent.CURSOR_UPDATE when the cursor position changes.

Question: What is the use of disableAutoUpdate method?
Answer: This method prevents the events that represent changes to the underlying data from
being broadcasted by the view. It also prevents collection from being updated. This method is
useful where multiple items in collection are being edited at once. By disabling the auto update
the changes are received as a batch instead of multiple events. Also in a DataGrid this method
prevents update to the collection while a specific item is selected. When item is no longer
selected the DataGrid controls calls enableAutoUpdate() method.

Question: What coordinate systems are supported by Flex?
Answer: Three – global, local and content. Global are with respect to the upper-left corner of
Stage in Adobe Flash Player and Adobe® AIR™. Local coordinates are relative to the upper-left
corner of the component. Content coordinates are relative to the upper-left corner of the
component's content.


When we use local coordinates reported in a event object, such as MouseEvent localX and
locallY properties these values are mouse coordinates relative to event target. The target may
be a subcomponent e.g. UITextField, in a Button component and not Button itself. In such cases
we must convert local coordinates into global coordinate system and then convert global to
content coordinate system. All Flex components provide two read-only properties
contentMouseX and contentMouseY and six methods to convert in between the coordinates
e.g. contentToGlobal, contentToLocal etc.


<!-- containers\intro\MousePosition.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

backgroundColor="white">

<mx:Script>

<![CDATA[

import mx.controls.Alert;

// Handle the mouseDown event generated

// by clicking in the application.

private function handleMouseDown(event:MouseEvent):void {

/* Convert the mouse position to global coordinates. The localX and

localY properties of the mouse event contain the coordinates at which

the event occurred relative to the event target, typically one of the

colored internal Canvas controls. A production version of this example

could use the stageX and stageY properties, which use the global

coordinates, and avoid this step. This example uses the localX and

localY properties only to illustrate conversion between different

frames of reference.*/

var pt:Point = new Point(event.localX, event.localY);

pt = event.target.localToGlobal(pt);

// Convert the global coordinates to the content coordinates

// inside the outer c1 Canvas control.

pt = c1.globalToContent(pt);

// Figure out which quadrant was clicked.

var whichColor:String = "border area";

if (pt.x < 150) {

if (pt.y < 150)

whichColor = "red";

else

whichColor = "blue";

}

else {

if (pt.y < 150)

whichColor = "green";

else

whichColor = "magenta";

}

Alert.show("You clicked on the " + whichColor);

}

]]>

</mx:Script>

<!-- Canvas container with four child Canvas containers -->

<mx:Canvas id="c1"

borderStyle="none"

width="300" height="300"

mouseDown="handleMouseDown(event);">

<mx:Canvas

width="150" height="150"

x="0" y="0"

backgroundColor="red">

<mx:Button label="I'm in Red"/>

</mx:Canvas>

<mx:Canvas

width="150" height="150"

x="150" y="0"

backgroundColor="green">

<mx:Button label="I'm in Green"/>

</mx:Canvas>

<mx:Canvas

width="150" height="150"

x="0" y="150"

backgroundColor="blue">

<mx:Button label="I'm in Blue"/>

</mx:Canvas>

<mx:Canvas

width="150" height="150"

x="150" y="150"

backgroundColor="magenta">

<mx:Button label="I'm in Magenta"/>

</mx:Canvas>

</mx:Canvas>

</mx:Application>

There are many topics touched during interview: Event, Binding, Datagrid and other visual components, Item Renderer, Item Editor, Component Lifecycle, Custom Component Creation, Functions to override, Styling and Skinning, etc etc etc.

Lets start with Event. This simple topic can have a plethora of questions.Some of them are below:


What is an Event? 
Why do we need Events? 
What are its different phases?
What are the target and currentTarget properties? 
During which phase these two point to same component?
Which function is responsible for setting the target property of an event?
 How can we catch an event during capture and bubble phase? 
What is a cancellable event? 
Why does preventDefault () not work with all the events?
What are the differences between stopPropagation() and stopImmediatePropagation()?
Why do we use updateAfterEvent() with MouseEvent types?
What is an event listener? How can we add event listeners in action script and MXML? 
What is the use of 'useWeakReference' parameter in addEventListener() function?
How can we pass additional parameters when we add a listener using action-script?
What are the differences between creationComplete() and applicationComplete() events?

Why do we need to remove an event listener if we have added it? 
Why adding an event listener in actionscript better than adding using MXML?
Why do we need Event metadata tag and why we need to use this while writing custom Component?
Can we have multiple listeners for single event? 
Can we have multiple events and single listener?
What is a custom event and why do we need it?
What is a Display List and how event traverses in it?
Why do we need to implement clone() and toString() method for our custom event?

What are the best practices for custom event?
What is an EventDispatcher class? Why do we extend this class sometimes?
How can we define inner event listener or closure function?

This is simply a tip of iceberg. There is no short cut. I have answered all these questions here.

Next good topic is Binding. This is the topic where even experienced developers get confused. Some of the good questions in Binding are:


What is an Binding? 
Why do we need data binding and when it happens?
What are bindable getter and setters?
What event is by default dispatched by bindable getters/setter?
What is difference between [Binding] , [Binding("eventName")]
Why do we need to specify and dispatch event in bindable getters/setters?
What are read-only and write-only properties? What is the need of them?
What are the five main  ways of using Binding?
How to use data bindign with data model?
How can we define Binding in MXML and ActionScript? Which one is better?
Can we bind a single source to more than one destinations?
What are implicit and explicit binding techniques?
What is bi-directional or two-way binding?
What are the problem with using curly braces for Binding?
What is a change watcher and how to use it?
What is the importance of 'useWeakReference' in BindingUtils.bindSetter() method?
How can we bind an object?
Why binding does not get triggerd while changing attributes of an bindable Object?
When shall we use ObjectProxy rather than Object for Binding?
How can we create a Bindable Object?
Difference between compile time vs runtime binding?
How to use Bindable Metadata tag?
What is bindable working chain and how does it work?
What is trubo Binding and what problems does it solve?


Again this is not an exhaustive list. There is no short cut. I have answered all these questions in three parts here


Question: What is an ItemRenderer and how does it work?
Answer: In very simple terms an item renderer is something that  renders an item. An item basically is a value-object in most of the cases. Suppose we want to show the sales records for 15 items. We may keep a variable growth index which vary from +5 to -5 representing extreme growth (+5), neutral (0) and extreme decline (-5) in sales. Then rather than showing these value as one of the column in a datagrid we may better like to show images for thumbs-up (+5), thumbs down (-5) and a dash for neutral. So this is one scenario where it may be helpful. So we need one box or something to take our value inside and then show proper image. That something is item-renderer. 

Now if we have 10,000 records and at any moment of time only 25 are visible then it does not make sense to have 10,000 item-renderers as it can be a performance issue. Flex creates only those many item-renderers those are needed (In our example 25 + some more). Then when user scrolls the items/records and when new set of records are visible the old item-renderers are re-used.  We can forcefully ask Flex to create 10,000 item-renderers also by setting one variable useVirutalLayout to false (by default it is true). In Flex 4 easiest way is to extend ItemRenderer class. A Datagrid by default uses a Label as item renderer. You can read some best practices here.

Question: How an ItemRenderer is different from ItemEditor? Can we use an ItemRenderer as ItemEditor as well?

Answer: If ItemRenderer is used to render (show), ItemEditor is used to edit. This is handy in may situations. Consider our rating example only: If user wants to assign some rating then we may allow him to rate 0 to 5. When ever he will select any record to change the rating he would click on existing rating (a label). When he clicks item edit will begin, then we can show a drop-down havign values from 0 to 5 the moment user selects the value (valueCommit event) it will be assigned and replace the old value. We can also use renderer as an editor (for example for datagrid) as well by setting property rendererIsEditor to true.



Question: What is a dynamic class? And how it is different from a sealed class?
Answer: 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 sealedclass. You 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");
    }
}

Part Two here.

So Did you find this post helpful? What would you like to be improved/added? Please spent some time to provide your feedback that can help improve it.

24 comments:

achieverdev said...

Gt8 question , i wolud like to more core actionscript 3.0 and flex freamwork related question .

Akhil said...

Sure I am having some more AS questions in mind and will update.

Any specific framework?

Ragav said...

Buddy.This is awesome. Can you please post some advanced concepts in AS

fx4power said...

Nice

Can you put more on the server side data related technologies like LCDS And Blaze Ds , AMF PHP

Akhil said...

Thanks Ragav. I will surely add some more advances questions on Action script pretty soon as I am slightly busy with my work schedule. Thanks and Keep visiting my blog :)

Akhil said...

Thanks fx4Power.

I am planning up to post some basics and very tough (Really tough) questions on LCDS/ BlazeDS and BlazeDS Spring integration pretty soon. I am analyzing the questions to post some real good questions. Thanks and Keep visiting :)

ZIA UR REHMAN said...

I am new to Adobe flex and java integration and i found good stuff on your blog.
Thanks, keep posting...

Akhil Mittal said...

Thanks ZIA. Will post new stuff pretty soon!!

Surbhi Agrawal said...

Hello Akhil,
I m doing an application in Flex & got stuck at some point.I am exporting an excel file in my app & 3 col headers of that excel file i want to be displayed as x-axis of my bar graph & for each of these cols from excel file it should check for a condition based on which bar chart will be displayed.
But i m not getting how to go for it.
Can u help me for tht.

Akhil Mittal said...

Surbhi, I have one example of export to excel in cookbook
http://cookbooks.adobe.com/post_Import_Export_data_in_out_of_a_Datagrid_in_Flex-17223.html

May be it can be tweaked a little for your requirements. If it does not may be you can drop me an email about what you want.

Mohidheen Kadhar said...

Fantastic work..I searched for flex related questions and answers.but of no use.I got only redundant items.but here what u have given is newer collections of Q&A.Thanks anyway.

anirudh said...

Hello Akhil,
I found these Questions very helpful in understanding basic concepts.could you please add questions on cairngorm framework.

Siddhesh Kumbhar said...

These are very good questions...thanks a bunch....ll wait for more of your posts.

huyanh said...

Thank you !!!
Your post save us all

Akhil Mittal said...

Siddhesh,

I am not using cairngorm any more. But some good questions can be about its disadvantages like:

so many classes
almost every class is singleton: command, service locator blah blah. Singleton is not helpful all the time etc.

I will advise you to go to adobe homepage and get the concepts from there.

I am using Parsley and that is is an awesome framework based on dependency injection and IOC.

Akhil Mittal said...

I am sorry. Previous comment was for anirudh.

Arun said...

Akhil thanks for these question can u update some question for the framework in flex like parsley , mate

Arun said...

Can u send some good link for parsley and how to use this thse framework

Akhil Mittal said...

Arun,

If you want I can post some questions about Parsley. But I think the Parsley home page is the best place to learn about it.

Thanks,
Akhil

Anonymous said...

Hello Akhil,

First of all thank you so much for such a great blogs...

Actually I m working on Video Player application in Flex & got stuck at a point.I need to See the video in Full Screen mode and i did that but now the problem is i need to see the video in full screen with a given propagation.I mean as the flex behavior Full screen covers the whole screen , but i want to maintain it with our given width and height........Hope you understand my question......

Akhil Mittal said...

@Anonymous: Sorry but I did not get your problem.

JobsOnClick said...

The information which you have provided is very good. It is very useful who is looking for basic interview questions.

Tahir Alvi said...

Akhil,

You did really a nice job buddy.


Welldone.

Tahir Alvi said...
This comment has been removed by the author.