Example: Simple Dynamic Image

[agent vivid]

I've decided to post a quick example of how to create a dynamic image component. Hopefully you find it useful All comments are appreciated!

As FLEX developers, we use dynamic images all over the place.
Most of the time we like to drive the image source from a CSS document. When making components, following a standard design pattern is usually best. Once you understand the pattern, it's easy to translate it accross situations.

Below is a simple example of how to design a component based on a real-world scenario. Let's say your application needs to show a red or green light depending on the status of the net connection. Once you have determined the net status, it's pretty easy to design a dynamic image component around your need.

This example shows how to approach the netStatus situation dynamically through binding code and also statically through mxml alone.... (note the use of getStyle):

CSS:

.netStatusIndicator
{
  online: Embed(source='./skins/skins.swf',symbol='grnLight');
  offline: Embed(source='./skins/skins.swf',symbol='redLight');
}

Dynamic Implementation:

model.currentNetworkStatus = "online";

<ui:NetStatusIndicator id="netStatusIndicator" 
	styleName="netStatusIndicator" 
	status="{model.currentNetworkStatus}" 
/>

Static Implementation:

<ui:NetStatusIndicator id="netStatusIndicator" 
	styleName="netStatusIndicator" 
	netStatus="online" 
/>

MXML Component:

<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="showStatus()"
>
	<mx:Metadata>
		[Style(
			name="netStatus", 
			type="String", 
			enumeration="online,offline", 
			inherit="no")]
	</mx:Metadata>
	
	<mx:Script>
		<![CDATA[
		
			[Bindable] private var _status:String;
			public function get status( ):String{return _status;}
			public function set status( aStatus:String ):void
			{
				var lStatus:String = getStyle( 'netStatus' );
				setStyle( 'netStatus', aStatus );
				showStatus( );
			}
		
			private function showStatus( ):void
			{
				var lStatus:String = getStyle( 'netStatus' );
				if( lStatus )
				{
					source = getStyle( getStyle( 'netStatus' ) );
				}
			}		
		]]>
	</mx:Script>
</mx:Image>

[Chris_Seahorn]

Nice job agent_vivid !! Thanks for sharing

Also..we have asked Flashkit to add Apollo and Flex as file submission categories (which they have done) but right now there is an issue uploading a ZIP file that has no .fla included (which an Apollo or Flex app would most likely not have but a Flash one would) but I will post back when it's squared away so maybe you would consider submitting this. I only mention that because it will be hard for us to sticky lots of examples and as normal threads they will get pushed out of visible site and maybe passed by whereas in the submission area they would be more accessable and would get you full credit (and a link back) for the effort.

I'm not sure if there will be tutorial sections for both because right now Flashkit is waiting to see if Apollo and Flex prove viable as file submissions (basically...will people submit...which your file would help in that regard ).

I really appreciate you taking the time to post this. Once again....great job!

[agent vivid]

yeah i'll try to post an example .zip later I've got to rip it out of the existing app and make it all pretty!