Apply Dynamic Style :

We can apply dynamic style using flex movie clip object apply to class and transformation on it.
1) Extend UIComponent and apply transform in it.

package newExtend
{
import flash.geom.ColorTransform;
import mx.core.UIComponent;

public class newSkin extends UIComponent
{
[Embed(source='new/newskin.swf', symbol='appHeader_shade')]
public static const shade:Class;

[Embed(source='new/newskin.swf', symbol='appHeader_sholid')]
public static const solid:Class;

public function newSkin ()
{}

override protected function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
if (getStyle("backgroundColor")!=null)
{
var child:Number = this.numChildren;
for (var num:Number=0; num {
this.removeChildAt(0);
}
child = this.numChildren;

var mc_shade:* = new shade();
var mc_solid:* = new solid();
var ct:ColorTransform = mc_shade.transform.colorTransform;
ct.color = getStyle("backgroundColor");
mc_solid.transform.colorTransform = ct;
mc_shade['width'] = w;
mc_shade['height'] = h;
mc_solid['width'] = w;
mc_solid['height'] = h;
this.addChild(mc_solid);
this.addChild(mc_shade);
}
}
}
}

2) In Css Class like.
.NewStyle
{
border-skin: ClassReference("newExtend.newSkin ");
}

3) Action script coding for changing shadow and solid color
var newStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".NewStyle");
if (newStyle.getStyle("backgroundColor")!=color)
newStyle.setStyle("backgroundColor", color);

for any color when we update color in step 3 at that time the color transformation on apply movie clip id done in updateDiplayList.
This method is working from step 3 to 1 when running.

Create Custom Menu Using Menu Control

1) Create menuMxmlRenderClass: Name: customMenuRender

"<" mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"
implements="mx.controls.menuClasses.IMenuItemRenderer" ">"
"<" mx:Script ">"
"<" ![CDATA[
import mx.events.StateChangeEvent;
import mx.controls.Menu;
import mx.controls.menuClasses.IMenuItemRenderer;
private function init():void
{
var obj:Object=this.data;
if(obj!=null && obj.mnu_name!=null)
{
txtName.text=obj.mnu_name;
}
}
//Function for IMenuItemRenderer
public function get menu():Menu
{
return null;
}
public function set menu(value:Menu):void
{
}
public function get measuredIconWidth():Number{return 0;}
public function get measuredTypeIconWidth():Number{return 0;}
public function get measuredBranchIconWidth():Number{return 0;}
]] ">"
"<" /mx:Script ">"
"<" mx:Text id="txtName" / ">"
"<" /mx:VBox ">"

2) Function for parent where it will be clicked.

private var l_menu:Menu;
private function openCustomMenu(event:MouseEvent):void
{
if(l_menu==null)
{
l_menu = Menu.createMenu(this,menuContentArray);
l_menu.itemRenderer = new ClassFactory(customMenuRender);
l_menu.addEventListener(MenuEvent.ITEM_CLICK , menuMouseClickHandler);
l_menu.minWidth=160;
l_menu.styleName="menuCornerRadious";
}
var item_Menu:ArrayCollection=menuContentArray;
var xPos:Number=event.stageX + (event.currentTarget.width-event.localX);
var yPos:Number=event.stageY - ((20*item_Menu.length)/2);
l_menu.show(xPos, yPos);
// Function for gettion menu item if required
setMenuEnable();
}

private function setMenuEnable():void
{
if(l_menu!=null)
{
for(var i:int=0;i {
var obj:customMenuRender =l_menu.indexToItemRenderer(i) as customMenuRender;
if(obj)
{
// Calling menu item render function
}
}
}
}

Some function for Image Edition

Here gives some useful function of image edition


1 > Set britness ,contrast ,hue ,saturation.

private function changesColorFilter(brightness:Number, contrast:Number, saturation:Number, hue:Number):void
{
var cm:ColorMatrix = new ColorMatrix();
cm.adjustColor(brightness, contrast, saturation, hue);
var colorMat:ColorMatrixFilter = new ColorMatrixFilter(cm);
img.filters = [colorMat];
}

2 > Convert hex (uint) code to RGB:

private function ConvertToRGB(hexNum:Number):Object
{
var rgbObj:Object = new Object();
rgbObj.r = hexNum >> 16;
var tmpVal:Number = hexNum ^ rgbObj.r << 16;
rgbObj.g = tmpVal >> 8;
rgbObj.b = tmpVal ^ rgbObj.g << 8;
return rgbObj;
}

3 > Chnage image color using color matrix.

private function changesColor(red:Number, green:Number, blue:Number,imgChange:Image):void
{
var ct:ColorTransform = new ColorTransform();
var rLum:Number = 0.3086;
var gLum:Number = 0.6094;
var bLum:Number = 0.0820;

var cm:Array = [rLum, gLum, bLum, red/255, 0,
rLum, gLum, bLum, green/255, 0,
rLum, gLum, bLum, blue/255, 0,
0, 0, 0, 1, 0 ];
var colorMat:ColorMatrixFilter = new ColorMatrixFilter(cm);
imgChange.filters = [colorMat];

}

Validate in flex

Validate Dynamic using Action Script:

var email_vali:EmailValidator = new EmailValidator();
email_vali.source = emailTextBox;
email_vali.property = "text";
var emailResult:ValidationResultEvent = email_vali.validate();
if (emailResult.type==ValidationResultEvent.INVALID)
{
//Invalid
}

Validate method

"<" mx:EmailValidator id="vali_Email" source="{txt_email}" property="text" "/>"
"<" mx:StringValidator id="vali_Password" source="{txt_password}" property="text" "/>"

In Validata function

var vali:Array = new Array();
vali.push(vali_Email);
vali.push(vali_Password);
var vali_Result:Array = Validator.validateAll(vali);
if (vali_Result.length==0)
{
//Validate successfully...
}

Create dynamic tooltip

private static var toolTipList:ArrayCollection = new ArrayCollection();

public static function createToolTip(event:Event, toolTip:String, style:String = 'errorTipAbove'):void
{
var target:DisplayObject = event.currentTarget as DisplayObject;
var point:Point = new Point(event.currentTarget.x, event.currentTarget.y);
point = target.parent.localToGlobal(point);

if (style=="errorTipBelow")
{
point.y += (target.height+3);
}
else if (style=="errorTipRight")
{
point.x += (target.width+3);
}

var myTip:ToolTip = ToolTipManager.createToolTip(toolTip, point.x, point.y, style) as ToolTip;

myTip.percentWidth = 100;
myTip.styleName = "toolTipStyle";


if (style=="errorTipAbove")
{
myTip.y -= (myTip.height+3);
}

toolTipList.addItem({target: event.currentTarget, toolTip:myTip});
}

public static function destroyToolTip(event:Event):void
{
ToolTipManager.destroyToolTip(getToolTip(event.currentTarget as DisplayObject));
}

private static function getToolTip(object:DisplayObject):ToolTip
{
for (var i:Number=0; i {
if (toolTipList[i].target == object)
{
var tipUI:ToolTip = toolTipList[i].toolTip;
toolTipList.removeItemAt(i);
return tipUI;
}
}
return null;
}
Create singletone class of tooltip
In mxml control
On MouseOverEvent just pass event and tooltip and on MouseOutEvent call destroyToolTip event

Set dynamic style

Using CSSStyleDecalration object we can set style of included style sheet.

var curStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".styleName");
curStyle.setStyle("backgroundColor", 0x876543);

Call javascript from MXML and viceversa.

Using ExternalInterface we can call javascript of the page.

if (ExternalInterface.available)
{
ExternalInterface.call("javascriptFunctionName",parameter );
}

if we neet to call swf file's function from the javascript .

ExternalInterface.addCallback("javascriptFunction", HandlerFunction);

private function HandlerFunction(returnValue:String):void
{
// code
}

and in html page in script block.
function javascriptFunction()
{
swfObjectId.HandlerFunction("hello");
}

Using Flash Movie Clips Color Transformation

Using Flash Movie Clips Color Transformation

public var obj_cls:Class;
public var objDetails:ApplicationDomain;

obj_cls = objDetails.getDefinition("flashclassname") as Class;
var obj_mov:MovieClip = new obj_cls() as MovieClip;

obj_mov.transform.colorTransform=0x989898;

Custom Tooltip

Create a custom Tooltip:
1) Create a custom tooltip class:
i) implements="mx.core.IToolTip"
ii) Action Script:
[Bindable]
public var objnode:Array;
private function init():void
{
if(objnode!=null)
{
//Action
}
}
public var _text:String;

public function get text():String {
return _text;
}
public function set text(value:String):void {
}
private function complateHandler():void
{
this.height=(26*objnodelength)+20;
}

2) On any control create tool tip event:

private function createToolTipHandler(event:ToolTipEvent,type:Number):void
{
var toolTip:myCustomToolTip = new myCustomToolTip();
toolTip.colornode = nodearraysource;
toolTip.percentHeight=100;
toolTip.percentWidth=100;
event.toolTip = toolTip;

}

Create User define Menu

Here i give user define menu class:

package com
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;

import mx.collections.ArrayCollection;
import mx.controls.LinkButton;
import mx.core.Application;
import mx.managers.PopUpManager;

public class MgrSmallMenu
{
private static var _instance:MgrSmallMenu;
// Menu List for current generated menu
private static var menuList:ArrayCollection = new ArrayCollection();

public static function get instance():MgrSmallMenu
{
if(!_instance){
_instance = new MgrSmallMenu();
}
return _instance;
}
public static function createMenu(event:MouseEvent,clsType:*):*
{
var curState:Boolean=checkMenuOpen(event.currentTarget as DisplayObject,clsType);

destroyMenuChild();
if(!curState)
{
var target:DisplayObject = event.currentTarget as DisplayObject;
var myMnu:* = clsType(PopUpManager.createPopUp(target, clsType, false));

myMnu.x = event.stageX - (myMnu.width +event.localX+5);
if(myMnu.x<=5)
myMnu.x = event.stageX + (target.width - event.localX);
myMnu.y = event.stageY - (event.localY - 3);
menuList.addItem({myMenu:myMnu,curTarget:event.currentTarget,classType:clsType});
Application.application.addEventListener(MouseEvent.MOUSE_DOWN ,appMouseClickHandler);
return myMnu;
}
return new clsType();
}

public static function destroyMenuChild():void
{
for (var i:Number=0; i {
PopUpManager.removePopUp(menuList[i].myMenu );
menuList.removeItemAt(i);
}
Application.application.removeEventListener(MouseEvent.MOUSE_DOWN ,appMouseClickHandler);
}

public static function appMouseClickHandler(event:MouseEvent):void
{
var lnkBtn:LinkButton=event.target as LinkButton;
if(lnkBtn)
{
if(!checkCurHitObject(lnkBtn))
destroyMenuChild();
}
else
destroyMenuChild();
}
private static function checkCurHitObject(selbtn:LinkButton):Boolean
{
for each(var itemObj:Object in menuList)
{
if(itemObj.curTarget as LinkButton)
{
var openLnkBtn:LinkButton= itemObj.curTarget as LinkButton;
if(openLnkBtn == selbtn)
{
return true;
}
}
}
return false;
}
private static function checkMenuOpen(selTarget:*,selClsType:*):Boolean
{
for each(var itemObj:Object in menuList)
{
if(itemObj.curTarget==selTarget && itemObj.classType==selClsType)
{
return true;
}
}
return false;
}
}
}

AdobeAIR, Check Net Connection

Using URLMonitor we can check status of client net connection .

import mx.states.SetStyle;
import mx.controls.Alert;
import air.net.URLMonitor;
private var monitor:URLMonitor;
private function init():void
{
// URLRequest that the Monitor Will Check
var url:URLRequest = new URLRequest("http://www.google.com");
// Checks Only the Headers - Not the Full Page
url.method = "HEAD";
// Create the URL Monitor and Pass it the URLRequest
monitor = new URLMonitor(url);
// Set the Interval (in ms) - 3000 = 3 Seconds
monitor.pollInterval = 3000;
// Create the Event Listener that Will Be Fired When Connection Changes
monitor.addEventListener(StatusEvent.STATUS,on_connection);
// Start the URLMonitor
monitor.start();
}
private function on_connection(event:StatusEvent):void
{
txt_NetStatus.setStyle("fontWeight","bold");
if(monitor.available==true) // OR USED if(event.code=="Service.available")
{
txt_NetStatus.text="NET CONNECTION AVAILABLE";
txt_NetStatus.setStyle("color","green");
vb.setStyle("backgroundColor","#B0EA8F");
}
else if(monitor.available==false) // OR USED if(event.code=="Service.unavailable")
{
txt_NetStatus.text="NO NET CONNECTION FOUND";
txt_NetStatus.setStyle("color","red");
vb.setStyle("backgroundColor","#FFAF56");
}
}

PopUpManager Closing using voGlobal Class

Here give voGlobal class in this common function of closing popup

----------------------
package com.newVlaueObject.vo
{
import flash.events.KeyboardEvent;
import flash.ui.Keyboard;
import mx.core.IFlexDisplayObject;
import mx.managers.PopUpManager;

public class voGlobal
{
private static var _instance:voGlobal;
public function voGlobal(enforce:SingletonEnforcer):void
{
}
public static function get instance():voGlobal
{
if(voGlobal._instance == null){
voGlobal._instance = new voGlobal(new SingletonEnforcer());
}
return voGlobal._instance;
}
public function titleWindow_keyDown(event:KeyboardEvent):void
{
if (event.charCode == Keyboard.ESCAPE) {
PopUpManager.removePopUp(event.currentTarget as IFlexDisplayObject);
}
}
}
}
class SingletonEnforcer{}
--------------------------------------------

In each Popup object give keydown Event and init event

KeyDown Event is

keyDown="{voGlobal.instance.titleWindow_keyDown(event)}"

In Init event you just focus any one component of popup object
like

txtName.setFocus();

Check for hit with other object

In flex it gives function hitTestObject(curObject) that gives boolean value that current object is hit with there parent 's or not.
Here give sample code

var bl:Boolean = parentObject..hitTestObject(current);
if(bl)
Alert.show("object is hit with parent","",4);

Dragging , UIComponent

In Flex each container have it's own UIComponent .
We can use dragging using this UIComponent and also set current child position of canvas.

private function dgMouseUp(event:MouseEvent):void
{
UIComponent(event.currentTarget).stopDrag();
}
private function dgMouseDown(event:MouseEvent):void
{
Canvas(can_name).setChildIndex(UIComponent(event.currentTarget),_dp.length-1);
var area:Rectangle = new Rectangle(0, 0, can_name.width - event.currentTarget.width, can_name.height - event.currentTarget.height);

UIComponent(event.currentTarget).startDrag(false, area);
}