DataGrid based Matrix Component

Advanced datagrid for Matrix contains variable no of column and variable no of rows. 
Ex: if we are fetching data from backend in a datagrid such that years are placed in columns and locations are placed  in rows. User may select in any combination of years and locations for display in the datagrid with this component.


Here is a page, that shows an sample implementation of this component for demonstrating the basic functionality
http://www.flexer.info/2008/06/30/matrixgrid-component-extending-the-datagrid/

Runtime Shared Libraries (RSLs)

runtime shared libraries (RSLs) can be individually loaded, cached, and used by multiple applications.

You use RSLs to reduce the size of Flex applications and there by reduce the time required to download the application.

RSLs are SWF files whose code is used as a shared library between different application SWF files.

there are two kinds of RSLs
* signed RSLs - Signed RSLs are libraries that are signed by Adobe and may be stored in the Flash Player Cache, which can be accessed by applications from any domain.
If you are using a signed RSL, the RSL may not have to be downloaded if the RSL is already in the Flash Player Cache. Singed RSLs have a .swz extension
* unsigned RSLs - are normal SWF files and are not loaded into the Flash Player Cache. They rely on browser's cache to keep them from being downloaded.

Item Renderer

An overload of communications (Photo credit: windsordi)

list controls have default mechanism for controlling the display of data, or view. You can override that default behavior by creating a custom item renderer.You can also use custom component as an item renderer.

Note: The default layout, BasicLayout renderer doesn't respect the transformations that occur in the object's width/height/position during rotation. It still tries to layout the objects as if they were not rotated. However, if you use any other layout, like VerticalLayout or HorizontalLayout, the objects new dimensions after rotation is used.
Related articles

• Item Renderers in Practice(flexdevelopers.com)

  ---

• Creating a Custom Visual Component(flexdevelopers.com)

  ---

Model View Controller (MVC)

Model View Controller architecture partitions your system into three layers:
1. Model - Encapsulates data and behaviors related to data
2. View - Applications User Interface
3. Controller - handles data interconnetivity in the application

Skining Flex Components

A  Flex component is made up of visual elements which are set of images, SWF files, or class files that contain drawing API methods.

Skinning: the process of changing the appearance of a component by modifying or replacing its visual elements.

You can define a skins for a component using the following methods:
1. Using the setStyle() method
2. Cascading Style Sheets (CSS).

• External Styles - You can reference a CSS file in any MXML file using  the tag
• Embedded Style - You can define embedded styles in an MXML file. Embedded styles can used only in the file in which it is defined.
• Inline Styles - they are defined in MXML tag and can be used in that tag. 

Application skins can be defined in separate MXML file.

SparkSkin - class is used for skinning an flex application

 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"   
   xmlns:s="library://ns.adobe.com/flex/spark">  

All skins requires a states property with at least one state called normal state.

   <s:states>  
     <s:State name="normal" />  
     <s:State name="disabled" />  
     ....  
   </s:states>  

Metadata block contians the HostComponent directive, declare to which components the skin will be applied.

    <fx:Metadata>   
     [HostComponent("spark.components.Application")]  
   </fx:Metadata>  

Skin also defines the background shape and colors

Skin defines the container display layout and properties for the Application container's content children.

Calling JavaScript from Flex

1. Use of ExternalInterface API to access JavaScript from Flex

2. Use navigateToURL() method in Flex

Drag Manager

Adobe Flex supports Drag and Drop

Drag Manager supports following operations:
1. Select an object  (e.g. item in a List control or a Data Grid) as an Image control.
2. Drag it over another component to add it to that component.