Category Archives: Adobe Flex

Text wrap problem in Flex Data Grid

Hi All,

Few days back I was facing issues with Flex Data Grid text wrap problem. Despite we have a property called “wrodWrap” on data grid, But unfortunately it doesnt work the way it suggest.

After navigating through the mx:DataGrid and GridColumn properties on Adobe API’s,  I came across
variableRowHeight=true which we have to set while using “wordWrap”.


[Note] This is not mentioned in the Adobe’s API documentation.

<DataGrid dataProvider=”{listData}” width=”100%″ height=”200″ wordWrap=”true” variableRowHeight=”true” />

Hope this helps.


Thanks
R Vashi

Item Renderers causing problems while scrolling… state gets changed..

Hi All,

The data grid use lazy creation techniques while dealing with Item Renderers, For example if you have 300 rows in data grid and if only 100 are visible then only 100 ItemRenderers will be created. And when you scroll the data grid it again do the same thing for the columns which are getting visible to the user in that point of time. The reason is that When the ItemRenderer is reused, the DataGrid sets the data property with the new data and that’s it – it is not destroyed re-instantiated.

To fix this problem, Simply we need to set up/configure the item renderer again in “set data” method of the container. e.g

public  override function  set data(value:Object):void{
// This will fire off the FlexEvent.DATA_CHANGE Event
super.data = value;
// if the value is null this cell is empty
if(value == null){
// clear all the controls
return;
}
//again configure the controls
// for example if you’re adding checkboxes, again add the logic/configure here.
}

Hope this helps.


Thanks
R Vashi

Filter data in Advance Data Grid control Flex

Hi All,

In below example I will show the way we can filter the data in Advance data grid using some Input box control. To filter a data in Advance data grid we can use IHierarchicalCollectionView class which uses  an interface for hierarchical or grouped data. Typically, we use this data with the AdvancedDataGrid control.

Flex Code
<![CDATA[
import mx.collections.HierarchicalData;
import mx.collections.IHierarchicalCollectionView;

// Filter
private function filterTreeData():void{
IHierarchicalCollectionView(myId.dataProvider).filterFunction = myFilterFunc;
IHierarchicalCollectionView(myId.dataProvider).refresh();
}

private function myFilterFunc(item:Object):Boolean {
/*
ColumnOfGrid: is the column in Tree Grid(just change to your column)
*/
if(item.hasOwnProperty(“ColumnOfGrid”) && (item[“ColumnOfGrid”].toString()).substr(0,txt.length).toLowerCase() == txt.text.toLowerCase())
return true;

return false;
}
]]>
</mx:Script>

<mx:AdvancedDataGrid width=”100%” height=”100%” displayItemsExpanded=”true”  defaultLeafIcon=”{null}” id=”myId” >
<mx:dataProvider>
<mx:HierarchicalData source=”{myArrCollection}” />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField=”ColumnOfGrid”   />
</mx:columns>
</mx:AdvancedDataGrid>

Hope this helps.


Thanks
R Vashi

Using the callLater method in flex, lazy calling in flex

Hi All,

The callLater() method queues an operation to be performed for the next screen refresh, rather than in the current update. Without the callLater() method, you might try to access a property of a component that is not yet available. The callLater() method is most commonly used with the creationComplete event to ensure that a component has finished being created before Flex proceeds with a specified method call on that component.

var someText:Text = new Text();
someText.text=”testing”;
addChild(someText);
trace(someText.measuredWidth);

and then scratched your head when Flex traces 0 for the width? That’s because Flex hasn’t drawn it yet. There’s two ways to fix it, one you could just call someText.validateSize() but the better way to do it is to wait till Flex validates on its own to make these changes. How do you do that? Well with the callLater() function of course!

var someText:Text = new Text();
someText.text=”testing”;
addChild(someText);
callLater(getWidth);
public function getWidth():void{
trace(someText.measuredWidth);
}

Now Flex should be tracing the correct width. This works really well for a number of instances where you want to play with freshly declared visual elements but Flex hasn’t finished creating them yet.

Sources[http://www.jonathanrowny.com/journal/useful-flex-tip-use-calllater, http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_12.html%5D

Thanks
R Vashi

Display Hand Cursor on Label and Buttons and Text objects in Flex

Hi All,

Sometime we got a requirement where we have to show hand cursor on flex components, mostly like where we have some clickable text,  For that there are 2 properties which we can use to achieve this requirement.

1. Button Mode=”true”
2. useHandCursor=”true”

****************
As a hack sometime we need to add one more property
3. mouseChildren=”false”
************************

All the properties accepts “true” or “false” value.

e.g
<mx:Button id=”w” click=””  buttonMode=”true” /> [Note: On buttons use only buttonMode=”true”]
<mx:Label  text=”testing again” buttonMode=”true” useHandCursor=”true” mouseChildren=”false” />

If you are creating a flex objects on the fly like button and clickable text, you can simply set these properties e.g

btnObj.buttonMode=true;
textObj.useHandCusror=true;

Hope this helps.


Thanks
R Vashi

Displaying context menu in Flex

Hi All,

In this article I will show how to display context menu in Flex. You can easily customize it to suitable look and feel.

//Create a menu items collection
var tmpArr:ArrayCollection=new ArrayCollection();
tmpArra.addItem({label: “Menu 1”});
tmpArra.addItem({label: “Menu 2”});
tmpArra.addItem({label: “Menu 3”});
tmpArra.addItem({label: “Menu 4”});

//Create Menu proeprty, which is going to hold the Menu items collection i.e the array created above
var myMenu:Menu = Menu.createMenu(null, tmpArra, false);

//Define the Label field
myMenu.labelField=”label”

//Add the event listener for handling mouse click on menu
myMenu.addEventListener(MenuEvent.ITEM_CLICK,itemClickInfo);

//declare the location where menu gets appear
myMenu.show((event.stageX-100), event.stageY);

//Item click handler
private function itemClickInfo(event:MenuEvent):void {
var label:String=event.item.label;
if(label==”Menu 1″){
..add your logic
}
}

Hope this helps.


Thanks
R Vashi

Using Flex PMD for Flex Code Review using ANT

Hi All,

Adobe Technical Services launched FlexPMD – a tool to audit  ActionScript source code and detect common problems (anti patterns, unused code, badly written Flex components ). The tool started as an internal project in Adobe and now it has been made open source.

I can say that using this tool is a must for any complex Flex projects, because it enables you to detect common problems at an early phase. For the moment it can be invoked from Maven/Ant and Mac OS X automaton, in the future it will probably also be available as a Flash Builder plugin.

Below I will detailed out how to use this with ANT script, to get a report.

Step 1: Download the required jars.
http://opensource.adobe.com/wiki/display/flexpmd/Downloads

Step 2: Copy the jars in Lib folder e.g  c:\myproject\lib

Step 3: Write an ant script and add those jars into Classpath.

Flex PMD example
<mkdir dir=”${basedir}/flex/” />
<mkdir dir=”${basedir}/bin1/” />
<property name=”src.dir” value=”${basedir}/flex/” />
bin1/” />

<property name=”flexpmd.version” value=”1.1″ />
<property name=”flexpmd.dir” value=”jars/flex-pmd-ant-task-1.1/” />

<!–****************************************************
FlexPMD
*****************************************************–>

<taskdef name=”flexPmd”
classname=”com.adobe.ac.pmd.ant.FlexPmdAntTask”
classpath=”${flexpmd.dir}/flex-pmd-ant-task-1.1.jar”>
<classpath>
<pathelement location=”${flexpmd.dir}/flex-pmd-ruleset-api-1.1.jar”/>
<pathelement location=”${flexpmd.dir}/flex-pmd-ruleset-1.1.jar”/>
<pathelement location=”${flexpmd.dir}/flex-pmd-core-1.1.jar”/>
<pathelement location=”${flexpmd.dir}/as3-plugin-utils-1.1.jar”/>
<pathelement location=”${flexpmd.dir}/as3-parser-api-1.1.jar”/>
<pathelement location=”${flexpmd.dir}/pmd-4.2.5.jar”/>
<pathelement location=”${flexpmd.dir}/commons-lang-2.4.jar”/>
<pathelement location=”${flexpmd.dir}/flex-pmd-files-1.1.jar”/>
<pathelement location=”${flexpmd.dir}/plexus-utils-1.0.2.jar”/>
</classpath>
</taskdef>

<target name=”flexPmdWithCustomRuleset”>
<flexPmd
sourceDirectory=”${src.dir}”
outputDirectory=”${bin.dir}”
ruleSet=”${flexpmd.dir}/pmd.xml”/>
</target>

flexPmdWithDefaultRuleset”>
<flexPmd
sourceDirectory=”${src.dir}”
outputDirectory=”${bin.dir}”/>
</target>

Step 4: Run the ant scripts  e.g  >ant flexPmdWithDefaultRuleset

Step 5: After running the ant task, you will see the task output details on the Console.

flexPmdWithDefaultRuleset:
[flexPmd] 01-Jun-2010 20:34:09 com.adobe.ac.pmd.engines.AbstractFlexPmdEngine loadRuleset
[flexPmd] INFO: Ruleset: c:\DOCUME~1\603\LOCALS~1\Temp\default_flex5303689465491432723.xml
[flexPmd] 01-Jun-2010 20:34:09 com.adobe.ac.pmd.engines.AbstractFlexPmdEngine loadRuleset
[flexPmd] INFO: Rules number in the ruleSet: 90
[flexPmd] 01-Jun-2010 20:35:01 com.adobe.ac.pmd.engines.AbstractFlexPmdEngine computeViolations
[flexPmd] INFO: It took 51497ms to compute violations
[flexPmd] 01-Jun-2010 20:35:01 com.adobe.ac.pmd.engines.AbstractFlexPmdEngine computeViolationNumber
[flexPmd] INFO: Violations number found: 3256
[flexPmd] 01-Jun-2010 20:35:01 com.adobe.ac.pmd.engines.FlexPmdXmlEngine writeReport
[flexPmd] INFO: Creating report in
[flexPmd] 01-Jun-2010 20:35:01 com.adobe.ac.pmd.engines.AbstractFlexPmdEngine writeAnyReport
[flexPmd] INFO: It took 390ms to write the Xml report
BUILD SUCCESSFUL

The main things is that it works well on MXML files. Covers all the action script code written.

Also we can easily transform it to some HTML Report by using XSL. Simply give the path of generated report and path of XSL and the location of HTML report.

<xslt in=”${bin.dir}/pmd.xml” style=”pmd-nicerhtml.xsl” out=”bin1/pmd.html” />
Tip: XSL can be found inside pmd-4.2.5.jar, etc folder


Thanks
R Vashi