Category: Flex


Dragable Widget

Create a MXML Component based on Canvas & this component code will be

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
width=”100%”
height=”100%”
cornerRadius=”0″
borderStyle=”solid”
borderColor=”#7F2C01″
borderThickness=”0″
alpha=”1.0″
creationComplete=”this.init()”
remove=”RemoveCurrent()”
xmlns:ns1=”GameClient.FJ.UI.Component.*”>
<mx:Style source=”Style/Style.css” />
<mx:Canvas id=”cvsTop1″ top=”25″ bottom=”0″ left=”0″ right=”0″ backgroundColor=”#FFFFFF” borderColor=”#842801″ borderStyle=”solid” cornerRadius=”9″ alpha=”0.59″>
<mx:Canvas left=”0″ right=”0″ top=”10″ bottom=”10″ id=”cvsMiddle”>
</mx:Canvas>
</mx:Canvas>

<mx:Script>
<![CDATA[
import GameClient.Business.Interfaces.IUser;
import mx.controls.Alert;
private var _difX:Number;
private var _difY:Number;
private var _title:String = “”;

public function set Title(title:String):void
{
this._title = title;
}

public function init():void
{
lblTitle.text = _title;
cvsHeader.addEventListener(MouseEvent.MOUSE_DOWN,dragStart);
this.parent.parent.addEventListener(Event.RESIZE,resize);
}

private function RemoveCurrent():void
{
stage.removeEventListener(Event.RESIZE,resize);
}

private function dragStart(event:MouseEvent):void
{
_difX = this.parent.x – event.stageX;
_difY = this.parent.y – event.stageY;
this.parent.parent.addEventListener(MouseEvent.MOUSE_UP,dragEnd);
this.parent.parent.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
}

private function mouseMove(event:MouseEvent):void
{
SetPosition(event);
}

private function dragEnd(event:MouseEvent):void
{
SetPosition(event);
this.parent.parent.removeEventListener(MouseEvent.MOUSE_UP,dragEnd);
this.parent.parent.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
}

private function SetPosition(event:MouseEvent):void
{
var nextX:Number = event.stageX+_difX;
var nextY:Number = event.stageY+_difY;
if(nextX<0)
nextX = 0;
if(nextY<0)
nextY = 0;
if(this.parent.parent.width<nextX+this.parent.width)
nextX = this.parent.parent.width – this.parent.width;
if(this.parent.parent.height<nextY+this.parent.height)
nextY = this.parent.parent.height – this.parent.height;
this.parent.x = nextX;
this.parent.y = nextY;
}

private function resize(e:Event):void
{
var nextX:Number = this.parent.x;
var nextY:Number = this.parent.y;
if(nextX<0)
nextX = 0;
if(nextY<0)
nextY = 0;
if(this.parent.parent.width<nextX+this.parent.width)
nextX = this.parent.parent.width – this.parent.width;
if(this.parent.parent.height<nextY+this.parent.height)
nextY = this.parent.parent.height – this.parent.height;
this.parent.x = nextX;
this.parent.y = nextY;
}
]]>
</mx:Script>

<mx:Canvas cornerRadius=”9″ borderStyle=”solid”
borderThickness=”1″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off”
left=”0″ right=”0″ top=”0″ height=”35″ borderColor=”#842801″>

<ns1:GradientCanvas
cornerRadius=”9″ borderStyle=”solid”
borderThickness=”0″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off”
left=”0″ right=”0″ top=”0″ height=”28″
styleName=”header”>
<mx:Label text=”Label” id=”lblTitle” x=”15″ y=”7″ width=”{parent.width – 40}”/>
</ns1:GradientCanvas>
</mx:Canvas>

<mx:Canvas height=”13″ borderColor=”#842801″ backgroundColor=”#842801″ borderStyle=”solid” borderThickness=”0″ left=”0″ right=”0″ top=”22″>
</mx:Canvas>

<mx:Canvas id=”cvsHeader” left=”0″ right=”0″ top=”0″ height=”40″>
</mx:Canvas>

</mx:Canvas>

Advertisements

Using the Auto Resizable Text Area & Dragable Widget we can create the custom alert that can show html test & it’s height can be changed auto.  Create a MXML Component & this component code will be

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
width=”200″
height=”{this.txtArea.height + 90}”
creationComplete=”this.init()”  xmlns:ns1=”GameClient.FJ.UI.Component.Widget.*” xmlns:ns2=”GameClient.FJ.UI.Component.TextArea.*”>
<mx:Script>
<![CDATA[
import GameClient.FJ.Managers.FJPopUpManager;
import mx.core.IFlexDisplayObject;
import mx.events.ResizeEvent;
import mx.managers.BrowserManager;
import mx.events.DragEvent;
import mx.managers.IFocusManagerContainer;
import mx.core.FlexVersion;
import mx.events.FlexEvent;
import mx.events.CloseEvent;
import mx.controls.Button;
import mx.controls.Alert;
import away3d.core.draw.ScreenVertex;
import mx.controls.Text;
import mx.core.UIComponent;
import mx.core.Application;
import mx.managers.ISystemManager;

private var _title:String = “”;
private var _text:String = “”;

public static const YES:uint = 0x0001;
public static const NO:uint = 0x0002;
public static const OK:uint = 0x0004;
public static const CANCEL:uint= 0x0008;
public static const NONMODAL:uint = 0x8000;
public var buttonFlags:uint = OK;
public var defaultButtonFlag:uint = OK;

public static var buttonWidth:Number = FlexVersion.compatibilityVersion < FlexVersion.VERSION_3_0 ? 60 : 65;
public static var buttonHeight:Number = 22;
private var _height:Number = 100;
private var _width:Number = 200;
private var _difX:Number;
private var _difY:Number;

private static var _backgroundColor:String = “#FFFFFF”;

public static function get BackGroundColor():String
{
return _backgroundColor;
}

public static function set BackGroundColor(value:String):void
{
_backgroundColor = value;
}

private static var _cancelLabel:String = “Cancel”;
private static var _cancelWidth:Number = buttonWidth;

public static function get cancelLabel():String
{
return _cancelLabel;
}

public static function set cancelLabel(value:String):void
{
_cancelLabel = value;
}

public static function get cancelWidth():Number
{
return _cancelWidth;
}

public static function set cancelWidth(value:Number):void
{
_cancelWidth = value;
}

private static var _noLabel:String = “No”;
private static var _noWidth:Number = buttonWidth;

public static function get noLabel():String
{
return _noLabel;
}

public static function set noLabel(value:String):void
{
_noLabel = value;
}

public static function get noWidth():Number
{
return _noWidth;
}

public static function set noWidth(value:Number):void
{
_noWidth = value;
}

private static var _okLabel:String = “Ok”;
private static var _okWidth:Number = buttonWidth;

public static function get okLabel():String
{
return _okLabel;
}

public static function set okLabel(value:String):void
{
_okLabel = value;
}

public static function get okWidth():Number
{
return _okWidth;
}

public static function set okWidth(value:Number):void
{
_okWidth = value;
}

private static var _yesLabel:String = “Yes”;
private static var _yesWidth:Number = buttonWidth;

public static function get yesLabel():String
{
return _yesLabel;
}

public static function set yesLabel(value:String):void
{
_yesLabel = value;
}

public static function get yesWidth():Number
{
return _yesWidth;
}

public static function set yesWidth(value:Number):void
{
_yesWidth = value;
}

private function set Title(title:String):void
{
_title = title;
}

private function set Text(text:String):void
{
_text = text;
}

private function set Height(value:Number):void
{
_height = value;
}

private function set Width(value:Number):void
{
_width = value;
}

public function init():void
{
baseAlert.lblTitle.text = _title;
this.width = _width;
this.validateNow();
txtArea.htmlText = _text;

var defaultButton:Button = null;
var numberOfActiveButton:Number = 0;
var buttonsWidth:Number = 0;

if (buttonFlags & OK)
{
var button:Button = createButton(okLabel, “OK”)
cvsButton.addChild(button);
numberOfActiveButton++;
buttonsWidth += okWidth;
if (defaultButtonFlag == OK)
defaultButton = button;
}

if (buttonFlags & CANCEL)
{
var button:Button = createButton(cancelLabel, “CANCEL”);
cvsButton.addChild(button);
numberOfActiveButton++;
buttonsWidth += cancelWidth;
if (defaultButtonFlag == CANCEL)
defaultButton = button;
}

if (buttonFlags & YES)
{
var button:Button = createButton(yesLabel, “YES”);
cvsButton.addChild(button);
numberOfActiveButton++;
buttonsWidth += yesWidth;
if (defaultButtonFlag == YES)
defaultButton = button;
}

if (buttonFlags & NO)
{
var button:Button = createButton(noLabel, “NO”);
cvsButton.addChild(button);
numberOfActiveButton++;
buttonsWidth += noWidth;
if (defaultButtonFlag == NO)
defaultButton = button;
}

if(defaultButton != null)
{
this.defaultButton = defaultButton;

defaultButton.setFocus();
}

cvsButton.x = (_width – (buttonsWidth + numberOfActiveButton * 8))/2;
Reset();
}

private function Reset():void
{
_cancelLabel = “Cancel”;
_cancelWidth = buttonWidth;
_noLabel = “No”;
_noWidth = buttonWidth;
_okLabel = “Ok”;
_okWidth = buttonWidth;
_yesLabel = “Yes”;
_yesWidth = buttonWidth;
}

private function createButton(label:String, name:String):Button
{
var button:Button = new Button();

button.label = label;

button.name = name;

button.addEventListener(MouseEvent.CLICK, clickHandler);
button.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

button.setActualSize(buttonWidth,buttonHeight);

if(name == “OK”)
button.width = okWidth;
else if(name == “CANCEL”)
button.width = cancelWidth;
else if(name == “YES”)
button.width = yesWidth;
else if(name == “NO”)
button.width = noWidth;

return button;
}

private function clickHandler(event:MouseEvent):void
{
var name:String = Button(event.currentTarget).name;
removeAlert(name);
}

override protected function keyDownHandler(event:KeyboardEvent):void
{
var buttonFlags1:uint = buttonFlags;

if (event.keyCode == Keyboard.ESCAPE)
{
if ((buttonFlags1 & Alert.CANCEL) || !(buttonFlags1 & Alert.NO))
removeAlert(“CANCEL”);
else if (buttonFlags & Alert.NO)
removeAlert(“NO”);
}
}

private function removeAlert(buttonPressed:String):void
{

this.visible = false;

var closeEvent:CloseEvent = new CloseEvent(CloseEvent.CLOSE);
if (buttonPressed == “YES”)
closeEvent.detail = FJAlert.YES;
else if (buttonPressed == “NO”)
closeEvent.detail = FJAlert.NO;
else if (buttonPressed == “OK”)
closeEvent.detail = FJAlert.OK;
else if (buttonPressed == “CANCEL”)
closeEvent.detail = FJAlert.CANCEL;
this.dispatchEvent(closeEvent);

FJPopUpManager.removePopUp(this);
}

public static function show(text:String = “”, title:String = “Alert!!!”,
flags:uint = 0x4 /* Alert.OK */,
parent:Sprite = null,
closeHandler:Function = null,
iconClass:Class = null,
defaultButtonFlag:uint = 0x4,
height:Number = 100,
width:Number = 200 ):void
{
var alert:FJAlert = new FJAlert();
alert.Title = title;
alert.Text = text;
alert.Height = height;
alert.Width = width;

if (flags & OK||
flags & CANCEL ||
flags & YES ||
flags & NO)
{
alert.buttonFlags = flags;
}

if (defaultButtonFlag == OK ||
defaultButtonFlag == CANCEL ||
defaultButtonFlag == YES ||
defaultButtonFlag == NO)
{
alert.defaultButtonFlag = defaultButtonFlag;
}

if (closeHandler != null)
alert.addEventListener(CloseEvent.CLOSE, closeHandler);

if(parent == null)
{
var sm:ISystemManager = ISystemManager(Application.application.systemManager);
if (sm.useSWFBridge())
parent = Sprite(sm.getSandboxRoot());
else
parent = Sprite(Application.application);
}

var browserHeight:Number = Application.application.parent.height;
var browserWidth:Number = Application.application.parent.width;

if(browserHeight != 0 && browserWidth != 0)
{
alert.x = (browserWidth – alert._width)/2;
alert.y = (browserHeight – alert._height)/2;
}
else
{
alert.x = 200;
alert.y = 200;
}

if (parent is UIComponent)
alert.moduleFactory = UIComponent(parent).moduleFactory;

alert.setActualSize(alert.getExplicitOrMeasuredWidth(),
alert.getExplicitOrMeasuredHeight());

FJPopUpManager.addPopUp(alert,parent,true);
}
]]>
</mx:Script>
<ns1:BaseWidget id=”baseAlert” left=”0″ right=”0″ top=”0″ bottom=”0″>
</ns1:BaseWidget>
<mx:Canvas id=”cvsHeader” left=”0″ right=”0″ top=”0″ height=”40″>
</mx:Canvas>
<mx:Canvas horizontalScrollPolicy=”off” verticalScrollPolicy=”off” top=”45″ left=”12″ right=”12″ height=”{txtArea.height}” borderThickness=”0″ borderStyle=”solid”>
<ns2:FJTextArea id=”txtArea” borderThickness=”0″ editable=”false” backgroundAlpha=”0.0″ left=”0″ right=”0″ height=”10″
horizontalScrollPolicy=”off” verticalScrollPolicy=”off” autoResize=”true” wordWrap=”true” fontSize=”12″>
</ns2:FJTextArea>
</mx:Canvas>
<mx:HBox id=”cvsButton” bottom=”10″ height=”25″>
</mx:HBox>
</mx:Canvas>

Create a MXML Component based on TextArea & this component code will be

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:TextArea xmlns:mx=”http://www.adobe.com/2006/mxml”&gt;
<mx:Script>
<![CDATA[

private var _autoResizable:Boolean = false;

[Bindable(event=”changeAutoResize”)]
public function get autoResize():Boolean
{
return _autoResizable;
}

public function set autoResize(b:Boolean):void
{
_autoResizable = b;
if (this.mx_internal::getTextField() != null &&
_autoResizable == true)
resizeTextArea();
dispatchEvent(new Event(“changeAutoResize”));
}

override public function set text(value:String):void
{
super.text = value;
if (_autoResizable)
resizeTextArea();
}

override public function set htmlText(value:String):void
{
super.htmlText = value;
if (_autoResizable)
resizeTextArea();
}

private function resizeTextArea():void
{
var totalHeight:uint = 10;
this.validateNow();
var wi:Number = this.width;
var noOfLines:int = this.mx_internal::getTextField().numLines;
for (var i:int = 0; i < noOfLines; i++)
{
var textLineHeight:int =
this.mx_internal::getTextField().getLineMetrics(i).height;
totalHeight += textLineHeight;
}
this.height = totalHeight;
}
]]>
</mx:Script>
</mx:TextArea>