Pearls of Flex

How to add custom Quick Assist options to FlashBuilder 4.5 ?

2011-05-07T04:53:00.000-07:00

Adding custom quick assist options to FlashBuilder 4.5.1 is easy.

Here is a sample plugin I created to show how this can be done. Copy this plugin into the dropins folder found under the "Adobe FlashBuilder 4.5" folder of the installation. In FB pressing Ctrl+1 inside a ActionScript class or script block of MXML file should bring up the "Override/Implment Methods" quick assist option as shown below.

One needs to implement the "com.adobe.flexbuilder.as.editor.quickAssistProvider" extension point to add custom quick assist providers in a custom plugin. The extension point requires the IQuickAssistProvider interface to be implemented by a class and supply this as a "class" value to the extension point description.

Step by step instructions on how to do this:

1. Create a new workspace and import the following plugins from FlashBuilder plugins folder. (These are the basic plugins which are required for the example. You may need to import more plugins based on the exact quick assist you want to implement.)

com.adobe.flash.codemodel.core

com.adobe.flexbuilder.as.editor

com.adobe.flexbuilder.codemodel

com.adobe.flexbuilder.editorcore

com.adobe.flexbuilder.editors.derived

com.adobe.flexide.as.core

com.adobe.flexide.editorcore

2. Create a new plugin called say "com.adobe.flashbuilder.extras"

3. Add the extension point "com.adobe.flexbuilder.as.editor.quickAssistProvider"

4. Create a class implementing the interface IQuickAssistProvider by clicking the class link. Add the necessary code for the required functionality in the class following the example source given.

The interface has only one method getProposals which needs to return a list of proposals that need to be displayed at the particular offset at which the user has invoked the quick assist. Using the information available in the IQuickAssistInvocationContext and other code model APIs the code can arrive at this list.

5. Export the new plugin and place the jar in the dropins folder under the FB installation.

Caution : In case you find that quick assist functionality of FB stops working check the logs to see if the new plugin is causing any exceptions causing this.

The example source is available here.

"What is new in FlashBuilder 4.5" session at 360Flex video

2011-04-30T03:14:00.000-07:00

Video of Adam's session on "What is new in FB 4.5" at 360Flex is available here

FlashBuilder Tips and Tricks slides

2011-04-24T21:59:00.000-07:00

A copy of the slides I showed in 360Flex is available here.

In the end there are few more slides which I didn't show as they are already available in MAX 2010 and MAX 2009 videos.

There is also an article which contains most of the information presented but not all !

Use QuickAssist in FlashBuilder 4.5 to create labelFunction,iconFunction,dataFunction etc..

2011-04-13T10:01:00.000-07:00

One of the cool features of FlashBuilder 4.5 is support for creating labelFunction, sortFunction, dataFunction, iconFunction (basically any Function property of Flex SDK MXML components) using Quick Assist.

Steps :

1. Go to the component tag and use content assist to enter the *Function attribute.

Ex: <s:List labelFunction=""

2. Type the function name.

Ex: <s:List labelFunction="myLabelFunc"

3. With the cursor still between the quotes hit Ctrl+1 (or Cmd+1 on Mac).

4. You should something similar to the following

5. Select it and hit enter. FB should create the function with proper signature and go into linked mode.

For adventurous developers:

If you find the "Create function ..." option missing any particular Function property for any component you can edit the componentDescriptor.xml file (which can be found under the Adobe Flash Builder 4.5\eclipse\plugins\com.adobe.flexbuilder.mxml.editor_4.5.0.xxxxx directory) and add the entry yourself and fix it !

Caution : Save the original xml file in case you end up spoiling it.

How to use code templates to enter keywords without mistakes ?

2011-04-13T08:58:00.000-07:00

After my "FlashBuilder tips and tricks" session at 360Flex where I erred while entering "implements" keyword I thought through it and came up with this. Add the following code template with any name it suits you. I used "kw".

${keyword:values(public, protected, private, function, implements, var, try, catch, class, interface, package)} ${cursor}

Now where ever I need to enter a keyword I just need to type "kw" and hit Ctrl+Space to get a popup showing all the keywords. (Note: Modify the list of keywords to suit your need)

New GroupingCollection2 class with improved perforamnce

2010-01-20T22:30:00.000-08:00

Rather than repeat the same thing : Sameer talks about the new GroupingCollection to in data visualization swc of Flex.

Give it a try !

4 items to check if a Flex 4 Application is leaking memory !

2009-12-24T03:46:00.000-08:00

I have been working with Flash Builder profiler for past few months. After looking at few applications and memory leaks in them I came up with following 4 items which can cause a Flex application to leak memory.

If you don't like to read lot of text the gist is to use weak references where ever possible.

1. addEventListener is being called with the default value of false for its useWeakReference flag.

2. bindProperty and bindSetter methods of BindingUtils are called with default value of false for its useWeakReference flag.

Please note: I don't know what is the equivalent thing in Flex 3.

3. ChangeWatcher.watch method is being called with default value of false for its useWeakReference flag.

Please note: I don't know what is the equivalent thing in Flex 3.

4. Dictionaries are being used with weakKeys flag in the constructor set to false.

Items 3 and 4 can cause some hidden links to be formed and memory to leak. More on that soon.

Adobe DevSummit 2009 in Chennai and Hyderabad (India)

2009-11-13T06:00:00.000-08:00

Adobe is conducting a developer summit in Chennai and Hyderabad on Nov 24th and Dec 1st 2009. If you are a RIA developer and want to know more about features in upcoming release of Flash Builder 4 and also on how to connect to LiveCycle DS or Blaze DS be there !

Ruby on Rails extension for FlashBuilder4

2009-10-11T22:06:00.000-07:00

The DCD (Data Centric Development) feature of Flash Builder 4 is an extensible feature. What I mean by that is that developers can add a new plugin to FB which implements certain extension points available in FB and add support for any back end of their choice. Once added all the DCD features would work with the back end similar to other supported back ends like PHP, CF etc.

Gaurav has worked on a plugin to add support for Ruby.

Give it a try !

Adobe India Evangelism Team launches a challenge in Flex

2009-08-13T01:51:00.000-07:00

You can also own a badge like this one ! Try it !

Tweaking OLAPCell and OLAPDataGrid to display custom formatted values

2009-06-19T19:01:00.000-07:00

Displaying custom formatted data in OLAPDataGrid is a bit tricky because OLAPDataGrid doesn't use the OLAPCell.formattedValue at all due to a bug in its implementation.

However the tweaks I am going to mention are simple and can be used to get this to work. After the tweaks don't forget to build the datavisualization.swc using the steps I have described in one of the earlier posts.

Modifing OLAPCell.as file : Modify the constructor to set a formatted value into the _formattedValue property

public function OLAPCell(value:Number, formattedValue:String=null)

{

_value = value;

_formattedValue = insert any custom formatting logic using value ;

}

Modify OLAPDataGrid.as : Somewhere around line 769 we can find the following line

label = cell && !isNaN(cell.value) ? String(cell.value) : defaultCellString;

Modify this to read as follows

label = cell && !isNaN(cell.value) ? String(cell.formattedValue) : defaultCellString;

Build the swc and use it in your app to get custom formatting. Of-course some more tweaking it required to make this generic and supply a Flex formatter directly to OLAPDataGrid. I am sure it can be easily figured out !

CallResponders explained..

2009-06-08T20:44:00.000-07:00

Here is some explanation about CallResponders by Tom Lane. I thought this would be useful to many developers who want to understand more about them so that it becomes easy to work with them.

"Let me take a shot at explaining asynchronous calls. Most PHP developers are used to calling functions in one way only: synchronously. In ActionScript a sychronous function call looks like this:

var stuff = getStuff();

Pretty straightforward. It's how you expect functions to work: you call them, and then immediately on line #2 of this example you have a value in the stuff variable to work with.

But when it comes to calling remote functions on services sitting on a server somewhere, Flex calls them asynchronously. This is so that the Flex client can continue working while the request is pending. An aync call looks more like this (at least, the first part):

responder.token = getStuffFromService();

What this means is, "stuff" does not come back right away as the result of the function. Instead, what it returns is a kind of ticket. Sort of like ordering some food from a lunch counter and getting a receipt with a number on it. You don't get your food right away. Instead, you go hang out or do some other stuff while your order is pending, and then your number is called when it's ready. And then you "respond" to your number.

Well, that's what a CallResponder is. When you "place your order", you hook up a CallResponder to it. When your order is ready (data comes back from the service call), the responder kicks into action. It fires a result event (or a fault if something went wrong), and it updates its bindable lastResult property.

So, if you want to work with data from an async call, you can't simply do it on line #2 of the above snippet. You have to wait until the CallResponder for that call gets its result. If you create a databinding to lastResult, that will automatically update when the result is ready. But since you want to run some script on the result, you have to trigger that script from the CallResponder's result event handler.

Hope this helps!

Showing different icons in each cell of OLAPDataGrid based on the cell value

2009-06-06T20:08:00.000-07:00

I have been getting few queries on how to show different icons based on the cell value in a OLAPDataGrid.

Here is a screen shot of how it looks:

Here are the source files.

The technique is simple. Create a custom itemRenderer which can display a icon and text or anything to suite your needs. Make sure it implements the IDropInListItemRenderer interface. In the setter of listData add the logic to change the icon based on the value. Set this as itemRenderer of the OLAPDataGrid.

The sample shows this using a renderer derived from Canvas with a image control and embedded image files. You can use other light weight techniques like coloring a sprite and using UIComponent as base. If you are adventurous you can try tweaking or deriving from OLAPDataGridItemRenderer itself.

Blogs on Data Centric Development workflows in FlashBuilder 4 for PHP, HTTPService, ColdFusion and WebService

2009-06-06T18:46:00.000-07:00

Here are some great blogs on how to use DCD feature in FlashBuilder 4:

Howto: Connect a flex application to database (for PHP developers)

Howto: Use createItem method of the generated sample PHP file

Howto: Use the update and delete methods of the generated sample code

Howto: Enable Automatic Paging in Flex Applications for Any Kind of Service

A list of many articles on Sujit's blog

BlazeDS support

Using web-services with DCD workflow

FlashBuilder (FlexBuilder renamed) 4 Beta is out

2009-06-01T04:13:00.000-07:00

FlexBuilder has been renamed to FlashBuilder and version 4.0 Beta is out.

Rather than say the same thing over and over...here are the links which give detailed information:

The Beta site

Srinivas Annam talking about Data Centric Development (DCD)

How to use DCD work flows explained using flow charts

Sujit explains DCD workflows with BlazeDS

I am busy !

2009-05-13T03:56:00.000-07:00

Hi All,

I have been busy at work for few months now and will continue to be so for some more time. That is the reason I have not been able to respond to mails/comments on my posts. I know some of them might have been very urgent issues but due to my own work deadlines I have not been able to respond to them.

Will try to address them as and when I get time.

Thanks for your patience

Flex OLAP aggregating strings.

2009-03-05T21:42:00.000-08:00

I recently got many queries about support for String aggregation in Flex OLAP. The current implementation available out of the box doesn't support this.

Here are the changes to source files required to support this. The files need to be unzipped into the fbpro directory and the datavisulization.swc needs to be build using the steps mentioned here.

The result would look something like this.

The sample project has a StringAggreator implementation which can be used as a starting point to build your own logic into the StringAggregator. The sample one appends the strings to each other.

Here is the sample project.

Of-course I might have missed something while testing. So let me know if you find any bugs !

How to build datavisualization.swc from the source ?

2009-01-19T20:59:00.000-08:00

Here are steps to build datavisualization.swc from the source that gets unzipped into a fbpro directory in FlexBuilder when a valid license is provided.

Setup

1. Download ant1.7.0.

2. Download a version of jdk 1.6.

3. Download cygwin, an open source unix shell for Windows.

4. Set environment variables. Go to Control Panels > System > Advanced > Environment Variables

• Set JAVA_HOME to the path to the jdk directory. Add path of ant1.7 to PATH. For example, C:\ant1.7.0\bin (you will already have a PATH, multiple entries are separated by semicolons)

• Add path of cygwin to PATH. For example, C:\cygwin\bin

Steps:

1. Add files build.properties and build.xml(attached) to location of datavisualization directory. For example, C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects.

2. Add the flex builder license to build.xml file (location: C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects\build.xml) . Replace by license key.

3. Unzip inside_ datavisualization.zip. The build.xml and build.properties files should be copied inside datavisualization folder.For example, C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects\datavisualization.

4. Make changes regarding location of sdk and output swcs to files build.properties and datavisualization\build.properties.

5. At the cygwin prompt, go to the datavisualization. For example C:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\fbpro\projects\ datavisualization.

6. Run ant main to build datavisualisation.swc and datavisualization_rb.swc for en_US .

7. Run ant main_with_ja_JP to build datavisualisation.swc and datavisualization_rb.swc for en_US and ja_JP.

Note: Place the datavisualization.swc at sdk\frameworks\libs and datavisualization_rb.swc at sdk\frameworks\locale.

CalculatedMeasures in Flex OLAP

2008-06-10T03:40:00.000-07:00

I wrote a small sample which shows how a Custom Aggregator can be written and used to simulate a Calculated measure in Flex OLAP. Of-course, this solution may not work for all requirements but can be used atleast in some scenarios. The source is here.

Here is a GroupingCollection with good performance !

2008-06-01T01:57:00.000-07:00

I created a new GroupingCollection2 (by tweaking the default implemenation) which has better performance compared to the GroupingCollection. Please find the swc here.

Replace the GroupingCollection instance in any application with GroupingCollection2 and check the performance. When I tested it with 8K records with 4 grouping fields it was able to group in 5 seconds which seems to be good (in comparsion).

Please note this has not gone through extensive testing. I would be glad to fix any bugs found.

If you are one of those who doesn't have patience to build and test an app, here is the one I built. Here is the source.

If you think it is worth your time drop a note about your findings !!

Grouping XML data using GroupingCollection

2008-05-28T23:07:00.000-07:00

I was under the impression this doesn't require any sample as it should be very easy to write one. But frequent questions on the forums have resulted in this post.

There is not much to describe so :

<mx:XML id="inputData" >
 <Tulokset>
 <Tulos id="xxx" group="xx" />
 <Tulos id="xxx" group="xx" />
 <Tulos id="xxx" group="xx" />
 </Tulokset>
</mx:XML> 
 
<mx:AdvancedDataGrid creationComplete="gc.refresh()">
 <mx:dataProvider>
  <mx:GroupingCollection source="{inputData.Tulos}" id="gc">
   <mx:Grouping>
    <mx:GroupingField name="@group" />
   </mx:Grouping>
  </mx:GroupingCollection>
 </mx:dataProvider>
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="@id" />
 </mx:columns>
</mx:AdvancedDataGrid>

The source is here.

Update: The below example shows how to use grouping when the data is in child nodes instead of attributes. This is a bit tricky because GroupingCollection is derived from HierarchicalData which treats child nodes as children by default. This leads to problems when we try to display the data after grouping. The trick is to make use of the childrenField property and point it to something like "undefined".

<mx:XML id="inputData" >
 <Tulokset>
  <Tulos>
     <id>xx1</id>
     <group>xxx</group>
  </Tulos>
  <Tulos>
     <id>xx2</id>
     <group>xxx</group>
  </Tulos>
  <Tulos>
     <id>xx3</id>
     <group>xxx</group>
  </Tulos>
 </Tulokset>
</mx:XML> 
 
<mx:AdvancedDataGrid creationComplete="gc.refresh()">
 <mx:dataProvider>
  <mx:GroupingCollection source="{inputData.Tulos}" id="gc" childrenField="undefined">
   <mx:Grouping>
    <mx:GroupingField name="group"  />
   </mx:Grouping>
  </mx:GroupingCollection>
 </mx:dataProvider>
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="id" />
 </mx:columns>
</mx:AdvancedDataGrid>

The source is here.

Please note that childrenField is also helpful when we are trying to display XML data with data and children as child nodes. Use it to point to the proper node name which contains the children. In the following example we need to set childrenField="details" to work properly.


<mx:XML id="special">
<rows>
<row>
  <name>A</name>
  <fund>100</fund>
  <details>
   <row>
   <name>a</name>
   <fund>20</fund>
   </row>
   <row>
   <name>b</name>
   <fund>80</fund>
   </row>
  </details>
</row>
<row>
  <name>C</name>
  <fund>200</fund>
  <details>
   <row>
   <name>a</name>
   <fund>80</fund>
   </row>
   <row>
   <name>b</name>
   <fund>80</fund>
   </row>
   <row>
   <name>c</name>
   <fund>40</fund>
   </row>
  </details>
</row>
</rows> 
</mx:XML>

<mx:AdvancedDataGrid >
   <mx:dataProvider>
       <mx:HierarchicalData source="{special.row}" childrenField="details" >
       </mx:HierarchicalData>
   </mx:dataProvider>
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="name" />
  <mx:AdvancedDataGridColumn dataField="fund" />
 </mx:columns>
</mx:AdvancedDataGrid>

Object/Array and ObjectProxy/ArrayCollection binding problems

2008-05-28T21:28:00.000-07:00

Take a look at discussion here.

Many seems to be stumble upon this problem. Very similar to Object not dispatching any event for property value changes Array also doesn't dispatch any event for items added/deleted from it. Due to this when an object or array is used in the dataProvider of a list based control or comboBox etc any updates to the object or array would not get reflected in the UI.

The following sample should make it clear.

The first DG is fed with a ArrayCollection of Objects and the second DG has ObjectProxies. Select a item in the DGs and edit the values displayed in the text inputs. To complete the editing hit "Enter". Notice that in the first DG the values don't get reflected immediately where as in second DG it does.

To support Object based dataProviders the list based controls in Flex make a explicit call to ICollectionView.itemUpdated() to force a change event. This is the reason edits in list based controls get propagated to other list based controls when both of them are using the same colletion as input.

The source is here.

As noted in the forum discussion, when HierarchicalData is built using Objects/Arrays (to represent children) the changes to the Array would not get propagated to ADG. Hence it is necessary to construct the HierarchicalData using ObjectProxies and ArrayCollections.

Fixing itemRenderer memory leak in AdvancedDataGrid on columns change

2008-05-15T04:34:00.000-07:00

Please read the discussion about memory leak here.

I think I found the workaround for this issue. We need to override the set columns method in a extended ADG class and add the code to free the dictionary holding on to the itemRenderers. Here is the code.

<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   override public function set columns(value:Array):void
   {
    super.columns = value;
    itemRendererToFactoryMap = new Dictionary(false);
   }
  ]]>
 </mx:Script>
</mx:AdvancedDataGrid>

Why do people shy away from giving useful 360 degree feedback?

2008-04-17T20:29:00.000-07:00

I know human psychology is one of most complex things in the universe! But still fail to understand why people shy away from giving useful 360 degree feedback even when it is requested?

I can understand the case where feedback provider holds back this thoughts when there is a fear that his or her name would be revealed and it may spoil a good relationship or cause unnecessary trouble in office or life.

But when the feedback is being provided for a good cause why do people shy away from giving a complete feedback? Why do they provide 180 degree feedback which only leads in a direction but doesn't complete the circle leaving the seaker to ponder all over for the correct point?

Take example of ADG performance poll. There are votes for good, ok and bad. Good and OK are understandable because it is kind of known as testing and many in house scenarios has proved that the performance is acceptable (if not great) in many use cases. But BAD was (kind of) unexpected because of so many hours of testing which has gone in.

Bad performance can arise because of many reasons. For example it can be due to bad performance of GroupingCollection as Doug has kindly pointed out. It can be due to complex custom itemRenderers being used. It can be due to a genuine problem in a particular control flow inside ADG. But without a complete feedabck (pointers to the exact problem faced if not samples) it would be impossible to work on anything. It would be similar to searching for a black coat in a dark room or worse for a non existent coat in a dark room.

This also goes along the same lines as my post about software patches. If customers don't make use of available source and public bug base and provide a good feedback even a very good intention/path provided to help customers goes waste.

In this context I don't know whom to blame for the situation as customers we find ourselves in, because we are not making full use of the easy avenues open in front of us to make a product worthy of the money we have paid for. Or is it that customers have accepted the situation and are showing indifference towards demanding what they rightly deserve?

Software patches good/bad/ugly?

2008-04-09T20:41:00.001-07:00

This topic has been in my mind for quite sometime now. It used to reach the top and remain their for sometime whenever Maxthon poped up "A new version available with fixes would you like to install?" dialog.

In early days when the auto update feature was unheard of I used to think software patches are ugly. One needed to keep visiting the website of the product frequently to check whether a patch was available to fix the problems one is facing with the product.

Once patches became more and more popular and available I used to think them as bad. That was becuase sometimes patches used to have more serious problems than the original product. And once you have applied a patch it was not easy to remove it and a complete uninstall-install cycle was required to get back to square one. The "The update requires a system restart. Restart now?" screen only served to add more fuel to the bad feeling.

Now that auto updates are default and internet is thought as part of your desktop I have beginning to think that patches are good! I think the quality of patches is better now compared to earlier days, may be due to companies having automated testing tools to assure quality.

My latest thought is that "Not having (releasing) patches is really really a bad thing". Pushing a product out of the door having already planned for patches is bad. But at the same time knowing that customers are suffering with a released product, asking them to wait for the next release (which would be more than a year later) is just pathetic. Because every release comes with its own new features and new bugs. Companies don't push out new releases without new features as they won't earn any money with a release (patch) aimed at fixing serious bugs or performance issues in the previous release. The problem with this kind of approach is that the attitude about a bug changes in the following way.

Version 1.0 release : We are releasing a great product which would help our users in a great way by boosting their productivity. We would fix all serious bugs soon.

Customer: Great. Let me use it.

Version 2.0 release : We have lot of new features for you. In this release we have addressed all serious bugs (read it as bugs reported by great parteners and volume customers) in the previous release.

Customer: But what about other serious bugs faced by me?

Company: We would fix all bugs soon.

Customer: They are only fixing bugs for the new features and few more bugs from volume customers.

Version 3.0 release : We have lot of new features. We have revelutionized the workflow. We have rewritten many parts of the code to boost peformance. etc... Of-course now we are open-source !

Customer: Now it is Open-source ? Great! But what about bugs which were in 1.0 release?

Company: Oh! our customers have lived with these bugs for more than 2 years, now they have almost stopped complaining.....they can live with it! If they complain more, let us ask them to upgrade to the new version and follow a new workflow/API for the same feature which we have introduced. And anyway we are open-source let them grab the source and fix the bug themselves. We can't spend our precious development time over fixing those old bugs.

Customer: Where I can find a developer and time to study this piece of open-source product and fix bugs for me? ...?....?

As customers who have paid their hard earned money I think we deserve a better treatment. Don't you think so?

Using Flex OLAP/OLAPDataGrid for doing Pivoting computations

2008-04-09T03:00:00.000-07:00

Satish has developed a new PivotComponent using OLAPDataGrid and OLAP which can be used to perform pivot analysis of data.

The sample can be found here. Drag and drop one or more dimensions into the column and row fields. The results would get displayed as soon as the drop happens. Drag and drop more dimensions into column, row or slicer fields. Use the drop down attached to dimension button to pick specific members of the dimension to do slicing. The sample uses OLAPChart and OLAPDataGrid extensions to display the OLAPResult generated.

Description and source

Custom Aggregator sample for Flex OLAP

2008-04-07T05:13:00.000-07:00

Here is a sample which shows a percent custom aggregator used for OLAP. The sample shows computation of percentage of values to the total value. The total value is assumed to be known before hand.

The PercentAgg class implements the IOLAPCustomAggregator interface. The constructor takes the total value as input and uses it to compute the percentage of values in the computeEnd and computeObjectEnd functions.

The sample also shows how OLAPAttribute class can be extended to OLAPTotal to replace the "(All)" value with a custom name "Total".

The sample also shows how OlapDataGrid can be created in AS and itemRendererProviders can be supplied to it and values displayed in ODG can be styled. Here is the complete source.

Writing a Custom Aggregator for Flex OLAP

2008-04-07T03:47:00.000-07:00

Writing a custom aggregator for OLAP involves implementing the IOLAPCustomAggregator interface. It is easy to write a custom one based on the default ones. The default SUM, AVARAGE, MIN, MAX and COUNT aggregators source can be found in the mx.olap.aggregators directory.

The SUM, MIN, MAX and COUNT aggregators are all simple and acutally doesn't require any special handling as they are linear. The AVARAGE aggregator is special because avarage of avarages wouldn't give the correct result and hence we need to maintain proper information to arrive at the correct result.

The following sample shows how this is achieved.

IOLAPCustomAggregator has 6 functions can they can be divided into two sets.

1. computeBegin,computeLoop and computeEnd. These functions are called to initialize, compute and return the simple aggregation value.

Suppose 1..8 are the input values and they need to avaraged as two different sets 1..5 and 6..8. The sequence of function calls is one computeBegin, one or many calls to computeLoop and one call to computeEnd. 1. computeBegin can be used to prepare for a fresh computation. 2. computeLoop is the place where the acutal computation takes place. This function would get called repeatedly to add new input values to the aggregation. 3. computeEnd is supposed to return the value of the computation. This is called when cube decides that no new input values would get added to this aggregation and it is ready to receive the final value.

2. computeObjectBegin, computeObjectLoop, computeObjectEnd. These functions are called to initialize, compute and return the aggregation of aggregations.

The second set of calls would be, one call to computeObjectBegin, one or many calls to computeObjectLoop (depending on the number of aggregated values) and one call to computeObjectEnd.

As shown in the image these functions are supposed to compute the avarage of avarages. As the first set of functions saved the sum and count values separately the task is easy. We need just compute the sum of both these values from each avarage object.

In computeObjectBegin the first value to start the computation is passed. In computeObjectLoop the the computation is carried forward with additional values. In computeObjectEnd the result of the computation should be returned. Hope this helps!

AdvancedDataGrid performance poll

2008-04-06T23:42:00.000-07:00

Hello AdvancedDataGrid users !

I have added two polls to the end of my blog. One for suggesting in what areas should ADG performance improve. Second one for overall performance of ADG in your projects/apps.

Please spare some time out of your busy schedule and take the polls.

I would urge you take both the polls because just taking one poll many not deliver the exact picture. For example if you say vertical scrolling performance needs to be improved we don't know whether the app is hurt by its performance or it is that it would do better with a performance boost.

Thanks for your time !

Of-course if you would like to send me a sample showing poor performance in a particular/general context please do by sending a mail

Update:I am seeing more number of votes on Bad than expected :(

I would appreciate if you leave a comment as to which particular area of ADG you found the performance to be so poor that it forced you turn it down. I am asking this because votes are also going in favor of Good and OK. It would be of great help if I get a pointer in that direction so that we can study that area of the code more and see what performance improvements can be done. Thanks!

Documentation about Creating a Automation delegate for custom components in Flex

2008-03-27T23:31:00.000-07:00

Documentation and sammple about how to go about creating an automation delegate for custom components in Flex is detailed here

It also has step by step description of delegate creation for the RandomWalk component created by Ely.

Hope it helps!

AdvancedDataGrid, Charts and OLAP source gets unziped in FlexBuilder Pro version

2008-03-19T22:46:00.000-07:00

What I thought is a known fact seems not so widely known. Hence posting it.

When FlexBuilder Pro version is bought and a valid licensce key is entered the source code for the complete datavisulation.swc would get unzipped and get placed under

<FlexBuilder installation direcotry>sdk/3.0.0/fbpro/...

directory. Which means users would get access to AdvancedDataGrid, Charts and OLAP source code.

It is not open-source but source is available for you to take a look and override functions with more confidence and knowledge of the internal workings. And of-course suggest/complain !

Enjoy !

Introducing OLAPTimeDimension for OLAP

2008-03-13T06:00:00.000-07:00

In this sample though the data contained date information we didn't use it while building the OLAP cube. The reason was simple. The default OLAP implmentation in Flex 3 cannot handle dates in that format. It requires the date to be broken down into its components like year and month. If half year and quarter information is required that needs to be added to the flat data. That is a great pain point.

Here is OLAPTimeDimension to the rescue. It can be introduced as any other dimension in the OLAPCube schema and then configured to return year, half year, quarter, month and day in any combination.

<mx:OLAPCube id="salesCube" >

 <mx:OLAPDimension name="SalesData" >
   <mx:OLAPAttribute name="Company" dataField="company" />
   <mx:OLAPAttribute name="Region" dataField="region" />
   <mx:OLAPAttribute name="Market" dataField="market" />
   <mx:OLAPAttribute name="Product" dataField="product" />
    
   <mx:OLAPHierarchy name="Region-Market-Store" >
    <mx:OLAPLevel attributeName="Company" />
    <mx:OLAPLevel attributeName="Region" />
    <mx:OLAPLevel attributeName="Market" />
    <mx:OLAPLevel attributeName="Product" />
   </mx:OLAPHierarchy>
 </mx:OLAPDimension>
  
 <local:OLAPTimeDimension name="Years" dataField="date" />
  
 <mx:OLAPMeasure name="Revenue" dataField="revenue" />
  
</mx:OLAPCube>

Using this we get the following result where in we can query revenue for different years.

It can be easily extended to query quarters and months by setting includeQuarter and includeMonth to true on OLAPTimeDimension. The source is here.

Simple uses of OLAP

2008-03-13T05:23:00.000-07:00

In Flex 3 OLAP APIs were introduced. And here is a sample showing how it can be used in simple data processing.

The sample shows how a companys product revenue over regions and markets can be compared. Click the "Create cube" button to process the input data which looks like this

<row>
  <company>Fiction</company>
  <region>Asia</region>
  <market>Digital publishing</market>
  <product>Frames</product>
  <date>3/31/2005</date>
  <revenue>10</revenue>
</row>

and build the OLAP cube. Clicking on the "Query Revenue with Product by Region" button would display the result in OLAPDataGrid. The query returns the total revenue comparing product by region across all years (2005 and 2006 in the sample data case). The last row and last column display the totals by product and totals by region respectively.

Now different markets can be selected from the ComboBox and revenues from different markets can be compared.

The source can be found here.

Creating OLAPCube in AS

2008-03-12T23:42:00.000-07:00

In Flex 3 OLAP APIs were introduced and there have been many queries about how to create a OLAPCube in AS instead of defining it in MXML. Here is a sample :


private var salesCube:OLAPCube;

private function createCube():void
{
 salesCube = new OLAPCube();

 var dim1:OLAPDimension = new OLAPDimension("SalesData");

 //add attributes to the dimension
 var attr1:OLAPAttribute = new OLAPAttribute("Region");
 attr1.dataField = "region";

 var attr2:OLAPAttribute = new OLAPAttribute("Market");
 attr2.dataField = "market";

 var attr3:OLAPAttribute = new OLAPAttribute("Store");
 attr3.dataField = "store";

 var attr4:OLAPAttribute = new OLAPAttribute("LineOfBusiness");
 attr4.dataField = "line_of_business";

 var attr5:OLAPAttribute = new OLAPAttribute("Model");
 attr5.dataField = "model";

 dim1.attributes = new ArrayCollection([ attr1, attr2, attr3, attr4, attr5 ]);

 //add a user defined hierarchy   
 var regionHierarchy:OLAPHierarchy = new OLAPHierarchy("Region-Market-Store");

 //define the levels of the hierarchy
 var level1:OLAPLevel = new OLAPLevel();
 level1.attributeName = "Region" ;

 var level2:OLAPLevel = new OLAPLevel();
 level2.attributeName = "Market" ;

 var level3:OLAPLevel = new OLAPLevel();
 level3.attributeName = "Store" ;

 var level4:OLAPLevel = new OLAPLevel();
 level4.attributeName = "LineOfBusiness" ;

 var level5:OLAPLevel = new OLAPLevel();
 level5.attributeName = "Model" ;

  //add levels to the hierarchy
  regionHierarchy.levels = new ArrayCollection([ level1, level2, level3, level4, level5 ]);

  //add hierarchy to the dim
 dim1.hierarchies = new ArrayCollection([ regionHierarchy ]);

 //more dimensions can be defined here

 var measure:OLAPMeasure = new OLAPMeasure("Revenue");
 measure.dataField = "revenue" ;

 //more measures can be defined here

 //add the dimensions and measures to the cube.
 salesCube.elements = [ dim1, measure ];
}

This creates the same OLAPCube as the following in MXML

<mx:OLAPCube id="salesCube" >

 <mx:OLAPDimension name="SalesData" >
   <mx:OLAPAttribute name="Region" dataField="region" />
   <mx:OLAPAttribute name="Market" dataField="market" />
   <mx:OLAPAttribute name="Store" dataField="store" />
   <mx:OLAPAttribute name="LineOfBusiness" dataField="line_of_business" />
   <mx:OLAPAttribute name="Model" dataField="model" />
    
   <mx:OLAPHierarchy name="Region-Market-Store" >
    <mx:OLAPLevel attributeName="Region" />
    <mx:OLAPLevel attributeName="Market" />
    <mx:OLAPLevel attributeName="Store" />
    <mx:OLAPLevel attributeName="LineOfBusiness" />
    <mx:OLAPLevel attributeName="Model" />
   </mx:OLAPHierarchy>
 </mx:OLAPDimension>
  
 <mx:OLAPMeasure name="Revenue" dataField="revenue" />
  
</mx:OLAPCube>

DateChooser with support for backgroundColoring some dates

2008-03-10T22:39:00.000-07:00

I got a query recently asking whether it is possible to have the DateChooser highlight certain special dates with a different background color. The query was accompanided by a DateChooser code which achieved this by using the TexField.backgroud and TexField.backgroudColor properties (similar to my other posts for DG row background coloring). But the draw back of the approach was that selection and roll over feedback was not working.

I took a look at DateChooser and CalendarLayout and realized that with the current design/implmentation it was not possible to add the backgroundColor support. The selection and rollOver indicators were lower in z order than date UITextFields.

I modified the CalenderLayout code to have three layers (UIComponents). One for background, second for indicators and third one for the dates. After modifying the addChild* and removeChild calls refer to the appropriate layers, the remaining work was to add "speicalDates" and "specialDatesColor" property and wire them up at appropirate places (commitProperties and updateDisplayList) to achive the following result :

I have randomnly generated the special dates in the above sample to keep the sample live on any day it is viewed!

I have added a alpha value of 0.7 in DateChooserIndicator to make the selection indicator show through the backgroundColor. Feel free to tweak this value to your flavor.

The project source to build the Flex3Ex.swc is here. It contains the modified DateChooser and CalendarLayout classes. I posted the complete Flex project here because Travis pointed out that it is difficult for newbies to understand how to use the component source files. Thanks Travis!

The source for the sample app is here.

The components can be further enhanced to support multiple specialDates (array of array of dates) and multiple specialDatesColors.

Update: I got to implement this. Source is available here.

Update: I have updated the source to support the following:

Now dates can be specified as strings "06/01/2009" (for 1st June 2009) but make sure that it succeeds to pass through Date.parse function and returns a valid Date.

Date ranges can be specified as follows:

{ rangeStart:"06/01/2009", rangeEnd:"06/05/2009" }

Update: There seems to be some problem with library path handling etc due to which a swc is not getting picked up properly in FB. The work around I came up for this is to include the Flex3Ex/src directory in the source path of the project as shown here

GroupingCollection to group mails on Date and Subject

2008-02-29T02:47:00.000-08:00

Here is a sample I wrote using GC to group mails according to Date and Subject very similar to Outlook. This sample serves to show the complex ways in which GC can be configures and used.

Subject grouping: The sample uses GroupingField.groupingFunction and GroupingField.compareFunction to achive the Subject grouping even when subject line text is prefixed with RE:, FW: etc. Grouping.groupingObjectFunction is used to supply a custom grouping object MailGroup which has a date field getter function to return the maximum date of the child mail items.

Date grouping: Again groupingFunction is used to form diffrent groups of mails based on the date value.

The "show unread mails" option can be used to remove the read mails from the view. This shows filtering applied to the HierarchicalCollectionView which ADG creates internally when a GroupingCollection (or anything which implements IHierarchicalData) is supplied as the dataProvider.

The "highlight unread mails" option uses the ADG.styleFunction property to hightlight the unread mails by making them bold.

The source is available here

Please note I have a tweak in the sample to keep it ever-green, that is the date values of the mail items are generated at runtime than hard coded.

PrintTileList along the lines of PrintDataGrid.

2008-02-25T22:34:00.000-08:00

After seeing this query I thought it should be easy to get it to work. So spent 2 hours (that is little more than expected, isn't it!) and here is the result.

The source is here.

Drag-drop between two containers instead of list based controls in Flex

2008-02-23T04:10:00.000-08:00

I keep seeing many questions on forums about drag-drop of images between two containers or between a control and a container. So I thought a sample may help.

The sample shows a side toolbox from which cursors can be dragged and dropped into the canvas on the right hand side. The code is simple so I won't try to explain the steps in detail here.

The source for this sample is here.

The source for dragging and dropping items between a DataGrid and container can be found here.

Alternate row color in DataGrid per DataGridColumn

2008-02-20T22:08:00.000-08:00

The idea came from a flexcoders post here. After attempting the previous example of row background colors in ADG I thought it should be easy to achive this which resulted in this post.

I extended the DGColumn and added a "alternatingItemColors" style it so that it would be possible to set it per column.

I extended the DGItemRenderer and used the background and backgroundColor properties to set the items background color. I added logic in a overridden validateNow function to pick up the color from the alternatingItemColors color array.

The drawback of this approach is that the selection feedback gets almost hidden by the background coloring which would not be the case if the drawRowBackground function is overridden.

The result :

The source is available here.

Changing row background color in AdvancedDataGrid

2008-02-20T21:03:00.000-08:00

Changing the row backgroundColor in AdvancedDataGrid to highlight few rows is easy (though not possible out of the box).

I have used a different approach than overriding the drawRowBackground function used for DG. The drawback of this approach is that the selection feedback gets almost hidden by the background coloring. If the intention is to highlight a search or hightlight a particular values this should not be a serious problem.

The default itemRenderer ADGItemRenderer extends from UITextField (for perforamnce reasons) which doesn't have a backgroundColor style. Hence it is not possible to do it out of the box. But TextField (parent of UITextField) has background and backgroundColor properties which can be set to change the backgroundColor of the TextField.

I have created a new custom itemRenderer ADGItemRendererEx which derives from ADGItemRenderer. I have added a "rowColor" style to this and use this style value to set the TextFields background color.

By providing a styleFunction to ADG we get control to return any styles we want to be set on the itemRenderer. Any logic to determine a particular rows color can go into this function. The return value is a object with style names as properties and style values as proprety-values. For ex:

return { rowColor:0xFF0000, fontWeight:"bold" };

If function logic decides not to change the styles it can return an empty object.

The following sample shows the result. By typing any string in the text box the particular row containing the searched string is highlighted. User can choose to search for either company column or product column.

The source is available here.

Auto generating DataGrid columns for XML data

2008-02-20T01:32:00.000-08:00

When we have dynamic XML data as follows

 <employees>
  <employee>
   <name>Christina Coenraets</name>
   <phone>555-219-2270</phone>
   <email>ccoenraets@fictitious.com</email>
   <active>true</active>
  </employee>
  <employee>
  <name>Louis Freligh</name>
  <phone>555-219-2100</phone>
  <email>lfreligh@fictitious.com</email>
  <active>true</active>
   </employee>
</employees>

or in the form of attributes

<employees>
<employee name="Christina Coenraets" 
 phone="555-219-2270"
 email="ccoenraets@fictitious.com"
 active="true" />
<employee name="Louis Freligh" 
 phone="555-219-2100" 
 email="lfreligh@fictitious.com"
 active="true" />
</employees>

and feed into DG or ADG it won't create columns auto-magically as it does for Object data type. This may be because it is difficult to decide whether you want to display the child nodes as columns or attributes of nodes. And may be it was not appropriate to clutter the API with one more flag to do this.

I wrote the following code to get this working.

private function generateCols(input:XMLList, 
 useAttributes:Boolean = false):Array
{
 var e1:XML = input[0];
 var columns:Array = [];
 var children:XMLList ;
 if (useAttributes)
    children = e1.attributes();
 else
    children = e1.children();
 for each(var child:XML in children)
 {
    var col:DataGridColumn = new DataGridColumn();
    col.dataField = useAttributes ? "@" + child.name() : child.name();
    
    var fieldName:String = child.name();
    col.headerText = fieldName.charAt(0).toUpperCase() + fieldName.substr(1);
    columns.push(col);
 }
 return columns;
}

The source is available here

The thread related to this post is here

Using AdvancedDataGrid as a tree control with sorting

2008-01-28T01:01:00.000-08:00

The AdvancedDataGrid control can be configured and used as a simple Tree control with sorting support (which is not available in the Tree control).

The following example shows how.

When hierarchical XML (or Object based) data is fed into a HierachicalData (which implements IHierachicalData) and set as dataProvider to ADG it internally converts it into a HierarchicalCollectionView (implementing IHierarchicalCollectionView). The good news is that HierarchicalCollectionView provides the sort and filtering APIs which can be used to sort and filter the data very similar to flat data.

Click on the "Simple sort" button to see how the data gets sorted recursively. It doesn't do a good job as it mixes up parent and leaf items. If you are one those who expects everything according to the alphabetical order you may like it !

Click on the "Custom sort" button to see how the sorting can be customized to show the parent items at the top and leaf items at the bottom. The custom sort function uses the IHierarchicalData.canHaveChildren API to move the parent items up the ladder.

"Remove sort" does the obvious.

The source and data used for example.

Extending DGColumn and ADGColumn to handle nested data fields.

2008-01-22T21:40:00.000-08:00

I have seen numerous questions regarding how to specify DataGridColumn.dataField when the data is nested (object or XML). Developers attempt to use "datafield1.datafield2.datafield3" to find out that it doesn't work !

The data might look like this :

<mx:XMLList id="testData" xmlns="">
<root>
   <item>
      <childItem>
        <name>India Flex group</name>
        <mail>indiafx@gmail.com</mail>
      </childItem>
      <location>India</location>
   </item>
   <item>
      <childItem>
        <name>Singapore Flex group</name>
        <mail>singaporefx@gmail.com</mail>
      </childItem>
      <location>Singapore</location>
   </item>
   <item>
     <childItem>
       <name>Sreenivas</name>
       <mail>sreenivas.ramaswamy@gmail.com</mail>
     </childItem>
     <location>Bangalore</location>
   </item>
</root>
</mx:XMLList>

The answer has always (most of the time?) been to use DataGrid.labelFunction. I dislike the solution because it requires the developer to do this again and again for every column and every usage. I find it easier to extend the DataGridColumn and override the itemToLabel function to do the needful.

The usage is simple. The Nested and ordinary columns can be mixed or only nested columns can be used as the logic kicks in only when "." is present in dataField value.

<mx:AdvancedDataGrid dataProvider="{testData.item}">
  <mx:columns>
    <local:AdvancedDataGridColumnNested dataField="childItem.name" headerText="Name" width="150"/>
    <local:AdvancedDataGridColumnNested dataField="childItem.mail" headerText="email" width="100"/>
    <mx:AdvancedDataGridColumn dataField="location" headerText="Location" />
  </mx:columns>
</mx:AdvancedDataGrid>

<mx:DataGrid dataProvider="{testData.item}">
   <mx:columns>
     <local:DataGridColumnNested dataField="childItem.name" headerText="Name" width="150"/>
     <local:DataGridColumnNested dataField="childItem.mail" headerText="email" width="100"/>
     <mx:DataGridColumn dataField="location" headerText="Location" />
   </mx:columns>
</mx:DataGrid>

The result looks like this:

The data can be nested to any level not just two. The same logic takes care of everything!

Here are the source files for DataGridColumnNested and ADGColumnNested and test app.

Flex talking to a ActiveX (using ExternalInterface)

2008-01-22T04:34:00.000-08:00

I keep seeing/getting request to know how Flex can communicate with a ActiveX control/DLL. So thought will post this sample in which calls were being exchanged between a Flex app and a ActiveX C++ DLL. You can find the source code here.

The sample has two portions a flex app called CalledApp and a C++ DLL called CallingDLL. Load the CalledApp project in FlexBuilder and CallingDLL project is Visual Studio 2003 or later. Build the DLL and the Flex app. Run the Flex app and click on the button. When flex app calls the DLL function the DLL calls back the flex app.

The key is to make the ActiveX DLL scriptable in IE. I went through the trouble long back. The C++ code shows how to traverse the browser DOM to get access to the correct player and how to invoke functions exposed by the SWF.

The Flex app uses ExternalInterface to create a instance of the ActiveX and make calls to it.

However the sample doesn't show passing arrays to the ActiveX which requires conversion of JavaScript Arrays to COM arrays. I am sure smart developers out there can figure out this :).

If you are looking for a sample where in the SWF is loaded in the Flash player ActiveX control embedded in a Desktop application it can be found here.

Extending DateChooser.selectableRange to accept multiple values/ranges

2008-01-20T21:24:00.000-08:00

Recently I came across the following requirement: Enable few disjoint dates in a DateChooser for user selection. The default DateChooser.selectableRange does not allow inserting of list of dates. It takes only a range and disables the rest.

I copied and modified the Flex 2 DateChooser control to achive the new functionlity. The swc is available here http://sreenivas.ramaswamy.googlepages.com/FlexEx2.swc.

I used this file to do the testing. I have done basic testing and it seems to work.

Only few dates in Jan, Feb and March of 2008 are enabled and it restircts the navigation to only those months

Currently I have made changes to only Flex 2 DateChooser. I would be happy to fix any bugs found !

Here are the Flex 3 files: DateChooser and CalenderLayout. The project source to build a Flex3Ex SWC which contains the modified code for DateChooser and CalendarLayout can be found here.

HierarchicalData from Flat XMLList data where nodes have parent info

2007-12-21T22:26:00.000-08:00

This example shows how to make ADG display data in a Treeview or HierarchicalView when the source data is flat XMLList of nodes and each node has information about its parent node. Sample data is shown below:

<?xml version="1.0" encoding="utf-8"?>

<tasks>

</tasks>

Here each node has a parentTask attribute which specifies the parent task id. The top most nodes have parent task attribute set to zero. The nodes can be in any order.

We use the FlatXMLHD class which implements the IHierarchicalData interface to hide the XMLList parsing details. The result :

The source is available here.

Displaying GroupingCollection/HierarchicalData in Charts with drill-down

2007-12-07T04:01:00.000-08:00

This example shows how to use GroupingCollection/HierarchicalData as dataProvider to a Chart and how to support drill down and drill up navigation.

Click on any item to drill-down and Ctrl+Click on any item to drill-up. The top chart uses HierarchicalData sample and the second chart uses GroupingCollection to generate a summary information from flat data.

Please note that all data is fictitious and I just cooked it up for the sample.

To get access to parent and children collections a HierarchicalCollectionView is constructed using GC/HD as source. To display a drilled down view the children collection is set as charts dataProvider. For a drill-up operation the clicked items parent collection is set as dataProvider.

The source can be downloaded from here.

I have used the DrillDown, DrillUp effects from Ely's chart drill down sample of XML data. The sample would have looked a bit dull without them. Thanks to Ely!.

Use ArrayCollection available in HTTPService result with caution

2007-11-29T09:02:00.000-08:00

Please refer to this and this bug report .

Both of them speak about data editing/update not getting propagated properly through a ArrayCollection. The samples are using the ArrayCollection available from the HTTPService result directly. The HTTPService is creating the ArrayCollection first and then updating its source Array with items. The Array object doesn't dispatch any events when it is updated with new items. Due to this ArrayCollection has no way of adding event listeners for property changes to the items added later on. Hence the changes are detected only for the items present at the time of creation of ArrayCollection which happens to be 2 items.

If one desire to use the HTTP result as dataProvider and expects data updates to get properly propagated they need to create a new ArrayCollection using the source of the default ArrayCollection present in the HTTP result.

data_provider = new ArrayCollection(ArrayCollection(srv.lastResult.data.result).source);

where srv is the HTTPService. If data_provider is already a ArrayCollection then we can just modify the source as follows

data_provider.source = ArrayCollection(srv.lastResult.data.result).source;

This bug exists in Flex 2 and may not be fixed in Flex 3 as the current bug status is deffered! The source is available here and data getting loaded here.

Customizing grouping using GroupingField.groupingFunction in GroupingCollection

2007-11-29T01:24:00.000-08:00

It is possible to generate custom groups using groupingFunction property of GroupingField. Take a look at the following sample. By choosing different options from "Choose age range" users can view the same data in different groups.

The sample uses fictitious data of web site visitors by age and location. The example uses COUNT summary option to show how many visitors exist in each group.

The only thing to remember while writing a groupingFunction is that the return value should not change the sorting order being used for the dataField. Another way to put it is, the groupingFunction should return group names in a sorted order only. It shouldnot return group names in a random fashion.

The source can be found here.

XMLList, HierarchicalData and AdvancedDataGrid

2007-11-19T21:53:00.000-08:00

Using a XMLList as source for GroupingCollection or HierarchicalData is a bit tricky. The trickiness comes from the fact that there are two ways to specify values for a XML node. One as attributes and second as child nodes. Depending on which way values are specified we need to set properties differently to get the desired display in ADG. For XMLList data type HierarchicalData treats the child nodes of a node to be children of the parent node by default. Specifying values as attributes:


<Parent field1="valueA" field2="valueB" >
 <Child1 field1="value1" field2="value1b" />
 <Child2 field1="value2" field2="value2b" />
 <Child3 field1="value3" field2="value3b" />
</Parent>

Here Child1, Child2 and Child3 would be recognized as children of Parent node. Specifying values as sub nodes:


<Parent>
    <field1>valueA</field1>
    <field2>valueB</field2>

   <subnodes>
    <Child1>
     <field1>value1</field1>
     <field2>value1b</field2>
    </Child1>
    <Child2>
     <field1>value2</field1>
     <field2>value2b</field2>
    </Child2>
    <Child3>
     <field1>value3</field1>
     <field2>value3b</field2>
    </Child3>
   </subnodes>
</Parent>

If above data is set as source to HierarchicalData it would treat field1, field2 and subnodes as children of Parent node, which is not correct. To tell HierarchicalData to use only the nodes under subnodes as children set HierarchicalData.childrenField to "subnodes".

The same rules apply when GroupingCollection (which is derived from HierarchicalData) is used to group flat data.

Suppose following data is used as input to GroupingCollection and grouped on Region


<Row>
    <Region>Southwest</Region>
    <Territory>Arizona</Territory>
    <Territory_Rep>Barbara Jennings</Territory_Rep>
    <Actual>38865</Actual>
    <Estimate>40000</Estimate>
</Row>

<Row>
    <Region>Southwest</Region>
    <Territory>trials</Territory>
    <Territory_Rep>Dana Binn</Territory_Rep>
    <Actual>4000</Actual>
    <Estimate>5000</Estimate>
</Row>
 
<Row>
    <Region>SouthEast</Region>
    <Territory>Central California</Territory>
    <Territory_Rep>Joe Smith</Territory_Rep>
    <Actual>5000</Actual>
    <Estimate>6000</Estimate>
</Row>

<Row>
   <Region>Southwest</Region>
   <Territory>Nevada</Territory>
   <Territory_Rep>Bethany Pittman</Territory_Rep>
   <Actual>1000</Actual>
   <Estimate>2000</Estimate>
</Row>

The result won't get displayed because the base HierarchicalData would treat <Region>, <Territory> etc nodes also as children of Row. To get proper display we need to set GroupingCollection.childrenField="abc" or some non existent node name. This would cause HierarchicalData to report that no children exist for the Row.

Smart column width based on data displayed (Part One: No code yet)

2007-11-09T00:51:00.000-08:00

From the poll conducted I find that many users want Smart column width based on data displayed in DG/ADG.

I hope people requesting this feature know that it is a CPU intensive process to go over all the items in the dataProvider to find out maximum width required for all the columns. If the number of visible columns is more it would take even more time to compute the values and layout the columns.

If a labelFunction is being used at DG or DGColumn level and custom styles have been used on a column for fontSize for example, it complicates the computation even more.

When the data is being paged from a server it is not possible to compute the smart width at all without requesting all the data from the server, which is never desirable.

Keeping these things in mind I feel it makes sense to have a flag on individaul DGcolumn (apart from one on the DG itself) to control the computation of smart width. If the flag is true width is computed and false would use the normal way of determining the column width.

Thoughts?

Generating summary for flat data using GroupingCollection

2007-11-08T22:40:00.000-08:00

This example shows how GroupingCollection can be used to generate summary data for flat data and AdvancedDataGrid can be used to display the result.

The trick (or dirty work around if you like to call it so) is to generate a single dummy group using a invalid grouping field. The summary we require is specified as usual using the SummaryRow and SummaryField.

When this GroupingCollection is fed to ADG.dataProvider it would try to display in a tree view. By setting the HierarchicalCollectionView.showRoot flag to false to avoid displaying the single group parent.

By specifying the default ADGItemRenderer as ADG.groupItemRenderer we can prevent the group icons from getting displayed.

The source is here.

Please note I have not tested this example extensively. So some bug fixes may be required before it can be used in production.

Customizing Group label fields when using GroupingCollection

2007-11-02T04:44:00.000-07:00

By using the ADG.groupLabelFunction property one can customize the group label displayed for the group nodes. The following example shows how children count can be displayed as part of the group label when the group is closed. The source can be found here.

Poll for current and new features in AdvancedDataGrid

2007-10-12T04:55:00.000-07:00

I created three polls at the end of my blog. One to know how users are feelling about ADG in its current form, second what features of ADG in Flex 3 users are liking the most and third one to see what new features users would like to see in the next version of AdvancedDataGrid to make it more useful.

Who knows you may be able to guide the future developement of ADG !

Thanks in advance for giving your opinion!

If you want to see more choices do leave a comment. I would add it.

Async refresh of GroupingCollection

2007-10-11T05:56:00.000-07:00

In Flex 3 Beta-2, GroupingCollection adds support for asychronous refresh. When we have large number of input rows or don't want to wait for the grouping to finish to see the results we can pass true to GroupingCollection.refresh(async:Boolean) and get to view the results as the grouped data is built. Users are allowed to interact with the shown information. Refresh can be even stopped by calling cancelRefresh.

I wrote a small app to test this. The app generates random data and displays it in AdvancedDataGrid(ADG) when "Populate ADG" is clicked. The number of data rows can be modified using the numeric stepper. A click on "Group" starts async refresh and ADG starts displaying the results immediately. Grouping can be cancelled any time using "Cancel Grouping". The three check boxes allow different combinations of grouping to be performed.

Option to pause/resume a refresh is not available.

The source is available here.

Displaying charts in AdvancedDataGrid

2007-09-28T03:31:00.000-07:00

Using charts as itemRenderers in DG and ADG is easy. Find the sample files here The sample uses a LineChart as itemRenderer for the third column and a PieChart in the child area. The column-spanning option available through RendererProviders is used to make the PieChart occupy the whole row. The sample shows use of HierarchicalData but even without that All chart types can be used as itemRenderes.

AdvancedDataGrid Multi level Column Grouping

2007-08-27T04:49:00.000-07:00

AdvancedDataGrid supports column grouping. An example showing multiple level grouping is shown below. Here is the mxml file.

Customizing headers in DG/ADG

2007-07-31T20:30:00.000-07:00

Customizing headers in DataGrid and AdvancedDataGrid (DG/ADG) is very easy. Just point the headerStyleName property available on these controls to any style declaration you want. The following image shows one such example where the header text is colored in blue and red. The second column text is center aligned. The important thing to notice here is that the headers are now styled differently than the column content. If the same styles were set on the column objects then the header as well as column content would have got same styles. headerStyleName allows customizing only the headers. The headerStyleName is available on the control and the column object. Hence you can set the control.headerStyleName to customize all the headers and use the column.headerStyleName to customize individual headers. A sample mxml file.

Using public namespace explicitly

2007-06-21T05:18:00.000-07:00

Having same function in two or more name spaces can cause the following compiler error when trying to access the function. 1000: Ambiguous reference to foo. This error is easily generated when "using namespace " has been included in the file instead of referring to the namespace explicitly.

myspace.as

package
{
  public namespace myspace = "http://myspace";
}

TestClass.as

package
{
import myspace;

public class TestClass
{

  public function foo():void
  {
 trace("Public foo is called");
  }

  myspace function foo():void
  {
 trace("MySpace foo is called");
  }

  private function fooPrivate():void
  {
 trace("Called private function");
  }

  protected function fooProtected():void
  {
 trace("Called protected function");
  }

  public function callFoo(t:TestClass):void
  {
        // call the private/protected members on the object.
 t.fooPrivate();
 t.fooProtected();
  }
}
}

testApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="testFunc()">
<mx:Script>
 <![CDATA[

use namespace myspace;

private function testFunc():void
{
   var test:TestClass = new TestClass;
   //public can be also used as namespace name to call the correct function.
   test.public::foo();

   // call the myspace namespace function
   test.myspace::foo();

   var test2:TestClass = new TestClass;
   // call the function to demonstrate that private/protected functions
   // can be called on test2 object.
   test.callFoo(test2);

}
]]>
</mx:Script>
</mx:Application>

The above example also shows the possibility of calling private/protected functions on an object of the same class within the functions of the class. I don't think this is allowed in languages like C++. Note: As Richard has commented it is alllowed in C++ too. I think it makes sense as friend functions can access private variables of objects member functions should be able to access them too.

Summary customization in AdvancedDataGrid

2007-06-19T23:11:00.000-07:00

ADG allows customization of Summary and Grouping with various callback functions and properties. One such property available on the SummaryField class is the label property which allows one to customize the property name used for the summary data. This example shows one such usage to skip displaying any estimate information at the leaf level but display a budget summary data at the Territory level. The mxml file is here.

headerStyleName property of AdvancedDataGrid

2007-06-14T22:32:00.000-07:00

In my previous post I said that I thought it was not possible to style the header independent of the column cells. I was wrong. I found out that AdvancedDataGrid has the headerStyleName property similar to DG which can be set and headers can be styles independently. Using that and tweaking a little bit of code I could get the following look and feel which looks really nice!

AdvancedDataGrid Summary with column grouping

2007-06-14T05:08:00.001-07:00

I improved my previous sample with column grouping getting the following look. The new MXML can be found here. One problem I immediately noticed is that one cannot horizontally center the headerText of the columns without centering the column cell text, this is specially a problem with first column. I filed a request for this. The headerText cannot be vertically centered either. However this has been already reported requesting even more options.

AdvancedDataGrid Summary roll up sample

2007-06-14T03:13:00.000-07:00

Here is a sample application showing Summary roll up feature in AdvancedDataGrid and GroupingCollection. The GroupingCollection takes flat data in the form of a ICollectionView object as input and generates a grouped collection based on the GroupingField information provided. The example shows grouping on the Region and Territory data fields. Of-course don't forget to call the refresh method on the GroupingCollection to make the collection to generate the grouping. If Summary is desired Summaries with SummaryRow and SummaryField information can be added to each GroupingField object. The SummaryRow has a summaryPlacement property which can take multiple values as input from the possible values of group, first and last. I have used group to show the roll up of summary values. SummaryField has a operation property which by default supports "SUM", "MIN", "MAX", "AVG" and "COUNT". ADGColumn has support for a formatter which can be used to format cell values using any Flex formatter. I have used currency formatter to place a $ symbol. ADG and ADGColumn have a style function property which can be used to set style values on a particular cell based on its data content. The example uses this to change the font color to red. Oh! ADG has loads of features. Check it out. Before I forget here is MXML file for the sample.

Flex components to PDF

2007-05-25T06:41:00.000-07:00

Printing Flex components or converting them to PDF is very easy. Here is a sample code which shows how to print a column chart. If you want to generate a PDF you need to have ADOBE PDF printer driver installed on the machine. In the print dialog instead choosing a printer you can choose ADOBE PDF printer listed and you get a PDF as output. Sunil has more info about printing charts with data tips here. More about Flex Printing can be found here too. ChartToPDF.mxml

Specifying children for derived MXML containers can be done at only one place

2007-03-14T06:15:00.000-07:00

Error: Multiple sets of visual children have been specified for this component (component definition and component instance). is thrown by Flex when developers attempt to define children at two different places for a container. Suppose we have MyFirstBox extending HBox as follows: MySecondHBox.mxml


   <mx:HBox mx="http://www.adobe.com/2006/mxml">

      <mx:Button label="Button in declaration"/>
 
   </mx:HBox>

And we are trying to use MyFirstBox in another container like this


  <Application>

    <MyFirsthBox>

      <mx:Button label="Button in Instance" />

    </MyFirstHBox>
  </Application>

Flex throws the exception because it finds that in the declaration as well as in the instance inside the application child buttons are being added. This may be very easy to catch but where it bites is when we are trying to create a hierarchy of MXML components. Suppose we try to create a second HBox derived from MyFirstBox as follows MySecondHBox.mxml


  <MyFirstHBox xmlns="*" mx="http://www.adobe.com/2006/mxml">

    <mx:Button label="Button in derived comp" />


  </MyFirstHBox>

This is also not allowed as it falls under the same category and Flex throws the same exception. The workaround is to define children only in the leaf derived class. Any solution?

Coding problem in ActionScript

2007-03-04T00:56:00.000-08:00

The following code generates a VerifyError when getInstance is called. VerifyError: Error #1030: Stack depth is unbalanced. 0 != 1. at SingletonTest$iinit() public class SingletonTest { private static var s_singleton:SingletonTest = null; public static function getInstance():SingletonTest { if (s_singleton == null) s_singleton = new SingletonTest(); //Fails at this line. return s_singleton; } public function SingletonTest() { super; try { } catch (e:Error) { } } } Can you guess why? The reason is the super call in the constructor which is missing the () ! Why wouldn't the compiler throw a error or ignore the statement?

ResourceBundle Tag should match the name of properties file

2007-02-23T04:50:00.000-08:00

Unable to resolve a class for ResourceBundle: xxx.

is a very frequent error thrown by the MXML compiler when we are including different SWCs as libraries or trying to create a new resource by creating a new yyy.properties file and trying to use it in a AS class file by using the [ResourceBundle] tag. The key is to remember that the name given in the tag should match the properties file name. So for yyy.properties file one should use [ResourceBundle("yyy")] . Even if you are using a zzz_rb.swc file containing the resources and you want to use the yyy resource present in the swc we should use the [ResourceBundle("yyy")] tag in AS file.

About Flex

2007-02-17T00:22:00.000-08:00

I joined Macromedia (now Adobe) in 2005 July after spending more than 7 years in Tata Elxsi. I opted to switch from Maya, 3D Graphics, C++ programming to Flex, ActionScript and Player. After learning about blogging from Manish and reading blogs from Ely, Kevin Lynch, Raghu and various other people I also wanted blog separately on Flex but never thought my knowledge enough to enough to write one. After a year or so I am feeling that I could put together a blog with lot of "pearls" I keep picking up from the DL-Flex Questions mailing list so that including myself anyone can make use of these.