Archive for category Flex

Sort Arraycollection based on date field in Flex

If you have ArrayCollection as Dataprovider to Datagrid and you want to sort dataprovider based on single date field for ex: created_Date or modified_Date, then below is code snippet:

public function sortOnFilterModifiedDate():void
{
var dataSortField:SortField = new SortField();
dataSortField.name = “modified_Date”;//date field
dataSortField.numeric = false;
dataSortField.descending = true;//true or false do not affect sorting logic
dataSortField.caseInsensitive = true;

var filterModifiedDateSort:Sort = new Sort();
filterModifiedDateSort.fields = [dataSortField];
filterModifiedDateSort.compareFunction = filterModifiedDateSortCompareFunc;

pageFilters.sort = filterModifiedDateSort;
pageFilters.refresh();

}

private function filterModifiedDateSortCompareFunc (itemA:Object,itemB:Object,fields:Array):int
{
return ObjectUtil.dateCompare(DateFormatter.parseDateString(itemA.modified_Date),

DateFormatter.parseDateString(itemB.modified_Date));
}

Use below code to sort in Descending order: -1*ObjectUtil.dateCompare(DateFormatter.parseDateString(itemA.modified_Date),

DateFormatter.parseDateString(itemB.modified_Date));

,

Leave a comment

Gradient background container with button as icon with states

 

<s:Group width=”170″ height=”20″>
<s:Rect left=”0″ top=”0″ right=”0″ bottom=”0″>
<s:stroke>
<s:SolidColorStroke color=”#e9e9e9″ />
</s:stroke>
<s:fill>
<s:LinearGradient rotation=”-90″>
<s:GradientEntry color=”#cccccc” ratio=”.4″ />
<s:GradientEntry color=”#eeeeee” />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label left=”5″ right=”5″ top=”2″ bottom=”2″
text=”title” fontSize=”10″
verticalAlign=”middle” />
<s:Button width=”10″ height=”10″ right=”8″ top=”3″
buttonMode=”true” click=”clickHandler(event)”
skinClass=”ButtonIconSkin”/>
</s:Group>

 

ButtonIconSkin.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<s:Skin xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>
<!– host component –>
<fx:Metadata>
[HostComponent(“spark.components.Button”)]
</fx:Metadata>

<!– states –>
<s:states>
<s:State name=”disabled” />
<s:State name=”down” stateGroups=”stateUp” />
<s:State name=”over” />
<s:State name=”up” stateGroups=”stateUp” />
</s:states>

<s:Group visible.stateUp=”false” visible=”true” buttonMode=”true”>
<s:BitmapImage source=”@Embed(‘../images/icon_maximize_up.png’)” />
</s:Group>
<s:Group visible.stateUp=”true” visible=”false” buttonMode=”true”>
<s:BitmapImage source=”@Embed(‘../images/icon_maximize_normal.png’)” />
</s:Group>
</s:Skin>

 

, ,

Leave a comment

Flex rich text editor with toolbar at top instead of bottom

<mx:RichTextEditor id=”richTextEditor” creationComplete=”richTextEditor_creationCompleteHandler(event)”
width=”550″ height=”200″
headerHeight=”0″ />

Script:

protected function richTextEditor_creationCompleteHandler(event:FlexEvent):void

{
richTextEditor.toolbar.removeChild(richTextEditor.linkTextInput)

/* toolbar is in ControlBar, ControlBar is not a direct content
child of the Panel in RichTextEditor. */

richTextEditor.toolbar.parent.removeChild(richTextEditor.toolbar);
controlBarContainer = new HBox();
controlBarContainer.percentWidth = 100;
controlBarContainer.setStyle(‘paddingLeft’, 5);
controlBarContainer.setStyle(‘paddingTop’, 5);
controlBarContainer.setStyle(‘paddingRight’, 5);
controlBarContainer.setStyle(‘paddingBottom’, 5);
controlBarContainer.addChild(richTextEditor.toolbar);
richTextEditor.addChildAt(controlBarContainer, 0);

}

Leave a comment

Singleton class for Localization in Flex

Default way of using resourceManager

resourceManager.getString(bundleName,resourceName,parameters)

We have customized way of using resourceManager by using singleton class : ResourceUtil

Modified syntax of using ResourceUtil

ResourceUtil.string(resourceName,parameters)

— It reduced the code by not using bundleName each time. Find the code below to create singleton class

ResourceUtil.as

public class ResourceUtil
{
public static const DEFAULT_BUNDLE:String = ‘ResourceFileName’;

public static function string(key:String,parameters:Array=null):String
{
return ResourceLoader.instance().getString(DEFAULT_BUNDLE,key,parameters);
}
}

ResourceLoader.as :

package
{
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;

import mx.resources.IResourceManager;
import mx.resources.ResourceManager;

[ResourceBundle(“ResourceFileName”)]
public class ResourceLoader extends EventDispatcher
{
public static const DEFAULT_LOCALE:String=’en_US’ ;
public static var _instance:ResourceLoader ;
private var _resourceManager:IResourceManager ;

public static function instance():ResourceLoader
{
if(_instance == null)
{
_instance = new ResourceLoader(PrivateSingletonEnforcer);
}

return _instance ;
}

public function ResourceLoader(singletonEnforcer:Class)
{
if(singletonEnforcer!=PrivateSingletonEnforcer)
{
throw new Error(‘ResourceLoader cannot be instantiated directly.’)
}
_resourceManager = ResourceManager.getInstance();
}

public function getString(bundleName:String,resourceName:String,parameters:Array = null):String
{
var value:String = _resourceManager.getString(bundleName,resourceName,parameters);
if(value == null)
return resourceName ;
else
return value ;
}

}
}

class PrivateSingletonEnforcer
{
}

1 Comment

Center tag: keep everything in middle

<html>

<body>

<center>

… put any content, it will be aligned in the center of browser page
… I think we have to keep content size lesser than browser size
to fit into middle
</center>

</body>

</html>

 

 

 

Leave a comment

Unique Random Generator

The following code generates the unique random numbers.
User will input max length (for ex: 10 unique random numbers from 0 to 10) in textinput , and on keyup event values are populated in text area one below another.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical” width=”100%” height=”100%”
backgroundAlpha=”1″ backgroundGradientAlphas=”[1,1]” backgroundGradientColors=”[#999999,#999999]”>
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
private function calUniqueRandomNo(maxCount:Number):void
{
resText.text = “”;
var resArr:Array = new Array();

while(resArr.length<maxCount)
{
var randNo:int = parseInt((Math.random()*maxCount).toString()) ;
if(!search(randNo,resArr))
{
resArr.push(randNo);
}
}

resText.text += resArr.toString();
}

private function search(valueToSearch:int,arrayToSearch:Array):Boolean
{
for(var j:int=0;j<arrayToSearch.length;j++)
{
if(arrayToSearch[j]== valueToSearch)
{
return true;
}
}
return false;
}
]]>
</mx:Script>
<mx:FormItem label=”Count:”>

<mx:TextInput id=”maxCountIp” keyUp=”{calUniqueRandomNo(Number(maxCountIp.text))}” />

</mx:FormItem>
<mx:TextArea id=”resText” width=”70″ height=”70%”/>
</mx:Application>

If any other way , welcome to post as comment.

 

Leave a comment

Flex Builder Key Assist

Use following key shortcuts, as they help in faster code development
1) select the code line or lines, then Ctrl + Alt + Up Arrow Key or Ctrl + Alt + Down Arrow Key
— copy the selected line or lines of code on upside/downside of the selected line or lines

2) Ctrl + O
— opens the window with all variables , functions and controls in current .mxml or .as file

3) Ctrl + Shift +R
— opens the window with list of all files of all open projects in the workspace of Flex builder
— very useful if you remember the filename of the file which¬† you want to open.

4) Ctrl + Shift +F
— opens the search window and search throught files of all open projects in the workspace of Flex builder

Enjoy great coding of Flex !!I will post some more in future. You can also find key assist in Flex builder by Ctrl+Shift+L.

Leave a comment