how update an image dynamically using data binding, need example/help

Question

Hi all, new to developing with flex3/as3.

I have a main.mxml application that lays out my application, it contains a "browse and upload" button. And contains an image to view the users uploaded image like so:

<mx:Application
<mx:Script>
    <![CDATA[

    import model.myModel;
    import control.myControl;

    // Create data model
    public var model:myModel = new myModel();
    //[Bindable]
    //private var scld_img:Bitmap;

    // Create control
    public var mycontrol:myControl = new myControl(mymodel);

</mx:Script>

<!-- Upload and view -->
<mx:Canvas id="upload" label="1: Upload Image">

   <mx:VBox>
   <mx:HBox>

   <mx:Label text="Upload an image: "/>
   <mx:Button id="btn"
      label="Browse and preview..."
      click="mycontrol.browseAndUpload();"
      buttonMode="true"
      useHandCursor="true"/>

   </mx:HBox>


<mx:Image id="mximg_upld"
   verticalCenter="0"
   horizontalCenter="0"
   source="mymodel.img_scld_bm"/>

</mx:VBox>
</mx:Canvas>
......

In my myModel class I have a img_scld_bm that the browseAndUpload() function draws into after scaling it.

My intent is that my mx:Image will display the image. As shown here I'm assigning the image source="mymodel.img_scld_bm", this ends up just showing a broken image icon.

I also tried data binding, where in my myModel class I have [Bindable] var img_scld_bm. And then tried setting my mx:Image source="{myModel.img_scld_bm}" .. that didn't seem to do anything either. All this compiles fine, no warnings. I think in this case, I'm not setting a trigger or propertyChange event to update the binding??

Can someone help me understand, or provide an example of how to correctly bind an mx:Image source to some bitmap??

thanks so much.

Answer 1

From the code you've given, it looks like you need to do two things:

1. Wrap the source with curly brackets.

2. Set the property img_scld_bm in the model class. Bindings will only execute if you set the property; it looks like you may be drawing into the img_scld_bm that currently exists, but this won't cause the image to update.

Convert this:

<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="mymodel.img_scld_bm"/>

To this:

<mx:Image id="mximg_upld" verticalCenter="0" horizontalCenter="0" source="{mymodel.img_scld_bm}"/>

Then any time you make changes to the img_scld_bm in the model, reset the image.source.

Does that work?