December 5th, 2007 by Kyle
Tags: , , , , , , , , ,
Posted in: ActionScript, Flex

XML and ampersands do not mix well.
Flex uses mxml which is XML.
This can lead to issues when writing binding expressions in mxml tags for component properties when you are trying to write logical expressions using ‘and’.

Here is a simple sample that demonstrates how to escape the ampersands in the expression and how to create a logical expression that does not even use ‘and’, but achieves the same result.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var bOne:Boolean=false;
            [Bindable]
            public var bTwo:Boolean=false;         
        ]]>
    </mx:Script>
   
    <mx:Button label="(click to toggle) bOne: {bOne}" click="bOne=!bOne"/>
    <mx:Button label="(click to toggle) bTwo: {bTwo}" click="bTwo=!bTwo"/>
   
    <mx:Label text="If bOne and bTwo are true, the buttons below will be Enabled"/>
    <!–escape the ampersands for the logical and operator –>
    <mx:Button label="enabled?" enabled="{(bOne &amp;&amp; bTwo)}"/>
    <!–or use this compounded logical statement which will evaluate to the same thing –>
    <mx:Button label="enabled?" enabled="{(bOne ? bTwo : false)}"/> 
   
</mx:Application>
 

Browse the source of this example.
Download a zipfile containing the source to this sample.

This movie requires Flash Player 9


4 Comments »

November 19th, 2007 by Kyle
Tags: , , , , , ,
Posted in: ActionScript, Flash Player

I had a customer who was having problems with linebreaks in her Flex code.
I had used linebreaks before with no problem until I realized that she was setting text with linebreaks in mxml and not setting properties dynamically as I had done in all instances in teh past when dealing with linebreaks.
I search the Adobe public bugbase and found this bug:

http://bugs.adobe.com/jira/browse/SDK-12649

I thought I’d write a simple app to demonstrate the problem and workarounds.

Here is the source for the app:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:label id="ta1" height="75" width="250" text="This does not \nwrap">
    <mx:button label="click to set via actionscript" click="ta2.text=’Setting via actionscript and\nthis does wrap’">
    <mx:label id="ta2" height="75" width="250">
    <mx:label id="ta3" height="75" width="250" text="Alternatively with this workaround,{’\n‘}this wraps too">
</mx:label>
</mx:label></mx:button></mx:label></mx:application>

Browse the source of this example.
Download a zipfile containing the source to this sample.

This movie requires Flash Player 9


No Comments »

Here is another good datagrid itemrender that I refer to when starting on datagrid renderer issues for customers.
It demonstrates how to create an itemEditor that is based on VBox and has child components (in this case a checkbox) and demonstrates how to implement the IDropInListItemRenderer and IFocusManagerComponent interfaces.
The sample also demonstrates how to add a listener to the underlying dataprovider arraycollection to detect change events and show what data has changed when edits are committed to the collection.

Here is the code for the application:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="init()">
    <mx:script>
        <!–[CDATA[
            import mx.events.CollectionEvent;
            import mx.events.DataGridEventReason;
            import mx.collections.ArrayCollection;
            import mx.events.DataGridEvent;
            import mx.events.ListEvent;

            [Bindable]–>            private var myAC:ArrayCollection = new ArrayCollection([
                {id:89, Contact: ‘Bob Jones’, FollowUp: true },
                {id:5, Contact: ‘Jane Smith’, FollowUp: true },
                {id:7, Contact: ‘Doug Johnson’, FollowUp: false },
                {id:15, Contact: ‘John Jackson’, FollowUp: true },
                {id:21, Contact: ‘Christina Coenraets’, FollowUp: true },
                {id:4, Contact: ‘Joanne Wall’, FollowUp: false },
                {id:461, Contact: ‘Maurice Smith’, FollowUp: false },
                {id:35, Contact: ‘Lorraine Barnes’, FollowUp: true },
                {id:61, Contact: ‘The Dude’, FollowUp: true },
                {id:56, Contact: ‘Abe Rockaway’, FollowUp: true }

            ]);

            private function init():void{
                myAC.addEventListener(CollectionEvent.COLLECTION_CHANGE, onChange);
            }

            private function onChange(event:CollectionEvent):void{
                for (var i:int=0; i < event.items.length;i++){
                    var obj:Object=event.items[i].source;
                     for (var p:String in obj) {
                            if(p!="mx_internal_uid"){
                                cellInfo.text += "\n";
                                if(event.items[i].property==p){cellInfo.text +="*"}
                                 cellInfo.text += p+": " + obj[p];
                            }
                        }
                }
            }

        ]]>
    </mx:script>
    <mx:datagrid id="myGrid">
        dataProvider="{myAC}" editable="true" >
        <mx:columns>
            <mx:datagridcolumn datafield="Contact" width="150">
            <mx:datagridcolumn datafield="id" width="150" editable="false">
            <mx:datagridcolumn datafield="FollowUp">
                width="150"
                headerText="Follow Up?"
                itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
                editorDataField="cbSelected"/>
        </mx:datagridcolumn>
    </mx:datagridcolumn>  

    <mx:textarea id="cellInfo" width="300" height="150">    

</mx:textarea>
</mx:datagridcolumn></mx:columns></mx:datagrid></mx:application>

Read the rest of this post»


2 Comments »

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

I recently had an issue from a customer regarding figuring out the correct syntax to get at a few nodes in an XML object that had namespaces using e4x. Now I don’t know about you, but if I don’t use e4x often, I forget things and get rusty. If your e4x-foo is weak, here are a few references that I found useful:

http://www.darronschall.com/weblog/archives/000223.cfm
(In fact Darren has a few e4x entries aside from this one.)

http://www.partlyhuman.com/blog/roger/as3-e4x-rundown

Hope this helps,

-Kyle


No Comments »

October 8th, 2007 by Kyle
Tags: , , , , , ,
Posted in: ActionScript, Flex

I had a customer that was trying to use masking to make menus appear with rounded corners. I had gotten this to work, but there was something I could not figure out that caused a flicker as menus were selected and appeared. I put this on the back shelf for a while and recently revisited it. To my surprise, the issue I had previously seen had gone away. Either something in the Flex framework had changed or a more recent version of the player had a beneficial effect. Whatever the cause, I decided it was good enough and that I should post this code.

In this sample, I extended the default MenuBar, so I could get a handle on new menus as they are shown to apply the mask. I also implemented a new style “corner-radius” and a custom menuItem renderer.

Browse the source of this example.
Download a zipfile containing the source to this sample.

This movie requires Flash Player 9

Read the rest of this post»


6 Comments »

What should the LineChart do in this situation?
How can you draw a line with only 1 data point much less extrapolate the data??

Turns out that the Flex chart does not handle that very well. The solution?? Write your own lineSegmentRenderer.

Here is an example of a lineSegementRenderer that will just draw a circle for this case.

MyLineRenderer.as:

package
{
    import mx.charts.renderers.LineRenderer;
    import mx.charts.series.items.LineSeriesItem;   
    import mx.charts.series.renderData.LineSeriesRenderData;
    import mx.charts.series.items.LineSeriesSegment;   
    import mx.charts.renderers.CircleItemRenderer
    import flash.display.Graphics;
    import flash.geom.Rectangle;
    import mx.charts.ChartItem;
    import mx.charts.chartClasses.GraphicsUtilities;
    import mx.core.IDataRenderer;
    import mx.graphics.IFill;
    import mx.graphics.IStroke

    public class MyLineRenderer extends LineRenderer
    {
        private static var rcFill:Rectangle = new Rectangle();     
       
        public function MyLineRenderer()
        {
            super();
        }
       
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
        {
            var l:int=(data as LineSeriesSegment).items.length;
            if(l==1){          
                var item:LineSeriesItem=((data as LineSeriesSegment).items[0] as LineSeriesItem)
                var fill:IFill = GraphicsUtilities.fillFromStyle(getStyle("fill"));
                var stroke:IStroke = getStyle("stroke");
                       
                var w:Number = stroke ? stroke.weight / 2 : 0;
       
                rcFill.right = 2;
                rcFill.bottom = 2;
       
                var g:Graphics = graphics;
                g.clear();     
                if (stroke)
                    stroke.apply(g);
                if (fill)
                    fill.begin(g, rcFill);
                g.drawCircle(item.x, item.y, 3);
                if (fill)
                    fill.end(g);
            }
            else{
                super.updateDisplayList(unscaledWidth, unscaledHeight);        
            }   
        }      
    }
}
 

Read the rest of this post»


3 Comments »

May 14th, 2007 by Kyle
Tags: , , , , ,
Posted in: ActionScript, Flex

I have used mx_internal a few times, but in between my instances of use, forget exactly what I have to do to use it. Here is a link to a good blog article that describes what to do.


No Comments »

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

E4X is a very powerful and easy way to manipulate xml data in Flex.
Of course something so p[powerful can sometimes be confusing when it produces unexpected results.

     <mx:XML format="e4x" id="myXML">
           <order>
              <item id=‘1′>
                  <menuName>burger</menuName>
                  <price>3.95</price>
              </item>
              <item id=‘2′>
                  <menuName>fries</menuName>
                  <price>1.45</price>
             </item>
          </order>
      </mx:XML>
 

If you wanted to retrieve the price of the burger menuitem above, it is easily done with the e4x expression:

     <mx:XML format="e4x" id="myXML">
          <order>
              <item id=’1′>
                  <menuName>burger</menuName>
                  <menuName>burger</menuName>
                  <price>3.95</price>
              </item>
              <item id=’2′>
                  <menuName>fries</menuName>
                  <price>1.45</price>
             </item>
          </order>
      </mx:XML>
 

Then if you used the same expression, you actually would not get a value returned.
It is not obvious as to why this happens, but of course there is more than one way to skin a cat…
Here is an expression that will work:

    myXML.item.menuName.(text()=="burger").parent().price;
 

Here is a link to a Flex Builder 2.0.1 project (compiled with SDK hotfix1) containing a sample demonstrating the solution described above.


No Comments »

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 »

I have been asked about this from various different angles and responded to it (often with ammo from others) in various different ways. I have decided to compile all info I can as a starting point to address questions hat typically come up from Flex customers regarding Flash Player Memory Management and Flash Player Garbage Collection.

CAVEAT: I am not a Player engineer and haven’t looked at the Flash Player code, but this is my understanding from several discussions with the engineers on the Flash Player and Flex Teams. (Some of this info is taken directly from emails, forum postings and conversations I have had with Alex Harui, Matt Chotin and Gordon Smith.)

Also, Grant Skinner goes into far more detail on his blog about Flash Player Memory management and Garbage Collection.
If you want to know more than the high level that I am going to address here you should check out his blog entries:

http://www.gskinner.com/blog/archives/2006/09/resource_manage.html
http://www.gskinner.com/blog/archives/2006/06/as3_resource_ma.html
http://www.gskinner.com/blog/archives/2006/09/garbage_collect.html

The underlying Flash player is essentially a garbage collection memory model. That means that if nobody has a reference to an object, it will be collected and thrown out eventually. Thus, you never have to delete anything, just make sure all of your references to it are broken by removing objects from the displaylist, removing event listeners or using weak listeners where appropriate.

The Flash Player runs within the browser’s memory space and Firefox or IE give memory to the player. The browsers are then responsible for the memory and will release it to the heap.

Here is a general description of what is generally going onwith memory management as an app runs:

The Flash Player grabs OS memory in large chunks, divides them up into smaller chunks and allocates those small chunks to the application. As the number of small chunks dwindles, the player runs a GC pass to see
if any of those small chunks can be freed before we go to the OS for another big chunk. If the application is idle and nothing is accessing memory, nothing is going to force a GC pass so nothing will ever get freed.

So lets say the Flash Player allocated 40 megs. If the app happened to get to 33 megs there may be no need for the Player to GC. And it could be that in reality the Player could get away with only 20 megs, but it will take that whole 40 b/c the OS is letting it. Still not technically a memory leak, even if you think the Windows Task Manager should show less.

The MemoryMonitor tries to force a GC pass (see the hack comment in the code). It is unclear as to whether the hack works perfectly.

GC is opportunistic. This means it does not run all of the time. It tends to be triggered by allocating memory instead of freeing it, so watching an idle app will almost never result in GC. Because of the fact that GC is more or less “opportunistic”, there is no current way to manually test for memory leaks. I think there are situations where lots of activity forces several large chunks to be acquired from the OS and then, when most of that stuff is freed, each of the large chunks has a few small chunks still in use and so the OS chunks are not released back to the OS because there isn’t enough activity to cause a GC pass. Therefore, the only way we “prove” there is a memory leak issue is to use MemoryMonitor’s callback to repeat a sequence over and over again.

Now, lets look at an example.

Read the rest of this post»


No Comments »

« Previous Entries