22 FebProcess of custom components in Adobe Flex using Action Script .

Process of Coustome componet

a) Extend which componts wat to customise (eg: UIComponent.)

public class ModalText extends UIComponent

————————————————————-

b) Implement the class constructor.

public function ModalText()

{

super();

}

————————————————————-

c) Define variables for the two child components.

private var text_mc:TextArea;

————————————————————-

d) Embed new skins used by the Button component.

[Embed(source="button.png")]

public var modeUpSkinName:Class;

————————————————————-

e) Implement the createChildren() method.

override protected function createChildren():void

{

super.createChildren();

addChild(text_mc);

}

————————————————————-

f) Implement the commitProperties() method.

override protected function commitProperties():void

{

super.commitProperties();

invalidateDisplayList();

}

————————————————————–

g) Implement the measure() method.

override protected function measure():void

{

super.measure();

var buttonWidth:Number = mode_mc.getExplicitOrMeasuredWidth();

var buttonHeight:Number = mode_mc.getExplicitOrMeasuredHeight();

measuredWidth = measuredMinWidth = text_mc.measuredWidth + buttonWidth;

measuredHeight = measuredMinHeight = Math.max(mode_mc.measuredHeight,buttonHeight) + 10;

}

—————————————————————

h) Implement the updateDisplayList() method.

override protected function updateDisplayList(unscaledWidth:Number,

unscaledHeight:Number):void

{

super.updateDisplayList(unscaledWidth, unscaledHeight);

}

—————————————————————

i) Add methods, properties, and metadata.

  • Share/Bookmark

17 FebDataGrid Pagination in Adobe Flex

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”init()” >

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.controls.Alert;

[Bindable]

public var myDataProvider:ArrayCollection = new ArrayCollection(

[{label:"AK", data:"Alaska"},

{thumbnail:"AL", caption:"Alabama"},

{thumbnail:"AR", caption:"Arkansas"},

{thumbnail:"AZ", caption:"Arizona"},

{thumbnail:"CA", caption:"California"},

{thumbnail:"CO", caption:"Colorado"},

{thumbnail:"CT", caption:"Connecticut"},

{thumbnail:"DC", caption:"District of Columbia"},

{thumbnail:"WI", caption:"Wisconsin"},

{thumbnail:"WV", caption:"West Virginia"},

{thumbnail:"WY", caption:"Wyoming"}

]);

[Bindable]

private var pagedDataProvider:ArrayCollection;

[Bindable]

private var curPage:int=1;

[Bindable]

private var pageCount:int=0;

private static var pageNumber:int=3;

public function init():void{

pagedDataProvider=new ArrayCollection();

pageCount=(myDataProvider.length/pageNumber)+1;

curPage=1;

if(pageCount > 1){

btnNext.enabled=true;

}

if(myDataProvider.length >= pageNumber){

for(var i:int=0;i<pageNumber;i++){

pagedDataProvider.addItem(myDataProvider.getItemAt(i));

}

}else{

pagedDataProvider=myDataProvider;

}

}

private function getNextPage():void{

var start:int=pageNumber*curPage;

var end:int=0;

if((myDataProvider.length-start)>pageNumber){

end=start+pageNumber;

}else{

end=myDataProvider.length;

}

pagedDataProvider=new ArrayCollection();

for(var i:int=start;i<end;i++){

pagedDataProvider.addItem(myDataProvider.getItemAt(i));

}

curPage++;

btnPrevious.enabled=true;

if(curPage==pageCount){

btnNext.enabled=false;

}

}

private function getPreviousPage():void{

curPage–;

btnNext.enabled=true;

if(curPage==1){

btnPrevious.enabled=false;

}

var start:int=pageNumber*(curPage-1);

var end:int=start+pageNumber;

pagedDataProvider=new ArrayCollection();

for(var i:int=start;i<end;i++){

pagedDataProvider.addItem(myDataProvider.getItemAt(i));

}

}

]]>

</mx:Script>

<mx:HBox>

<mx:Button id=”btnNext” click=”getNextPage()” label=”next”/>

<mx:Button id=”btnPrevious” click=”getPreviousPage()” label=”prevous”/>

</mx:HBox>

<mx:DataGrid dataProvider=”{pagedDataProvider}”>

<mx:columns>

<mx:DataGridColumn dataField=”thumbnail”/>

<mx:DataGridColumn dataField=”caption”/>

</mx:columns>

</mx:DataGrid>

</mx:Application>

  • Share/Bookmark

16 FebDrag and drop and its functionality in Flex .Also list Images in Tile List from XML

Here we create simple photo gallery , that uses XML files to store the information about which images to display.The gallery is easy to configure and update since you need to change only the XML file.And also we used Drag and drop  functionality for drag the image from the list and put it in to other container

Application.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”init()” backgroundColor=”#000000″>

<mx:Script>

<![CDATA[

import mx.controls.Image;

import mx.core.DragSource;

import mx.managers.DragManager;

import mx.events.DragEvent;

import mx.controls.Alert;

private var myLoader:URLLoader;

[Bindable]

private var myXML:XML;

private function init():void

{

myXML= new XML();

var XML_URL:String = “xml/test.xml”;

var myXMLURL:URLRequest = new URLRequest(XML_URL);

var myLoader:URLLoader = new URLLoader(myXMLURL);

myLoader.addEventListener(“complete”, xmlLoaded);
}

private function xmlLoaded(event:Event):void

{

myXML = XML(event.currentTarget.data);

}

private function dragEnterHandler(event:DragEvent):void

{

DragManager.acceptDragDrop(Canvas(event.currentTarget));
}

private function dragdropHandler(event:DragEvent):void

{

var dragObj:Array= event.dragSource.dataForFormat(“items”) as Array;

test.source =dragObj[0].attribute(‘path’);

}

]]>

</mx:Script>

<mx:HBox width=”100%” height=”100%” paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″ paddingTop=”10″>

<mx:TileList width=”100%” height=”100%” verticalCenter=”0″ horizontalCenter=”0″

itemRenderer=”ImageHolder” dataProvider=”{myXML.image}” backgroundColor=”#363231″

borderThickness=”1″ borderStyle=”solid” cornerRadius=”10″

selectionColor=”#393939″ borderColor=”#363231″ dragEnabled=”true” dragMoveEnabled=”true” id=”imageList”

>

</mx:TileList>

<mx:Canvas width=”100%” height=”100%” backgroundColor=”#363231″

borderThickness=”1″ borderStyle=”solid” cornerRadius=”10″ borderColor=”#363231″

id=”holder” dragEnter=”dragEnterHandler(event);” dragDrop=”dragdropHandler(event);”>

<mx:Image id=”test” width=”100″ height=”100″ />

</mx:Canvas>

</mx:HBox>

</mx:Application>

The Image Holder itemrender  for List.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Image xmlns:mx=”http://www.adobe.com/2006/mxml” width=”150″ height=”150″ source=”{data.attribute(‘path’)}” >

</mx:Image>

test.xml you can use the xml for image path

<album>

<image path=”images/DSC00975.JPG”>

</image>

<image path=”images/DSC00977.JPG” >

</image>

</album>

  • Share/Bookmark

16 FebCreate popup and its position in Flex.

private function popupDetails():void
{
//add popup and its postion
detailsButton.source=SELECTED;
popup = new DocumentDetailsPopup;
popup.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE,popupClose);
popup.addEventListener(“close”, popupClose);
PopUpManager.addPopUp(popup, this, false, null);
var p:Point = localToGlobal(new Point(mouseX,mouseY));
popup.arrow.setStyle(‘bottom’,40);
popup.move(p.x+10,p.y-200);
}

  • Share/Bookmark

08 Febset styles to the Selected ItemRenderer

Some times the item render selection can’t changes when we select it .So we must to over ride the updateDisplayList function.

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

super.updateDisplayList(unscaledWidth, unscaledHeight);

if(ListBase(owner).isItemSelected(data)) {

imageBox.setStyle(“styleName”,”thumbnailBoxSelect”);

} else {

imageBox.setStyle(“styleName”,”thumbnailBox”);

}

}

  • Share/Bookmark

08 FebApply style for text area in Adobe flex using filters.

For change the style of a text area we can use filters. the example is give below .

<mx:filters>

<filters:DropShadowFilter inner=”true” distance=”0″ blurX=”10″ blurY=”10″ color=”#D2D2D2″ />

</mx:filters>

  • Share/Bookmark

22 JanCairngorm Architecture

There is 3 folder occurred.

1.control
2.model
3.view

view
—————————————————————————————————————

folder contain the UI part of the project.
like custom components
<control:Controller id=”controller”/>
<delegates:Services id=”service”/>
add thes file in main mxml file

call an event from view
var recentlyViewDocEvent:RecentlyViewDocEvent = new RecentlyViewDocEvent(RecentlyViewDocEvent.GET_RECENTLY_VIEW_DOC);
recentlyViewDocEvent.IdentityName = “Home”;
CairngormEventDispatcher.getInstance().dispatchEvent(recentlyViewDocEvent);
recentlyViewDocEvent = null;

model
—————————————————————————————————————
modules

modules can call with
[Bindable]private var model:ModelLocater= ModelLocater.getInstance();
it contain each component model locater

utils
it contain some utils files

vo
Data Transfer Objects are called vo
then the main application model locater

control

————————————————————————————————————————————————————

Controller.as file is main file

public class Controller extends FrontController
{
public function Controller()
{
addCommand(Controller.LOOKUP,LookUpCommand);
}
public static const LOOKUP:String = “lookUp”;
}

commands

——————————————————————————————————————————-

it contain all command files

public class LookUpCommand implements IResponder, ICommand
{

public function execute(event:CairngormEvent):void
{
reqEvent = event as LookupEvent;
var delegate:LookUpDelegate = new LookUpDelegate (this);
requestType = reqEvent.reqString;

switch(requestType)
{
case LookupEvent.GET_PROGRESS_MAP_INFO :
delegate.getProgressMapInfo();
break

}
}

public function result(data:Object):void
{
switch(requestType)
{
case LookupEvent.GET_PROGRESS_MAP_INFO :
model.pointOfInterest = data.result.pointOfInterest;
model.plotPoints = data.result.plotPoints;
break

}
}

public function fault(info:Object):void
{
Alert.show(info.message.faultDetail);
}

delegates

——————————————————————————————————————————————-

it contain main service.mxml and other delegate pages

service

Delegate
file contain

public class LookUpDelegate
{
private var responder:IResponder;
private var roCategory:RemoteObject;

[Bindable]private var model:AdminModelLocator = AdminModelLocator.getInstance();

public function LookUpDelegate(responder:IResponder)
{
this.roCategory= ServiceLocator.getInstance().getRemoteObject(‘kcaeService’);
this.responder = responder;
}
public function getProgressMapInfo():void
{
var token:AsyncToken = roCategory.getProgressMapInfo();
token.resultHandler = responder.result;
token.faultHandler = responder.fault;
}

}
Event

————————————————————————————————————————————————–

public class LookupEvent extends CairngormEvent
{
/**
* @private // request type
* */
private var _eventType:String;

/**
* static event type constants
* */
public static const GET:String = ‘get’;

/**
* constructor
* */
public function LookupEvent(type:String)
{
super(Controller.LOOKUP);
this._eventType = type;
}

public function get reqString():String
{
return _eventType;
}

}

  • Share/Bookmark