The post displays the following code that I have used to get a Flex ProgressBar component working with the Mate Framework and the Presentation Model. This seemed like a simple task to achieve but I had a considerable amount of problems as I could not find a way to bind the setValue from the ProgressBar to the model. After some posts on the Mate Forums I received enough information back to help with this.

The example highlights how to the ProgressBar can be updated by using the button, this can be easily be altered by updating the BytesLoaded with the actual value that is being loaded. In my case i have incremented it by 1 on each click of the button.

The files can be download at the bottom of the post.

progressbar.mxml (default application file)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:view="com.progressbar.views.*" xmlns:maps="com.progressbar.maps.*">


<maps:MainEventMap />


<view:ProgressBar />


</mx:Application>

ProgressBar.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="93" headerHeight="16" xmlns:view="com.progressbar.views.*">


<mx:Script>
<![CDATA[
import com.progressbar.views.model.ProgressBarModel;


[Bindable]
public var model:ProgressBarModel;
]]>
</mx:Script>


<mx:ProgressBar id="progressbar" labelPlacement="center" mode="polled" source="{model}" trackHeight="15" left="0" right="0" bottom="5" height="30" width="100%" label="loading..." />


<mx:Button id="btnIncrease" toolTip="increment bar" click="model.increment()" icon="@Embed('assets/add.png')" width="26"/>


</mx:Panel>

MainEventMap.mxml

<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/">


<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import com.progressbar.events.*;
import com.progressbar.managers.*;
import com.progressbar.views.model.*;
import com.progressbar.views.*;
]]>
</mx:Script>


<EventHandlers type="{FlexEvent.PREINITIALIZE}">
<ObjectBuilder generator="{ProgressBarManager}" registerTarget="true" />
</EventHandlers>


<EventHandlers type="{ProgressBarEvent.INCREASE}">
<MethodInvoker generator="{ProgressBarManager}" method="increaseProgressBar" />
</EventHandlers> 


<Injectors target="{ProgressBarModel}">
<PropertyInjector targetKey="dispatcher" source="{scope.dispatcher}"/>
<PropertyInjector targetKey="bytesLoaded" source="{ProgressBarManager}" sourceKey="bytesLoaded" />
<PropertyInjector targetKey="bytesTotal" source="{ProgressBarManager}" sourceKey="bytesTotal" />
</Injectors>


<Injectors target="{ProgressBar}">
<PropertyInjector source="{ProgressBarModel}" targetKey="model" />
</Injectors>


</EventMap>

ProgressBarModel.as

package com.progressbar.views.model {


import com.progressbar.events.ProgressBarEvent;
import com.progressbar.views.ProgressBar;
import flash.events.IEventDispatcher;


[Bindable]
public class ProgressBarModel {


private var _bytesTotal:int = 0;
private var _bytesLoaded:int = 0;


public var dispatcher:IEventDispatcher;


public function get bytesLoaded():int {
return _bytesLoaded;
}


public function set bytesLoaded(value:int):void {
_bytesLoaded = value;
}


public function get bytesTotal():int {
return _bytesTotal;
}


public function set bytesTotal(value:int):void {
_bytesTotal = value;
}


public function increment():void {
var event:ProgressBarEvent = new ProgressBarEvent(ProgressBarEvent.INCREASE);
dispatcher.dispatchEvent(event);
}
}
}

ProgressBarManager.as

package com.progressbar.managers {


import flash.events.*;


[Bindable]
public class ProgressBarManager extends EventDispatcher {


private var _bytesLoaded:int;
private var _bytesTotal:int;


[Bindable (event="progressUpdate")]
public function get bytesLoaded():int {
return _bytesLoaded;
}


[Bindable (event="progressUpdate")]
public function get bytesTotal():int {
return _bytesTotal;
}


public function ProgressBarManager() { }


public function increaseProgressBar():void {
_bytesLoaded += 1;
_bytesTotal = 30;


dispatchEvent(new Event('progressUpdate'));


}
}
}

ProgressBarEvent.as

package com.progressbar.events {


import flash.events.Event;
import mx.collections.ArrayCollection;


[Bindable]
public class ProgressBarEvent extends Event {


public static const INCREASE:String = "increaseEvent";


public function ProgressBarEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=true) {
super(type,bubbles,cancelable);
}
}
}