Sharathchandra

Thousands of geniuses live and die undiscovered – either by themselves or by others.

Autosize Textarea renderer for datagrid

Jul 19

Posted by sharathchandra sabbani in Flex | No Comments

Here is the piece of code you can use textarea for datagrid as itemrenderer. Based on the requirement it will show scrollbar otherwise it will adjust height automatically.


xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" xmlns:local="*">

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
callLater(assignHeight);
}
public function assignHeight():void
{
if(txtAutosize.textDisplay)
{
if(txtAutosize.textDisplay.textFlow.flowComposer.numLines <=2)
{
txtAutosize.heightInLines=txtAutosize.textDisplay.textFlow.flowComposer.numLines;
}else
{
txtAutosize.heightInLines=3;
}
}
}
]]>



Share

Tags: , , , , , , , ,

Timezone differences handling in flex

Jul 8

Posted by sharathchandra sabbani in Flex | No Comments

Hello

There are some situations you wanted to work with remote timezone instead of your local client machine timezone. In this case we need to work with UTC timezone offset calculation to get it done. You need follow simple steps to convert your local time to remote timezone. In My case it is EST timezone.

 

Get Adobe Flash player

 

1 ) Take your local time.

2) Convert it to UTC time by adding offset currently your timezone has.

var remoteTime:Date = new Date();
offsetMilliseconds = remoteTime.getTimezoneOffset() * 60 * 1000;
remoteTime.setTime(remoteTime.getTime() + offsetMilliseconds);

This simple code return UTC time. The next step would be converting to remote time zone. For this we need to know which timezone you want to convert your local time.

Lets say I want to convert my local time to EST timezone. EST timezone runs -5 Hours to UTC. So simply I can get the time by adding this to UTC time which I already converted to

offsetMilliseconds = -300 * 60 * 1000; // -300 i.e -5 Hours from UTC
remoteTime.setTime(remoteTime.getTime() + offsetMilliseconds);

The above code gives us remote time we wanted to work with. Thats it we are done.

There are some special cases we need to handle Daylight time savings also. Lets take EST zone – it has -4 Hours to UTC in DST mode, where as -5 Hours to UTC in Normal mode. So we can have work around to check these special cases as well. Thanks to FlexOOP for providing DST handling for US. They have free Dateutil library hosted on http://code.google.com/p/flexdateutils/. Use this library to find the UTC date is in DST or NOT.

In my case

var isDst:Boolean=isDST(remoteTime);
if(isDst)
{
//as EST DST time -4 hours from UTC
offsetMilliseconds = -240 * 60 * 1000; //-240 is -4 hours from UTC
remoteTime.setTime(remoteTime.getTime() + offsetMilliseconds);
}else
{
//as EST without DST time -5 hours from UTC
offsetMilliseconds = -300 * 60 * 1000;//-300 is -5 hours from UTC
remoteTime.setTime(remoteTime.getTime() + offsetMilliseconds);
}
public function isDST( date:Date ):Boolean {
return ( ( ObjectUtil.dateCompare( DaylightSavingTimeUS.DSTStart( date ), date ) < 0 ) && ( ObjectUtil.dateCompare( DaylightSavingTimeUS.DSTEnd( date ),date) > 0 ) );
}

You need to download the library from http://code.google.com/p/flexdateutils/ if you want to work with DST. Important thing is know the remote timezone offset for calculation. Try this. Goodluck.

Share

Tags: , , , , , , , , , ,

Flex 4 Spark Custom Rating component

Jun 28

Posted by sharathchandra sabbani in Flex | No Comments

Hello everyone

I’ve created Flex 4 rating control using custom spark skinning architecture.  Please find the component below. If you want sourcecode please send email to sharathchandra.sabbani@gmail.com

 

Get Adobe Flash player
Share

Tags: , , , ,

Adding focus support for group opened using popup manager

Mar 12

Posted by sharathchandra sabbani in Flex | No Comments

Hello !

If you open flex4 group container as popup you wont be having focus enabled in it by default as skinnable container. If you want to get the focus into group container you need to gain, you need to implement IFocusManagerContainer interface. Just find the below code snippet for getting focus to group container as popup.

package {

import mx.core.ContainerGlobals;

import mx.core.IFlexDisplayObject;

import mx.managers.IFocusManagerContainer;

import spark.components.Group;

public class FocusEnabledGroupPopup extends Group implements IFocusManagerContainer

{

private var _defaultButton:IFlexDisplayObject;

public function FocusEnabledGroupPopup()

{

super();

}

public function get defaultButton():IFlexDisplayObject

{

return _defaultButton;

}

public function set defaultButton(value:IFlexDisplayObject):void

{

_defaultButton = value;

ContainerGlobals.focusedContainer = null;

}

}

}

Share

Tags: , , , , , ,

Enter keyboard press selection checkbox

Mar 12

Posted by sharathchandra sabbani in Flex | No Comments

Hello !

By default if checkbox has focus in it, you can select it with keyboard using space bar. Sometimes you have requirement to select it with other key instead of spacebar. In my case I wanted to select focused checkbox with enter key press. I extended checkbox to support this.please find code snippet below for flex 4.

 

package {

import flash.events.KeyboardEvent;

import flash.events.MouseEvent;

import flash.ui.Keyboard;

import spark.components.CheckBox;

public class EnterKeyCheckbox extends CheckBox

{

public function EnterKeyCheckbox()

{

super();

}

override protected function keyDownHandler(event:KeyboardEvent):void

{

if (event.keyCode != Keyboard.ENTER) return;

keyboardPressed = true;

event.updateAfterEvent(); }

override protected function keyUpHandler(event:KeyboardEvent):void {

if (event.keyCode != Keyboard.ENTER) return;

if (enabled && keyboardPressed) {

buttonReleased(); keyboardPressed = false;

dispatchEvent(new MouseEvent(MouseEvent.CLICK));

}

event.updateAfterEvent();

}

}

}

Share

Tags: , , , ,

Truncated textinput flex 4

Dec 23

Posted by sharathchandra sabbani in Flex | No Comments

I’ve created a component which has truncation feature as label control. It will append ‘…’ to the text input control if the given text is more than the width.If you mouseover the textinput it will show the full text in tooltip.

package
{
import flash.events.FocusEvent;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.text.TextFormat;
import flash.text.engine.TextLine;

import flashx.textLayout.compose.TextFlowLine;

import mx.core.mx_internal;

import spark.components.TextInput;

/**
* Author – Sharathchandra
**/

public class TruncatedTextInput extends TextInput
{

private var originalText:String=”";
private var teLine:TextLine;
private var isTruncated:Boolean=false;
private var consumedWidth:Number = 0;
private var truncationIndicator:String=”…”;

public function TruncatedTextInput()
{
super();
addEventListener(FocusEvent.FOCUS_IN,onFocusIn);
addEventListener(FocusEvent.FOCUS_OUT,onFocusOut);
addEventListener(MouseEvent.MOUSE_OVER,onMouseOver);

}

private function onFocusIn(event:FocusEvent):void
{
if(originalText.length!=0)
{
this.text=originalText;
}
this.selectRange(this.text.length,this.text.length);
}

private function truncateText(width:Number):void
{
var truncateAtCharPosition:int = getTruncationPosition(
TextLine(teLine),width);

if(consumedWidth > width)
{
var truncText:String = text.slice(0, truncateAtCharPosition – 2) +
truncationIndicator;
this.text = truncText;
isTruncated=true;

}else
{
this.text=text;
isTruncated=false;
}
consumedWidth=0;
invalidateDisplayList();
}

private function getTruncationPosition(line:TextLine,
allowedWidth:Number):int
{

var charPosition:int = line.textBlockBeginIndex;
while (charPosition < line.textBlockBeginIndex + line.rawTextLength) { var atomIndex:int = line.getAtomIndexAtCharIndex(charPosition); var atomBounds:Rectangle = line.getAtomBounds(atomIndex); consumedWidth += atomBounds.width; if (consumedWidth > allowedWidth)
break;
charPosition = line.getAtomTextBlockEndIndex(atomIndex);
}
line.flushAtomData();
return charPosition;
}

private function onMouseOver(event:MouseEvent):void
{
invalidateDisplayList();
}

private function onFocusOut(event:FocusEvent):void
{
originalText=this.text;
if(this.textDisplay)
{
var tfl:TextFlowLine = this.textDisplay.textFlow.flowComposer.getLineAt(0);
teLine=tfl.getTextLine(true);
}
//.mx_internal::textContainerManager.getLineAt(0);
if(teLine)
{
truncateText(width);
}
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);

if(isTruncated)
{
this.toolTip=originalText;
}else
{
this.toolTip=null;
}

}
}
}

Share

Tags: , , , , ,

showing a tooltip on a disabled button in flex 4

Dec 23

Posted by sharathchandra sabbani in Flex | No Comments

I noticed in flex 4 you wont be able to see the tooltip for disabled button, where as in flex 3 you will see that disabled button will open tooltip. I came across this problem and wrote one custom component which serve the purpose in flex 4. Please find the code below.

package
{
import flash.events.MouseEvent;

import mx.managers.ToolTipManager;

import spark.components.Button;
import spark.components.supportClasses.ButtonBase;

public class Tooltipbutton extends Button
{

public var isTooltipEnabled:Boolean=false;
public function Tooltipbutton()
{
super();
addMyHandlers();

}

protected function addMyHandlers():void
{
addEventListener(MouseEvent.ROLL_OVER, myMouseHandler);
addEventListener(MouseEvent.ROLL_OUT, myMouseHandler);
addEventListener(MouseEvent.MOUSE_DOWN, myMouseHandler);
addEventListener(MouseEvent.MOUSE_UP, myMouseHandler);
addEventListener(MouseEvent.CLICK, myMouseHandler);
}

private function myMouseHandler(event:MouseEvent):void
{
if(!isTooltipEnabled)
{
event.preventDefault();
event.stopImmediatePropagation();
}
}

override public function set enabled(value:Boolean):void
{

if(value==true)
{
super.enabled=value;
}
isTooltipEnabled=value;
invalidateSkinState();
}

override protected function getCurrentSkinState():String
{

super.getCurrentSkinState();

if (!isTooltipEnabled)
return “disabled”;

if (hovered || mouseCaptured)
return “over”;

return “up”;
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
}
}

tweak it as per your requirement.

 

Share

Tags: , , , , , ,

Datagrid color change scrolling issue

Dec 7

Posted by sharathchandra sabbani in Flex | No Comments

If you are facing the problem with item renderer color change issues in data grid while scrolling, you need to write this small snippet code based on the requirement in updatedisplaylist method.

1)First extend lablecontrol to create itemrenderer

2) override updatedisplaylist method  write the following snippet

var g:Graphics=graphics;

if(data)

{

if(data.somecondition)

{

g.beginfill(colorcode);

g.drawrect(0,0,unscaledwidth,unscaledheight);

g.endfill();

}

}

This will fix color jumbling issue while scrolling.

 

You can also write it in set data method

override public function set data(value:Object):void

{

if(value==null)

return;

if(value.somecondition==’somevalue’)

{

assign color you want. #0000FF

// You need to write else block.It’s must to fix scrolling color change issue because datagrid recycling make use of the same itemrender.so assign default color in else block.

}

else

{

assign default color. #FFFFFF

}

}

 

Share

Tags: , , , , , ,

Popupmanager using in flex4

Jun 7

Posted by sharathchandra sabbani in Flex | No Comments

Hi just wanted to share small thing with you guys that Popupmanager.addpopup() method wont take flex 4 controls as child instead you need to use old flex 3 controls (canvas instead flex4 group).

Share

Tags: , ,

Efflex Effects explorer for flex3

May 20

Posted by sharathchandra sabbani in Flex | No Comments

Try this effect explorer good one.

http://www.efflex.org/EfflexExplorer.html

Share