Android : Pixelpipe unable to post video to facebook

I ran into an odd issue where PixelPipe wouldn't let me upload a video from my phone, but it would still upload pictures. I tried reauthorizing the facebook pipe on their website but it didn't help. I tried creating a new pipe and uploading through that and it still didn't work. What finally fixed the issue is reauthorizing the facebook pipe on the phone through the app.

Open Pixelpipe and goto the settings tab. Press the "Edit pipes" button.

This will take you to the list of pipes on your account. Press the combobox for facebook and press "change settings".

Scroll to the bottom of this page and press "Reauthorize this account".

It will ask for your facebook username and password. You might get dumped to a white screen with nothing on it. If this happens press the "back" device button and you should return to the Settings tab. Go back to the facebook pipe and check to see that the pipe has access to your account.

Flex / ActionScript: Debugging causes Firefox to crash

After an update to Firefox 3.6.6 I've noticed that while debugging Flash it would crash and display "The Adobe Flash plugin has crashed". It turns out it's due to a new feature called "Hang Protection" that allows Flash to run in it's own sandbox and not take down the whole browser when/if it crashes. After 45 seconds the browser will close Flash because it thinks Flash has stopped responding.

Hang Protection can be turned off so debugging with Flex Builder / Flash Builder will work properly. Follow the directions at this url.

NOTE
Firefox 4 requires a change to a different property. Use about:config to alter the behind the scenes settings and look for dom.ipc.plugins.timeoutSecs and set it to -1.

Flex / ActionScript: Copy an ArrayCollection

While working with an ArrayCollection I ran into a issue. It seems when you set one ArrayCollection equal to another they share memory space. This can cause issues when you perform any operation that will alter the internal array.

var arrayCollection1:ArrayCollection = new ArrayCollection([1,2,3,4,5]);
var arrayCollection2:ArrayCollection = arrayCollection1;

trace("arrayCollction1: " + arrayCollection1.toString());
trace("arrayCollction2: " + arrayCollection2.toString());

arrayCollection1.removeItemAt(0);

trace("arrayCollction1: " + arrayCollection1.toString());
trace("arrayCollction2: " + arrayCollection2.toString());

Output:
arrayCollection1: 1,2,3,4,5
arrayCollection2: 1,2,3,4,5

arrayCollection1: 2,3,4,5
arrayCollection2: 2,3,4,5

The simple solution for this is to always create a new ArrayCollection for the target using the toArray method from the source.

var arrayCollection1:ArrayCollection = new ArrayCollection([1,2,3,4,5]);
var arrayCollection2:ArrayCollection = new ArrayCollection(arrayCollection1.toArray());

trace("arrayCollection1: " + arrayCollection1.toString());
trace("arrayCollection2: " + arrayCollection2.toString());

arrayCollection1.removeItemAt(0);

trace("arrayCollection1: " + arrayCollection1.toString());
trace("arrayCollection2: " + arrayCollection2.toString());

Output: 
arrayCollection1: 1,2,3,4,5
arrayCollection2: 1,2,3,4,5

arrayCollection1: 2,3,4,5
arrayCollection2: 1,2,3,4,5

Those post is based on findings from this blog post.

Flash / ActionScript 3: Singleton Example

Singletons are a design pattern that allows you to share one instance of a class throughout a application. An example of where a singleton is useful is when you only want one and only one connection to a database. It also allows you to keep memory usage down because there is only one copy in memory.

I've created a sample ActionScript project that shows how a singleton can be used. You can download it here.

Here is what the files look like.
Singleton_Example.as

package {
    import flash.display.Sprite;
    
    import Singleton.ExampleSingleton;
    import classes.ExampleClass;

    public class Singleton_Example extends Sprite
    {
        public function Singleton_Example()
        {
            //init the Singleton by grabbing an instance of it
            var singleton:ExampleSingleton = ExampleSingleton.instance;
            var exampleClass1:ExampleClass;
            
            
            //set the flag
            singleton.flag = ExampleSingleton.FLAG1;
            
            //show the current state of the flag
            trace("flag state: " + singleton.flag);
            
            //creating this class will update the flag in the singleton
            exampleClass1 = new ExampleClass;
            
            //the flag should be updated now
            trace("flag state: " + singleton.flag);
            
            //update the flag here
            singleton.flag = ExampleSingleton.FLAG3;
            
            //make the class display the state
            exampleClass1.displayFlagState();
        }
    }
}

ExampleSingleton.as

package Singleton
{
    public class ExampleSingleton
    {
        //a set of dummy values used to explain how a Singleton is manuplated
        public static const FLAG1:String = "value1";
        public static const FLAG2:String = "value2";
        public static const FLAG3:String = "value3";
        public static const FLAG4:String = "value4";
        
        
        //this is the only instance of the class
        private static const _instance:ExampleSingleton = new ExampleSingleton(SingletonLock);
        
        //list of allowed values that can be set for the flag
        private var _allowedValues:Array = [];
        
        //state of the flag
        private var _flag:String = "";
        
        //this will control wither the Singleton is really to be accessed
        private var _initialized:Boolean = false;
        
        /**
         * Use this to return an instance of the singleton 
         * @return 
         * 
         */
        public static function get instance() : ExampleSingleton {
            return _instance;
        }
        
        /**
         * Query the Singleton to see if it's ready to be accessed 
         * @return 
         * 
         */
        public function get initialized() : Boolean {
            return _initialized;
        }
        
        /**
         * Return the current flag 
         * @return String
         * 
         */
        public function get flag() : String {
            return _flag;
        }
        
        /**
         * Set the flag state 
         * @param value
         * @return Boolean
         * 
         */
        public function set flag(value:String) : void {
            //make sure the Singleton is initialized first
            if(!_initialized) {
                return;
            }
            
            //check to make sure it's an allowed value before setting it
            if(_allowedValues.indexOf(value) == -1) {
                return;
            }
            
            //update the flag
            _instance._flag = value;
        }
        
        /**
         * This will initialize the Singleton. It's never publicly called. Use ExampleSingleton.instance instead 
         * @param lock
         * 
         */
        public function ExampleSingleton(lock:Class) {
            if(lock != SingletonLock) {
                throw new Error("Invalid ExampleSingleton access. Use ExampleSingleton.instance");
            }
            
            initialize();
        }
        
        /**
         * This is where you would set up anything the Singleton needed before it should be accessable to the public 
         * 
         */
        private function initialize() : void {
            //we only need to initialize once. 
            if(_initialized) {
                return;
            }
            //set up what we allow the flag to be
            _allowedValues = [FLAG1, FLAG2, FLAG3, FLAG4];
            
            _initialized = true;
        }
    }
}

//this is used to lock the Singleton
class SingletonLock{}

ExampleClass.as

package classes
{
    import Singleton.ExampleSingleton;
    
    public class ExampleClass
    {
        public function ExampleClass() {
            //update the flag in the Singleton. we don't need to create a var to update it
            ExampleSingleton.instance.flag = ExampleSingleton.FLAG2;
        }
        
        /**
         * This will display the current flag from the Singleton 
         * 
         */
        public function displayFlagState() : void {
            trace("flag state from ExampleClass: " + ExampleSingleton.instance.flag);
        }
    }
}

Lets start with ExampleSinglton.as. The important parts of this class are the _instance member variable, the instance getter method and the ExampleSingleton constructor.

The constructor takes a SingletonLock class argument as a locking precaution. This class is defined at the bottom of the ExampleSingleton package. This allows us to control the way the class is created. The _instance member variable is where we create the instance of the ExampleSingleton. The ExampleSingleton constructor should check to make sure the lock argument is a SingletonLock class and throw an error if it isn't. The error you throw should let the person know how to properly access the singleton.

ExampleSingleton.initialize is where some basic values are set up that are accessed in the rest of the project.

Now lets look at Singleton_Example.as. When we create the singleton variable we access the .instance property of the class. This will return the single instance of ExampleSingleton.

ExampleClass.as also uses the ExampleSingleton class. You'll see how setting a property on ExampleSingleton in Singleton_Example is reflected in ExampleClass and vice versa.

ActionScript: The difference between "FOR IN" and "FOR EACH"

I ran into an issue earlier while looping through a list of objects where I couldn't get the index of the array I was accessing. Turns out there is a BIG difference between FOR and FOR EACH. Coding late at night probably didn't help either.

FOR EACH gives you access to the element in the array. FOR gives you access to the index of the array.

var elements:Array = [{name:'Orange'}, {name:'Apple'},{name:'Banana'},{name:'Pear'}];

for(var i:Object in elements) {
    trace("index: " + i);
}

for each(var e:Object in elements) {
    trace("element: " + e.name);
}

The output from FOR loop looks like this:

index: 0
index: 1
index: 2
index: 3

The output from FOR EACH looks like this:

element: Orange
element: Apple
element: Banana
element: Pear

Hopefully this helps someone from blunt force trauma caused by baning your head against the desk. Probably common knowledge for most, but it never hurts to post it.

Flash / Flex / ActionScript: Using IResponder instead of EventListeners

Using addEventListener is a popular way of waiting for a response from a server. I've run into issues using this when a server returns the same response for all methods. Many of the listener methods are tripped for the wrong response. The easy way to avoid this is to use an IResponder.

Here is an example using the HTTPService object. You should be able to use the same steps on a method that returns an AsyncToken.

var asyncToken:AsyncToken;
var internalIResponder:IResponder;
...
asyncToken = _httpService.send();
internalIResponder = new AsyncResponder(onHTTPServiceSuccess, onHTTPServiceFault, asyncToken);
asyncToken.addResponder(internalIResponder);

When send is called it will return an AsyncToken. We can attach an IResponder object to the AsyncToken that will handle the success and fail cases for the response.

MySQL: Error 1305 - Function xxx does not exist

I ran into an odd issue on a project I updated awhile ago. I updated an existing sql statement to include IFNULL for an exclusion check. It worked fine on my dev machine, but caused an issue on the production machine.

The version of MySQL on my dev machine was a little bit newer than production so the issue never came up. Here is the error the sql server returned:
#1305 - FUNCTION [DATABASE_NAME].ifnull does not exist

Here is a little bit of the sql that caused the error:
AND IFNULL ( `tbl_category_admin`.`admin_key_id` =5, true )

The problem was caused by the space between IFNULL and (. Changing it to IFNULL( solved the problem. If you run into an issue where MySQL returns an error saying a given function does not exist look for spaces between the function and the "(".

Flex (Learning Flex 3 Book) : Removing IEventDispatcher error from the DataGrid

When I decided to learn Flex I started with Learning Flex 3. It's a great book and does an excellent job of introducing the MXML framework and Flex Builder IDE. I would recommend it to anyone.

One of the problems I have with the book is it doesn't teach you how to remove warnings from your code. A later code example produces the following error: warning: unable to bind to property 'contact' on class 'XML' (class is not an IEventDispatcher). It's not a big deal, but I like to write code that doesn't produce hidden errors.

Here is the code from the book:

<mx: Application
    xmlns: mx="http: //www.adobe. com/2006/mxml"
    xmlns: view="com.oreilly.view.*"
    layout="absolute"
    applicationComplete="contactsService.send()" >
    <mx:HTTPService id="contactsService"
        resultFormat="e4x"
        url="contacts.xml" />
    <mx:DataGrid id="contactsDataGrid"
        dataProvider="{contactsService.lastResult.contact}"
        selectedIndex="0"
        left="10"
        top="10"
        bottom="10"
        width="300">
        <mx: columns>
            <mx: DataGridColumn headerText="First"  
            dataField="firstName"/>
            <mx: DataGridColumn headerText="Last" dataField="lastName"/>
        </mx:columns>
    </mx:DataGrid>
    <view: ContactViewer
        contact="{contactsDataGrid. selectedItem}"
        x="318" y="10">
    </view: ContactViewer>
</mx: Application>

The problem is the dataProvider property of DataGrid. It's unable to figure out how to parse the data, so it throws a warning. This can be resolved with casting. We can tell the dataProvider what it should be and it will remove the warning. Here is the code that will remove the warning.

dataProvider="{XMLList(XML(contactsService.lastResult).contact)}"

contactsService.lastResult is an XML object. There are multiple children in the object. We can then cast the XML object as an XMLList to use contact child node.

Feel free to leave a comment if you have any questions.

Flex: TileList cell switching/redraw problem using an itemRenderer

While working with the TileList component I ran into a very odd issue. Images would move around while scrolling up and down. Also when I updated the dataProvider the TileList didn't display the new information. Here is an example so you can see what is going on. You can view the source the source by right-clicking and selecting "View Source".

After a lot of research, and a post on StackOverflow, I figured out what was going on. My broken example relies on a MXML completion method (init, creationComplete, etc..)  to set the source of the image in the itemRenderer.

index.mxml

<mx:Component>
    <itemRenderers:ImageTile_bad />
</mx:Component>

ImageTile_bad.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
    <mx:Script>
        <![CDATA[
            /**
            * This is an example of how not to use an item render in a TileList  
            * */
            private function init() : void {
                this.source = data;
                this.name = data.toString().split("/").pop().split(".").shift();
            }
        ]]>
    </mx:Script>
</mx:Image>

TileList reuses cells inside the component. I'm not sure why, but can't keep track of where things should render and starts switching images around. I tried overridding the data method and it works, but I wanted to find a solution that doesn't require overriding a private method.

The answer is to use a setter inside the itemRenderer to assign the value to the component. Here is a snip-it of code to show you what I mean.

index.mxml

<mx:Component>
    <itemRenderers:ImageTile img="{data}"/>
</mx:Component>

ImageTile.mxml

<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            /**
            * This is an example of how to use an itemRenderer in a TileList
            * Create a setter that will always update the when the TileList redraws
            * */
            public function set img(value:String) : void {
                //make sure there is something to work with. avoid error# 1010
                if(!value) {
                    return;
                }
                this.source = value;
                this.name = value.toString().split("/").pop().split(".").shift();
            }
        ]]>
    </mx:Script>
</mx:Image>

When TileList redraws the cell it will pass data into the img setter. This will make sure that the cell receives the correct information when it redraws. Also switching the dataProvider on the TileList works properly now. Here is a link to the working example that has available source code. Feel free to contact me if you have any questions.

Flash / ActionScript 3: Event Bubbling Example

Previously I wrote an article that showed an example of Event Bubbling with Flex. I wanted to write a similar example for ActionScript 3. The principle is the same, but it works just a little different.

Any class involved in bubbling must extend DisplayObjectContainer. Sprite is the most basic DisplayObjectContainer class and most examples I see use it, so that's what I will use. I gave a brief overview of how event bubbling works in the Flex example that I won't repeat here.

I'm creating three classes that include each other. The primary class includes Level1. Level1 includes Level2. Level2 includes Level3. Level3 triggers an event when it's added to the stage. The event from Level3 will bubble through Level2 and Level1 to the primary class without re-dispatching it.

event_bubbling_as.as

package {
    import flash.display.Sprite;
    import flash.events.Event;
    
    import obj.Level1;
    import obj.Level3;

    public class event_bubbling_as extends Sprite
    {
        private var _level1:Level1
        
        public function event_bubbling_as()
        {
            _level1 = new Level1;
            _level1.addEventListener(Level3.EVENT, onEvent);
            
            addChild(_level1);
        }
        
        private function onEvent(event:Event) : void {
                trace('caught event from level 3');
        }
    }
}

Level1.as

package obj
{
    import flash.display.Sprite;
    
    public class Level1 extends Sprite
    {
        private var _level2:Level2;
        
        public function Level1()
        {
            trace("in level 1");
            _level2 = new Level2;
            
            addChild(_level2);
        }
    }
}

Level2.as

package obj
{
    import flash.display.Sprite;
    
    public class Level2 extends Sprite
    {
        private var _level3:Level3;
        
        public function Level2()
        {
            trace("in level 2");
            _level3 = new Level3;
            
            addChild(_level3);
        }
    }
}

Level3.as

package obj
{
    import flash.display.Sprite;
    import flash.events.Event;
    
    public class Level3 extends Sprite
    {
        public static const EVENT:String = "level3";
        public function Level3(){
            trace("in level 3");
            
            //trigger event when the object is added to the stage
            addEventListener(Event.ADDED_TO_STAGE, launchEvent);
        }
        
        public function launchEvent(event:Event) : void {
         var newEvent:Event = new Event(EVENT, true, true);
         dispatchEvent(newEvent);
        }
    }
}

You can download the Flex Project Archive example here. This can be directly imported into Flex. Run it in debug mode to see how each level is triggered.