ByteArray to Image display Flex - SQLite

Question

I have recently figured out how to use an SQLite db with Flex. Now I'm having trouble displaying the data properly. I've tried several binding strategies and I've largely come up short. I had undefined property errors, unusable errors, and finally! Code without errors! Also, code without a displayed image. Any help is appreciated as always. Here's my code so far; trying to keep it tidy, Async, and I've left an unused variable or two from my messing around with it. Thanks for any insight.

            <?xml version="1.0" encoding="utf-8"?>
            <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"

            title="NM1"
            >

          <fx:Declarations>
               <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>

<fx:Script>
    <![CDATA[
        import flash.data.SQLConnection;
        import flash.data.SQLResult;
        import flash.data.SQLStatement;
        import flash.filesystem.File;

        import mx.collections.ArrayCollection;

        private var conn:SQLConnection;
        private var createStmt:SQLStatement;
        private var selectStmt:SQLStatement;
        [bindable] private var dataField:ArrayCollection;
        [bindable] private var row:Object;
        [bindable] private var pngIndex:int; 
        [bindable] public  var pngTitle:String; 
        [bindable] private var pngByteArray:ByteArray; 

        private function init():void
        {
            conn = new SQLConnection();
            conn.addEventListener (SQLEvent.OPEN, openSuccess);
            conn.addEventListener (SQLErrorEvent.ERROR, openFailure);

            var dbFile:File = File.applicationDirectory.resolvePath("assets/NM.sqlite");
            conn.openAsync(dbFile);
        }

        private function openSuccess(event:SQLEvent):void
        {
            conn.removeEventListener(SQLEvent.OPEN, openSuccess);
            conn.removeEventListener(SQLErrorEvent.ERROR, openFailure);

            getData();
        }

        private function openFailure(event:SQLErrorEvent):void
        {
            conn.removeEventListener(SQLEvent.OPEN, openSuccess);
            conn.removeEventListener(SQLErrorEvent.ERROR, openFailure);

            // Make an alert Dialog
            // = "Error opening database";

            trace("event.error.message:", event.error.message);
            trace("event.error.details:", event.error.details);
        }

        private function getData():void
        {
            //status = "Loading data";

            selectStmt = new SQLStatement();
            selectStmt.sqlConnection = conn;
            var sql:String = "SELECT Picture FROM Data WHERE 'Index' = 0";
            selectStmt.text = sql;

            selectStmt.addEventListener(SQLEvent.RESULT, selectResult);
            selectStmt.addEventListener(SQLErrorEvent.ERROR, selectError);

            selectStmt.execute();
        }

        private function selectResult(event:SQLEvent):void
        {
            //status = "Data loaded";

            selectStmt.removeEventListener(SQLEvent.RESULT, selectResult);
            selectStmt.removeEventListener(SQLErrorEvent.ERROR, selectError);

            var result:SQLResult = selectStmt.getResult();
            // dataField = new ArrayCollection(selectStmt.getResult().data);


            if (result.data != null) {
                row = result.data[0];
                pngIndex = result.data[0].Index;
                pngTitle = result.data[0].Title;
                pngByteArray = result.data[0].Picture;

                Pic.source = pngByteArray;

            }

        }

        private function selectError(event:SQLErrorEvent):void
        {
            //status = "Error loading data";

            selectStmt.removeEventListener(SQLEvent.RESULT, selectResult);
            selectStmt.removeEventListener(SQLErrorEvent.ERROR, selectError);

            trace("SELECT error:", event.error);
            trace("event.error.message:", event.error.message);
            trace("event.error.details:", event.error.details);
        } 



    ]]>
</fx:Script>


<s:Image id="Pic" x="0" y="0" width="263" height="99"/>
<s:TextArea id="text1" x="0" y="313"
            />

EDIT I have updated the code now, with perfect, error-free code that does not display my image. Help!!

Answer 1

Make sure you call the first function in the initialize() function as your program starts! I had forgotten it somewhere in my code testing. :/