June 29, 2009

Dynamically draw ploygon in Flex

Hi,
In below example is very nice one for dynamically add the polygon based on the mouse click and it allows only for four sides. The below example code fully written in action script.

private var drawPanel:Sprite;
private var numSpot:Number = 0;
private var line:Shape;
private var _lineArr:Array;
private function onDrawTriangle():void
{
var ui:UIComponent = new UIComponent();
drawPanel = new Sprite();
drawPanel.graphics.clear();
drawPanel.graphics.lineStyle(2, 0xFF0000);
drawPanel.graphics.beginFill(0xDEFACE);
drawPanel.graphics.drawRect(0,0,300,300);
drawPanel.graphics.endFill();
ui.addChild(drawPanel);
addChild(ui);
ui.x = 20;
ui.y = 20;

_lineArr = new Array();
line = new Shape();
drawPanel.addEventListener(MouseEvent.CLICK,onAddPoint);
}

private function onAddPoint(evt:MouseEvent):void
{
if(numSpot <= 4)
{
var point:Sprite = new Sprite();
point.graphics.clear();
point.graphics.lineStyle(0,0x0000FF);
point.graphics.beginFill(0x0000FF);
point.graphics.drawCircle(0,0,5);
point.graphics.endFill();

point.x = evt.localX;
point.y = evt.localY;
_lineArr.push({x:point.x,y:point.y});
drawPanel.addChild(point);
if(numSpot > 0)
drawLine();
numSpot++;
}
}

private function drawLine():void
{
line.graphics.clear();
line.graphics.lineStyle(2,0x000000);
if(_lineArr.length > 2)
line.graphics.beginFill(0xFF0000,0.5);
line.graphics.moveTo(_lineArr[0].x,_lineArr[0].y);
for(var i:int=1;i<_lineArr.length;i++)
{
line.graphics.lineTo(_lineArr[i].x,_lineArr[i].y);
}
line.graphics.lineTo(_lineArr[0].x,_lineArr[0].y);
if(_lineArr.length > 2)
line.graphics.endFill();
drawPanel.addChildAt(line,0);
}

Dynamically draw circle based on mouse move in Flex

Hi,
The circle dynamically drawn at mouse starting point and its size varies based on the mouse movement. In below example is for draw the circle dynamically in action script code in flex

private var _cir:Sprite;
private var _rect:Rectangle;
private function onDrawCircle():void
{
var ui:UIComponent = new UIComponent();
var drawPanel:Sprite = new Sprite();
drawPanel.graphics.clear();
drawPanel.graphics.lineStyle(2, 0xFF0000);
drawPanel.graphics.beginFill(0xDEFACE);
drawPanel.graphics.drawRect(0,0,300,300);
drawPanel.graphics.endFill();
ui.addChild(drawPanel);
addChild(ui);
ui.x = 20;
ui.y = 20;

_cir = new Sprite();
_cir.graphics.clear();
_cir.graphics.beginFill(0x00FF00,0.5);
_cir.graphics.drawCircle(0,0,0);
_cir.graphics.endFill();
drawPanel.addChild(_cir);
_cir.x = 10;
_cir.y = 10;
_rect = new Rectangle();
addEventListener(MouseEvent.MOUSE_DOWN,onCircleDown);
addEventListener(MouseEvent.MOUSE_UP,onCircleUp);
}

private function onCircleDown(evt:MouseEvent):void
{
var spr:Sprite = evt.target as Sprite;
_rect = spr.getBounds(spr.parent);
addEventListener(MouseEvent.MOUSE_MOVE,onCircleMove);
}

private function onCircleMove(evt:MouseEvent):void
{
var spr:Sprite = evt.target.parent as Sprite;
_rect.bottomRight = new Point(spr.mouseX,spr.mouseY);

_cir.graphics.clear();
_cir.graphics.beginFill(0x00FF00,0.5);
_cir.graphics.drawCircle(_rect.width/2, _rect.width/2, _rect.width/2);
_cir.graphics.endFill();
}

private function onCircleUp(evt:MouseEvent):void
{
removeEventListener(MouseEvent.MOUSE_MOVE,onCircleMove);
}

Custom Webservice class for access web services

Hi,
I am developed the web service class for accessing the webservice and webservice input as array values and this webservice class return the xml values to the call back function and based on the response we can proceed

package service
{
import mx.managers.CursorManager;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.soap.LoadEvent;
import mx.rpc.soap.WebService;

public class URLWebService
{
private var _argValues:Array;
private var _serviceURL:String = "";
private var _operationName:String = "";
private var _callbackObject:Object;
private var _callbackFun:Function;
private var webService:WebService;
private var _showBusyCursor:Boolean = false;
private var _isArguments:Boolean = false;

private var _serviceError:MessageServices = new MessageServices("Service Load Problem","Warning");
private var _webServiceURLError:MessageServices = new MessageServices("Webservice URL Error","Warning");

public function get serviceURL():String
{
return _serviceURL;
}
public function set serviceURL(val:String):void
{
if(_serviceURL != val)
_serviceURL = val;
}

public function get operationName():String
{
return _operationName;
}
public function set operationName(val:String):void
{
if(_operationName != val)
_operationName = val;
}

public function get showBusyCursor():Boolean
{
return _showBusyCursor;
}
public function set showBusyCursor(val:Boolean):void
{
if(_showBusyCursor != val)
_showBusyCursor = val;
}

public function get argValues():Array
{
return _argValues;
}
public function set argValues(val:Array):void
{
if(_argValues != val)
_argValues = val;
}

public function get callbackObject():Object
{
return _callbackObject;
}
public function set callbackObject(val:Object):void
{
if(_callbackObject != val)
_callbackObject = val;
}

public function get callbackFun():Function
{
return _callbackFun;
}
public function set callbackFun(val:Function):void
{
if(_callbackFun != val)
_callbackFun = val;
}

public function get serviceError():MessageServices
{
return _serviceError;
}
public function set serviceError(val:MessageServices):void
{
if(_serviceError != val)
_serviceError = val;
}

public function get webServiceURLError():MessageServices
{
return _webServiceURLError;
}
public function set webServiceURLError(val:MessageServices):void
{
if(_webServiceURLError != val)
_webServiceURLError = val;
}

public function URLWebService()
{

}

public function load(argVal:Array=null,callbackObject:Object=null,callbackFunction:Function=null):void
{
if(_serviceURL && _serviceURL != "")
{
if(argVal)
{
_argValues = argVal;
_isArguments = true;
}
if(_showBusyCursor)
{
CursorManager.setBusyCursor();
}

webService = new WebService();
webService.wsdl = _serviceURL;
webService[_operationName].resultFormat = "e4x";
webService[_operationName].addEventListener(ResultEvent.RESULT,onResult);
webService[_operationName].addEventListener(FaultEvent.FAULT,onFault);
webService.addEventListener(LoadEvent.LOAD,onLoad);

webService.loadWSDL();
_callbackObject = callbackObject;
_callbackFun = callbackFunction;
}
else
_webServiceURLError.show();
}

private function onResult(evt:ResultEvent):void
{
if(_callbackObject && _callbackFun != null)
{
var xml:XML = new XML(evt.result);
var ResultXML:XML;
try
{
ResultXML = XML(xml.*.*);
if(_showBusyCursor)
CursorManager.removeBusyCursor();

}
catch(e:Error)
{
ResultXML = new XML("Sucessfully Added");
}
_callbackFun.call(_callbackObject,ResultXML);
}
else
_serviceError.show();
webService[_operationName].removeEventListener(ResultEvent.RESULT,onResult);
}

private function onFault(evt:FaultEvent):void
{
_serviceError.show();
webService[_operationName].removeEventListener(FaultEvent.FAULT,onFault);
}

private function onLoad(evt:LoadEvent):void
{
if(_isArguments)
{
_isArguments = false;
var input:Object = new Object();
for(var i:int=0;i<_argValues.length;i++)
{
input[_argValues[i].name] = _argValues[i].value;
}
webService[_operationName].arguments = input;
}
webService[_operationName].send();
webService.removeEventListener(LoadEvent.LOAD,onLoad);
}
}}

Dynamically add or remove the ToggleButton controls in Flex

Hi,
We can dynamically add the button controls into toggle button controls by following way

var obj:Object = new Object();
obj.icon = _iconArray[_buttonIndex];
_buttonArray.push(obj);
_togg.dataProvider = _buttonArray;

as well as we can remove the button controls from the toggle buttoncontrols by following way

_buttonArray.pop();
_togg.dataProvider = _buttonArray;

Dynamically set ToggleButton contol in Flex

Hi,
We can set the toggle button control dynamically based on the xml or array values. In below function use icon array as the array for the icon assets for the button controls and panel was the container for adding the ToggleButtonBar controls.

private function onLoadTools():void
{
var _buttonArray:Array = new Array();
var _togg:ToggleButtonBar = new ToggleButtonBar();
_togg.direction = "vertical";
_togg.toggleOnClick = false;
for(var i:int=0;i<_iconArray.length-1;i++)
{
var obj:Object = new Object();
obj.icon = _iconArray[i];
_buttonArray.push(obj);
}
_togg.dataProvider = _buttonArray;
panel.addChild(_togg);
_togg.addEventListener(ItemClickEvent.ITEM_CLICK,onToolsClick);
}

Flex Programming Architecture

Hi,
The Flex programming style may be varied based on the programmers. Some of the programmers are more familiar in writing coding in a class style and some of them familiar in writing the mxml components. Here i mention the some of the ways you can create the Flex programming

1)the entire project can be coded in actionscript
2)actionscript can be embedded into your MXML file using the tags
3)actionscript can be used to create custom classes/components, and to extend any of the flex classes.
4) actionscript functions can be called from within components declared with MXMLfor example:

June 08, 2009

Access local files in Adobe Flex 3.2 sdk and FP10

Hi,
The Flex3.2 sdk and Flash Player 10 will support for access local files in your system. The file stream class used to access the local system files as bytes array and File Reference class has new methods as load () for load the local system files and save () method for save the modified content into local system. These Load () and save () method only accessed by Flex3.2 sdk and FlashPlayer10 only. If you already have Flex3 sdk then you can upgrade Flex3.2 sdk or latest version of sdk and check whether you are using the FlashPlayer10 version or not. If you are not using the Flash player10 version then upgrade the Flash player also. Then you can play with accessing the local system files.