About colorchanging
public function roomColorHandler(event:MouseEvent):void
{
Application.application.ShowStrip(event);
icons.btn_RoomColor.removeEventListener(MouseEvent.CLICK,roomColorHandler);
colorComponent = new ColorComponent();
colorComponent.name=”RoomColorPalet”;
addChildAt(colorComponent,Application.application.numChildren-1);
colorComponent.addEventListener(ColorComponent.COMPONENT_ADDED, componentAddedHandler);
colorCompBool=true;
if(Application.application.contains(Application.application.ItemPane))
{
Application.application.Doll.scaleX=1;
Application.application.Doll.scaleY=1;
if(Application.application.Doll.x>600 ||Application.application.Doll.x<0)
{
Application.application.Doll.x=200;
}
if(Application.application.Doll.y>500 ||Application.application.Doll.y<0)
{
Application.application.Doll.y=0;
}
//Application.application.onSave_SaloonItems();
Application.application.removeChild(Application.application.ItemPane);
}
if(Application.application.contains(Application.application.room.ItemPane))
{
Application.application.room.closePallete(event);
}
if(Application.application.contains(Application.application.room.chairPanel))
{
Application.application.removeChild(Application.application.room.chairPanel);
}
Application.application.icons.iconBox.addIcons();
}
private function componentAddedHandler(eve:Event):void
{
colorComponent.removeEventListener(ColorComponent.COMPONENT_ADDED, componentAddedHandler);
colorComponent.y = Application.application.height – colorComponent.getChildAt(0).height-40;
for(var i:Number = 0;i<colorComponent.colorHolderArray.length;i++)
{
MovieClip(colorComponent.colorContainer.getChildByName(colorComponent.colorHolderArray[i])).addEventListener(MouseEvent.CLICK, colorClickHandler);
}
RoomReferance=room.swf_LivingRoom.content as MovieClip;
colorClipReference=MovieClip(RoomReferance.WallClip)
colorBool=false;
MovieClip(RoomReferance.WallClip).addEventListener(MouseEvent.CLICK,function(eve:MouseEvent):void{highlight(eve,”WallClip”)});
MovieClip(RoomReferance.DoorWall).addEventListener(MouseEvent.CLICK,function(eve:MouseEvent):void{highlight(eve,”WallClip”)});
MovieClip(RoomReferance.DoorWall1).addEventListener(MouseEvent.CLICK, function(eve:MouseEvent):void{highlight(eve,”WallClip”)});
MovieClip(RoomReferance.Flor1).addEventListener(MouseEvent.CLICK,function(eve:MouseEvent):void{highlight(eve,”Floor1″)});
MovieClip(RoomReferance.flor2).addEventListener(MouseEvent.CLICK, function(eve:MouseEvent):void{highlight(eve,”Floor2″)});
MovieClip(RoomReferance.bar1).addEventListener(MouseEvent.CLICK,function(eve:MouseEvent):void{highlight(eve,”Bar”)});
MovieClip(RoomReferance.bar2).addEventListener(MouseEvent.CLICK,function(eve:MouseEvent):void{highlight(eve,”Bar”)});
MovieClip(RoomReferance.bar3).addEventListener(MouseEvent.CLICK,function(eve:MouseEvent):void{highlight(eve,”Bar”)});
}
private function colorClickHandler(event:MouseEvent):void
{
ColorString=colorComponent.clipStr.toString();
if(ColorString==”WallClip”)
{
(RoomReferance.WallClip as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
(RoomReferance.DoorWall as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
(RoomReferance.DoorWall1 as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
}
else if(ColorString==”Bar”)
{
(RoomReferance.bar1 as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
(RoomReferance.bar2 as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
(RoomReferance.bar3 as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
}
else if(ColorString==”Floor1″)
{
(RoomReferance.Flor1 as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
}
else
{
(RoomReferance.flor2 as MovieClip).transform.colorTransform = event.currentTarget.colorBucket.transform.colorTransform;
}
trace(“color”+(RoomReferance.WallClip as MovieClip).transform.colorTransform.color);
trace(“color”+(RoomReferance.Flor1 as MovieClip).transform.colorTransform.color);
trace(“color”+(RoomReferance.bar1 as MovieClip).transform.colorTransform.color);
trace(“color”+(RoomReferance.flor2 as MovieClip).transform.colorTransform.color);
profileResponder = new Responder(colorSave, onFault);
connection.connect(“http://domainname/services/amfphp”);
connection.call(“xmldata.colorroomupdateData”,profileResponder,int(Application.application.PeppyUserId),”livingroom”,
String((RoomReferance.WallClip as MovieClip).transform.colorTransform.color),
String((RoomReferance.Flor1 as MovieClip).transform.colorTransform.color),
String((RoomReferance.flor2 as MovieClip).transform.colorTransform.color),
String((RoomReferance.bar1 as MovieClip).transform.colorTransform.color));
}
simple pagination(contd)
public function loadassets(list:XML,eve:Event):void
{prevbtn.enabled=false;
nextbtn.enabled=true;
Totalitems=list.img.length();
TotalPages=Math.ceil(Totalitems/4);
pagecount=0;
loadProp();}
private var slidehbox:HBox;
private var slidenewcan:Canvas;
public function loadProp():void{
if(slideVbox.numChildren>0){
slideVbox.removeAllChildren();}
for(var n:int=pagecount*4;n<(pagecount*4)+ItemCount;n++){
slidenewcan=new Canvas();
slideimage=new Image();
slideimage.buttonMode=true;
slideimage.useHandCursor=true;
slideimage.width=100;
slideimage.height=100;
slideimage.x=20;
slideimage.y=20;
slideimage.source=slideXML.img[n].@source;
slidenewcan.addChild(slideimage);
if(n%2==0 ||n==0){
slidehbox=new HBox();
slideVbox.addChild(slidehbox);}
slidehbox.addChild(slidenewcan);}}
public function onClicknext_btn(eve:MouseEvent):void{
pagecount++;
prevbtn.enabled=true;
if(pagecount==TotalPages-1){
nextbtn.enabled=false;
slideVbox.removeAllChildren();
for(var n:int=pagecount*4;n
Simple Pagination
<![CDATA[
import mx.containers.VBox;
import mx.containers.HBox;
import mx.controls.Image;
import mx.controls.Button;
import mx.containers.Canvas;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
private var pagecount:int=0;
private var Totalitems:int;
private var ItemCount:int=4;
private var TotalPages:int;
private var slidecan:Canvas=new Canvas();
private var prevbtn:Button;
private var nextbtn:Button;
private var slideimage:Image;
private var slideVbox:VBox;
private var slideXML:XML=
public function init():void
{
slidecan=new Canvas();
slidecan.setStyle(‘borderColor’,'#585B5C’);
slidecan.setStyle(‘backgroundColor’,'#FFFFFF’);
slidecan.width=400;
slidecan.height=350;
//slidecan.setStyle(‘backgroundColor’,'#4D1313′);
prevbtn=new Button();
prevbtn.styleName=’prevbtn’;
prevbtn.x=150;
prevbtn.y=320;
nextbtn=new Button();
nextbtn.styleName=’nextbtn’;
nextbtn.x=185;
nextbtn.y=320;
slideVbox=new VBox();
slideVbox.setStyle(‘borderColor’,'#585A5B’);
slideVbox.setStyle(‘cornerRadius’,’10′);
slideVbox.setStyle(‘dropShadowEnabled’,'true’);
slideVbox.setStyle(‘backgroundColor’,'#4D4C4C’);
slideVbox.width=290;
slideVbox.height=250;
slideVbox.x=50;
slideVbox.y=35;
prevbtn.addEventListener(MouseEvent.CLICK,prevPage);
nextbtn.addEventListener(MouseEvent.CLICK,onClicknext_btn);
slidecan.addChild(slideVbox);
slidecan.addChild(prevbtn);
slidecan.addChild(nextbtn);
addChild(slidecan);
var eve:MouseEvent;
loadassets(slideXML,eve);
}
Drag and Drop sample
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[
import mx.containers.Canvas;
import mx.containers.HBox;
import mx.controls.Alert;
import mx.events.DragEvent;
import mx.containers.VBox;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.controls.Image;
private var filesource:String;
private var draghbox:HBox=new HBox();
public function doDrag(eve:MouseEvent):void
{
var img:Image=eve.currentTarget as Image;
var ds:DragSource=new DragSource();
ds.addData(img,'img');
var dragProxy:Image=new Image();
dragProxy.source=img.source.toString();
filesource=img.source.toString();
DragManager.doDrag(img,ds,eve,dragProxy,-15,-15,1.0);
}
public function dragaccept(eve:DragEvent):void
{
var dropTarget:VBox=eve.currentTarget as VBox;
DragManager.acceptDragDrop(dropTarget);
}
public function dragDrop(eve:DragEvent):void
{
var img:Image=eve.dragSource.dataForFormat('img') as Image;
img=new Image();
img.source=filesource;
img.height=50;
img.width=50;
if(draghbox.numChildren%2==0||dropVbox.numChildren==0)
{
draghbox=new HBox();
dropVbox.addChild(draghbox);
}
draghbox.addChild(img);
}
public function dragacceptHandler(eve:DragEvent):void
{
var droptarget:Canvas=eve.currentTarget as Canvas;
DragManager.acceptDragDrop(droptarget);
}
public function dragdropHandler(eve:DragEvent):void
{
var img:Image=eve.dragSource.dataForFormat('img')as Image;
img=new Image();
img.source=filesource;
img.height=50;
img.width=50;
img.setStyle('verticalGap','50');
img.setStyle('horizontalGap','50');
cannew.addChild(img);
}
]]>
</mx:Script>
<mx:Canvas x=”34″ y=”62″ width=”200″ height=”167″ backgroundColor=”#E9E5E8″>
<mx:Image x=”25″ y=”31″ source=”Rose.png” mouseDown=”doDrag(event)”/>
<mx:Image x=”96″ y=”36″ source=”Tulip.png” mouseDown=”doDrag(event)”/>
<mx:Image source=”Lavendar.png” mouseDown=”doDrag(event)” x=”38″ y=”113″/>
<mx:Image source=”Magnolia.png” mouseDown=”doDrag(event)” x=”115″ y=”111″/>
</mx:Canvas>
<mx:VBox id=”dropVbox” x=”57″ y=”282″ height=”288″ width=”272″ dragEnter=”dragaccept(event)” dragDrop=”dragDrop(event)”
backgroundColor=”#4D1313″>
</mx:VBox>
<mx:Canvas id=”cannew” x=”401″ y=”282″ width=”280″ height=”288″ backgroundColor=”#12292F” dragEnter=”dragacceptHandler(event)”
dragDrop=”dragdropHandler(event)”>
</mx:Canvas>
</mx:Application>
Sample program
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.controls.SWFLoader;
private var gameswf:SWFLoader;
private var can:Canvas;
private var back_btn:Button;
public function onPlay_game(eve:MouseEvent):void
{
can=new Canvas();
back_btn=new Button();
gameswf=new SWFLoader();
gameswf.source="game.swf";
gameswf.width=500;
gameswf.height=400;
back_btn.width=70;
back_btn.height=30;
back_btn.x=175;
back_btn.y=330;
back_btn.label="Back";
back_btn.addEventListener(MouseEvent.CLICK,onPlay_back);
game_play.visible=false;
addChild(can);
can.addChild(gameswf);
can.addChild(back_btn);
}
public function onPlay_back(eve:MouseEvent):void
{
can.removeChild(gameswf);
can.removeChild(back_btn);
viewstack1.selectedChild=games;
}
]]>
</mx:Script>
<mx:ApplicationControlBar x=”93″ y=”59″ width=”411″ height=”5%”>
<mx:Button label=”Home” click=”viewstack1.selectedChild=home”/>
<mx:Button label=”About Us” click=”viewstack1.selectedChild=aboutus”/>
<mx:Button label=”Gallery” click=”viewstack1.selectedChild=gallery”/>
<mx:Button label=”Games” click=”viewstack1.selectedChild=games”/>
<mx:Button label=”ContactUs” click=”viewstack1.selectedChild=contactus”/>
</mx:ApplicationControlBar>
<mx:ViewStack x=”13″ y=”134″ id=”viewstack1″ width=”569″ height=”80%”>
<mx:Canvas label=”Home” width=”100%” height=”100%” id=”home” color=”#D9EDF1″>
<mx:ColorPicker x=”175″ y=”205″/>
</mx:Canvas>
<mx:Canvas label=”Aboutus” width=”100%” height=”100%” id=”aboutus” color=”#49CCE8″>
<mx:DataGrid x=”129″ y=”167″>
<mx:columns>
<mx:DataGridColumn headerText=”Column 1″ dataField=”col1″/>
<mx:DataGridColumn headerText=”Column 2″ dataField=”col2″/>
<mx:DataGridColumn headerText=”Column 3″ dataField=”col3″/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
<mx:Canvas label=”Gallery” width=”100%” height=”100%” id=”gallery” color=”#BED32E”>
<mx:DateChooser x=”182″ y=”219″/>
</mx:Canvas>
<mx:Canvas label=”Games” width=”100%” height=”100%” id=”games” verticalScrollPolicy=”off”>
<mx:Image id=”game1″ x=”33″ y=”74″ width=”158″ height=”134″ source=”Images/image2.jpeg” click=”viewstack1.selectedChild=imagecan”/>
<mx:Image id=”game2″ x=”23″ y=”433″ width=”158″ height=”134″ source=”Images/image3.jpeg”/>
<mx:Image id=”game3″ x=”223.5″ y=”266″ width=”158″ height=”134″ source=”Images/image4.jpeg”/>
<mx:Image id=”game4″ x=”223.5″ y=”433″ width=”158″ height=”134″ source=”Images/image5.jpg”/>
<mx:Image id=”game5″ x=”23″ y=”255″ width=”158″ height=”134″ source=”Images/image6.jpg”/>
<mx:Image id=”game6″ x=”213″ y=”74″ width=”158″ height=”134″ source=”Images/image1.jpeg”/>
</mx:Canvas>
<mx:Canvas label=”ContactUs” width=”100%” height=”100%” id=”contactus” color=”#6E40B4″>
<mx:ProgressBar x=”212″ y=”198″/>
</mx:Canvas>
<mx:Canvas id=”imagecan” name=”imgcan” width=”700″ height=”500″
horizontalCenter=”0″ verticalCenter=”0″
verticalScrollPolicy=”off”>
<mx:Text x=”168″ y=”10″ text=”Gamedescription” width=”239″ height=”22″ fontWeight=”bold” fontSize=”14″/>
<mx:Button id=”game_play” x=”168″ y=”317″ label=”Play Game” click=”onPlay_game(event)” visible=”true”/>
<mx:Text x=”91″ y=”54″ text=”Identify the required color of the balloon correctly 
and fill it with suitable color.To fill the color, select the color
from the palette and click on the balloon to fill color. You will 
get bonus points by giving color to the parachute. 
Reach the target in each level within given duration
and play further levels.

Game control.
Use mouse to interact.
To bring the game to pause, click on the pause button.
To mute the sound, click the mute button.” width=”348″ height=”177″ textAlign=”left” fontWeight=”bold” fontSize=”10″/>
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
Link to image
main application:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
creationComplete=”init();”>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.containers.Canvas;
import mx.controls.Image;
private var comp_img:imagecomp=new imagecomp();
private var img:Image;
private var can:Canvas;
public function init():void
{
img=new Image();
img.source="Images/helium_balloons.jpg";
img.x=50;
img.y=50;
img.addEventListener(MouseEvent.CLICK,onClick_show);
Application.application.addChild(img);
}
public function onClick_show(eve:MouseEvent):void
{
img.buttonMode=true;
img.useHandCursor=true;
Application.application.removeChild(img);
Application.application.addChild(comp_img);
}
]]>
</mx:Script>
</mx:Application>
imagecomp.mxml:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas name=”imgcan” xmlns:mx=”http://www.adobe.com/2006/mxml” width=”700″ height=”500″ horizontalCenter=”0″ verticalCenter=”0″
verticalScrollPolicy=”off”>
<mx:Text x=”168″ y=”10″ text=”Gamedescription” width=”239″ height=”22″ fontWeight=”bold” fontSize=”14″/>
<mx:Button id=”game_play” x=”168″ y=”317″ label=”Play Game” click=”onPlay_game(event)”/>
<mx:Text x=”91″ y=”54″ text=”Identify the required color of the balloon correctly 
and fill it with suitable color.To fill the color, select the color
from the palette and click on the balloon to fill color. You will 
get bonus points by giving color to the parachute. 
Reach the target in each level within given duration
and play further levels.

Game control.
Use mouse to interact.
To bring the game to pause, click on the pause button.
To mute the sound, click the mute button.” width=”348″ height=”177″ textAlign=”left” fontWeight=”bold” fontSize=”10″/>
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.controls.SWFLoader;
private var gameswf:SWFLoader;
private var can:Canvas;
private var back_btn:Button;
public function onPlay_game(eve:MouseEvent):void
{
can=new Canvas();
back_btn=new Button();
gameswf=new SWFLoader();
gameswf.source="game.swf";
gameswf.width=500;
gameswf.height=400;
back_btn.width=70;
back_btn.height=30;
back_btn.x=175;
back_btn.y=330;
back_btn.label="Back";
addChild(can);
can.addChild(gameswf);
can.addChild(back_btn);
}
]]>
</mx:Script>
</mx:Canvas>
Flex & Drupal login ( Actionscript remoteObjects )
Hello People!
It has been a long time since my last post so I’ve decided to post something found interesting. Long ago, seeking a faster way to create my websites I found CMS called Drupal, this CMS provides a lot of very important aspects of a web, such as content creation, scalability and robustness. But as you know this blog is basically based on the Flash platform technologies, not Drupal, But I was interested in joining the two sides and make a login.
To follow this tutorial is recommended that you have some knowledge of Drupal and Flex
Requirements
Have a server ( local or remote ) with Drupal
Note:
This tutorial was mad with Drupal 6.x but I think you can do it perfectly with the previous version 5.x
To complete this tutorial you will need some modules that do not come with the core ( amfphp and services ) as well as the amfphp server. To install the modules simply unzip them inside drupal_folder/modules but i recommend creating a folder drupal_folder/sites/all/modules and copy them inside. Then it¡s imperative you download the amfphp server and copy the the folder inside the amfphp. ( You should have something like this drupal_folder/modules/amfphp/amfphp, the first amfphp is the module logic and the second is the server.
Now we must activate some options of the modules we just install
- In Services activate Services ( it’s the only option, you can fail here xD )
- In Services – servers activate AMFPHP
- In Services – services activate System Service and User Service
You can go to the Drupal Services option and click on the AMFPHP server, you would see a default message from the server, if you can’t see it you may missed something.
One more thing before view the Actionscript code, in the Drupal Services menu, inside the Settings Tab, disable the “Use Keys” option which is used to provide security when we connect from external applications, and althought this tutorial might be used to create an external login too, we won’t use keys to simplify the tutorial ( maybe in a next post ) however we will leave the “Use sessid” active.
Once you have activate that options ( remember to save once you’ve activated ) we need to give permissions for anyone to access the services, if not an anonymous user couldn’t login because it couldn’t access them. Now we can begin to create our AS3
Before giving the Actionscript code I would like to discuss some aspects of the code:
While creating remoteObjects is easier in mxml I always prefer to avoid it using Actionscript but this meant more time until I found the way to communicate Flex with Drupal because I couldn’t how I could pass parameters to Drupal, if you’ve encountered the same problem, I hope this tutorial help.
Note:
Before communicating with any other service you must have your sessid, you’ll do that connecting with the system.connect service, which will return you an object containing the sessid. If you do not know if your services are working correctly because of your code or because of Drupal, you can execute them directly from the Drupal Services menu, there you can find all the parameters you need to execute any service.
Using MXML remoteObject is implemented like this ( using user.get as example ) :
sessid
1
This service is used to get the information about the user with a certain uid ( user id ). In order to do that you must be logged in.
In Actionscript should be something like this:
drupal.source = “user”
var params:Object = new Object();
params.sessid = sessid;
params.uid = 1
Operation(drupal.getOperation( “get” )).argumentNames = ["sessid","uid"]
drupal.getOperation( “get” ).arguments = params;
drupal.getOperation( “get” ).send();
The lined marked in bold is the one I was searching during hours, this is automatically implemented in the mxml component, if you don’t put it Drupal will always return “Missing Arguments”
Finally, the code:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application
layout=”absolute”
xmlns:mx=”http://www.adobe.com/2006/mxml”
applicationComplete=”init()”><mx:Script>
<![CDATA[
import mx.rpc.remoting.mxml.Operation;
import mx.messaging.channels.StreamingAMFChannel;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.mxml.RemoteObject;
private var drupal:RemoteObject;
private var sessid:String = "";
private function init():void{
drupal = new RemoteObject();
drupal.endpoint = "http://localhost/drupal/services/amfphp"
drupal.destination = "amfphp";
drupal.addEventListener( ResultEvent.RESULT, handler_drupalResult );
drupal.addEventListener( FaultEvent.FAULT, handler_drupalFault );}
private function handler_drupalResult( event:ResultEvent ):void{
log( event.toString() )
log( event.result.toString() )
try{
sessid = event.result.sessid
LBL_sessid.text = event.result.sessid}
catch ( error:Error )
{}}
private function handler_drupalFault( event:FaultEvent ):void{
log( event.toString() )}
private function handler_systemConnect( event:Event ):void{
drupal.source = "system"
drupal.getOperation( "connect" ).send();}
private function handler_login( event:Event ):void{
drupal.source = "user"
var params:Object = new Object();
params.sessid = sessid;
params.username = TI_user.text;
params.password = TI_password.text
Operation(drupal.getOperation( "login" )).argumentNames = ["sessid","username","password"]
drupal.getOperation( “login” ).arguments = params
drupal.getOperation( “login” ).send();}
private function handler_logout( event:Event ):void{
drupal.source = “user”
drupal.getOperation( “logout” ).send( { sessid:sessid } ); }
private function handler_get( event:Event ):void
{
drupal.source = “user”
var params:Object = new Object();
params.sessid = sessid;
params.uid = 1
Operation(drupal.getOperation( “get” )).argumentNames = ["sessid","uid"]
drupal.getOperation( “get” ).arguments = params;
drupal.getOperation( “get” ).send();}
private function log( message:String ):void{
var d:Date = new Date();
TA_results.text += “[" + d.toLocaleTimeString() + "]\n” + message + “\n\n”;}]]>
</mx:Script>
<mx:TextArea x=”356″ y=”38″ width=”467″ height=”558″ id=”TA_results”/>
<mx:Panel x=”63″ y=”38″ width=”285″ height=”75″ layout=”absolute” title=”System”>
<mx:Button x=”15″ y=”10″ label=”connect” width=”235″ click=”handler_systemConnect( event )”/>
</mx:Panel>
<mx:Panel x=”831″ y=”38″ width=”285″ height=”558″ layout=”absolute” title=”Data”>
<mx:Label x=”10″ y=”10″ text=”sessid:”/>
<mx:Label x=”10″ y=”27″ width=”245″ fontWeight=”bold” id=”LBL_sessid”/>
</mx:Panel>
<mx:Panel x=”63″ y=”121″ width=”285″ height=”251″ layout=”absolute” title=”User”>
<mx:Button x=”15″ y=”88″ label=”logout” width=”235″ click=”handler_logout( event )”/>
<mx:Button x=”15″ y=”63″ label=”login” width=”235″ click=”handler_login( event )”/>
<mx:Button x=”15″ y=”145″ label=”get” width=”235″ click=”handler_get( event )”/>
<mx:Label x=”15″ y=”10″ text=”user:”/>
<mx:Label x=”15″ y=”121″ text=”user ID:”/>
<mx:Label x=”15″ y=”33″ text=”password:”/>
<mx:TextInput x=”86″ y=”8″ width=”164″ id=”TI_user” text=””/>
<mx:TextInput x=”86″ y=”119″ width=”164″ id=”TI_uid” text=”1″/>
<mx:TextInput x=”86″ y=”31″ width=”164″ id=”TI_password” text=””/>
</mx:Panel></mx:Application>
Flex Automation
Flex Automation issue reporting – QTP log enabling
This section is for a user of flex automation with the following details.
1. You are a flex automaiton user .
2. You are using QTP as the testing tool
3. You are facing some issue with the automaiton and you would like to know the details of QTP calls or you would like take the help of Adobe Flex Automation team for resolving your issue.
If you like to inform Adobe about your issue – What you need to do?
1. File an issue in JIRA – the open Adobe bug base. http://bugs.adobe.com/jira Project FLEXENT
2. Have a log file related to QTP interaction and provide the log file also as a part of the bug details.
The steps below describes how to enabling the logging for QTP 9.2 (or lesser versions)
Steps to enable QTP logging.
1. Go to the mercury installation/bin directory say: “C:\Program Files\Mercury Interactive\QuickTest Professional\bin” and run MicLogSetting.exe
2. Select the log settings as:
Level: MicLogLevelDebug2
Folder:C:\Program Files\Mercury Interactive\QuickTest Professional\
Selected Categories:LogCatPackTEA
Ensure the max size of the file is reasonably high (else once the size reaches the maximum limit another file is created. So please ensure that all newly created files are identified)
Note: Please zip these files before uploading them to bug base.
3. Run QTP and repeat the operation which is found non functioning (please try to have minimum steps in your application recorded or executed and those are related to the issue. Else the log file can be huge )
4. A log file would have been generated like C:\Program Files\Mercury Interactive\QuickTest Professional\MicLogFile_QTPro_pid1912_11_32_32.html
Add comment September 29, 2008 <!–ranikumar–>
Automation Issues – controls non clickable
Issue Description :
When the application is compiled with automation libraries some controls become non click-able. (Without automation libraries, the controls behaves perfectly fine).Please note that issue is different from controls not recording right events.
Reason:
In application layout, a container is overlapping the controls. Containers are invisible, and without automation, there are no event listeners to the containers. Hence all operation on the controls under the containers also work.
But when automation libraries are included, containers gets listeners registered, hence it will not pass to the containers physically present under them. (You can visualize the container as a transparent sheet kept on controls)
There are two samples below, working and no working case, when automation libraries are enabled.
Non working case:
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Button label=”Hi” click=”{l1.text=’button clicked’}” />
<mx:VBox width=”100%” height=”100%” alpha=”0″ id=”vb1″>
<mx:Spacer height=”20″ />
<mx:Label id=”l1″ text=”button not clicked” />
</mx:VBox>
</mx:Application>
The application above does not allow the button to be clicked, if it is compiled with automation libraries. Without automation libraries it can be clicked.Reason is that, the invisible VBox overlaps this button. When we click on the button the following script gets recorded.Browser(”Browser”).FlexApplication(”temp”).FlexBox(”vb1″).Click
Working equivalent case:
If such a case exists it can be changed as follows.
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”><mx:VBox width=”100%” height=”100%”>
<mx:Button label=”Hi” click=”{l1.text=’button clicked’}” />
<mx:Spacer height=”20″ />
<mx:Label id=”l1″ text=”button not clicked” />
</mx:VBox>
</mx:Application>
Here button is inside the VBox. And hence the script gets recorded as
Browser(”Browser”).FlexApplication(”temp”).FlexButton(”Hi”).Click
Note from the script that , the user can find out what container is overlapping the control. And they can use the design view also to find this.
I.e. in short , in such scenario problem is with the application layout of components.
1 comment April 2, 2008 <!–ranikumar–>
Automation Of Flex Applications
Developing Flex Applications in Liferay Portals
The Relationship of Rich Internet Applications and JSR-1/268 Portals Rich internet applications, or RIAs for short, are self-contained applications. In contrast, the “traditional” web applications are HTML-page-based UI. The JSR-168 portal specification marks one of the highest points of this page-based UI, allowing disparate logical pieces to be displayed on a single page in customizable ways.
On the flip side, JSR-168 portal technology is also the hardest web technology to evolve into using RIAs. Flex, Flash, rich AJAX applications and Java applets are all self-contained programs that maintain their own states.
In a browser, they are susceptible to page navigation and refreshes. Unfortunately, this is how JSR-168 portals work. A portal page is comprised of portlets, each occupying a section of the screen.
When the user clicks on something in a portlet, most likely the whole page is refreshed with the new states of each portlets; this causes every Flash movie on the page to restart. Theoretically, it is possible for a Flex program to save all its states and recover them during each restart; but for rich UI programs, this is never practical.
Why, then, are we even concerned about embedding Flex, Flash, rich AJAX or Java applets in Liferay, if the JSR-168 portal idea is indeed that insane? Why can’t we build a Flex portal container, and implement Flex portlets using dynamic modules? Answer: a Flex portal is certainly possible, and even technically desirable; but the reality tells otherwise, at least for a while. Internet will remain the way it has been; JSR-168, being a HTML-page-based solution, works with existing paradigms well.
Portal products like Liferay have packed more than enough useful features; this is where their values lie. At the same time, there will be situations where Flex and the like are desirable. For instance, your portal site may host Flash games; more and more reporting tools are using Flex charting and grids; you may have sophisticated operations implemented by Flex.
Bottom line: to use Flex with Liferay, compromises have to be made. You can not expect your Flex applications work seamlessly like normal JSR-168 portlets, and your design has to cope with this natural discrepancy between JSR-168 portals and RIAs. Flex Applications In Liferay Portals Housing Flex and Flash Applications in Portlets and Pages Flex internet applications are Flash movies.
While Flex and Flash applications are developed in very different ways, their deployment and runtime are the same. Flex internet applications are usually used in wrapper HTML files. It is possible to turn the main wrapper HTML file into the source of a portlet, but resizing is a major issue.
The normal Flex wrapper can specify relative width and height of the embedded Flash player, but they are relative to the browser window. A maximized portlet most likely just occupies a part of the window. The best option is probably to use the Liferay embedded page or the IFrame portlet to house Flex, Flash, rich AJAX UI, or Java applets.
Within such a page or portlet, the content is displayed in an IFrame control. The Flash player can be sized to 100% of the wrapper HTML within the IFrame control, which can be arbitrarily positioned and sized by the portal. Flex wrappers are not limited to static HTML pages; they can be dynamic JSPs as well. Developing a Sample Flex Applications to Run On Liferay Now that we understand the options of embedding Flex applications in portal pages, it is time to develop a demo.
We will develop a simple Flex application that uses BlazeDS to call server-side Java, to list user information with the Liferay API. It will use the current user’s authentication for security checks and permission enforcement on the server side. The Flex application will be embedded in its own portal page. We will develop our Flex-Liferay demo with the Liferay Extension framework. We will use Eclipse to debug our Java code in Liferay, and use Flex Builder to debug our Flex application on Liferay.
Setting Up the Development Environment for Liferay, BlazeDS, and Flex Let’s use Liferay 5.2.2 and Tomcat 5.5.27 for our Flex-Liferay development experience. We will not detail on each step. Windows convention is used in this article; please adapt for your OS for the path names.
Our final directory structure for our project will look like this: C:\MyPortalDev\ext\ C:\MyPortalDev\flex_projects \ C:\MyPortalDev\portal\If you have your Ext development environment set up already, just do the last step of adding BlazeDS library files. Otherwise, follow these steps: Have JDK (1.5 or 1.6) and Ant (1.7 or higher) installed, with JAVA_HOME and ANT_HOME set appropriately. Install the Liferay with Tomcat.
Create directory: C:\MyPortalDev\. Unzip liferay-portal-tomcat-5.5-5.2.2.zip into C:\MyPortalDev\, and rename lifera-portal-5.2.2\ to portal\. In that directory, you will find a tomcat-5.5.27\ directory and some others. More directories may be created there by the Liferay portal at runtime. Remove the sample Liferay webapp, 7-Cogs.
To do that, go to C:\MyPortalDev\portal\tomcat-5.5.27\webapps\, and delete these directories: sevencogs-hook\, sevencogs-theme\, and wol-portlet\. Install the Liferay Ext environment. Unzip liferay-portal-ext-5.2.2.zip into C:\MyPortalDev\, and rename liferay-portal-ext-5.2.2\ to ext\. Check everything inside ext\ into the source control system such as a Subversion or Perforce repository, with a note similar to “Initial Liferay Ext 5.2.2 install”.
This is very important to maintain visibility of your own files and changes, given that there are so many files involved. You may choose to clean up some unwanted pieces, such as never-used SQL scripts and data. Configure the Ext environment in preparation of building. Copy from build.properties to build.${username}.properties, and clean up unwanted parts and set up your preferences. Copy from app.server.properties to app.server.${username}.properties. Make sure app.server.type is set to tomcat and app.server.tomcat.dir to ${project.dir}/../portal/tomcat-5.5.27.
Add all the BlazeDS jar files (flex-messaging-*.jar) into the Ext environment under ext\ext-lib\portal\. Use MySQL as database. Make sure MySQL is running and has a database called lportal, accessible by user liferay with password liferay. There is no need to create schema yourself. Set the JDBC options in ext\ext-impl\src\portal-ext.properties with lines like these: # # MySQL # jdbc.default.driverClassName=com.mysql.jdbc.Driver jdbc.default.url=jdbc:mysql://localhost/lportal?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=false jdbc.default.username=liferay jdbc.default.password=liferayNow, go to C:\MyPortalDev\ext\, and run ant deploy.
It will build and deploy the Liferay webapp to C:\MyPortalDev\portal\tomcat-5.5.27\webapps\ROOT\. When this is done, go to tomcat-5.5.27\bin\, and run startup.bat. Liferay server will start, and a browser window will be launched. Login as test@liferay.com with password test. If you can go this far, you have successfully set up your development environment, and ready for Flex-Liferay development.
Developing Flex Application on Liferay “Hello, Flex Life!” Let’s create our first Flex application that runs on Liferay. In your Flex Builder, create a Flex project called flexlife in C:\MyPortalDev\flex_project\, and set its output directory to C:\MyPortalDev\porta\tomcat-5.5.27\webapps\ROOT\flexlife\. Write a simple Flex screen, like:
This will build into a Flex application on the Tomcat server; the wrapper HTML file is webapps\ROOT\flexlife\flexlife.html. Log on to Liferay, add a page named Flex Life. Select Manage Pages, and set its type to be Embedded and URL to be /flexlife/flexlife.html. Go back to portal mode, and you will see this: Flex Call Server-Side Java via BlazeDS In ext\ext-impl\src\, create a Java file as test\flexlife\FlexLifeFacade.java like so: package test.flexlife; public class FlexLifeFacade { public String echo(String msg) { return “Message received at ” + new java.util.Date() + “: ” + msg; } }
Create a BlazeDS configuration file, services-config.xml, in C:\MyPortalDev\ext\ext-web\docroot\WEB-INF\flex\:
test.flexlife.FlexLifeFacade application false false
[BlazeDS] false false true false Endpoint.* Service.* Configuration In C:\MyPortalDev\ext\ext-web\docroot\WEB-INF\web.xml, add a servlet and its mapping: MessageBrokerServlet MessageBrokerServlet flex.messaging.MessageBrokerServlet services.configuration.file /WEB-INF/flex/services-config.xml 1 MessageBrokerServlet /messagebroker/*
We have just coded and configured a server-side Java class callable by remote clients via BlazeDS. Shut down Liferay server if it is running, go to C:\MyPortalDev\ext\ and run ant deploy. Now it is time to extend our Flex application to call the server-side Java. The application will take user’s input, call the server and append the result in a TextArea.
After building it in Flex Builder, go to the Liferay page and refresh to see the new Flex application. (You may need to clear browser cache first to see the new Flex application, since many browsers cache Flash movies aggressively.) Type in something in the text input box and hit enter. If you see an echoed message, that is return from server-side!
If you are familiar with Flex and BlazeDS, you will quickly realize this is just the normal way of using Flex and BlazeDS, except that the Flex application is displayed in a portal page.
We have learned the basics of Flex-Liferay programming. In the rest of this article, we will discuss Liferay-specific Flex development topics.
Calling Liferay APIs for the Flex Client
Liferay API exposes all its internals through Java. You can programmatically do anything that the portal UI does.
We will create a Flex program to list all the Liferay users. We will write a Java method (in FlexLifeFacade.java) to get all the Liferay users, pack the information in an array of UserVO objects. On the Flex side, an array of objects will be received and turned into client-side UserVO objects, and displayed in a DataGrid.
The new FlexLifeFacade.java class looks like this:
package test.flexlife;
import com.liferay.portal.model.User;
import com.liferay.portal.service.persistence.UserUtil;
import java.util.List;
public class FlexLifeFacade
{
public UserVO[] getAllUsers() throws Exception {
List users = UserUtil.findAll();
UserVO[] ret = new UserVO[users.size()];
int i = 0;
for (User user : users)
ret[i++] = new UserVO(user);
return ret;
}
} UserVO.java:
package test.flexlife;
import com.liferay.portal.model.User;
public class UserVO
{
public long userId;
public String screenName;
public String fullName;
public String emailAddress;
public UserVO() {}
public UserVO(User user) {
this.userId = user.getUserId();
this.screenName = user.getScreenName();
this.fullName = user.getFullName();
this.emailAddress = user.getEmailAddress();
}
} On the client side, we have a counterpart UserVO class:
package test.flexlife
{
[RemoteClass(alias="test.flexlif.UserVO")]
public class UserVO
{
public var userId:uint;
public var screenName:String;
public var fullName:String;
public var emailAddress:String;
}
} And the Flex UI becomes:
Build and run. It looks like this: Debugging Flex Applications In Liferay with HTTPS and Single Sign-On Normally, Flex programs deployed to a server and are self contained with their own login screens. They do call the server-side, so the Flex executable must be downloaded from the server. To debug such Flex programs, in the Flex Builder, select Run|Debug|Other menu options, and set the URLs like so: When debugging Flex applications running on Liferay, it can be tricky. Most likely your Flex program will call the server-side, and user authentication is required.
In a normal flow of usage, a user logs onto Liferay, then the Flex application is launched; naturally, the user would not expect to login again into the Flex application. But this poses a dilemma for our debugging. If we still use the normal remote debugging of Flex, the “user” is not logged in, thus, many calls will fail; if we login to Liferay and navigate to the Flex wrapper HTML, how to attach the Flex debugger?
The solution for this dilemma is to silently fake a login user for the URLs of the Flex resources. Of course, this can only happen in the development environment. We will create a filter, which always sticks in the same user information into the session, so no explicit login is needed.
package test.flexlife; import java.io.IOException;
import javax.servlet.*;
import javax.servlet.http.*;
import com.liferay.portal.util.WebKeys;
public class MyDebugFilter implements Filter { private String screenName = “”; private Long userId = null; public void init(FilterConfig fc) { super.init(fc); screenName = fc.getInitParameter(“screenName”);
userId = Long.valueOf(fc.getInitParameter(“userId”)); } public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletRequest httpreq = (HttpServletRequest) req;
HttpSession session = httpreq.getSession(); session.setAttribute(WebKeys.USER_ID, userId); filterChain.doFilter(req, res); } } In your environment, your custom login handler may put more values into the session. You can fake them here as well just like we fake the userId. Let’s install this filter.
In ext\ext-web\docroot\WEB-INF\web.xml, add these lines: My Debug Filter test.flexlife.MyDebugFilter screenName test userId 10134 My Debug Filter /flexlife/*
How do you figure out the user information?
Run this query against the Liferay database:
SELECT userid, screenname from User_; Ok, you get the idea, and the code… Security Considerations of Flex Applications in Liferay Security Concerns It is a good practice to put security checks in the wrapper HTMLs and links. For instance, based on the role of the user, you may not even display the link leading to your Flex service.
Or the Flex wrapper JSP pages checks the user role and optionally display a message rather than the Flash player. But to hackers, the URL to the Flex executable SWF file is readily available. Your Flex program on Liferay needs to implement security checks.
Enforcing Security Check in Flex and Server Calls Some high-level mission-critical Liferay APIs do check on the user permissions before carrying out the operations. In Liferay, when a user is logged in, a user-id is stored in the HTTP session.
By getting this user and setting its permission checkers, you can use many of the Liferay APIs. The following is a useful helper method to invoke before calling such Liferay APIs:
import com.liferay.portal.model.User;
import com.liferay.portal.service.UserLocalServiceUtil;
import com.liferay.portal.security.auth.PrincipalThreadLocal;
import com.liferay.portal.security.permission.PermissionChecker;
import com.liferay.portal.security.permission.PermissionThreadLocal;
import com.liferay.portal.security.permission.PermissionCheckerFactory;
import com.liferay.portal.util.WebKeys;
import flex.messaging.FlexContext;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
/** * @return the login user of the session. Sets the permission checker if need to. */
protected User getCurrentUser() throws Exception
{ HttpServletRequest request = FlexContext.getHttpRequest(); HttpSession session = request.getSession();
Number userId = (Number)session.getAttribute(WebKeys.USER_ID);
User user = UserLocalServiceUtil.getUserById(userId.longValue());
if (PrincipalThreadLocal.getName() == null) { String name = String.valueOf(userId);
PrincipalThreadLocal.setName(name);
PermissionChecker pc = PermissionCheckerFactory.create(user, true);
PermissionThreadLocal.setPermissionChecker(pc); } return user; }
Lower-level Liferay APIs may not enforce user permission checks. When you make such calls, you need to programmatically enforce the user permissions. Cross-Domain Flex Applications Flex applications in Liferay portal pages can be served from other domains as well.
These Flex applications should not require users to log in again, so a single-sign-on infrastructure must exist across the Liferay server and the server servicing Flex applications. This is beyond the scope of this article. Conclusions This article explains the discrepancy of RIAs technologies and JSR-168 portals, and why special care must be given to accommodate Flex applications in Liferay portal pages.
It shows how to use and develop Flex applications on Liferay, and gives detailed steps to develop, debug, and host Flex applications in Liferay portal pages. If you have successfully done all these steps, you are well equipped for full-blown Flex development with Liferay. Congratulations and have fun!
Go through this link:
http://www.liferay.com/web/guest/community/wiki/-/wiki/Main/Developing+Flex+Applications+in+Liferay+Portals;jsessionid=79BFE86237B03060FF0EFBBFF6DF5308
-
Comments
socash on Advanced DataGrid Sorting raniskumar on Flex Automation raniskumar on Flex Automation
Jobs- An error has occurred; the feed is probably down. Try again later.
Rss feed
