How can i make a reusable labelFunction for Flex Datagrid? - apache-flex

I have a label function like :
private function formatDate (item:Object, column:DataGridColumn):String
{
var df:DateFormatter = new DateFormatter();
df.formatString = "MM/DD/YY";
if (column.dataField == "startDate") {
return df.format(item.startDate);
}
return "ERR";
}
Which I use in a datacolumn by using labelFunction.
This works just fine if my data field is called 'startDate'. I want to make this function generic so I can use it everywhere.
How can I do this. i think i need to use some kind of 'reflection' - or perhaps another approach altogether?

You can make the function generic using the dataField attribute of the column as the key into your item.
private function formatDate (item:Object, column:DataGridColumn):String
{
var df:DateFormatter = new DateFormatter();
df.formatString = "MM/DD/YY";
var value:object = item[column.dataField];
return df.format(value);
}
-Ben

You can define another function, let's call it partial that binds some extra arguments to your function:
function partial( func : Function, ...boundArgs ) : Function {
return function( ...dynamicArgs ) : * {
return func.apply(null, boundArgs.concat(dynamicArgs))
}
}
Then you change your function like this:
private function formatDate( dataField : String, item : Object, column : DataGridColumn ) : String {
var df : DateFormatter = new DateFormatter();
df.formatString = "MM/DD/YY";
if ( column.dataField == dataField ) {
return df.format(item[dataField]);
}
return "ERR";
}
Notice that I have added a new argument called dataField first in the argument list, and replaced all references to "startDate" with that argument.
And use it like this:
var startDateLabelFunction : Function = partial(formatDate, "startDate");
var endDateLabelFunction : Function = partial(formatDate, "endDate");
The partial function returns a new function that calls the original function with the parameters from the call to partial concatenated with the parameters to the new function... you with me? Another way of putting it is that it can return a new function where N of the arguments are pre-bound to specific values.
Let's go through it step by step:
partial(formatDate, "startDate") returns a function that looks like this:
function( ...dynamicArgs ) : * {
return func.apply(null, boundArgs.concat(dynamicArgs));
}
but the func and boundArgs are what you passed as arguments to partial, so you could say that it looks like this:
function( ...dynamicArgs ) : * {
return formatDate.apply(null, ["startDate"].concat(dynamicArgs));
}
which, when it is called, will be more or less the same as this
function( item : Object, column : DataGridColumn ) : * {
return formatDate("startDate", item, column);
}
Tada!

here is more generic way:
public static function getDateLabelFunction(dateFormatString:String=null, mxFunction:Boolean = false) : Function {
var retf:Function;
// defaults
if(dateFormatString == null) dateFormatString = "MM/DD/YY";
if(mxFunction) {
retf = function (item:Object, column:DataGridColumn):String
{
var df:DateFormatter = new DateFormatter();
df.formatString = dateFormatString;
var value:Object = item[column.dataField];
return df.format(value);
}
}else {
retf = function (item:Object, column:GridColumn):String
{
var df:DateFormatter = new DateFormatter();
df.formatString = dateFormatString;
var value:Object = item[column.dataField];
return df.format(new Date(value));
}
}
return retf;
}
Usage (Spark DataGrid)
var labelFunction = getDateLabelFunction();
or for MX Datagrid
var labelFunction = getDateLabelFunction(null,true);
to pass custom Date Format String:
var labelFunction = getDateLabelFunction("DD/MM/YYYY",true);
Default is a "MM/DD/YYYY";

Related

Remove duplicate values from arraycollection in flex4

This is my arraycollection
o = JSON.parse(event.result.toString());
jsonarray = new ArrayCollection(o as Array);
in this array i have a duplicate values of product name, so i wants to remove duplicacy.\
my code is here,its not working please let me know, i am a flex beginner. thanx in advance.
function removeDuplicates(item:Object):Boolean
{
var returnValue:Boolean = false;
if (!myObject.hasOwnProperty(item.ProductName))
{
myObject[item.ProductName] = item;
returnValue = true;
}
prodArray.push(myObject);
return returnValue;
}
Call the filterCollection method given below and in that use the filterfunction to remove duplicates
private var tempObj:Object = {};
private function filterCollection():void {
// assign the filter function
jsonarray.filterFunction = removeDuplicates;
//refresh the collection
jsonarray.refresh();
}
private function removeDuplicates(item:Object):Boolean {
return (tempObj.hasOwnProperty(item.ProductName) ? false : tempObj[item.ProductName] = item && true);
}

Flex sort array collection by inner class

I want to sort an array collection in a way that I am not sure is possible.
Usually when you want to sort you have something like this.
var dataSortField1:SortField = new SortField();
dataSortField1.name = fieldOneToSortBy;
dataSortField1.numeric = fieldOneIsNumeric;
var dataSort:Sort = new Sort();
dataSort.fields = [dataSortField1];
arrayCollection.sort = dataSort;
arrayCollection.refresh();
so if I had a class
public class ToSort {
public var int:a
}
I could type
var ts1:ToSort = new ToSort();
ts1.a = 10;
var ts2:ToSort = new ToSort();
ts2.a = 20;
var arrayCollection:ArrayCollection = new ArrayCollection([ts1, ts2])
var dataSortField1:SortField = new SortField();
dataSortField1.name = "a";
dataSortField1.numeric = true;
var dataSort:Sort = new Sort();
dataSort.fields = [dataSortField1];
arrayCollection.sort = dataSort;
arrayCollection.refresh();
This works fine. My problem is I now have inherited a class that has another class inside it and I need to sort against this as well.
For example
public class ToSort2 {
public var int:a
public var ToSortInner: inner1
}
public class ToSortInner {
public var int:aa
public var int:bb
}
if a is the same in multiple classes then I want to sort on ToSortInner2.aa Is this possible. I have tried to pass in inner1.aa as the sort field name but this does not work.
Hope this is clear. If not I'll post some more code.
Thanks
You need to write a custom sort compareFunction. You can drill down into the objects properties inside the function.
Conceptually something like this:
public function aSort(a:Object, b:Object, fields:Array = null):int{
if(a.aa is b.aa){
return 0
} else if(a.aa > b.aa) {
return 1
} else{
return -1
}
}
When you create your sort object, you can specify the compare function:
var dataSort:Sort = new Sort();
dataSort.compareFunction = aSort;
arrayCollection.sort = dataSort;
arrayCollection.refresh();
Sort also has another property, compareFunction.

how to use this as class code in mmxl aaplication?

I have taken this code from one of my friend,but in real it is totally mess there are plenty of error i am getting by running this code,i have some question
How i can use this code in mxml application,as we know we can not use public class in mx script so what are the way to do that
as you can see .mx_internal,i am getting error on that saying'define object before dot' as i remove mx_internal and tried using import mx.binding.mx_internal and use namespace mx_internal application not desplaying anything
now you will tell me ther are easy methods are ther to solve problem but my whole project is on this method only
thanks for help in advance
i am trying to solve this problem from last 15 days ,with no success,pls help me below is code
package components
{
import flash.events.*;
import flash.utils.*;
import mx.binding.*;
import mx.containers.*;
import mx.controls.*;
import mx.core.*;
import mx.events.*;
import mx.styles.*;
public class DialogTitle extends HBox implements IBindingClient
{
private var _110371416title:String = "Dialog Title";
public var _DialogTitle_Image1:Image;
public var _DialogTitle_Image2:Image;
public var _DialogTitle_Label1:Label;
var _bindingsBeginWithWord:Object;
private var _1859425293showCloseButton:Boolean = false;
var _bindingsByDestination:Object;
var _watchers:Array;
var _bindings:Array;
private var _documentDescriptor_:UIComponentDescriptor;
private static var _watcherSetupUtil:IWatcherSetupUtil;
public function DialogTitle()
{
_documentDescriptor_ = new UIComponentDescriptor({type:HBox, propertiesFactory:function () : Object
{
return {height:27, childDescriptors:[new UIComponentDescriptor({type:Spacer, propertiesFactory:function () : Object
{
return {width:5};
}// end function
}), new UIComponentDescriptor({type:Image, id:"_DialogTitle_Image1"}), new UIComponentDescriptor({type:Spacer, propertiesFactory:function () : Object
{
return {width:5};
}// end function
}), new UIComponentDescriptor({type:Label, id:"_DialogTitle_Label1", stylesFactory:function () : void
{
this.fontSize = 14;
this.color = 16777215;
this.fontWeight = "bold";
return;
}// end function
}), new UIComponentDescriptor({type:Spacer, propertiesFactory:function () : Object
{
return {percentWidth:100};
}// end function
}), new UIComponentDescriptor({type:Image, id:"_DialogTitle_Image2", events:{click:"___DialogTitle_Image2_click"}, propertiesFactory:function () : Object
{
return {useHandCursor:true, buttonMode:true, mouseChildren:false, toolTip:"Close"};
}// end function
}), new UIComponentDescriptor({type:Spacer, propertiesFactory:function () : Object
{
return {width:13};
}// end function
})]};
}// end function
});
_bindings = [];
_watchers = [];
_bindingsByDestination = {};
_bindingsBeginWithWord = {};
mx_internal::_document = this;
if (!this.styleDeclaration)
{
this.styleDeclaration = new CSSStyleDeclaration();
}
this.styleDeclaration.defaultFactory = function () : void
{
this.backgroundColor = 9947478;
this.horizontalGap = 0;
this.verticalAlign = "middle";
this.verticalGap = 0;
return;
}// end function
;
this.height = 27;
this.percentWidth = 100;
return;
}// end function
private function _DialogTitle_bindingExprs() : void
{
var _loc_1:* = undefined;
_loc_1 = CustomEmbeddedAssets.logoImageSmall;
_loc_1 = title;
_loc_1 = EmbeddedAssets.dialogClose;
_loc_1 = showCloseButton;
return;
}// end function
public function get showCloseButton() : Boolean
{
return this._1859425293showCloseButton;
}// end function
override public function initialize() : void
{
var target:DialogTitle;
var watcherSetupUtilClass:Object;
.mx_internal::setDocumentDescriptor(_documentDescriptor_);
var bindings:* = _DialogTitle_bindingsSetup();
var watchers:Array;
target;
if (_watcherSetupUtil == null)
{
watcherSetupUtilClass = getDefinitionByName("_components_DialogTitleWatcherSetupUtil");
var _loc_2:* = watcherSetupUtilClass;
_loc_2.watcherSetupUtilClass["init"](null);
}
_watcherSetupUtil.setup(this, function (param1:String)
{
return target[param1];
}// end function
, bindings, watchers);
var i:uint;
while (i < bindings.length)
{
Binding(bindings[i]).execute();
i = (i + 1);
}
mx_internal::_bindings = mx_internal::_bindings.concat(bindings);
mx_internal::_watchers = mx_internal::_watchers.concat(watchers);
super.initialize();
return;
}// end function
public function get title() : String
{
return this._110371416title;
}// end function
private function _DialogTitle_bindingsSetup() : Array
{
var binding:Binding;
var result:Array;
binding = new Binding(this, function () : Object
{
return CustomEmbeddedAssets.logoImageSmall;
}// end function
, function (param1:Object) : void
{
_DialogTitle_Image1.source = param1;
return;
}// end function
, "_DialogTitle_Image1.source");
result[0] = binding;
binding = new Binding(this, function () : String
{
var _loc_1:* = title;
var _loc_2:* = _loc_1 == undefined ? (null) : (String(_loc_1));
return _loc_2;
}// end function
, function (param1:String) : void
{
_DialogTitle_Label1.text = param1;
return;
}// end function
, "_DialogTitle_Label1.text");
result[1] = binding;
binding = new Binding(this, function () : Object
{
return EmbeddedAssets.dialogClose;
}// end function
, function (param1:Object) : void
{
_DialogTitle_Image2.source = param1;
return;
}// end function
, "_DialogTitle_Image2.source");
result[2] = binding;
binding = new Binding(this, function () : Boolean
{
return showCloseButton;
}// end function
, function (param1:Boolean) : void
{
_DialogTitle_Image2.visible = param1;
return;
}// end function
, "_DialogTitle_Image2.visible");
result[3] = binding;
return result;
}// end function
public function set showCloseButton(param1:Boolean) : void
{
var _loc_2:* = this._1859425293showCloseButton;
if (_loc_2 !== param1)
{
this._1859425293showCloseButton = param1;
this.dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "showCloseButton", _loc_2, param1));
}
return;
}// end function
public function ___DialogTitle_Image2_click(event:MouseEvent) : void
{
dispatchEvent(new Event("onCancel"));
parent.visible = false;
return;
}// end function
public function set title(param1:String) : void
{
var _loc_2:* = this._110371416title;
if (_loc_2 !== param1)
{
this._110371416title = param1;
this.dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "title", _loc_2, param1));
}
return;
}// end function
public static function set watcherSetupUtil(param1:IWatcherSetupUtil) : void
{
DialogTitle._watcherSetupUtil = param1;
return;
}// end function
}
}
Just throw this code out. This code was generated automatically by mxmlc compiler from MXML class and can't be used in production. It is for computer, not for humans. Write the right code by yourself. I hope it will be clearer and maintainable. And yes, this code wasn't written by your friend :)
This file is decompiled from a .mxml file, which use tags to describe layout. However, some decompiler can't convert it completely, and you will see file like this.
As you see, the argument of UIComponentDescriptor is an object, which contains a lot of key-val pairs. It has some type of keys:
type:Class --> this is the type of this component, which is the node tag of .mxml file
id:String --> this is the ID of a node, which is also the variable name you can use in <fx:Script> tag
event:Object --> events that the component will trigger
stylesFactory:Function --> component's styles setting
propertiesFactory:Function --> contains some properties and child nodes
code like this:
<mx:Canvas id="mainCanvas" borderStyle="none" label="main">
<mx:Button click="onClick(event)" />
</mx:Canvas>
will be converted into:
new UIComponentDescriptor({
"type":Canvas,
"id":mainCanvas,
"styleFactory":function():void {
this.borderStyle="none";
},
"propertiesFactory":function():Object {
return({
"label":"main"
"childDescriptors":[new UIComponentDescriptor({
// button's code in here
});
]
})
}
})
For those events:
As you can write click event in mxml tags both like btnOnClick() and btnOnClick(event), the compiler need to do something to ensure the event handler accept a right argument. So, for the Button tag I just mention, the
value corresponding to key"event" will be like this: {"click":"__on_click"}. Then the compiler will create a new function call __on_click, which may like this:
public function __on_click(event:MouseEvent):void {
onClick(event);
}
Obviously, after you convert the UIComponentDescriptor into .mxml, you should replace the events function.
For the constructor:
.mxml file can not has a constructor, but the compiler will create one in .as file, which contains the UIComponentDescriptor. The constructor will also do some initialization for it's variables. When converting to .mxml file, you need to do this initialization after the variable's declaration.
For example:
public function MyCanvas(){
this._documentDescriptor_ = new UIComponentDescriptor({
//……
});
this.myArray = new Array();
}
you should convert it into this:
<fx:Script><![CDATA[
var myArray:Array = new Array();
]]></fx:Script>
So the heaviest work is to convert UIComponentDescriptor into .mxml tags. And here is a simple python script that can help you do it:
UIComponentDescriptor2XML

override public function initialize() error in flex

i want to know what i should put befor .mx_internal
override public function initialize() : void
{
var target:DialogButtons;
var watcherSetupUtilClass:Object;
.mx_internal::setDocumentDescriptor(_documentDescriptor_);
var bindings:* = _DialogButtons_bindingsSetup();
var watchers:Array;
target;
if (_watcherSetupUtil == null)
{
watcherSetupUtilClass = getDefinitionByName("_components_DialogButtonsWatcherSetupUtil");
var obj1:* = watcherSetupUtilClass;
obj1.watcherSetupUtilClass["init"](null);
}
_watcherSetupUtil.setup(this, function (param1:String)
{
return target[param1];
}// end function
, bindings, watchers);
var i:uint;
while (i < bindings.length)
{
Binding(bindings[i]).execute();
i = (i + 1);
}
mx_internal::_bindings = mx_internal::_bindings.concat(bindings);
mx_internal::_watchers = mx_internal::_watchers.concat(watchers);
super.initialize();
return;
}// end function
mx_internal should be without dot.
You don't have to reference the mx_internal namespace every time you access it. You can just import it into the class. Use statements like this:
import mx.core.mx_internal;
use namespace mx_internal;
Then re-write your code like this:
override public function initialize() : void
{
var target:DialogButtons;
var watcherSetupUtilClass:Object;
// line commented to snow the mx_internal less code
// .mx_internal::setDocumentDescriptor(_documentDescriptor_);
setDocumentDescriptor(_documentDescriptor_);
var bindings:* = _DialogButtons_bindingsSetup();
var watchers:Array;
target;
if (_watcherSetupUtil == null)
{
watcherSetupUtilClass = getDefinitionByName("_components_DialogButtonsWatcherSetupUtil");
var obj1:* = watcherSetupUtilClass;
obj1.watcherSetupUtilClass["init"](null);
}
_watcherSetupUtil.setup(this, function (param1:String)
{
return target[param1];
}// end function
, bindings, watchers);
var i:uint;
while (i < bindings.length)
{
Binding(bindings[i]).execute();
i = (i + 1);
}
// lines commented to snow the mx_internal less code
// mx_internal::_bindings = mx_internal::_bindings.concat(bindings);
// mx_internal::_watchers = mx_internal::_watchers.concat(watchers);
_bindings = _bindings.concat(bindings);
_watchers = _watchers.concat(watchers);
super.initialize();
return;
}// end function

How to select other objects from a group? (Flex)

I have a group of multiple objects.
If I select one object from the group, then i use the method: click="makeObj(event)"
And then the function:
protected function makeObj(event:MouseEvent):void
{
var targetObj:Object = event.currentTarget;
}
But how to use all the other objects in the group except clicked (target)?
put all your objects in an array and define a clicked property for each object
protected function makeObj(event:MouseEvent):void
{
//in case you want to deselect all the other objects when one
//object is clicked
for each( var obj:Object in myObjects )
obj.clicked = false;
var targetObj:Object = event.currentTarget;
targetObj.clicked = true;
myObjectsAction();
}
protected function myObjectsAction():void
{
for each( var obj:Object in myObjects )
if( !obj.clicked )
doWhatever( obj );
}

Resources