R – IOErrorEvent Eluding Capture

actionscript-3apache-flex

I'm working on a Flex application that processes and displays small amounts of HTML, sometimes including images. I'm getting the HTML out of third-party RSS feeds. Sometimes, I see this in a pop-up window:

Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.

The RSS URL is just fine, but there's apparently something in the downloaded HTML that's causing a problem. Since the application is meant to run as part of a non-interactive digital sign, anything that requires a click to continue is completely unacceptable. I don't care how useless or malformed a URL is; the app needs to ignore the problem without pestering the user.

Unfortunately, I'm having no luck trapping this event. I'm sprinkling calls like this liberally through the code:

[object].addEventListener(IOErrorEvent.IO_ERROR, handleIOError);

… where [object] is everything from the mx:Text object rendering the HTML to its mx:Canvas parent to the mx:Application top-level app, and handleIOError is a simple function that looks like this:

         private function handleIOError(event:IOErrorEvent):void {
            trace ("IO error occurred: " + event);
         }

But so far, nothing; that bloody error keeps popping up in the Flash player. Does anybody have any insight as to where I'm going wrong?

Best Solution

Make sure you are putting the event on the right object. I haven't done a whole lot of remote loading in Flex, but in Flash, a hilarious and annoying quirk is that when you use the Loader class to load images, the object you need to put event handlers on is NOT the Loader itself, but a property of the loader called contentLoaderInfo.

Read the docs carefully on the objects you are using, a similar pitfall might be at play.

Displaying images in a TextField

You can load DisplayObjects into TextField <img /> tags including MovieClips, Sprites and embedded images.

In Flash or Flex if you want to display an embedded image then you will have to create a wrapper class that extends a DisplayObject class (e.g. Sprite or MovieClip).
Make sure your text field is large enough to contain the image. During testing I thought things weren't working when I really had the TextField too small to display the whole image.

Flash Example

Simple example, all code is on the main timeline.

Create a dynamic TextField on the stage. Give it a useful name, I'm calling mine txtImageTest.
Resize txtImageTest to a decent size, e.g. 300x150px.
Create a new MovieClip symbol and give it a class name, e.g. imageClip1.
Draw something in your new clip or place an embedded image inside imageClip1.
Go back to the main timeline, deselect all objects and open the Actionscript editor on the first frame.

Turn on multiline and word-wrapping on the text field:

imageClip1.wordWrap = true;
imageClip1.multiline = true;
imageClip1.htmlText = "<p>You can include an image in your HTML text with the &lt;img&gt; tag.</p><p><img id='testImage' src='imageClip1' align='left' width='30' height='30' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>"

Save and test your movie.

Flex Example

Since we can't just create a new MovieClip in the library like we did in Flash we need to create a new class that performs the same task (this method also works in Flash if you want want to create a new clip in the library).

Here is my class for a black triangle bullet, called BlackArrow.as:

// Set the correct package for you class here.
package embed
{
    import flash.display.Sprite;
    import mx.core.BitmapAsset;

    public class BlackArrow extends Sprite
    {
        // Embed the image you want to display here.
        [Embed(source='assets/embed/triangleIcon_black.png')]
        [Bindable]
        private var TriangleImage:Class;

        public function BlackArrow()
        {
            super();

            // Instantiate the embedded image and add it to your display list.
            var image:BitmapAsset = new TriangleImage();
            addChild(image);
        }

    }
}

NOTE: Do not extend Bitmap (in Flash) or BitmapAsset (in Flex) as they do not scale or position properly in the TextField. Choose Sprite or something similar.

Here is an example of a class that displays this image in the TextField:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%">

    <mx:Script>
    <![CDATA[
        import embed.BlackArrow;

        // You must include a variable declaration of the same type as your
        // wrapper class, otherwise the class won't be compiled into
        // the SWF and you will get an IOError.
        private var img2:BlackArrow;
    ]]>
    </mx:Script>

    <mx:Text id="txtResults1" width="100%" height="100%">
        <mx:htmlText>
        <![CDATA[<p>You can include an image in your HTML text with the &lt;img&gt; tag.</p><p><img id='testImage' src='embed.BlackArrow' align='left' hspace='10' vspace='10'/>Here is text that follows the image. I'm extending the text by lengthening this sentence until it's long enough to show wrapping around the bottom of the image.</p>]]>
        </mx:htmlText>
    </mx:Text>

 </mx:VBox>

Note that I am using the fully-qualified class name in the src attribute of the image tag.

Final Notes

Images are aligned to the left or right of a text field as determined by the align attribute of the image tag. This means that you cannot position an image in the middle of text without accessing the image directly.
A list of the attributes supported by the image tag is here:
http://blog.coursevector.com/notes-htmltext
The TextField LiveDoc page is here:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html
The getImageReference() function is what you need to get a reference the images in the textfield:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/TextField.html#getImageReference%28%29
Make sure you use fully-qualified class names in the src attribute.
Make sure you declare a variable of your wrapper class to ensure it is compiled into the SWF.

Best Solution

Related Solutions

R – How to handle errors loading with the Flex Sound class

Unable to access embedded images in htmlText

Displaying images in a TextField

Flash Example

Flex Example

Final Notes

Related Question