April 17th, 2007 by Kyle
Tags: , , , , , , , ,
Posted in: ActionScript, Flex


If in the dataGrid control you set showHeader = false and if the dataProvider has no items in it, then the vertical column lines don’t show up.
The vertical column separator lines only appear when the dataProvider has items populating the grid (or if there is no data and showHeader=true).
In the Datagrid code, drawing the vertical column separator lines is keyed off of the listData, which would have a “row 0” containing the header row if the headers where to be visible.
The solution to this is to extend the datagrid and override the drawLinesAndColumnBackgrounds method in which you can iterate over the column array rather than the listItems to draw the vertical lines.

Read the rest of this post»




No Comments »

March 16th, 2007 by Kyle
Tags: , , , , , , ,
Posted in: Flex


I wrote a small sample for a customer to demonstrate how to write a Charting Datatip Renderer and Axis Label Renderer that displayed HTML links that when clicked on open up other web pages.

I based my renderers on the TextArea component, since that component has a link event that gets fired off if the TextArea htmlText contains an anchor tag that has an href that contains “event:”.

Here is the DataTip Renderer, MyDataTipRenderer.mxml:

< ?xml version="1.0" encoding="utf-8"?>
<mx:textarea xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="outset"
    editable="false" selectable="true" link="linkHandler(event)" fontSize="16" >
   
    <mx:script>
        < ![CDATA[
       
        import flash.events.TextEvent;

        public function linkHandler(event:TextEvent):void {
            // Open the link in a new window.
            navigateToURL(new URLRequest(event.text), ‘_blank’)
        }

        override public function set data(value:Object):void
        {
            super.data=value;
            htmlText="<a href=’event:http://www.google.com/search?hl=en&q=" + data.chartItem.yValue + "+" + data.chartItem.xValue + "&btnG=Google+Search’>" + data.chartItem.yValue + ":" + data.chartItem.xValue + "";
        }
        ]]>
    </mx:script>
</mx:textarea>
 

Read the rest of this post»




2 Comments »

March 16th, 2007 by Kyle
Tags: , , , ,
Posted in: Flex


I wrote a simple little extension to ComboBox to allow the dropdown to expand to the width of the widest entry and the ComboBox input to expand/contract to the width of the selected item. This is based on the simple ComboBox sample from the docs found here.

Here is the source code for the component:

< ?xml version="1.0" encoding="utf-8"?>
<mx:combobox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" change="onChange(event);">
    <mx:script>
        < ![CDATA[
       
            import mx.controls.ComboBase;
            import mx.core.EdgeMetrics;
       
            private function init():void{
                this.dropdownWidth=calculatePreferredSizeFromData(this.dataProvider.length).width;
            }
           
            private function onChange(e:Event):void{
                var txt:String = itemToLabel(selectedItem);
                if(measureText(txt).width > 0){
               
                    var buttonWidth:Number = getStyle("arrowButtonWidth");

                    // Text fields have 4 pixels of white space added to each side
                    // by the player, so fudge this amount.
                    // If we don’t have any data, measure a single space char for defaults

                    var bm:EdgeMetrics = borderMetrics;

                    var textWidth:Number = measureText(txt).width + bm.left + bm.right + 8;
                    this.width = textWidth + buttonWidth;
                }    
                else {
                    this.width=DEFAULT_MEASURED_MIN_WIDTH
                }
            }
        ]]>
    </mx:script>
</mx:combobox>
 

Read the rest of this post»




No Comments »

I recently had a customer who was trying to debug his Flex components. Under certain circumstances the updateDisplayList() method of his component was getting called and it wasn’t obvious why.
In writing and debugging Flex components sometimes it would be useful to be able to see who called what method to figure out what is going on. Profilers are good for this, but unfortunately there is no Flex 2.0 (or 2.0.1) profiler. In speaking with Flex Engineer, Alex Harui (see his blog here), he suggested the strategy below:

  • Subclass the component you are interested in (or if you are writing your own components just add the following to your component).
  • Override the invalidateDislayList() method (or whatever method you are interested in).
  • Create a new error object.
  • Dump out the error objects getStackTrace() method.

This should get you the hierarchy of calls that caused the invalidateDisplayList call.
(And it is the calling of invalidateDisplayList that will flag the updateDisplayList() to be called.)

Read the rest of this post»




No Comments »