April 07, 2011

No sorting for Spark DataGrid? What the hell?

Simple test:
There are numerous examples of the new Spark DataGrid on the web, Just take one of them and put "sortable" on one of it's columns… nothing.
Looking at the SDK I see this nice comment over the "sortable" getter:

/**
* TBD
*
* @default true
*/

TBD as in To Be Decided?
Are you serious, Adobe?
Did you really take away the most important feature of the data grid?

I might be wrong here, but information on the blogs and documentation clearly suggests that Adobe chose not to implement this feature at the moment.

Disappointing to say the least.

April 06, 2011

Custom Scroll bars for MX Tree with no "white box"


Hi guys,

We ran, at work, into a styling problem which has a simple solution yet elusive.
When you try to custom an MX tree (since Spark tree is not available at the moment) you create a vertical and horizontal scroll bars, same as you would anywhere else.
Once both are present you'll notice that there is a small "white box" in the gap that both leave at the bottom-right. Now this bug is known and has a workaround when happens on any Container based control. The solution relies on the fact that there is actually a member named "whiteBox" on the Container that represents the rebellious shape. Set it's visibility to false or it's alpha to 0 and there you have it.
The trouble is that the Tree, or for the sake of the matter, the ListBase doesn't have this "whiteBox" member, so where does it come from and how do we make it go away?
Simple (and some might say, stupid) answer - the background. Just set the background color to "null" within the CSS, and no more white box. Here is a code sample:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
   backgroundColor="0x000000">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

mx|List {                        
content-background-color: "null";
}

</fx:Style>

<s:Panel
width="400"
height="300">
<mx:Tree
width="100%"
height="100%"
horizontalScrollPolicy="on"
verticalScrollPolicy="on"/>
</s:Panel>
</s:Application>




Hope this helps you,

Cheers.