Flex and dataProviders

Most seasoned Flex coders probably know this, but as always I'm still learning. When creating a dataProvider for a List or TileList it's best to use a ArrayCollection instead of an Array.

Arrays will work if you set them as a dataProvider, but sometimes they can act weird. I just spent the last hour trying to get a TileList to update that had a Array dataProvider. Once I changed it to an ArrayCollection it worked without a problem.

So learn from my mistake. Don't use Arrays for dataProviders.

PHP: Error logging

Work with other languages has exposed me to new ways of logging errors and/or debugging code on web pages. I'm not sure how most php developers log errors or debug code so I can only guess it was similar to the way I would do it. By that I mean using echo in the middle of some HTML. It gets the job done, but it's kinda ugly.

I've since started using a cleaner method of logging errors. It's not as robust as a class, but it's better than throwing code out on a page. I've started using the error_log function wrapped in another function to control when it should output the error to a log.

function debug($allow_debug, $msg)
{
  if($allow_debug)
  {
    error_log($msg."\n", 3, '/path/to/phperror.log');
  }
}

When the function is used I pass a boolean that states wither I want the error passed out to the log. Typically I would set a variable at the top of the script and pass it into each instance of debug.

error_log takes three parameters. The first is the message that I want to pass out to the log. The important part on this input is the line return. That way each error starts on a new line. The second is the type of message I'm logging. The third is the location of the log file. Make sure it has the correct permissions so PHP can write to it.

You can view more information on error_log here.

Flex: Multiple Application MXML files

At a point in a project I'm currently working on we had to intergrate with another application. That means creating a new Application MXML file and degrading the current Application MXML file. Creating the new Applicaion was simple, but Flex was confused as to which file it should use to launch the project. This can be updated in the project properties.

1) Right-click the project and goto Properties

2) Goto the "Flex Applications". There you will see all the files that are marked as Applications.

3) Select the new Applicaion file and click "Set as Default". When you click "Run" or "Debug" it will use this file to launch your project.

4) Click on the old Applicaion file and click "Remove". This won't delete the file.

Hope this makes transitioning to a new project easier.

Also remember to remove any styleName properties from your old Application tag.

Flex: Switching the debug default browser

I've started working in Flex quite a bit now. One of things that has bothered me is Flex always launches a debug window in Internet Explorer. I've been having some problems with the browser and would like to use something different, but couldn't figure out how to switch it. Someone showed me how this morning.

1) Goto Window => Preferences

2) Goto General => Web Browser

3) Select the browser you want to launch in the "External Web browsers" window.

Now your debug session should launch in your browser of choice.

PHP: Code snippet

I found this on a page written in japanese. Great for streaming files through php and not reveling their source.
http://phpspot.org/blog/archives/2008/02/phpdlphp.html

header('Content-Type: application/octet-stream');
header('Content-Disposition: filename=dl.zip');
header('Content-Length: '.filesize('dl.zip'));
echo file_get_contents("dl.zip");
?>

This will also post the size of the file so you know how long it will take for it to download.

Apple / OSX : Updating the hosts file

I'm in the process of migrating from a PC at work to a new iMac. There are a few servers with names that don't resolve properly. These were stored in the hosts file on windows.
C:\windows\system32\drivers\etc\hosts

On OSX it's stored in
/etc/hosts

The file is read only so you'll want to open it with sudo before bringing it into vim, or however you plan to do it with a GUI editor.

Javascript: Image Preloader

I've been working on an image gallery program in jQuery for a little while. The biggest problem I ran into was trying to preload the first two images before the show started. I experimented with a few different methods, but couldn't find something that worked well across all browsers.

I was looking through mootools one day and found out they have a built in image preloader using Asset.images. It works well enough, but I'm not a big fan of mootools. Plus I wanted something that could plug into any library. After a bit of testing I came up with something that has worked really well across Safari 1.x & 2.x, Firefox 1.x & 2.x, IE 6, 7 & 8 and Opera.

It's a class built with objects instead of prototypes. I prefer objects now because it keeps everything in a nice neat package instead of having variables and functions scattered all over the place. I based a lot of the script on the Images Asset of mootools and the New Wave style John Resig talks about in Pro Javascript Techniques.

preloadImages = 
{
  count: 0 /* keep track of the number of images */
  ,loaded: 0 /* keeps track of how many images have loaded */
  ,onComplete: function(){} /* fires when all images have finished loadng */
  ,onLoaded: function(){} /*fires when an image finishes loading*/
  ,loaded_image: "" /*access what has just been loaded*/
  ,images: [] /*keeps an array of images that are loaded*/
  ,incoming:[] /*this is for the process queue.*/
  /* this will pass the list of images to the loader*/
  ,queue_images: function(images)
  {
    //make sure to reset the counters
    this.loaded = 0;
    
    //reset the images array also
    this.images = [];
    
    //record the number of images
    this.count = images.length;
    
    //store the image names
    this.incoming = images;
    
    //start processing the images one by one
    this.process_queue();
  }
  ,process_queue: function()
  {
    //pull the next image off the top and load it
    this.load_image(this.incoming.shift());
  }
  /* this will load the images through the browser */
  ,load_image: function(image)
  {
    var this_ref = this;
    var preload_image = new Image;
    
    preload_image.onload = function()
    {
      //store the loaded image so we can access the new info
      this_ref.loaded_image = preload_image;
      
      //push images onto the stack
      this_ref.images.push(preload_image);
      
      //note that the image loaded
      this_ref.loaded +=1;
      
      //fire the onloaded
      (this_ref.onLoaded)();
      
      //if all images have been loaded launch the call back
      if(this_ref.count == this_ref.loaded)
      {
        (this_ref.onComplete)(); 
      }
      //load the next image
      else
      {
        this_ref.process_queue();
      }
    }
    preload_image.src = image;
  }
}

Everything is stored in the preloadImages object. There is only one namespace so it shouldn't interfere with any of your other code. You can store this in any script you write, or include it from an external file.

The one thing I really like about this script is the image loading is sequential. One big problem I ran into was images loading out of order. Firefox would grab the images in the order listed by the array. Internet Explorer would grab everything, but not return it in the right order. This script grabs one image at a time and makes sure the order is preserved. This is important for scripts like slide shows with labels for each image.

To begin preloading images use the method preloadImages.queue_images([IMAGES]) where [IMAGES] is an array of images. Everything will be processed internally. There are two methods you can use: onLoaded and onComplete.

onLoaded will fire whenever an image has finished loading. All the properties of the loaded image are available in the variable loaded_image. For example if you want to find the width of the image that just finished loading your code would look like this.

preloadImages.onLoaded = function()
{
  alert(preloadImages.loaded_image.width);
}
preloadImages.queue_images(['new_404.jpg']);

A pop up window would appear and display the width of the image that just loaded. All the properties of and image will be available through the variable. onLoaded must appear before queue_images to fire properly.

When an image is loaded a reference is stored in an array named images. This is useful if you want to load all your images at once, then loop back through them for past information.

onComplete will fire when all the images have loaded. I tried to use the onerror method, but it doesn't work well across all browsers and caused more frustration then it was worth. Like onLoaded, onComplete must come before queue_images to fire properly. Here as an example of how to use onComplete.

preloadImages.onComplete = function()
{
  alert('All Done');
}
preloadImages.queue_images(['new_404.jpg']);

It's a pretty simple script. It can be used in combination with lots of other scripts. There are a lot of comments in the script so it's pretty easy to follow. If you have any questions about it feel free to email me.