Monday, May 25, 2009

Apply Move Effect To List

I have give some example coding in below image
in that just give dataprovider to horizonatal list and apply some login for next / previous /paging
it's give moving effect to list

mxml Syntax for moving

"< "mx:Move id="eff_project_move" duration="500" easingFunction="{Exponential.easeInOut}" target="{box}" /">"

"<" mx:Canvas ">"
"<"mx:HBox id="bx" moveEffect="{eff_project_move}">"
"<"mx:HorizontalList id="lst" columnWidth="323" /">"
"<"/mx:HBox"> "
"<"/mx:Canvas">"

and In any button Just put syntax like

bx.x = bx.x - lst.columnWidth;

for moving next 1 record

//SOME SWEET LOGIN OF MOVING LIST
Private var totalLen:Number=0;

private var current:Number=0;
private var _pageSize:Number=3;

private var tbtnSrc:ArrayCollection=new ArrayCollection();

private function init():void
{
list_object.dataProvider = ary_dataProvider;
list_object.columnCount = ary_dataProvider.length;

totalLen=list_object.dataProvider.length;
current=1;
setPage();
}

private function setPage():void
{
var tp:int= totalLen/_pageSize;
var tp1:Number= totalLen/_pageSize;
var pageLen:Number=0;

if(tp==tp1)
{
pageLen=tp;
}
else
{
pageLen=tp+1;
}
tbtnSrc.removeAll();

for(var i:int=1;i<=pageLen;i++)
{
var obj:Object=new Object();
obj.curPage=i.toString();
tbtnSrc.addItem(obj);
}
btnPage.dataProvider=tbtnSrc;
if (tbtnSrc.length>0)
btnPage.selectedIndex=0;
}

private function itemClickBtbar(event:ItemClickEvent):void
{
var selInd:Number=Number(event.item.curPage);
var moveVal:Number=(selInd*_pageSize)-(current*_pageSize);
var xfrom:Number=0;
var xto:Number=0;
if(eff_project_move.isPlaying)
{
eff_project_move.stop();
}
xfrom= - ((current-1)*_pageSize*list_object.columnWidth);
xto= xfrom - (moveVal*list_object.columnWidth);

eff_project_move.xFrom=xfrom;
eff_project_move.xTo=xto;
eff_project_move.play();
current=selInd;
}

No comments: