Saturday, September 10, 2011

Flex :: Metadata tag - Event

The [Event] metadata tag is used to define the MXML property for an event and the data type of the event object that a component dispatches.

Following is the syntax for [Event] metadata tag

[Event(name="eventName", type="package.eventType")]

name property of metadata tag specifies the name of the event only.
type property of metadata tag specifies the class that defines the event including entire package.

The [Event] metadata tag is inserted before class defination in an Action Script file or in <mx:Metadata> block ina n MXML file.

If the event is not identify using type and name property defined in [Event] metadata tag then MXML compiler generates an error.

Following is an example:

ActionScript Class

[Event(name="custom_event", type="myPackage.events")]
public class MyClass extends UIComponent
{
   ...
}

MXML Document

<?xml version="1.0"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Metadata>
        [Event(name="custom_event", type="myPackage.events")]
    </mx:Metadata>

    ....
 
</mx:Canvas>

Monday, September 5, 2011

Flex :: Metadata tag - Deprecated

The [Deprecated] metadata tag marks class or class elements deprecated so that the compiler can recognize it and issue a warning when the element is used in an application.

The [Deprecated] metadata tag syntax is as follow

[Deprecated("string_describing_deprecation")]
[Deprecated(message="string_describing_deprecation")]
[Deprecated(replacement="string_specifying_replaceent")]
[Deprecated(replacement="string_specifying_replaceent",                   since="version_of_replacement")]

Insert the [Deprecated] metadata tag before a property, method or class definition to mark that element as deprecated.

[Deprecated(replacement="mycomponent.label")]
public function set text( val:String ):void
{
   ...
}

The [Event], [Effect] and [Style] metadata tag also support deprecation.
These metadata tags support the deprecatedReplacement, deprecatedSince and deprecatedMessage attributes to mark event, effect and style as deprecated.

[Event(... , deprecatedReplacement="string_specifying_replacement",
             deprecatedSince="version_of_replacement" )]

Note: For a command line compiler use show-deprecation-warnings option and set it to true.

Saturday, September 3, 2011

Flex :: Metadata tag - Bindable

The [Bindable] metadata tag enables Flex to copy the value of source property to any destination property, when any changes are made to source property.

The [Bindable] metadata tag has following syntax:

[Bindable]
[Bindable ("eventName")]

The [Bindable ("eventName")] metadata tag register the source property with Flex and dispatches event eventName when property is changed. If eventName is omitted, Flex automatically creates an event named propertyChange so that the property can be used as the source of a data binding expression

Example:


[Bindable]
public var audioLevel:uint = 50;

[Bindable ("nameChanged")]
public function get name():String
{
   return myName;
}

public function set name( val:String ):void
{
   myName = val;
   dispatchEvent(new Event( "nameChanged" ) );
}

There are some situation where data binding does not execute automatically

  • When an item of dataprovider is modified.
  • When a sub-property of a property that have [Bindable] metadata tag is modified.
  • When a [Bindable] metadata tag is associated with a property that Flash player updates automatically, such as mouseY.

There are some method that helps to execute binding that do not occur as expected.

  • The executeBindings() method of UIComponent class helps to execute all the binding for which UIComponent is destinated.
  • The executeChildBindings() method of Container and Repeater classes of Flex executes all the binding for which child UIComponent of Container or Repeater class are destinated.

The executeChildBindings() method updates user interface after making changes that does not cause binding to execute.

However, it should be noted that above method should be called only when binding do not executed automatically.



Friday, September 2, 2011

Flex :: Metadata tag - Array Element Type

In ActionScript language whenever we define an Array variable, we never specify data type of elements that Array will hold.

To allow Flex compiler to perform type checking on Array elements, we can use [ArrayElementType] metadata tag. This metadata tag allow us to specify data type of Array element.

The tag has following syntax:

[ArrayElementType("elementType")]

The property elementType of [ArrayElementType] metadata tag specifies the data type of Array elements, and can be one of the ActionScript data types, such as String, Number, uint, class or interface.

Incase of user defined class, fully qualified class name, including package detail is expected.

For Example:

....

<fx:Script>
<[!CDATA[
   [ArrayElementType("String"]
   public var strProp:Array;

   [ArrayElementType("myPackage.valueObject.data"]
   public var dataProp:Array;
...
]]>
</fx:Script>

....

Note: The MXML complier checks for proper usage of the Array elements only in MXML code; it does not checks Array usage in ActionScript code.

Tuesday, August 30, 2011

Flex Component Life Cycle

A flex component life cycle can be broadly compartmentalized into three distinct stages:

  1. Initialization
  2. Updating
  3. Destruction

This three stage bundles Six main phases of flex component life cycle which are

  1. Construction
  2. Addition
  3. Initialization
  4. Invalidation
  5. Validation
  6. Removal

Following diagram shows the association of 7 different phase to their respective lifecycle stage

Description of Life Cycle Phases

Stage 1: Initialization

Phase 1: Construction

Construction phase is very first phase of component and is triggered when component is instantiated.  For an example

var myComponent:CustomComponent = new CustomComponent();

It should be noted that constructor should perform minimalist operation. Constructor should be zero argument constructors.

Phase 2: Addition

Addition phase of component is triggered when component is added to a parent component.

this.addChild( myComponent );

The process of adding component to its parent component execute large amount of code. This is the phase where life cycle of component actually gets started.  In granularity addChild method is further divided in to three method addingChild, $addChild and childAdded method.

The addingchild method initialize parent and document reference for component child object. Also it performs style propagation and management for the component.

The $addChild method actually add component to the display list.

The childAdded method calls initialize method on the child.

Phase 3: Initialize

Initialize phase is triggered by childAdded method of Addition phase of component. The initialize method is future broken down into four sub-methods createChildren, childrenCreated, initializeAccessibility and initializationComplete. When initialize method of the component is called first FlextEvent.PREINITIALIZE event is dispatch first and then createChildren method is called.

The createChildren method is responsible for create any extended component and then adding that child component.

The childrenCreated method is responsible for enabling first Invalidate-Validate cycle of flex component life cycle.

The initializeAccessibility method is responsible to configure the component to use flash player accessibility system.

The initializationComplete method is responsible for dispatching FlexEvent.INITIALIZED event. This method marks end of Stage 1 of Flex Component Life cycle.



Stage 2: Updating

Phase 4: Invalidation

Invalidation is the first phase of flex component life cycle that gets repeated throughout the life of the component.  Invalidation phase consist of three method invalidateProperties, invalidateSize and invalidateDisplayList

The invalidateProperties method is called whenever component property is changed and that require before component to re-measure and laid out.

The invalidateSize method is called whenever some action i.e. changes in property or user action which requires the components to re-calculate its size and its children’s size.

The invalidateDisplayList method is called whenever some changes that requires component display list to be updated.

Phase 5: Validation

Validation phase consost of four methods commitProperties, measure, layoutChrome and updateDisplayList. All this method of validate phase are executed in predefined order which is

  1. commitProperties
  2. measure
  3. layoutchrome
  4. updateDisplayList

Each of the invalidate phase method correspond to validate phase method

invalidateProperties ---> commitProperties

invalidatesize          ---> measure

invalidateDisplayList ---> updateDisplayList

Thus whenever invalidate method is called LayoutManager of Flex Application keeps track of which invalidate method is called and only calls corresponding validate method during validate phase.

The fourth method of validate phase is layoutChrome, this method is responsible for creating border or padding around children content.

Thus once validate cycle of component is executed LayoutManager will make component dispatch Event.UPDATE_COMPLETE event.

Note: The Invalidate - Validate cycle of component repeat itself as an when any changes are made to the component and component is not removed from its parent.


Stage 3: Destruction

Phase 6: Removal

The last phase of a component life-cycle is removal phase. This phase is triggered when the component is no longer parented i.e., when removeChild() method is called on the parent component, passing in the component to remove as a reference.

When removeChild() method is called on parent component then three methods are fired, removingChild(), $removeChild() and childRemoved().

The removingChild() method does not perform any operation, this method can be overridden to execute tasks/operation that needs to be perform before component is removed from display stack

The $removeChild() method is actually a Flash Player level method that removes component from display stack.

The childRemoved() method removes references of component form its parents and document properties.

Once reference from component's parent is removed component can be re-parented or are available for garbage collection. Also removal of parent refrence of compoenent prevent component fromm entering the Invalidate-Validate cycle.

Wednesday, August 17, 2011

Difference between Pure MVC Multicore vs Singlecore / Standard


Recently during interview, my interviewer asks me question "What is difference between Pure MVC Multicore vs SingleCore?" and I was not able to answer even after working on the framework for past 2 years. So after interview got over I set down to find the answer for the question and here are what I found.

The Standard version of Pure MVC use Singletons to provide access to framework core actors (Façade, Model, View and Controller). Access to all the actors is through standard getInstance method. Where as in Multicore version of Pure MVC, Multitons is use to allow multiple instances of framework actors. The access to the various core actors within the framework is provided by passing a unique instance key to the getInstance method. This implies that multiple instances of the core actors may co-exist without interfering with each other. 

The Multicore variation supports modular programming allowing the use of independent program modules each with their own independent Singlecore Pure MVC.


For detail description on same topic please visit following link:  
http://lowpitch.com/blog/puremvc-multicore-vs-standard-singlecore/

Thursday, December 30, 2010

@Embed directive in Flex


@Embed directive causes flex compiler to trasncode and include images (JPG, PNG, GIF) in SWF file at compile time.
Use of this technique has following advantages

  • Images are loaded at the start of the application, so that user doesn't have to wait for images to get loaded before displaying when it is needed.
  • This technique is highly recommendate for offline application where appropriate images are included in SWF file and which will be displayed when needed instead of accessing Server for getting images
Use of this technique has one major disadvantage
  • @Embed directive increase size of SWF file.


This technique is classical example of trade-off between file size and user experience. Wisely evelaue this techniue before using it.