Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

AS3: A URLLoader Class

Monday, May 3rd, 2010

I’m working on a Flash/AS3 application where I am loading various types of files (images, xml, etc). After writing the same code over and over again, I decided to create an AS3 class to use with my application. This class will load image, swf, text, xml, html, stylesheet, json, and sound files.

gpUrlLoader Class

The gpUrlLoader Class is part of my AS3 Library (gpAS3Library) that I store on GitHub. The class package is set up under com/grasshopper/utils/. Included in the library is Adobe’s Json classes (part of adobe’s as3corelib). The Json classes are needed for Json serialization (encode, decode, etc).

To include the gpUrlLoader package:

^?View Code ACTIONSCRIPT

import com.grasshopper.utils.gpUrlLoader;
//or
import com.grasshopper.utils.*;

Loading an Image (or SWF)

To load an image:

^?View Code ACTIONSCRIPT

import flash.display.Loader;
import flash.events.Event;
import com.grasshopper.utils.*;
 
var url:String = 'my_image.jpg';
var ldr:gpUrlLoader = new gpUrlLoader();
ldr.addEventListener(Event.COMPLETE, imageLoaded);
ldr.init(url, 'image');
 
// for swf use:
// ldr.init(url, 'swf');
 
function imageLoaded(event:Event):void {
	var img:Loader = ldr.getImage();
        // for swf use:
        // var img:Loader = ldr.getSWF();
 
	addChild(img);
}

After instantiating the gpUrlLoader class, I called the init method while passing it the load type (image). I set up an event listener so that the main application will know when the image was loaded. Simple enough.

You can also get the image width and height.

^?View Code ACTIONSCRIPT

function imageLoaded(event:Event):void {
	var img:Loader = ldr.getImage();
 	addChild(img);
        var w:Number = img.width;
        var h:Number = img.height;
}

Loading and XML file

Loading the xml file is the same process as loading an image.

^?View Code ACTIONSCRIPT

import flash.events.Event;
import com.grasshopper.utils.*;
 
var url:String = 'my_xml.xml';
var ldr:gpUrlLoader = new gpUrlLoader();
ldr.addEventListener(Event.COMPLETE, xmlLoaded);
ldr.init(url, 'xml');
 
function xmlLoaded(event:Event):void {
	var xmlData:XML = ldr.getXML();
}

Loading JSON file

^?View Code ACTIONSCRIPT

import flash.events.Event;
import com.grasshopper.utils.*;
 
var url:String = 'my_json.js';
var ldr:gpUrlLoader = new gpUrlLoader();
ldr.addEventListener(Event.COMPLETE, jsonLoaded);
ldr.init(url, 'json');
 
function jsonLoaded(event:Event):void {
	var json:Object = ldr.getJson();
}

Note: To use the Json loader, you must compile your application using Adobe’s Json classes (I’ve included the zipped classes as part of the gpAS3Libary).

Loading A Stylesheet

^?View Code ACTIONSCRIPT

import flash.events.Event;
import flash.text.StyleSheet;
import com.grasshopper.utils.*;
 
var url:String = 'styles.css';
var ldr:gpUrlLoader = new gpUrlLoader();
ldr.addEventListener(Event.COMPLETE, sheetLoaded);
ldr.init(url, 'stylesheet');
 
function sheetLoaded(event:Event):void {
	var sheet:Stylesheet = ldr.getStyleSheet();
}

Loading A Sound File

^?View Code ACTIONSCRIPT

import flash.events.Event;
import com.grasshopper.utils.*;
 
var url:String = 'my_sound.mp3';
var ldr:gpUrlLoader = new gpUrlLoader();
ldr.addEventListener(Event.COMPLETE, soundLoaded);
ldr.init(url, 'sound');
 
function soundLoaded(event:Event):void {
	var snd:Sound = ldr.getSound();
        snd.play();
}

Loading A Text File (to include, HTML)

^?View Code ACTIONSCRIPT

import flash.events.Event;
import com.grasshopper.utils.*;
 
var url:String = 'my_text.html';
var ldr:gpUrlLoader = new gpUrlLoader();
ldr.addEventListener(Event.COMPLETE, textLoaded);
ldr.init(url, 'text');
 
function textLoaded(event:Event):void {
	var txt:String = ldr.getText();
}

Other Event Listeners

In addition to the Event.COMPLETE event, you can also listen to Event.PROGRESS and LOADERROR. Actually LOADERROR is a custom event that I created for the gpUrlLoader class (gpUrlLoader.LOADERROR).

^?View Code ACTIONSCRIPT

import flash.display.Loader;
import flash.events.Event;
import flash.events.IOErrorEvent;
import com.grasshopper.utils.*;
 
var url:String = 'my_image.jpg';
var ldr:gpUrlLoader = new gpUrlLoader();
ldr.addEventListener(Event.COMPLETE, imageLoaded);
ldr.addEventListener(ProgressEvent.PROGRESS, onProgress);
ldr.addEventListener(gpUrlLoader.LOADERROR, ioError);
ldr.init(url, 'image');
 
function onProgress(event:Event):void {
	trace(ldr.urlLoader.bytesLoaded);
}
 
function imageLoaded(event:Event):void {
	var img:Loader = ldr.getImage();
	addChild(img);
}
 
function ioError(e:Event):void {
	trace('Error loading file');
}

Notice that in order to track the progress you must use the urlLoader class variable:

^?View Code ACTIONSCRIPT

function onProgress(event:Event):void {
	trace(ldr.urlLoader.bytesLoaded);
}

That’s it. You can examples of the gpUrlLoader on my demo section. Again, the gpUrlLoader can be downloaded from GitHub (gpAS3Library). Enjoy.

Categories: Actionscript, Flash
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.

2 Responses to “AS3: A URLLoader Class”

gpAS3Library – Part 1: A Global Configuration Class | GrasshopperPebbles.com Says:
June 18th, 2010 at 10:43 pm

[...] Part 1, I have already discussed one of the classes of the gpAS3Libary in a previous post (see: A UrlLoader Class). In this post, I will discuss the gpConfig [...]
cgWebDev Says:
January 7th, 2011 at 9:33 am

Great Loader class, however i am having one problem with it. It creates a urlLoader or a Loader depending on what it is u are loading. I’m loading a jpg image which creates a Loader. There is then no way to track its progress with “trace(ldr.urlLoader.bytesLoaded);” as in your example, because the Loader doesnt have a bytesLoaded property on it, only the URL Loader. Other than that it tracks the progress of XML and text files just fine.

AS3: A URLLoader Class

gpUrlLoader Class

Loading an Image (or SWF)

Loading and XML file

Loading JSON file

Loading A Stylesheet

Loading A Sound File

Loading A Text File (to include, HTML)

Other Event Listeners

2 Responses to “AS3: A URLLoader Class”

Home Business Ads

Categories

Archives

Tags

Comments

Blogroll