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.

Events during UI Component Creation

An event is a signal for the Flash Player to perform some action

Two type of events:
System Event - are dispatched by the Flex framework.
User Event - are dispatched in response to user interaction

Following are the Events dispatched during creation of a Flex Component.
1. Preinitialize  - Dispatched when a component has been created in a rough state, and no children have been created.

2. Initialize - dispatched when a component and all its children have been created, but before the component size has been determined.

3. creationComplete - Dispatched when the component has been laid out and the component is visible (if applicable). This is a system event which is used mostly to load data into the component.

Dynamic and Sealed Classes.

You can add programatically additional properties and methods at runtime to instances of a class if you mark that class at compile-time as dynamic. 



dynamic class Person{

}

// adding dynamically properties and methods to the object of the class
Person p = new Person();
p.name = "Ramesh";
p.age = 25;
p.printMe = function ():void {
trace (this.name, this.age);
}



the classes which are not marked as dynamic cannot have properties and methods added at runtime. Such classes are called sealed classes.Classes are sealed by default i.e. properties and methods cannot be added dynamically at runtime.

Sealed classes requires less memory as no internal has table is needed to store dynamic properties and have stricter compile-time checking as the compiler can provide better error feedback.

Working with Images

Resource Manager - handles access to all recources in an application. Any class that extends UIComponent, Formatter or Validator has a singleton resourceManager property which can be accessed using code below:


ResourceManager.getInstance();


To resize images set height and width properies to a percentage value (percentage values for these properties to the specified percentage of their parent container).

by default scaleContent = true and maintainAspectRatio = false

Introduction Flex UI Framework

English: A vector version of Overview_of_a_three-tier_application.png (Photo credit: Wikipedia)

the open source Flex 4.5 Framework provides

1. Rich & extended set of controls / component library 
2. Complete set of layout mechanisms.
3. Mobile-optimized components
4. Containers
5. MXML declarative language for layouting UI components & ActionScript an ECMA compliant scripting languages for writing business logic.
6. Rich class library based on ActionScript 3.0

Layout Mechanism functions
- controls look and feel
- helps in management of display area during window resizing.

Containers hold other containers and components, container lays out its children

Related articles

• 5 Steps to Develop a Basic AngularJS Application with Example(thegeekstuff.com)

  ---

mx.core.Application

To access properties and methods of the top-level Application object from anywhere in your application, you can use the application property of the Application class.

• use parentDocument property to define an DataGrid that is slightly smaller than the Application container .
• If you set the width and height properties of the child components MXML tags to percentage values, your components can also resize as your application resizes