lejnieks » Flex http://www.lejnieks.com Fri, 29 Jan 2010 19:22:21 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Using Resource Bundles in MXML for simple strings http://www.lejnieks.com/2009/04/06/using-resource-bundles-in-mxml-for-simple-strings/ http://www.lejnieks.com/2009/04/06/using-resource-bundles-in-mxml-for-simple-strings/#comments Mon, 06 Apr 2009 18:08:17 +0000 klejnieks http://lejnieks.com/?p=63 There are a few ways developers can use resource bundles in a flex application. When using a resource bundle, in particular a simple string, inside of an mxml file you can gain access to the resource using the resourceManager or by using the @Resource directive. For simple strings, meaning strings you are not going to tokenize you should be using the @Resource directive instead of the resourceManager.

Lets examine a simple test app. Below you will see a simple app with two labels, both look for the same string in the same bundle and display them the same way. For all intents and purposes these two labels are exactly the same, except they are actually rather different.

sample app

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
	<mx:Label text="@Resource(key='testString', bundle='labels')" />
	<!--
	<mx:Label text="{resourceManager.getString('labels', 'testString')}" />
	-->
 
</mx:Application>

If you add the generate as output argument to your compiler we can see what is happening under the covers here

compiler args

-locale en_US -source-path+=../locale/{locale} -keep-generated-actionscript

once Flex is done building you can easily see how the compiler has handled the resource bundle @directive

labels_properties.as

package
{
import mx.resources.ResourceBundle;
 
[ExcludeClass]
public class en_US$labels_properties extends ResourceBundle
{
 
    public function en_US$labels_properties()
    {
		 super("en_US", "labels");
    }
 
    override protected function getContent():Object
    {
        var content:Object =
        {
            "testString": "This is a test"
        };
        return content;
    }
}
}

main-generated.as (truncated…)

package
{
...
public class main
	extends mx.core.Application
{
	//	Container document descriptor
private var _documentDescriptor_ : mx.core.UIComponentDescriptor =
new mx.core.UIComponentDescriptor({
  type: mx.core.Application
  ,
  propertiesFactory: function():Object { return {
    childDescriptors: [
      new mx.core.UIComponentDescriptor({
        type: mx.controls.Label
        ,
        propertiesFactory: function():Object { return {
          text: ResourceManager.getInstance().getString("labels", "testString")
        }}
      })
    ]
  }}
})
 
	//	constructor (Flex display object)
    /**
     * @private
     **/
	public function main()
	{
		super();
 
		mx_internal::_document = this;
 
		//	our style settings
 
 
		//	ambient styles
		mx_internal::_main_StylesInit();
 
		//	properties
		this.layout = "vertical";
 
		//	events
 
	}
 
    /**
     * @private
     **/
	override public function initialize():void
	{
 		mx_internal::setDocumentDescriptor(_documentDescriptor_);
		super.initialize();
	}
 
	mx_internal static var _main_StylesInit_done:Boolean = false;
 
	mx_internal function _main_StylesInit():void
	{
		//	only add our style defs to the StyleManager once
		if (mx_internal::_main_StylesInit_done)
			return;
		else
			mx_internal::_main_StylesInit_done = true;
 
		var style:CSSStyleDeclaration;
		var effects:Array;
 
		StyleManager.mx_internal::initProtoChainRoots();
	}
}
}

now reverse the commented section so Flex builds using the resourceManager() inside the label instead of using the @Resource directive.

labels_properties.as

package
{
import mx.resources.ResourceBundle;
 
[ExcludeClass]
public class en_US$labels_properties extends ResourceBundle
{
 
    public function en_US$labels_properties()
    {
		 super("en_US", "labels");
    }
 
    override protected function getContent():Object
    {
        var content:Object =
        {
            "testString": "This is a test"
        };
        return content;
    }
}
}

main-generated.as (truncated…)

package
{
...
public class main
	extends mx.core.Application
	implements mx.binding.IBindingClient
{
 
	//	instance variables
/**
 * @private
 **/
	public var _main_Label1 : mx.controls.Label;
 
 
	//	type-import dummies
 
 
	//	Container document descriptor
private var _documentDescriptor_ : mx.core.UIComponentDescriptor =
new mx.core.UIComponentDescriptor({
  type: mx.core.Application
  ,
  propertiesFactory: function():Object { return {
    childDescriptors: [
      new mx.core.UIComponentDescriptor({
        type: mx.controls.Label
        ,
        id: "_main_Label1"
      })
    ]
  }}
})
 
	//	constructor (Flex display object)
    /**
     * @private
     **/
	public function main()
	{
		super();
 
		mx_internal::_document = this;
 
		//	our style settings
 
 
		//	ambient styles
		mx_internal::_main_StylesInit();
 
		//	properties
		this.layout = "vertical";
 
		//	events
 
	}
 
	//	initialize()
    /**
     * @private
     **/
	override public function initialize():void
	{
 		mx_internal::setDocumentDescriptor(_documentDescriptor_);
 
		var bindings:Array = _main_bindingsSetup();
		var watchers:Array = [];
 
		var target:main = this;
 
		if (_watcherSetupUtil == null)
		{
			var watcherSetupUtilClass:Object = getDefinitionByName("_mainWatcherSetupUtil");
			watcherSetupUtilClass["init"](null);
		}
 
		_watcherSetupUtil.setup(this,
					function(propertyName:String):* { return target[propertyName]; },
					bindings,
					watchers);
 
		for (var i:uint = 0; i < bindings.length; i++)
		{
			Binding(bindings[i]).execute();
		}
 
		mx_internal::_bindings = mx_internal::_bindings.concat(bindings);
		mx_internal::_watchers = mx_internal::_watchers.concat(watchers);
 
 
		super.initialize();
	}
 
	//	scripts
	//	end scripts
 
 
    //	supporting function definitions for properties, events, styles, effects
 
	//	binding mgmt
    private function _main_bindingsSetup():Array
    {
        var result:Array = [];
        var binding:Binding;
 
        binding = new mx.binding.Binding(this,
            function():String
            {
                var result:* = (resourceManager.getString('labels', 'testString'));
                var stringResult:String = (result == undefined ? null : String(result));
                return stringResult;
            },
            function(_sourceFunctionReturnValue:String):void
            {
 
                _main_Label1.text = _sourceFunctionReturnValue;
            },
            "_main_Label1.text");
        result[0] = binding;
 
        return result;
    }
 
    private function _main_bindingExprs():void
    {
        var destination:*;
		[Binding(id='0')]
		destination = (resourceManager.getString('labels', 'testString'));
    }
 
    /**
     * @private
     **/
    public static function set watcherSetupUtil(watcherSetupUtil:IWatcherSetupUtil):void
    {
        (main)._watcherSetupUtil = watcherSetupUtil;
    }
 
    private static var _watcherSetupUtil:IWatcherSetupUtil;
 
	//	initialize style defs for main
 
	mx_internal static var _main_StylesInit_done:Boolean = false;
 
	mx_internal function _main_StylesInit():void
	{
		//	only add our style defs to the StyleManager once
		if (mx_internal::_main_StylesInit_done)
			return;
		else
			mx_internal::_main_StylesInit_done = true;
 
		var style:CSSStyleDeclaration;
		var effects:Array;
 
 
		StyleManager.mx_internal::initProtoChainRoots();
	}
 
 
	//	embed carrier vars
	//	end embed carrier vars
 
	//	binding management vars
    /**
     * @private
     **/
    mx_internal var _bindings : Array = [];
    /**
     * @private
     **/
    mx_internal var _watchers : Array = [];
    /**
     * @private
     **/
    mx_internal var _bindingsByDestination : Object = {};
    /**
     * @private
     **/
    mx_internal var _bindingsBeginWithWord : Object = {};
 
}
}

Notice the addition of a change watcher to bind this string to the label. Now considering, again, this is a simple string, it will never change, we are not tokenizing it there for it will be everlasting throughout the application without the need to change therefore binding to this string is needless. You may also notice that the compiled swf using resourceManager is 256kb on disk. The compiled swf using @Resource is 248kb on disk, not a major difference but a difference none the less.

]]> http://www.lejnieks.com/2009/04/06/using-resource-bundles-in-mxml-for-simple-strings/feed/ 1 Skinning Checkbox with Error State http://www.lejnieks.com/2009/04/06/skinning-checkbox-with-error-state/ http://www.lejnieks.com/2009/04/06/skinning-checkbox-with-error-state/#comments Mon, 06 Apr 2009 17:19:06 +0000 klejnieks http://lejnieks.com/?p=59 Similar to skinning a combobox with an error state, there may be times where you need to show the error state for a checkbox without showing its error string.

main.css

CheckBox
{
	icon			:	ClassReference("com.lejnieks.poc.ui.skins.CheckboxBorderSkin");
	error-color		:	#FF0000;
	fillColors		: 	#fdfdfd, #e2e3e3, #e6f5ff, #e6f5ff;
	borderColor		: 	#374149;
	outerBorderColor	:	#77848D;
	themeColor		: 	#77848d;
	icon-color		:	#2A2A2A;
	disabled-icon-color	:	#7A7A7A;
	color			: 	#DEEEF9;
	textSelectedColor	: 	#DEEEF9;
	textRollOverColor	: 	#DEEEF9;
	fontFamily		: 	Tahoma;
	fontSize		: 	10;
	fontWeight		: 	normal;
}

CheckboxBorderSkin.as

package com.lejnieks.poc.ui.skins
{
	import com.lejnieks.poc.ui.controls.IValidatable;
 
	import mx.controls.CheckBox;
	import mx.skins.halo.CheckBoxIcon;
 
	public class CheckboxBorderSkin extends CheckBoxIcon implements IValidatable
	{
		private var _showError:Boolean = false;
 
		public function get showError():Boolean
		{
			return _showError;
		}
 
		public function set showError(value:Boolean):void
		{
			_showError = value;
			invalidateProperties();
		}
 
		override protected function updateDisplayList(w:Number, h:Number):void
		{
			super.updateDisplayList(w, h);
 
			var bDrawCheck:Boolean 		= 	false;
			var fillAlphas:Array		= 	[1, 1];
			var highlightAlphas:Array 	= 	[1, 1];
			var checkColor:uint 		= 	getStyle("iconColor");
			var borderColor:uint		= 	getStyle("borderColor");
			var outerBorderColor:uint	=	getStyle("outerBorderColor");
			var fillColors:Array 		= 	getStyle("fillColors");
			var isErrorState:Boolean	=	false;
 
			if( !_showError )
			{
				if(parent is CheckBox && CheckBox(parent).errorString.length > 1 &&  CheckBox(parent).errorString != "" && CheckBox(parent).errorString != null  )
				{
					isErrorState = true;
				}
			}
 
			graphics.clear();
 
			switch( name )
			{
				case "upIcon":
					if(isErrorState || _showError)
					{
						drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					}
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1 );
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "overIcon":
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1 );
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
 
				case "downIcon":
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[2], fillColors[3] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "disabledIcon":
					drawRoundRect( 0, 0, w, h, 0, borderColor, 0.5);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], [0.5, 0.5], verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "selectedUpIcon":
					bDrawCheck = true;
					if(isErrorState || _showError)
					{
						drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					}
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "selectedOverIcon":
					bDrawCheck = true;
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
 
				case "selectedDownIcon":
					bDrawCheck = true;
					drawRoundRect( -1, -1, w + 2, h + 2, 0, outerBorderColor, 1 );
					drawRoundRect( 0, 0, w, h, 0, borderColor, 1 );
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[2], fillColors[3] ], 1, verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
 
				case "selectedDisabledIcon":
					bDrawCheck = true;
					checkColor = getStyle("disabledIconColor");
					drawRoundRect( 0, 0, w, h, 0, borderColor, 0.5);
					drawRoundRect( 1, 1, w - 2, h - 2, 0, [ fillColors[0], fillColors[1] ], [0.5, 0.5], verticalGradientMatrix(1, 1, w - 2, h - 2) );
					break;
			}
 
			if (bDrawCheck)
			{
				graphics.beginFill(checkColor);
				graphics.moveTo(3, 5);
				graphics.lineTo(5, 10);
				graphics.lineTo(7, 10);
				graphics.lineTo(12, 2);
				graphics.lineTo(13, 1);
				graphics.lineTo(11, 1);
				graphics.lineTo(6.5, 7);
				graphics.lineTo(5, 5);
				graphics.lineTo(3, 5);
				graphics.endFill();
			}
		}
	}
}

IValidatable.as

package com.lejnieks.poc.ui.controls
{
	/**
	 *  The interface that components implement to
	 *  support validation of fields. This component
	 *  bypasses the need to use Validators.
	 *  Custom ui components implement this interface
	 *  therefore all custom ui component in the application can be
	 *  iterated through during a validation process
	 *  and set to show its error state or clear its error state.
	 */
	public interface IValidatable
	{
		/**
	     *  Every <cod>IValidatable</code> component will have a proper error
	     *  skin. Setting <code>showError</code> to true will invoke this setter
	     *  and flag the component to display the error skin on the next
	     *  <cod>commitPropeties</code>.
	     *
	     *  <p>Calling <code>showError</code> is similar to setting <code>errorString</code>
	     *  except that some components may not need to display an error string but still show
	     *  its error skin.</p>
	     * 	<p>IValidatable components in the application can display error skins regardless of setting an
	     *  errorString. This is important to note for child components whose parent containers
	     *  will set or show an error string or who wont show an error message at all but simply
	     *  display a skin or icon for its errored state</p>
	     *
	 	*/
		function get showError():Boolean;
		function set showError(value:Boolean):void;
	}
}
]]> http://www.lejnieks.com/2009/04/06/skinning-checkbox-with-error-state/feed/ 0 Skinning ComboBox with Error State http://www.lejnieks.com/2009/04/06/skinning-combobox-with-error-state/ http://www.lejnieks.com/2009/04/06/skinning-combobox-with-error-state/#comments Mon, 06 Apr 2009 16:18:55 +0000 klejnieks http://lejnieks.com/?p=60 Since the ComboBox doesn’t come with an out-of-the-box error state / skin without using an error string, you can grab the sample code below to give your comboBox an error skin. The example implements the interface IValidatable which for the most part is a stub interface that should be considered itterable by the application so you can easily request that any IValidatable component shows its error state ( showError() ). The point of doing this instead of using set errorString is that in certain instances you may not actually want to use an error string, or in the case of a comboBox you may want to have its parent container show the error string.

Another case to use this method of validation would be if you have a parent container with multiple controls inside of it, the parent container is responsible for messaging the error to the user but each control should display an errored state regardless of displaying an error string.

main.css

CustomComboBox
{
	up-skin				:	Embed(source="/assets/images/combobox_skin_up.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82");
	over-skin			:	Embed(source="/assets/images/combobox_skin_over.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82");
	down-skin			:	Embed(source="/assets/images/combobox_skin_down.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82");
	disabled-skin			:	Embed(source="/assets/images/combobox_skin_disabled.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82");
	errorUpSkin			:	Embed(source="/assets/images/combobox_skin_errorUp.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82");
	errorOverSkin			:	Embed(source="/assets/images/combobox_skin_errorOver.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82");
	errorDownSkin			:	Embed(source="/assets/images/combobox_skin_errorDown.png", scaleGridTop="5", scaleGridBottom="17", scaleGridLeft="5", scaleGridRight="82");
	color				: 	#0A3C6C;
	text-roll-over-color		: 	#072A4C;
	text-selected-color		:	#072A4C;
	disabled-color			:	#404E58;
	dropDownStyleName		: 	comboBoxDropDowns;
}
 
.comboBoxDropDowns
{
	color				: 	#0A3C6C;
	text-roll-over-color		:	#072A4C;
	text-selected-color		:	#FFFFFF;
	background-color		:	#f6f6f6;
	border-thickness		: 	1;
	border-color			: 	#f6f6f6;
	roll-over-color			:	#C3CED6;
	selection-color			:	#0A3C6C;
	dropShadowEnabled		: 	false;
	corner-radius			:	0;
}

CustomCombBox

package com.lejnieks.poc.ui.controls
{
	import mx.controls.ComboBox;
	import mx.events.ValidationResultEvent;
 
	public class CustomComboBox extends ComboBox implements IValidatable
	{
		private var originalUpSkin:Object;
		private var originalOverSkin:Object;
		private var originalDownSkin:Object;
 
		private var _showError:Boolean = false;
 
		override protected function createChildren():void
		{
			super.createChildren();
 
			originalUpSkin		=	getStyle("upSkin");
			originalOverSkin	=	getStyle("overSkin");
			originalDownSkin	=	getStyle("downSkin");
 
			setBackgroundSkin();
		}
 
		public function set showError( value:Boolean ):void
		{
			_showError = value;
			invalidateProperties();
		}
 
		public function get showError():Boolean
		{
			return _showError;
		}
 
		override protected function commitProperties():void
		{
			super.commitProperties();
 
			if (_showError)
			{
				setBackgroundErrorSkin();
			}
			else
			{
				if(errorString && errorString.length != 0)
		    		{
		    			errorString = '';
		    		}
 
	        		setBackgroundSkin();
			}
		}
 
		private function setBackgroundSkin():void
		{
			setStyle("upSkin", originalUpSkin);
			setStyle("overSkin", originalOverSkin);
			setStyle("downSkin", originalDownSkin);
		}
 
		private function setBackgroundErrorSkin():void
		{
			setStyle("upSkin", getStyle("errorUpSkin") );
			setStyle("overSkin", getStyle("errorOverSkin") );
			setStyle("downSkin", getStyle("errorDownSkin") );
		}
	}
}

IValidatable

package com.lejnieks.poc.ui.controls
{
	/**
	 *  The interface that components implement to
	 *  support validation of fields. This component
	 *  bypasses the need to use Validators.
	 *  Custom ui components implement this interface
	 *  therefore all custom ui component in the application can be
	 *  iterated through during a validation process
	 *  and set to show its error state or clear its error state.
	 */
	public interface IValidatable
	{
		/**
	     *  Every <cod>IValidatable</code> component will have a proper error
	     *  skin. Setting <code>showError</code> to true will invoke this setter
	     *  and flag the component to display the error skin on the next
	     *  <cod>commitPropeties</code>.
	     *
	     *  <p>Calling <code>showError</code> is similar to setting <code>errorString</code>
	     *  except that some components may not need to display an error string but still show
	     *  its error skin.</p>
	     * 	<p>IValidatable components in the application can display error skins regardless of setting an
	     *  errorString. This is important to note for child components whose parent containers
	     *  will set or show an error string or who wont show an error message at all but simply
	     *  display a skin or icon for its errored state</p>
	     *
	 	*/
		function get showError():Boolean;
		function set showError(value:Boolean):void;
	}
}
]]> http://www.lejnieks.com/2009/04/06/skinning-combobox-with-error-state/feed/ 0 Compile ASDocs with ANT http://www.lejnieks.com/2009/01/10/compile-asdocs-with-ant/ http://www.lejnieks.com/2009/01/10/compile-asdocs-with-ant/#comments Sun, 11 Jan 2009 05:24:07 +0000 klejnieks http://lejnieks.com/?p=62 Continuing on with ANT – Flex compilation, this sample script below will help you output ASDocs for your projects deliverable.

Ant Script

<?xml version="1.0" encoding="utf-8"?>
<project name="ASDocsTest" default="compile" basedir=".">
 
	<!--
	import our build properties file
	-->
	<property file="./build.properties" />
 
 
	<!--
	Flex Ant Tasks used to perform compc and mxml compiling more info at http://labs.adobe.com/wiki/index.php/Flex_Ant_Tasks
	-->
	<taskdef resource="flexTasks.tasks" classpath="${flexTasks.jar}" />
 
 
	<!--
	Execute the ASDoc Compile
	-->
	<target name="compile" depends="generateASDocs" description="series of tasks to create docs"/>
 
 
	<!--
	DELETE the existing output folder and files and then re-generate the output folder
	-->
	<target name="cleanASDocsDir" description="DELETE the existing output folder and files and then re-generate the output folder">
		<delete dir="${asdocOutput.dir}" failOnError="true" includeEmptyDirs="true"/>
		<mkdir dir="${asdocOutput.dir}"/>
		<echo>doc directory cleaned</echo>
	</target>
 
 
	<!--
	Run the ASDoc executable and generate the ASDocs to the new output folder
	-->
	<target name="generateASDocs" depends="cleanASDocsDir, asDocsLog" description="Run the ASDoc executable and generate the ASDocs to the new output folder">
		<echo message="Generating ASDocs" />
		<exec executable="${asdoc.dir}" failonerror="true">
			<arg line="-doc-sources ${asdocClassPath}"/>
			<arg line="-source-path '${srcpath.dir}'"/>
			<arg line="-external-library-path '${externalLib.dir}'" />
			<arg line="-window-title '${asdocsTitle}'"/>
			<arg line="-main-title '${asdocsTitle}'" />
			<arg line="-footer '${asdocsFooter}'" />
			<arg line="-output '${asdocOutput.dir}'"/>
		</exec>
		<echo message="ASDocs created successfully" />
	</target>
 
 
	<!--
	LOG writes asdoc output to log file: log.txt
	-->
	<target name="asDocsLog">
		<echo message="start the asdoc generation log" />
		<record name="${asdocOutput.dir}/asdoc-log.txt" action="start" append="true"/>
	</target>
 
</project>

Build.properties

# Home directory for flex sdk 3, change this to build for Mac or PC using # as comment
FLEX_HOME 		=	sdks/flex-3.2-sdk
flexTasks.jar		=	tools/FlexTasks/lib/flexTasks.jar
srcpath.dir      	=	../src
externalLib.dir  	=	../libs
 
# ASDoc
asdoc.dir		=	sdks/flex-3.2-sdk/bin/asdoc
asdocOutput.dir  	=	../html_docs
asdocClassPath 		= 	${srcpath.dir}/com
asdocsTitle 		= 	ASDocs Test Library
asdocsFooter 		= 	CONFIDENTIAL. Copyright 2009 My Company
]]> http://www.lejnieks.com/2009/01/10/compile-asdocs-with-ant/feed/ 1 Overriding Menu to include stage height bounds http://www.lejnieks.com/2008/11/17/overriding-menu-to-include-stage-height-bounds/ http://www.lejnieks.com/2008/11/17/overriding-menu-to-include-stage-height-bounds/#comments Tue, 18 Nov 2008 06:11:31 +0000 klejnieks http://lejnieks.com/?p=53 I was working on a custom menu component uses Menu. Turns out that Menu doesnt inherintly understand the stage height of the application. What I ended up doing was creating CustomMenu which extends Menu and adds in height bounds for the root and any sub menu.

package com.lejnieks.poc.ui.components.menu
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.geom.Point;
 
	import mx.controls.Menu;
	import mx.controls.listClasses.IListItemRenderer;
	import mx.controls.menuClasses.IMenuItemRenderer;
	import mx.core.Application;
	import mx.core.ScrollPolicy;
	import mx.core.mx_internal;
	import mx.managers.PopUpManager;
 
	use namespace mx_internal;
 
	public class CustomMenu extends Menu
	{
		private var xpos:Object = 0;
		private var ypos:Object = 0;
 
		private const END_OF_SCREEN_MENU_PADDING:Number = 5;
 
		public function CustomMenu()
		{
			super();
		}
 
		public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean=true):CustomMenu
		{
			var menu:CustomMenu = new CustomMenu();
				menu.tabEnabled = false;
				menu.owner = DisplayObjectContainer(Application.application);
				menu.showRoot = showRoot;
 
			popUpMenu(menu, parent, mdp);
 
			return menu;
		}
 
		override mx_internal function openSubMenu(row:IListItemRenderer):void
		{
			supposedToLoseFocus = true;
 
			var r:Menu = getRootMenu();
			var menu:Menu;
 
			if (!IMenuItemRenderer(row).menu)
			{
				menu = new TIPSMenu();
				menu.parentMenu = this;
				menu.owner = this;
				menu.showRoot = showRoot;
				menu.dataDescriptor = r.dataDescriptor;
				menu.styleName = r;
				menu.labelField = r.labelField;
				menu.labelFunction = r.labelFunction;
				menu.iconField = r.iconField;
				menu.iconFunction = r.iconFunction;
				menu.itemRenderer = r.itemRenderer;
				menu.rowHeight = r.rowHeight;
				menu.scaleY = r.scaleY;
				menu.scaleX = r.scaleX;
 
				if (row.data &&
					_dataDescriptor.isBranch(row.data) &&
					_dataDescriptor.hasChildren(row.data))
				{
					menu.dataProvider = _dataDescriptor.getChildren(row.data);
				}
 
				menu.sourceMenuBar = sourceMenuBar;
				menu.sourceMenuBarItem = sourceMenuBarItem;
 
				IMenuItemRenderer(row).menu = menu;
				PopUpManager.addPopUp(menu, r, false);
			}
			else
			{
				menu = IMenuItemRenderer(row).menu;
			}
 
			super.openSubMenu(row);
		}
 
		override public function show(x:Object=null, y:Object=null):void
		{
			this.xpos = x;
			this.ypos = y;
 
			var absoluteHeightOfSubMenu:Number = this.height + this.ypos;
			var appHeight:Number = Application.application.height;
 
			if( absoluteHeightOfSubMenu > appHeight )
			{
				this.ypos = Number(this.ypos) - (absoluteHeightOfSubMenu - appHeight) - END_OF_SCREEN_MENU_PADDING;
			}
 
			super.show(x, this.ypos);
		}
	}
}

Im overriding show() so that when the menu displays, if the menus height + its absolute position is greater than the application height, then it will move the menus y position up by the difference of the menu height + menu y position, and then I add in just a bit of extra padding so the menu doesn’t butt up against the bottom of the application

]]> http://www.lejnieks.com/2008/11/17/overriding-menu-to-include-stage-height-bounds/feed/ 2 Compile Flex applications using ANT http://www.lejnieks.com/2008/11/02/compile-flex-applications-using-ant/ http://www.lejnieks.com/2008/11/02/compile-flex-applications-using-ant/#comments Sun, 02 Nov 2008 13:55:34 +0000 klejnieks http://lejnieks.com/?p=61 A quick setup and example of how to compile a Flex application using ANT. This example will show the basics of how to run the ANT script to compile your flex application, I will walk through more complex examples in later posts but to get started look through the script and properties files below or download the attached project files at the bottom of this post.

ANT is a very powerful tool that, once you get into using it, will make your development, deployment and automation a lot simpler as well a lot less prone to error. If you are new to ANT there are a lot of resources out on the web that will help you get up to speed. This post and others to follow will focus specifically on the uses of ANT with Flex in a CI build process.

Ant Script

<?xml version="1.0" encoding="utf-8"?>
<project name="FlexANTBuildSample" default="build" basedir=".">
 
	<!--
	DEFINE import our build properties file and define our tasks
	-->
	<property file="./build.properties" />
 
	<path id="project.classpath">
		<fileset dir="${tools.dir}">
			<include name="**/*.jar"/>
		</fileset>
	</path>
 
	<taskdef resource="flexTasks.tasks" classpath="${flexTasks.jar}" />
	<taskdef resource="com/adobe/ac/ant/tasks/tasks.properties" classpath="${flexAntTasks.jar}"/>
	<taskdef resource="net/sf/antcontrib/antcontrib.properties" classpathref="project.classpath"/>
 
 
	<!--
	TARGETS
	-->
	<target name="build" depends="init, clean, makeWrapper, compile"/>
 
 
	<!--
	INITIALIZE
	-->
	<target name="init" description="Initializes the build">
		<condition property="environment.display" value=":1">
			<os name="Linux"/>
		</condition>
		<tstamp/>
		<echo message="============================================="/>
		<echo message="${project.name}-${project.version} [${TODAY}]"/>
		<echo message="Copyright (c) ${project.year} ${project.owner}"/>
		<echo message="OS : ${os.name}" />
		<echo message="Author: ${author}" />
		<echo message="=============================================="/>
	</target>
 
 
	<!--
	CLEAN the existing output folder and files and then re-generate the output folder
	-->
	<target name="clean" description="deletes and recreates the metadata destination directory">
		<delete verbose="${verbose}" dir="${deploy.dir}"/>
		<mkdir dir="${deploy.dir}"/>
		<echo message="Deploy directory created" />
	</target>
 
 
	<!--
	COMPILE
	-->
	<target name="compile" description="compiles the Main app" >
		<mxmlc context-root="main"
			file="${mainApp.src}"
			output="${mainApp.swf}"
			actionscript-file-encoding="${encoding}"
			keep-generated-actionscript="false"
			incremental="false"
			locale="${locale}">
 
			<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
 
			<compiler.source-path path-element="${FLEX_HOME}/frameworks"/>
			<compiler.source-path path-element="${srcpath.dir}"/>
			<compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
				<include name="libs" />
			</compiler.library-path>
			<compiler.library-path dir="${basedir}" append="true">
				<include name="libs" />
			</compiler.library-path>
		</mxmlc>
	</target>
 
 
	<!--
	MAKE WRAPPER
	-->
	<target name="copyTemplates">
		<copy todir="${deploy.dir}">
			<fileset dir="${htmltemplate.dir}">
				<exclude name="**/index.template.html" />
			</fileset>
		</copy>
	</target>
 
	<target name="makeWrapper" description="copies index.html wrapper and needed files from html-template directory" depends="clean, copyTemplates">
		<property name="pageTitle" value="${mainApp.name}"/>
		<copy file="${htmltemplate.dir}/index.template.html" tofile="${deploy.dir}/index.html" />
		<replace file="${deploy.dir}/index.html" token="$${title}" value="${pageTitle}"/>
		<replace file="${deploy.dir}/index.html" token="$${swf}" value="${mainApp.name}"/>
		<replace file="${deploy.dir}/index.html" token="$${width}" value="100%"/>
		<replace file="${deploy.dir}/index.html" token="$${height}" value="100%"/>
		<replace file="${deploy.dir}/index.html" token="$${bgcolor}" value="${mainApp.bgColor}"/>
		<replace file="${deploy.dir}/index.html" token="$${application}" value="${mainApp.name}"/>
		<replace file="${deploy.dir}/index.html" token="$${version_major}" value="9"/>
		<replace file="${deploy.dir}/index.html" token="$${version_minor}" value="0"/>
		<replace file="${deploy.dir}/index.html" token="$${version_revision}" value="28"/>
	</target>
 
</project>

Build.properties

######################################
## Author information
######################################
author			=	Kenneth Lejnieks
project.owner		=	Lejnieks Consulting
project.owner.url	=	http://www.lejnieks.com
project.fullname		=	Build CI POC 1
project.version		=	1.0.0 alpha  # major.minor[.revision[.build]]
project.name		=	POC Sample 1
project.year		=	2009
application.name	=	POC
 
 
 
######################################
## Path information
######################################
FLEX_HOME		=	sdks/flex-3.2-sdk
 
htmltemplate.dir	=	../html-template
srcpath.dir		=	../src
libs.dir  		=	../libs
tools.dir		=	tools
 
deploy.dir		=	../deploy
 
 
 
######################################
## Build arguments
######################################
verbose			=	true
 
 
 
######################################
## Application information
######################################
mainApp.name		=	FlexCISample1
mainApp.src		=	${srcpath.dir}/${mainApp.name}.mxml
mainApp.swf		=	${deploy.dir}/${mainApp.name}.swf
mainApp.bgColor		=	#f6f6f6
locale			=	en_US
encoding		=	UTF-8
 
 
 
######################################
## Build Tools
######################################
flexTasks.jar		=	${FLEX_HOME}/ant/lib/flexTasks.jar
flexAntTasks.jar	=	${tools.dir}/FlexAntTasks.jar
ant-contrib.jar		=	${tools.dir}/ant-contrib.jar

Project source files including necessary jars can be found here

]]> http://www.lejnieks.com/2008/11/02/compile-flex-applications-using-ant/feed/ 0 Using tokens in resource bundles http://www.lejnieks.com/2008/10/20/using-tokens-in-resource-bundles/ http://www.lejnieks.com/2008/10/20/using-tokens-in-resource-bundles/#comments Mon, 20 Oct 2008 20:29:01 +0000 klejnieks http://lejnieks.com/?p=64 A quick sample on how to pass in token values to a resource bundle string. When you need to replace a token value in your bundle, you will want to use the resourceManager or ResourceManager and pass in the value you want to replace in your bundle as an array, this is in the 3 parameter of the resourceManager’s getString() method.

Application

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
	<mx:Metadata>
    [ResourceBundle("labels")]
	</mx:Metadata>
 
	<mx:Script>
		<![CDATA[
			import mx.formatters.DateFormatter;
			import mx.resources.ResourceManager;
 
			[Bindable] private var _username:String;
			[Bindable] private var _date:String;
 
			private function setUsername( event:MouseEvent ):void
			{
				var tmpDate:Date	=	new Date();
 
				_username	= 	usernameInput.text;
				_date		=	tmpDate.getMonth() + "/" + tmpDate.getDay() + "/" + tmpDate.getFullYear();
			}
 
		]]>
	</mx:Script>
 
	<mx:TextInput id="usernameInput" />
	<mx:Button label="Set Username" click="setUsername(event)" />
	<mx:Label text="{resourceManager.getString('labels', 'welcomeMessage', [_username, _date])}" />
 
</mx:Application>

labels.properties

welcomeMessage	=	Welcome {0} Today is {1}
]]> http://www.lejnieks.com/2008/10/20/using-tokens-in-resource-bundles/feed/ 0 Flex Keycodes http://www.lejnieks.com/2008/09/05/flex-keycodes/ http://www.lejnieks.com/2008/09/05/flex-keycodes/#comments Fri, 05 Sep 2008 16:45:55 +0000 klejnieks http://lejnieks.com/?p=26 This is more a post-to-self regarding Key Code values in Flex.

A = 65
B = 66
C = 67
D = 68
E = 69
F = 70
G = 71
H = 72
I = 73
J = 74
K = 75
L = 76
M = 77
N = 78
O = 79
P = 80
Q = 81
R = 82
S = 83
T = 84
U = 85
V = 86
W = 87
X = 88
Y = 89
Z = 90

CTRL + A = 1
CTRL + B = 2
CTRL + C = 3
CTRL + D = 4
CTRL + E = 5
CTRL + F = 6
CTRL + G = 7
CTRL + H = 8
CTRL + I = 9
CTRL + J = 10
CTRL + K = 11
CTRL + L = 12
CTRL + M = 13
CTRL + N = 14
CTRL + O = 15
CTRL + P = 16
CTRL + Q = 17
CTRL + R = 18
CTRL + S = 19
CTRL + T = 20
CTRL + U = 21
CTRL + V = 22
CTRL + W = 23
CTRL + X = 24
CTRL + Y = 25
CTRL + Z = 26

ALT + A = 197
ALT + B = 166
ALT + C = 199
ALT + D = 206
ALT + E = 180
ALT + F = 207
ALT + G = 169
ALT + H = 211
ALT + I = 136
ALT + J = 212
ALT + K = 190
ALT + L = 210
ALT + M = 194
ALT + N = 152
ALT + O = 216
ALT + P = 222
ALT + Q = 140
ALT + R = 174
ALT + S = 205
ALT + T = 134
ALT + U = 168
ALT + V = 175
ALT + W = 221
ALT + X = 188
ALT + Y = 193
ALT + Z = 253

]]> http://www.lejnieks.com/2008/09/05/flex-keycodes/feed/ 0 Flex Google Style Inline Auto Suggest Search Field http://www.lejnieks.com/2008/09/05/flex-google-style-inline-auto-suggest-search-field/ http://www.lejnieks.com/2008/09/05/flex-google-style-inline-auto-suggest-search-field/#comments Fri, 05 Sep 2008 16:26:22 +0000 klejnieks http://lejnieks.com/?p=32 A quick little POC for building a drop down inline auto suggest, google style search field. The search is hitting a MySQL database populated with over 30,000 records, mind you some / a lot of them are duplicates and laziness forces me not to clean the data for this POC but it still proves the point.

Try it out below, you can see instant responses from the server back to flex creating a very responsive and realtime feel. The search is looking through over 30,000 records. View source is enabled as well. Click on the Search text field and try searching for general things like the letter “A” or more fine grained terms like “Led”. The search polls the database on a short interval using setTimeout().

private function onKeyUp( e:KeyboardEvent ):void
{
	if( TextInput(e.currentTarget).text.length != 0 )
	{
		__interval = setTimeout(query, 100);
	}
	else
	{
		dgUserRequest.visible = false;
	}
}


You can modify the interval length, but from my testing I felt that 100 milliseconds was a good time for someone to type letter by letter and see instant responses, as well as not slow someone down who types rather fast and knows the search terms they are looking for.

(Please open the article to see the flash file or player.)

Source includes the MySQL database, Request.php which proctors the requests, and all the flex goodness. Source can be found here: http://projects.lejnieks.com/flex_inline_search_poc/inline_search.html

]]> http://www.lejnieks.com/2008/09/05/flex-google-style-inline-auto-suggest-search-field/feed/ 1 Passing arguments to javascript’s setTimeout() method using closures http://www.lejnieks.com/2008/08/21/passing-arguments-to-javascripts-settimeout-method-using-closures/ http://www.lejnieks.com/2008/08/21/passing-arguments-to-javascripts-settimeout-method-using-closures/#comments Thu, 21 Aug 2008 18:07:34 +0000 klejnieks http://lejnieks.com/?p=30 Yesterday I ended up having to hack around FCKEditor a bit to “fine tune” it for a project im involved in. The problem was that the html text we needed from the editor was getting back to our app, I didnt touch the code at all except to add a console log (window.console.log()) and tada… it works now. Well it was aparent that the fckeditor was not getting to where i needed to get to fast enough.

Javascript has a method setTimeout, which if you google this, youll find a bunch of related topics on setTimeout, setInterval, and clearTimeout etc… So I went with a setTimeout to simply call the next function i needed 1 millisecond later.

...
setTimeout( doAlert(), 1 );
...
 
function doAlert()
{
	alert();
}

Great! that works… but wait, I need to pass it a few variables. No problem i figured i could just add them inline right?

...
var msg = "Hello World";
setTimeout( doAlert(msg), 1 );
...
 
function doAlert(msg)
{
	alert(msg);
}

Wrong. this wont work in IE which sadly enough we have to support, and my argument that everyone should use firefox or safari just doesnt ever seem to hold water in a big corporation.

So I googled around and came across a post on evolt showing how to add in parameters using closures. Now im not advocating the usage of closures, but I figure in this case it would have to do. So in the end my routine looked a little something like this

...
var msg = "Hello World";
var delay = function() { doAlert(msg); };
setTimeout(delay, 1);
...
 
function doAlert(msg)
{
	alert(msg);
}

this works like a champ on mac and windows in IE, FF, and safari.

]]> http://www.lejnieks.com/2008/08/21/passing-arguments-to-javascripts-settimeout-method-using-closures/feed/ 5 Hello MXNA http://www.lejnieks.com/2008/07/31/hello-mxna/ http://www.lejnieks.com/2008/07/31/hello-mxna/#comments Fri, 01 Aug 2008 03:43:17 +0000 klejnieks http://lejnieks.com/?p=29 Long time listener, first time caller here, I’ve been aggregated by Adobe Feeds, and im looking forward to posting a lot more relevant information related to AIR, FLEX, RIA development through my experiences and research.

]]> http://www.lejnieks.com/2008/07/31/hello-mxna/feed/ 0 Handling Keyboard Events http://www.lejnieks.com/2008/07/12/handling-keyboard-events/ http://www.lejnieks.com/2008/07/12/handling-keyboard-events/#comments Sun, 13 Jul 2008 05:57:44 +0000 klejnieks http://lejnieks.com/?p=22 Im working on a project that required a Keyboard Manager to track shortcut keys within the Flex app, so i went ahead a wrote this quick little POC that I later incorporated into the project. I handle shortcut keys by adding and removing key listeners and mapping them to a dictionary of available keys. My final implementation handled [cmd + shift + key] for windows and [alt + key] for mac switched based on Capabilities.os. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onCreationComplete()">
 
	<mx:Script>
		<![CDATA[
			import com.lejnieks.poc.enum.KeyCodes;
 
			private var _keyCodes:Dictionary;
 
			private function onCreationComplete():void
			{
				_keyCodes = new Dictionary();
 
				addKeyCodes();
 
				addEventListener(MouseEvent.CLICK, clickHandler);
				addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
			}
 
			private function clickHandler(event:MouseEvent):void
			{
				stage.focus = this;
			}
 
			private function addKeyDownListeners():void
			{
				var hasKeyUpListener:Boolean = hasEventListener(KeyboardEvent.KEY_UP);
				var hasKeyDownListener:Boolean = hasEventListener(KeyboardEvent.KEY_DOWN);
 
				if(!hasKeyUpListener)
				{
					addEventListener(KeyboardEvent.KEY_UP,onKeyUp);
				}
 
				if(hasKeyDownListener)
				{
					removeEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
				}
			}
 
			private function onKeyUp( e:KeyboardEvent ):void
			{
				addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown);
				output_cmd.text = output_key.text = output_shift.text = "";
			}
 
			private function onKeyDown(evt:KeyboardEvent):void
			{
				var os:String = Capabilities.os;
 
				if( os.indexOf("Windows") > -1 ) os = "Windows";
				else if (os.indexOf("Mac") > -1) os = "Mac";
 
				switch(os)
				{
					case "Windows":
						handleWindowsKeyDown( evt );
						break;
 
					case "Mac":
						handleMacKeyDown( evt );
						break;
 
					default:
						//You are not on a supported OS
						break;
				}
			}
 
			private function handleMacKeyDown( e:KeyboardEvent ):void
			{
				var keyTranslated:String = getKeyCodeTranslated( e.keyCode );
 
				if(e.altKey)
				{
					output_alt.text = "alt key is pressed";
					if( keyTranslated != null )
					{
						output_key.text = keyTranslated + " key is pressed";
						addKeyDownListeners();
					}
				}
			}
 
			private function handleWindowsKeyDown( e:KeyboardEvent ):void
			{
				var keyTranslated:String = getKeyCodeTranslated( e.keyCode );
 
				if(e.ctrlKey)
				{
					output_cmd.text = "cmd/ctrl key is pressed";
 
					if(e.shiftKey)
					{
						output_shift.text = "shift key is pressed";
 
						if( keyTranslated != null )
						{
							output_key.text = keyTranslated + " key is pressed";
							addKeyDownListeners();
						}
					}
				}
			}
 
			private function addKeyCodes():void
			{
				_keyCodes = KeyCodes.toDictionary();
			}
 
			private function getKeyCodeTranslated( keyCode:uint ):String
			{
				return _keyCodes[keyCode];
			}
		]]>
	</mx:Script>
 
	<mx:TextInput id="output_cmd" width="200" borderColor="#000000" borderStyle="solid" />
	<mx:TextInput id="output_shift" width="200" borderColor="#000000" borderStyle="solid" />
	<mx:Spacer height="20"/>
 
	<mx:TextInput id="output_alt" width="200" borderColor="#000000" borderStyle="solid" />
	<mx:Spacer height="20"/>
 
	<mx:TextInput id="output_key" width="200" borderColor="#000000" borderStyle="solid" />
 
</mx:Application>

and the Enum to Dictionary Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

package com.lejnieks.poc.enum
{
	import flash.utils.Dictionary;
	import flash.utils.describeType;
 
 
	public class KeyCodes
	{
		public static const A:uint = 65;
		public static const B:uint = 66;
		public static const C:uint = 67;
		public static const D:uint = 68;
		public static const E:uint = 69;
		public static const F:uint = 70;
		public static const G:uint = 71;
		public static const H:uint = 72;
		public static const I:uint = 73;
		public static const J:uint = 74;
		public static const K:uint = 75;
		public static const L:uint = 76;
		public static const M:uint = 77;
		public static const N:uint = 78;
		public static const O:uint = 79;
		public static const P:uint = 80;
		public static const Q:uint = 81;
		public static const R:uint = 82;
		public static const S:uint = 83;
		public static const T:uint = 84;
		public static const U:uint = 85;
		public static const V:uint = 86;
		public static const W:uint = 87;
		public static const X:uint = 88;
		public static const Y:uint = 89;
		public static const Z:uint = 90;
 
		public static const ALT_E:uint = 180;
 
		public function KeyCodes() {}
 
		public static function toArray():Array
		{
			var keyCodes:Array = new Array();
			var classInfo:XML = describeType(KeyCodes);
			for each (var v:XML in classInfo..constant)
			{
				var name:String = String(v.@name);
			    var value:String = KeyCodes[name];
			    keyCodes.push(value);
			}
			keyCodes.sort();
			return keyCodes;
		}
 
		public static function toDictionary():Dictionary
		{
			var keyCodesDict:Dictionary = new Dictionary();
			var classInfo:XML = describeType(KeyCodes);
 
			for each (var v:XML in classInfo..constant)
			{
				var name:String = String(v.@name);
			    var value:String = KeyCodes[name];
			    keyCodesDict[value] = name;
			}
			return keyCodesDict;
		}
 
	}
}

Download the source files here

]]> http://www.lejnieks.com/2008/07/12/handling-keyboard-events/feed/ 1 Flex Debugger Crashes Safari http://www.lejnieks.com/2008/07/03/flex-debugger-crashes-safari/ http://www.lejnieks.com/2008/07/03/flex-debugger-crashes-safari/#comments Fri, 04 Jul 2008 06:33:33 +0000 klejnieks http://lejnieks.com/?p=17 So I had one of those awful days at work yesterday, we have all been through it at one point or another, where basically for no reason at all, everything started breaking and nothing would work. All I wanted to do was walk through my application in the debugger, and what should have been a straight shot ended up turning into hours of troubleshooting my computer. The problem was when I would try to debug my flex app, safari would crash or hang or timeout.

I had no idea what was causing flex and safari to break down like this. Started looking through the typical places, opened the flex logs, opened my mac console, then opened the system monitor but nothing showed me anything really glaring. The application monitor did tell me my syslog was running wild which really just means, something is wrong… keep looking. I restarted my syslog and kept looking, but with no luck. I did a fresh install of Eclipse from 3.2 to 3.3, reinstalled Flex plugin, reinstalled the flash debug player, I even re-checked out the project from the repository, again, all to no avail.

I then turned to my good friend google… I found a ton of articles and jira tickets dealing with this problem but none of them really fixed the issue until… drum roll please… I came across Ross Phillips’s blog. As I read through his post, he literally, word for word, had the exact same problem I had.

Basically, because I had been profiling the application two days ago, this ended up causing an issue with the debug player that resulted in the debug player crashing an hanging or not connecting at all. Ross found the solution here and while I don’t normally try to repost items like this (redundant blogging) i think this is a pretty common issue that might cause a lot of people a lot of angst and it definitely is worth a redundant post.

Ross’s solution, if your lazy and don’t want to click on the link above, is to open your mm.cfg file and remove the line in there relating to the profiler. Don’t worry, your still going to be able to profile your flex apps, this line will find its way back in here, so you’ll need to remove it again after you profile your app again but this way you can get back to debugging without interruption.

[Original Post]
http://www.fingersdancing.net/2008/06/flex-debugger-crashing-eclipse-safari.html

]]> http://www.lejnieks.com/2008/07/03/flex-debugger-crashes-safari/feed/ 0 Flex 3 Profiler & [tincan] http://www.lejnieks.com/2008/06/30/flex-3-profiler-tincan/ http://www.lejnieks.com/2008/06/30/flex-3-profiler-tincan/#comments Tue, 01 Jul 2008 05:19:29 +0000 klejnieks http://lejnieks.com/?p=16 While profiling an application I’m working on I came across and interesting method in my performance snapshot. Method [tincan], for those of you wondering what this is, as I was, I Googled Flex 3 [tincan] and came across this post on flexcoders: http://www.mail-archive.com/flexcoders@yahoogroups.com/msg83781.html

Basically [tincan] “…is the time processing RTMP messages…”

A bit more investigating and reading up on the Profiler and i came across this:http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Performance_and_Memory_Profiling#FAQ explanation of bracketed functions found in the snapshots such as [verified]

]]> http://www.lejnieks.com/2008/06/30/flex-3-profiler-tincan/feed/ 0 Flex Application Life Cycle http://www.lejnieks.com/2008/06/18/flex-application-life-cycle/ http://www.lejnieks.com/2008/06/18/flex-application-life-cycle/#comments Wed, 18 Jun 2008 17:28:24 +0000 klejnieks http://lejnieks.com/?p=15 In the last project I was working on we were developing more so based on Flex’s Application and component life cycles. Binding data within the life cycle helps eliminate the need for weak references as well as direct mxml bindings which ill admit I have been know to over use.

Recently a co-worker David Chang and I looked into the exact process Flex takes when initializing an application and its components and at what stages the data is available.

A Flex application goes through 4 distinct events when initializing an application.

  1. preinitialize
    Dispatched at the beginning of the component initialization sequence, basically before anything else starts
  2. initialize
    Dispatched when the component has finished its constructions and has all initialization properties set, this is done after all the other components have initialized themselves.
  3. creation complete
    Dispatched when the component has finished its construction, property processing, measuring, layout, and drawing. This is done when all components have completed their creation.
  4. application complete (where applicable)

    Dispatched after the Application has been initialzed

This is all fine and dandy except I wanted to get a more concrete illustration of what exactly is available and when, so I wrote up this quick little poc to show me in the debugger at what point data is available for the application and his components.
Basic Application Life Cycle

 
<!--[CDATA[
	/**
	 * Here we have no access to component / children level information,
	 * properties of any child in this application
	 * */
	private function onPreinitialize():void
	{
		trace("onPreinitialize() has no data will through an error in accessing component information" );
	}
 
	/**
	 * Here we can access information about our children components,
	 * but not all information is accessible, notice width propety in text component
	 * is set to 0 and not the true width becuase this information has not been set yet
	 * */
	private function onInitialize():void
	{
		trace("onInitialize() text.text=" + text.text + ", text.width=" + text.width + ", text.x=" + text.x );
	}
 
	override protected function createChildren():void
	{
		super.createChildren();
		trace("override createChildren() text.text=" + text.text + ", text.width=" + text.width + ", text.x=" + text.x );
	}
 
	override protected function childrenCreated():void
	{
		super.childrenCreated()
		trace("override childrenCreated() text.text=" + text.text + ", text.width=" + text.width + ", text.x=" + text.x );
	}
 
	override protected function commitProperties():void
	{
		super.commitProperties();
		trace("override commitProperties() text.text=" + text.text + ", text.width=" + text.width + ", text.x=" + text.x );
	}
 
	override protected function measure():void
	{
		super.measure();
		trace("override measure() text.text=" + text.text + ", text.width=" + text.width + ", text.x=" + text.x );
	}
 
	/**
	 * At this point in the Application Life Cycle the children components
	 * have been created, they have run through thier own life cycles
	 * and all the information about them is available
	 * */
	override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
	{
		super.updateDisplayList(unscaledWidth, unscaledHeight);
		trace("override updateDisplayList() text.text=" + text.text + ", text.width=" + text.width + ", text.x=" + text.x );
	}
 
	private function onCreationComplete():void
	{
		trace("onCreationComplete() text.text=" + text.text + ", text.width=" + text.width + ", text.x=" + text.x );
	}
 
]]-->
]]> http://www.lejnieks.com/2008/06/18/flex-application-life-cycle/feed/ 0 Flex Call Stack and callLater() http://www.lejnieks.com/2008/05/16/flex-call-stack-and-calllater/ http://www.lejnieks.com/2008/05/16/flex-call-stack-and-calllater/#comments Sat, 17 May 2008 04:47:10 +0000 klejnieks http://lejnieks.com/?p=25 Ive used callLater() quite a few times before, but about a week ago a co-worker asked me if I knew exactly when callLater() was called. Well I think its 1 millisecond after the method executes, to which he re-asked if its after the method or after the block of code executes? Great question, and I honestly couldn’t with absolute certainty answer him so I went ahead and wrote this quick POC to prove the fact one way or another.

Basically what I’m doing here is adding an initialize handler and a complete handler which will fire in that order except the initialize handler also has a callLater() call in it so what I expect to see is that the initialize function will fire the callLater function will fire then finally the complete handler will fire.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	initialize="onInitialize()"
	creationComplete="onCreationComplete()">
 
	<mx:Script>
		<![CDATA[
 
			// What we expect here is a trace output of
			// Call 1 Call 3 Call 2, not Call 1 Call 2 Call 3
			// this proves callLater dispatches a call directly
			// 1 millisecond after the code black is done, that
			// contains the callLater,
			// not after all code blacks are done.
			private function onInitialize():void
			{
				trace("call 1");
				callLater(trace3);
			}
 
			private function onCreationComplete():void
			{
				trace("call 2");
			}
 
			private function trace3():void
			{
				trace("call 3");
			}
		]]>
	</mx:Script>
</mx:Application>

This proves to me with a concrete example that callLater gets fired 1 millisecond after the method its requested from fires.

]]> http://www.lejnieks.com/2008/05/16/flex-call-stack-and-calllater/feed/ 1 Image Load I/O Error in Flex http://www.lejnieks.com/2008/05/09/image-load-io-error-in-flex/ http://www.lejnieks.com/2008/05/09/image-load-io-error-in-flex/#comments Sat, 10 May 2008 01:57:45 +0000 klejnieks http://lejnieks.com/?p=24 On a project im working on I ran into a very strange error when trying to load in a simple .jpg image. The image wouldn’t load. Now this sounds like a very familiar issue and easily solvable right? That what I thought too, but as it turns out, it turned into a couple hours of work and debugging. The issue wasn’t as simple as an incorrect url, network timeouts, dead links, etc… Debugging the complete() event shows the image was getting to where it had to get to and that flex felt that it did everything it had to do. So what was the problem with loading the image?

Flex can load .jpg, .png, .gif and so on… so why isnt the .jpg that was provided to me via the middle tier service loading in? Well it turns out that this wasn’t any ordinary jpeg, infact, it wasnt a jpeg at all. After a couple of hours of looking at everything under the sun, I finally looked into the image itself. I opened the image in HexEdit and I noticed this .jpg file had a header of “BM”… thats a Bitmap not a jpeg. Try it out, open any jpeg you have in HexEdit or some kind of binary reader and notice the headers should read “JFIF” not “BM…”. Apparently the team responsible for submitting images to the content delivery system had saved a bitmap as a jpg by simply editing the file extension from .bmp to .jpg which im sure may have seemed harmless but in fact there is a so much more to it when you convert from one file format to another.

At the end of the day, it wasnt the worlds biggest issue but it did cause a delay and I figured maybe this could help anyone going through the same issue. Since then when I see image load I/O errors now I do the following to manage the issue

      1. Check the URL of the image
      2. Open the image in a Binary reader like HexEdit
      3. Make sure the complete event fires
]]> http://www.lejnieks.com/2008/05/09/image-load-io-error-in-flex/feed/ 0 Enum toArray() http://www.lejnieks.com/2008/03/29/enum-toarray/ http://www.lejnieks.com/2008/03/29/enum-toarray/#comments Sun, 30 Mar 2008 06:50:31 +0000 klejnieks http://lejnieks.com/?p=13 There have been plenty of times that Ive needed to reuse the values of my enums as an array. A good example of this would be an enumeration of US states. There are many ways of doing this, however I find that writing an enumeration of static constants gives me the most flexibility and accuracy in my code.

In a recent project I had a user registration form which has a drop down component for the state you live in. Because another area of my application required that I was able to test against a users state I created an enum of the US state. Now in this form I was trying to avoid retyping all of these states into the fields data provider, besides it being tremendously tedious, it breaks the DRY principle.

I remembered from a different conversation I had with paul that there was a way to get actionscript to dump out the contents of a class into an xml list using describeType()

Using the describeType() method I was now able to get all of my constants in my class into a nice little array i could use as a data provider like this:

package com.lejnieks.poc.model.enums
{
	import flash.utils.describeType;
 
	public class USAStates
	{
		public static const ALABAMA:String = "Alabama";
		public static const ALASKA:String = "Alaska";
		public static const ARIZONA:String = "Arizona";
		public static const ARKANSAS:String = "Arkansas";
		public static const CALIFORNIA:String = "California";
		public static const COLORADO:String = "Colorado";
		public static const CONNECTICUT:String = "Connecticut";
		public static const DELAWARE:String = "Delaware";
		public static const DISTRICT_OF_COLUMBIA:String = "District Of Columbia";
		public static const FLORIDA:String = "Florida";
		public static const GEORGIA:String = "Georgia";
		public static const HAWAII:String = "Hawaii";
		public static const IDAHO:String = "Idaho";
		public static const ILLINOIS:String = "Illinois";
		public static const INDIANA:String = "Indiana";
		public static const IOWA:String = "Iowa";
		public static const KANSAS:String = "Kansas";
		public static const KENTUCKY:String = "Kentucky";
		public static const LOUISIANA:String = "Louisiana";
		public static const MAINE:String = "Maine";
		public static const MARYLAND:String = "Maryland";
		public static const MASSACHUSETTS:String = "Massachusetts";
		public static const MICHIGAN:String = "Michigan";
		public static const MINNESOTA:String = "Minnesota";
		public static const MISSISSIPPI:String = "Mississippi";
		public static const MISSOURI:String = "Missouri";
		public static const MONTANA:String = "Montana";
		public static const NEBRASKA:String = "Nebraska";
		public static const NEVADA:String = "Nevada";
		public static const NEW_HAMPSHIRE:String = "New Hampshire";
		public static const NEW_JERSEY:String = "New Jersey";
		public static const NEW_MEXICO:String = "New Mexico";
		public static const NEW_YORK:String = "New York";
		public static const NORTH_CAROLINA:String = "North Carolina";
		public static const NORTH_DAKOTA:String = "North Dakota";
		public static const OHIO:String = "Ohio";
		public static const OKLAHOMA:String = "Oklahoma";
		public static const OREGON:String = "Oregon";
		public static const PENNSYLVANIA:String = "Pennsylvania";
		public static const RHODE_ISLAND:String = "Rhode Island";
		public static const SOUTH_CAROLINA:String = "South Carolina";
		public static const SOUTH_DAKOTA:String = "South Dakota";
		public static const TENNESSEE:String = "Tennessee";
		public static const TEXAS:String = "Texas";
		public static const UTAH:String = "Utah";
		public static const VERMONT:String = "Vermont";
		public static const VIRGINIA:String = "Virginia";
		public static const WASHINGTON:String = "Washington";
		public static const WEST_VIRGINIA:String = "West Virginia";
		public static const WISCONSIN:String = "Wisconsin";
		public static const WYOMING:String = "Wyoming";
 
		public function USAStates() {}
 
		public static function toArray():Array
		{
			var states:Array = new Array();
			var classInfo:XML = describeType(USAStates);
			for each (var v:XML in classInfo..constant)
			{
				var name:String = String(v.@name);
			    	var value:String = USAStates[name];
			    	states.push(value);
			}
			states.sort();
			return states;
		}
 
	}
}

Now I can use my standard enum as an array or dataprovider like this:

<mx:ComboBox id="state" width="250" dataProvider="{USAStates.toArray()}" />
]]> http://www.lejnieks.com/2008/03/29/enum-toarray/feed/ 1 Externalizing CSS Text for Designer http://www.lejnieks.com/2008/03/29/externalizing-css-text-for-designer/ http://www.lejnieks.com/2008/03/29/externalizing-css-text-for-designer/#comments Sat, 29 Mar 2008 17:18:18 +0000 klejnieks http://lejnieks.com/?p=10 Heres a quick and easy way to separate font styles from component styles which will allow ux teams to skin fonts independent of the development team or even independent of the encapsulating component itself. This all came up from a project im involved with right now requires a high regard to pixel perfect design, which meant a lot of back and forth between the ux team. Font rendering was clearly something that needed some direct tweaking from the ux guys. while I do think i have a pretty good eye for design, they are ultimately the ones who will sign off of subpixel font grid type fitting and so on. So now my goal was to separate as much of the text formatting from the components and hopefully normalize it as best as possible as well.

The separation and normalization went pretty well and reduced my css doc by about 1200 lines, however there were still elements of font control that i could not external, mostly in components like buttons. I didnt want to have the redundancy and overhead of

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

CustomButton
{
	font-family : 	"Myriad Pro Bold";
	font-weight :	normal;
	font-style : 	normal;
	font-size :	11;
	font-sharpness : 	0;
	font-thickness : 	0;
	letter-spacing :	.1;
	font-anti-alias-type :	advanced;
	font-grid-fit-type :	subpixel;
	text-align :	center;
	color :	#ff3300;
	textRollOverColor :	#ffffff;
	textSelectedColor :	#CC0000;
	fillAlphas : 1, 1, 1, 1;
	fillColors : #ffffff, #ffffff, #0099cc, #0099cc;
}

I was looking for a way to separate the design from the code in my styles similar to how the datagrid has references to text css

1

<mx:DataGrid headerStyleName="customHeaderStyleName"

so I looked around for a way to pull the text styles out of different components so the ux group can easily styles the different fonts in the application without having to worry about the actual component. After looking around I discovered most components can override the textStyle or similar such as

1
2
3
4
5
6
7
8
9
10
11
12
13

public class CustomButton extends Button
{
	public function CustomButton()
	{
		super();
	}
 
	override protected function commitProperties():void
	{
		var textFieldStyleName:String = getStyle("buttonLabelStyleName");
		textField.styleName = textFieldStyleName;
	}
}

this works exactly as i had hoped, now the ux group can set fonts independent of the components and spend the needed time exacting their fonts.

You can see a sample below, side click for the source.
(Please open the article to see the flash file or player.)

]]> http://www.lejnieks.com/2008/03/29/externalizing-css-text-for-designer/feed/ 0 Adobe Photoshop Express http://www.lejnieks.com/2008/03/27/adobe-photoshop-express/ http://www.lejnieks.com/2008/03/27/adobe-photoshop-express/#comments Thu, 27 Mar 2008 23:43:02 +0000 klejnieks http://lejnieks.com/?p=3 Adobe Photoshop Express, a cool little flex app offering up some bare bones features picasa style. Nonetheless its a very clean interface, very well done, and just good fun to play with.
Signing up is pretty painless, you get 2gb of storage, and a custom url for your account. Signup for the beta here

]]> http://www.lejnieks.com/2008/03/27/adobe-photoshop-express/feed/ 0 Flex skinning links http://www.lejnieks.com/2008/01/29/flex-skinning-links/ http://www.lejnieks.com/2008/01/29/flex-skinning-links/#comments Tue, 29 Jan 2008 17:35:52 +0000 klejnieks http://lejnieks.com/?p=12 Just a quick list of some links for skinning in flex, programmatic, graphic, or what have you.
Ill be updating this list here and there as I consolidate more links.

http://www.adobe.com/devnet/flex/articles/flex_skins_09.html

http://examples.adobe.com/flex2/consulting/styleexp…

http://scalenine.com/blog/2007/02/17/10-ways-to-skin-an-app/

http://scalenine.com/blog

http://www.onflex.org/ted/2007/11/managing-ui-development-e…

http://blog.flexexamples.com/2007/12/06/installing-the-flex-skin-design-…

http://blog.flexexamples.com

http://www.yswfblog.com/blog/2007/12/13/yahoo-and-flex-fee…

http://www.tombray.com/2007/12/17/heres-a-tip-if-you-want-to-use-runti…

http://www.nutrixinteractive.com/blog/?p=86

http://www.spacedust.be/?p=44

http://agileui.blogspot.com/2008/01/flex-3-programmatic-skinning-gotcha.html

http://www.rictus.com/muchado/2007/10/10/stateful-skins-using-mxml/

http://www.rictus.com/muchado/2007/10/04/fillcolorscom-flex-skin-contest/

http://labs.flexcoders.nl/?p=103

http://www.websector.de/blog/2007/07/04/skinning-flex-containers-usin…

http://www.colettas.org/?p=74

http://www.rictus.com/muchado/2006/07/31/loading-flex-skins-at-runtime/

http://www.onflex.org/ted/2007/01/flex-201-understand-runtime-css.php

http://store1.adobe.com/devnet/flex/quickstart/skinning_components/

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/htm…

http://www.adobe.com/devnet/flex/design.html

http://www.onflex.org/ted/2006/08/skinning-and-theme-support-by-glenn.php

http://www.cynergysystems.com/blogs/page/andrewtrice?entry=my…

http://www.adobe.com/devnet/flex/articles/flex_skins.html

http://blog.kevinhoyt.org/2006/02/03/programmatic-skinning-with-flex-2

http://www.fillcolors.com/

http://fleksray.org/Flex_skin.html

http://flex.org/showcase/

http://mannu.livejournal.com/305284.html

http://www.flexdaddy.info/2006/02/06/how-to-skin-flex-20/

]]> http://www.lejnieks.com/2008/01/29/flex-skinning-links/feed/ 0 Talk to your view through your command http://www.lejnieks.com/2008/01/29/talk-to-your-view-through-your-command/ http://www.lejnieks.com/2008/01/29/talk-to-your-view-through-your-command/#comments Tue, 29 Jan 2008 17:30:43 +0000 klejnieks http://lejnieks.com/?p=11 Admittedly, this is something I have grappled with for quite some time now, and apparently I’m not the only one. This is by no means a hot topic but for my own purposes, and as I venture deeper into the world of “Best Practices” and the pursuit of architectural sanity I felt that this was worth a post.

I recently found the need for my command to effect a change in my view, specifically, I am loading a config file into my application, once that config has loaded I wanted to popup a login screen on the main application view. The way I have this working now I have my LoadConfigCommand request the xml config file through a delegate then respond back to the commands result handler. LoadConfigCommand’s result method needs to then popup a login window. This could easily be solved by using

1
2

     var appReference:DisplayObject = DisplayObject( Application.application );
     var popup:IFlexDisplayObject = PopUpManager.createPopUp( appReference, Login, true );

but I am not particularly partial to using Application.application references as it has gotten me into trouble a few times before. While this is a valid solution to this, it doesnt fit the needs or solve the problem of talking to my view through my command, at best this is only a bridge to my view, and as more complex problem arise in this realm this quickly becomes a brittle if not unmanageable solution.

So where does this leave me? Research. I looked around, for what others have been doing to solve this problem, and came across a few very interesting approaches. I came across Jesse Warden’s post on ViewHelpers in Cairngorm to see if I could access my views using the ViewHelpers ViewLocator. I went ahead and registered my views but when it came time to accessing the methods of my views it became apparent that I would need to cast my viewLocator with my View itself: Projects( ViewLocator.getInstance().getViewHelper(“projectsHelper”) ).doLogin(); which to me seems contrary. To use this solution I will be going against to core principals of mvc and cairngorm by introducing a reference of my view into my command, and for that matter for this example I might as well just do: Projects.doLogin() as this is essentially the same solution to this problem. Next I read about Alex’s post on creating a popup window in Cairngorm. Seems like this will work. I started reading more about it, and his usage of the Observer pattern to listent to changes in the model. Alex writes that he is setting a boolean value in his model from his command, and listening for this change through ObserveValue. Again this is a perfectly viable solution to this problem as well, however the more complex the problem becomes, and the more I need to listen to changes in my model to effect changes in my view this will quickly become a cluttered and almost unidentifiable clutter of boolean values in my model. Besides my view may need to have multiple states which surpass the simple values of True and False.

So im still stumped at this point… I message Paul over at AC to get his views on the matter and hopefully gain some knowledge on the best solution for this. My question to him was “how do I speak to a view from a command”. His logic is, well… logical. He told me that in architectural decisions if it doesn’t feel right, it inst right. Think about what the popup represents, a view state change. State change being the optimal word here. Since this is a state change and state is maintained in the model its perfectly inline to have my view listen to my model for a change that is set by my command. This is similar to Alex’s recommendation however by not using boolean values and binding the view using mx:Binding instead of ObeserveValue I am able to listen to more profound change values such as var applicationState:String = “preloading” and then wrap this bound value to a switch case that my view will decide what to do with when a change has been made. The differences between the two paths, from my view, is that Alex’s solution forces the model to maintain distinct state values for each and every change so that in the event that your single view may have 5 or 6 or more changes then you would have 5 or 6 or more corresponding state values of type boolean in your model that your views would listen to individually whereas by having a single state variable I can write in as many state changes as I need and match them on the switch case in my view.

So lets think about this a bit more abstractly. lets remove the popup example as we have many ways of achieving a solution to this. Lets think about this example: I have an image viewer / editor application, my main application view has a collapsible toolbar that is defaulted to open. The user clicks on the preview button which goes through the Cairngorm daisy chain to get to my command. once at my command I want to hide a few things and show a few things, including hiding my toolbar which at this point is no longer needed the user is now previewing. From my command, using the solution above, I have set a variable in my model var viewMode:ViewModes = ViewModes.EDITOR; which from my command I will set a from EDITOR to PLAYER so my model will now show viewMode:ViewModes = ViewModes.PLAYER. My main application view is bound to this variable using mx:Binding and is set to a setter in the same view. The setter goes through a quick switch case to determine what to do based on the value set and then reacts accordingly, in this instance it hides the toolbar.

My issue here was that I felt that there must be a way to communicate directly to the view on low levels requests, things that didnt seem logical to clutter the model with, maybe some variation of the ViewLocator might have worked in this instance to gain access to the view for such requests. Well Paul broke this down in a very logical way that to me seems like a good rule of thumb for this problem:

If there is a material change in state
If several views would need to respond
Then stick it in the model and bind currentState to the var

If its just in 1 component (for example changing the text on a submit button while waiting for a response)
If it seems just plain pernickity
Then have that logic in the view

MOST OF ALL:
design and architect and develop in such a way that allows you to change your mind

So my take on this is that, when I need to talk to my view all the way from my command, I need to:

First identify why I want to talk to my view in the first place

  • Is this something the View can handle on its own
  • Does this demand to wait for something to happen from the command
  • Is this a state change
  • Will more then one view listen to this change

Write my command’s result to set the change variable in the model
Listen to this change through Binding in the various views that will be effected by the change

And there you have it, through good clean code and a bit of organization my model will be filled with state as it well should be and my various and infinite views will listen to those states and react to the changes set by my commands.

]]> http://www.lejnieks.com/2008/01/29/talk-to-your-view-through-your-command/feed/ 0