Latest Entries »

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>

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>

javascript:

var map;
var geocoder;
var bounds;

var _count = 0;
var _max = 0;

var secs;
var timerID = null;
var timerRunning = false;
var delay = 1000;

function InitializeTimer() {
secs = 100;
StopTheClock();
StartTheTimer();
}

function StopTheClock() {
if (timerRunning)
clearTimeout(timerID);
timerRunning = false;
}

function StartTheTimer() {
if (secs == 0) {
StopTheClock();
}
else {
if (_max == _count) {
SetZoom();
StopTheClock();
}
else {
self.status = secs;
secs = secs – 1;
timerRunning = true;
timerID = self.setTimeout(“StartTheTimer()”, delay);
}
}
}

function SetZoom() {
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
}

function initializeGoogleMap(address, control) {
if (GBrowserIsCompatible()) {
bounds = new GLatLngBounds;
geocoder = new GClientGeocoder();

map = new GMap2(document.getElementById(control));

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(0, 0), 0);

var addresses = address.split(“;”);

_count = 0;
_max = addresses.length;

for (var i = 0; i < addresses.length; i++) {
AddAddress(addresses[i]);
}

InitializeTimer();
}
}

function AddAddress(address) {
var data = address.split(“~”);
geocoder.getLatLng(
data[1],
function (point) {
if (!point) {
_count++;
}
else {
var marker = new GMarker(point);
map.addOverlay(marker);
bounds.extend(marker.getPoint());

_count++;
var html = “<b>” + data[0] + “</b><br />” + data[1] + “<br />Phone: ” + data[2] + “, Fax: ” + data[3];
GEvent.addListener(marker, ‘click’, function () {
marker.openInfoWindowHtml(html);
});
}
}
);
}

Markup:
<asp:Literal ID=”litMapScript” runat=”server”></asp:Literal>
<div>
<div id=”map” runat=”server” style=”width: 570px; height: 290px;”>
</div>
</div>

C# :
string locations = “”;
list<Location> allLocation = all locations;
foreach (Location l in allLocation)
{
if (locations == “”)
locations += l.Title + “~”+ l.Address + “~” + l.Phone + “~” + l.Fax;
else
locations += “;” + l.Title + “~” + l.Address + “~” + l.Phone + “~” + l.Fax;

}

litMapScript.Text = string.Format(@”<script src=’http://maps.google.com/maps?file=api&amp;v=2&amp;key={0}&sensor=false’
type=’text/javascript’></script>”, ConfigurationManager.AppSettings[“MAPKEY”]);
Page.ClientScript.RegisterStartupScript(this.GetType(), “javaScript”, string.Format(“initializeGoogleMap(‘{0}’,'{1}’);”, locations, map.ClientID), true);

ConfigurationManager.AppSettings[“MAPKEY”] -> google map key

javascript:

var OriginalValidatorUpdateDisplay = null;
function NewValidatorUpdateDisplay(val) {

OriginalValidatorUpdateDisplay(val);
if (val.controltovalidate) {
if (!CheckValidatorsForControl(document.getElementById(val.controltovalidate))) {
if (document.getElementById(val.controltovalidate).toString() == “[object HTMLSelectElement]“)
document.getElementById(val.controltovalidate).style.backgroundColor = “#FFAAAA”;
else
document.getElementById(val.controltovalidate).style.background = “#FFAAAA”;
}
else {
if (document.getElementById(val.controltovalidate).toString() == “[object HTMLSelectElement]“)
document.getElementById(val.controltovalidate).style.backgroundColor = “”;
else
document.getElementById(val.controltovalidate).style.background = “#FCFCFC”;
}
}
}

if (typeof (ValidatorUpdateDisplay) == ‘function’) {
OriginalValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NewValidatorUpdateDisplay;
}

function CheckValidatorsForControl(control) {
for (var i = 0; i < control.Validators.length; i++) {
if (!control.Validators[i].isvalid) {
return false;
}
}
return true;
}

function fnOnUpdateValidators() {
for (var i = 0; i < Page_Validators.length; i++) {

var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);

if (ctrl != null && ctrl.style != null) {

if (!val.isvalid) {
if (ctrl.toString() == “[object HTMLSelectElement]“)
ctrl.style.backgroundColor = “#FFAAAA”;
else
ctrl.style.background = “#FFAAAA”;
}
else {
if (ctrl.toString() == “[object HTMLSelectElement]“)
ctrl.style.backgroundColor = “”;
else
ctrl.style.background = “#FCFCFC”;
}
}
}
}

C# code :

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), “val”, “fnOnUpdateValidators();”);
}

Javascript:

function lbIframeClose() {
parent.document.getElementById(“lbMain”).style.display = “none”;
parent.document.getElementById(“lbOverlay”).style.display = “none”;
}

Markup:

<a href=”javascript:lbIframeClose();”>Close Window</a>

javascript:

function isDate(s) {
if (s.search(/^\d{1,2}[\/|\-|\.|_]\d{1,2}[\/|\-|\.|_]\d{4}/g) != 0)
return false;

s = s.replace(/[\-|\.|_]/g, “/”);

var dt = new Date(Date.parse(s));

var arrDateParts = s.split(“/”);
return (
dt.getMonth() == arrDateParts[0] – 1 &&
dt.getDate() == arrDateParts[1] &&
dt.getFullYear() == arrDateParts[2]
);
}

javaScript :

function DefaultButton(event) {
if (event.keyCode == 13) {
var b = document.getElementById(‘<%= lbLogin.ClientID %>’);
if (b && typeof (b.click) == ‘undefined’) {
b.click = function() {
var result = true;
if (b.onclick) result = b.onclick();
if (typeof (result) == ‘undefined’ || result) {
eval(b.getAttribute(‘href’));
}
}
}
}
}

Markup:
<asp:Panel ID=”Panel1″ runat=”server” DefaultButton=”lbLogin”>
<asp:LinkButton ID=”lbLogin” runat=”server” OnClick=”lbLogin_Click”>
<img src=”images/btn_login_go.gif” width=”21″ height=”22″ alt=”Go” title=”Go” />
</asp:LinkButton>
<asp:TextBox ID=”txtPassword” CssClass=”input_text” runat=”server” TextMode=”Password” onkeypress=”javascript:DefaultButton(event);”/>
<label for=”<%= txtPassword.ClientID %>”>
Password:</label>
<asp:TextBox ID=”txtUserName” CssClass=”input_text” runat=”server” onkeypress=”javascript:DefaultButton(event);” />
<label for=”<%= txtUserName.ClientID %>”>
Login Name:</label>
</asp:Panel>

Trim

String.prototype.trim = function () {
return this.replace(/^\s*/, “”).replace(/\s*$/, “”);
}

var fontSize = 12; // default size of the font
function zoomIn() {
fontSize += 1;
document.body.style.fontSize = fontSize + “px”;
}
function zoomOut() {
fontSize -= 1;
document.body.style.fontSize = fontSize + “px”;
}