I can speak for my applications and say that every enterprise application I have ever build had at least one or more data-Grid’s inside it.

So, what can we say about a grid that has not been said before in the past…?

I recently had a grid that I enabled sorting on it, it had a data-Provider (ArrayCollection) and I needed to preserver the sorting when the collection had changed.

the default behavior when you hookup a collection to the dataProvider property of the grid, is that when the collection changes, it will change the sorting back to default.

this is the code before the fix:

			<mx:DataGrid  width="100%"
							height="100%"
							id="dataGrid"
							dataProvider="{myHelper.widgetModel.data}"
							itemClick="myHelper.updateCustomFieldsButtonBar()"
							allowMultipleSelection="true"
							updateComplete="myHelper.gridUpdateComplete(event)">
				<mx:columns>
					<mx:DataGridColumn dataField="id" headerText="id" visible="false"/>
					<mx:DataGridColumn dataField="name" headerText="Field Name" />
					<mx:DataGridColumn dataField="description" headerText="Description" />
					<mx:DataGridColumn dataField="typeDisplayName" headerText="Type" />
					<mx:DataGridColumn dataField="entityTypes" headerText="Entity Type" />
					<mx:DataGridColumn dataField="listId" headerText="Entity Type" visible="false"/>
				</mx:columns>

			</mx:DataGrid>

this peace of code it the most important peace in the puzzle, wiring up (binding) between a model (collection) and the dataProvider

dataProvider="{myHelper.widgetModel.data}"

So, we know that this way does not work.
what do we need to do in order to save the sorting when the provider changes.

what we actually need to do is to create a view of our collection, provide it with data and wire it up to the grid

This is how we do it.

<mx:ListCollectionView list="{helper.widgetModel.data}" id="listCollectionView" />

			<mx:DataGrid  width="100%"
							height="100%"
							id="dataGrid"
							dataProvider="{listCollectionView}"
							itemClick="myHelper.updateCustomFieldsButtonBar()"
							allowMultipleSelection="true"
							updateComplete="myHelper.gridUpdateComplete(event)">
				<mx:columns>
					<mx:DataGridColumn dataField="id" headerText="id" visible="false"/>
					<mx:DataGridColumn dataField="name" headerText="Field Name" />
					<mx:DataGridColumn dataField="description" headerText="Description" />
					<mx:DataGridColumn dataField="typeDisplayName" headerText="Type" />
					<mx:DataGridColumn dataField="entityTypes" headerText="Entity Type" />
					<mx:DataGridColumn dataField="listId" headerText="Entity Type" visible="false"/>
				</mx:columns>

			</mx:DataGrid>

notice that the grid’s data provider is not the collection view.

now, when the data will change, the sorting will not change.

Good luck!

flex has a garbage collector but it’s a bit special on the way it handles memory so I thought I would layout some general rules on how to keep memory low.

first thing we need to understand is that any application we will build in our careers will be using some amount of memory, and because memory is not infinite we should keep our applications memory as low as possible.

I always say the best way to describe memory management is to “be smart” meaning, always have memory in mind, never let it go and by doing this your application will keep lean and thin all the time

by taking up too much memory you can get into allot of trouble, you can make your users hate the application because it is running slowly and making their computer run slowly. also, the application can simply crash.

I hear from programmers in my consulting that computers are getting more and more memory and you can see laptops coming with 4G of memory out of the box and so on, but actually we are also seeing a movement towards mobile devices such as mobile phones etc. these mobile devices do no allow us to use too much memory because it’s limited resource.

Memory leaks

memory leaks is a big issue in flex programming and it’s generally speaking divided into 2 parts, first when our application is using memory in parts we didn’t want it to use and the other part is when we didn’t handle the cleaning part efficiently enough.

Flash handles memory management through something called “references”, just to make things clear before we begin, the only way an object is cleaned by the garbage collector, is be not having any reference from that object to another object, that way you can make sure the object will be “picked up” by the garbage collector.

Event Listeners

Event listeners are by-far the most mis-used mis-understood part of flex applications, I have seen people/developers using those without even understanding what is actually happening behind the scenes and when (and if) those are cleaned up in memory.

I will try to explain
let’s take this peace of code

//objectX
objectY.addEventListener(some_event, some_function)

We have two objects (ObjectX, ObjectY), Object Y has a reference to a function in objectX just by passing the function, now, if your application has a reference to objectY, object X will not get cleaned because it has a reference to a function.

There is actually something called weak event listeners, by default the event listeners are “strong” meaning every event listener is a function, if you specify the event listener is “weak” then the event listener does not count as a reference.

Static Variables

Static variables are never cleaned in the entire session of a flex application, meaning if you set the variable’s value with an object, this object will never get cleaned.

If you want to make sure the object is cleaned you should null out the variable.

// static variable
public static var _foo:Foo;
//setting the value
_foo = new Foo();
//clean
_foo = null;

Dictionaries

Dictionaries are another big problem and source of misunderstanding in flex applications.

Dictionaries are key-value collections, meaning you have a collection that is built in the form of a key and a value attached to it.

You can use objects as your key and your value, for example let’s say we have two objects (ObjectX, ObjectY), you add an entry to the dictionary where ObjectX is the key and ObjectY is the value.

By default the values in dictionaries are “strong” and you can specify a “weak” key, by doing this, you can actually make sure that if nothing else has a reference to ObjectX, it will get cleaned by the garbage collection, BUT, ObjectY will not get cleaned even though the key for it got cleaned from the dictionary.

There are many questions on this issue from flex experts to adobe, those questions generally start with a WHYYYYYY????

I would also like to understand why but this is the situation and we have to deal with it, in the Flex-Show podcast Aaron says that if you iterate through the values of the dictionary, then all values that don’t have a key (it was cleaned remember?) gets cleaned immediately.

I never encountered this behavior but Aaron knows what he is talking about, so I trust him (Thanks Aaron).

Conclusion

I think those are the main three issues in flex applications, there are a few more but if you handle those three you should be fine and your application will actually be pretty lean (at least in memory management).

** this post was inspired by Aaron’s talk on the podcast, I enjoyed it so much I decided to make a post on the issue.

I have seen flex applications written in many ways, mxml files, as files, namespaces and more.

I guess there is no “right” way to do so, or at least not just one “right” way.

these past few months I have started working with mxml files in a way I think is very convenient, it keeps my mxml file very lean and clean, all of the view code is in a separate action-script file which inherits from a base class.

I want to show you this, first, this is the sample project, this is what it looks like in flash builder:

as you can see, there is the main application, an mxml component, the BaseViewHelper class and that is just about it.

now, let’s have a look at the BaseViewHelper class
note: this is a stripped down version of the class, it has many additions in my project, like a way to add validations, clean and dirty modes for the model and more, this is just to see the way I work, you can add your own additions to it.

package com.kensodev.core
{
	import mx.core.UIComponent;

	public class BaseViewHelper
	{
		private var _view:UIComponent;

		public function BaseViewHelper()
		{

		}

		public function init():void
		{

		}

		public function set view(v:UIComponent):void
		{
			_view = v;
		}

		public function get view():UIComponent
		{
			return _view;
		}
	}
}

as you can see, I kept it very simple, it has a view getter and setter to set the view it handles, it has an init function (for creation complete events).

now, let’s see an mxml component and how does the helper fits, but first let’s see a view helper which inherits from the BaseViewHelper class.

package com.kensodev.views.helpers
{
	import com.kensodev.core.BaseViewHelper;
	import com.kensodev.views.MyViewComponent;

	public class MyViewComponentHelper extends BaseViewHelper
	{
		public function MyViewComponentHelper()
		{
			super();
		}

		public function get myView():MyViewComponent
		{
			return MyViewComponent(this.view);
		}

		public override function init():void
		{
			//TODO Auto-generated method stub
			super.init();
		}

		public function myButton_clickHandler(event:MouseEvent):void
		{
			// TODO Auto-generated method stub
		}
	}
}

This is a helper file for the MyViewComponent, now, here’s the source code for implementing the helper inside each View component

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
		   width="400"
		   height="300"
		   creationComplete="helper.init()"
		   xmlns:helper="com.kensodev.views.helpers.*">

	<mx:Script>
		<![CDATA[

		]]>
	</mx:Script>

	<helper:MyViewComponentHelper view="{this}" id="helper" />

	<mx:Button id="myButton" click="helper.myButton_clickHandler(event)"

</mx:Canvas>

as you can see, the file is very clean, it has only data relevant to understand the structure of the component (which is all you need in mxml), all of the logic files “seats” behind the scenes.

there is a naming conventions for views and view helpers
its
view_name
view_nameHelper
this way, when you navigate your way through the code, you can always see what you are looking for with ease like so:

I hope you take inspiration with this way, I assure you I did, it’s a very useful way to manage large projects with many views and view helpers.

the source code of the example project is on git here.

http://github.com/KensoDev/view-helper-example

******

update:

after a discussion with @douglasknudsen I want to make things clear, this is not the ViewHelper implementation of cairngorm Mvc framework, it’s something you should (or can) write on your own just to make things organized and clean.

I am using it regardless to the MVC framework I am using which is RobotLegs B.T.W

This post, above anything else is a question and a try to spark a debate from my fellow developers and software craftsman out there.

Earlier this week I started working on a very interesting project for an international company creating test suites for devices and applications, the suite is cross platform and can run on any machine both windows and Linux and test any device, from mobile phones to DVD’s to diving sensors.

the client side is written in flex and pure AS3, the server and services are written in Java and Perl scripts.

What is my point?

My point is that this company has some pretty strong developers, all know a thing or 2 on software developement, both in Java and Flex.

Another thing, usually when I get invited to consult and develop for a company saying “we have a flex application” I do see an application but it’s horrible, un-scalable, mxml+code in the same file, services calls in mxml and more.

in this company, that wasn’t the case, the application is actually pretty solid, stable and gone over more then a couple of QA steps inside the company and clients.

You can imagine that the developers over there can contribute a thing or two to the community.

OK, so far so good, what am I saying here?

From conversations I had with the developers I found out something amazing, none of them has a twitter account, none of them has a blog and none, absolutely none contributed to an open source project, not even a line of code, not even opened a case in the WIKI.

so, what do you think?
Should all developers be active members of the community?
Should every developer have a profile and answer questions on the amazing StackOverflow.com?
Should every developer write a blog?

Love to hear your thoughts on this…

another thing, when you interview programmers, do you care about these issues?

 java.io.UnsupportedEncodingException: cp1255

After quite some time of Googling and finding nothing I remembered I changed my regional settings on the machine to use Hebrew as the locale.

This appeared to be a mistake, once I changed the locale back to English (USA) everything got back to normal and worked absolutely fine (as always)

So, the conclusion is:
when you get this error, verify that the machine you are using is set to English Locale and not other locales.

hope this saves you some time, I know I pulled more then a couple of hairs to find out what is causing this issue

I have been using the RobotLegs MVC framework for flex for about a month and a half now, I have been using MATE before that and PureMVC before that, I have never got so much out of an MVC framework, it is so flexible, so customizable (the code is on git) and helps me with my tasks all of the time.

so, why have I posted it on the blog and not just tweeted about it? well, I have tweeted about it for quite a bit, but the real reason for posting it on the blog is that I have made a new category on the blog called RobotLegs.

I plan on posting some example code for it and being involved in the community.

you can keep yourself updated through my RSS FEED.

Thanks

I have written a nifty helper function for that.

here it is:

/**
* This function will accept the text and the UI component and set the width to the width of the text
* @param text the text or label of the component
* @param container the container casted to a UIComponent
*
*/
public static function measureTextWidthAndResizeComponent(text:String, container:UIComponent):void
{
	var _measuredWidth:Number = 0;
	var  _paddingLeft:uint = 0;
	var _paddingRight:uint = 0;
	var _horizontalGap:uint = 0;
	var _addedToWidth:int;

	if(text == null)
		return;

	if(text.length <= 1)
		return;

	_paddingLeft = container.getStyle("paddingLeft");
	_paddingRight = container.getStyle("paddingRight");
	_horizontalGap = container.getStyle("horizontalGap");

	_addedToWidth = int(_horizontalGap + _paddingLeft + _paddingRight);

	var lineMetrics:TextLineMetrics = container.measureText(text);

	_measuredWidth = (lineMetrics.width + _addedToWidth);
	container.width = _measuredWidth;
}

That’s it, enjoy!

I created a static function that does exactly that

		/**
		 * copies a source object to a destination object
		 * @param sourceObject the source object
		 * @param destinationObject the destination object
		 *
		 */
		public static function copyObject(sourceObject:Object, destinationObject:Object):void
		{
			// check if the objects are not null
			if((sourceObject) && (destinationObject)) {
				try
				{
					//retrive information about the source object via XML
					var sourceInfo:XML = describeType(sourceObject);
					var objectProperty:XML;
					var propertyName:String;

					// loop through the properties
					for each(objectProperty in sourceInfo.variable)
					{
						propertyName = objectProperty.@name;
						if(sourceObject[objectProperty.@name] != null)
						{
							if(destinationObject.hasOwnProperty(objectProperty.@name)) {
								destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
							}
						}
					}
					//loop through the accessors
					for each(objectProperty in sourceInfo.accessor) {
						if(objectProperty.@access == "readwrite") {
							propertyName = objectProperty.@name;
							if(sourceObject[objectProperty.@name] != null)
							{
								if(destinationObject.hasOwnProperty(objectProperty.@name)) {
									destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
								}
							}
						}
					}
				}
				catch (err:*) {
					;
				}
			}

This function will copy everything, you can simply add an “allowedProperties” definition and make the function only copy definitions and properites which exist in your allowed definition.

like so:

private static var allowedProperties:String = "height,width,visible,styleName,x,y,alpha,visible,source,dataProvider,styleDecleration,text,label,horizontalScrollPolicy,labelField,";

		public static function copyDisplayObjectData(sourceObject:Object, destinationObject:Object):void
		{
			if((sourceObject) && (destinationObject)) {
				try
				{
					var sourceInfo:XML = describeType(sourceObject);
					var objectProperty:XML;
					var propertyName:String;
					Â
					for each(objectProperty in sourceInfo.variable)
					{
						propertyName = objectProperty.@name;
						if(allowedProperties.indexOf(propertyName) > -1)
						{
							if(sourceObject[objectProperty.@name] != null)
							{
								if(destinationObject.hasOwnProperty(objectProperty.@name)) {
									destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
								}
							}

						}
					}
					Â
					for each(objectProperty in sourceInfo.accessor) {
						if(objectProperty.@access == "readwrite") {
							propertyName = objectProperty.@name;
							if(allowedProperties.indexOf(propertyName) > -1)
							{
								if(sourceObject[objectProperty.@name] != null)
								{
									if(destinationObject.hasOwnProperty(objectProperty.@name)) {
										destinationObject[objectProperty.@name] = sourceObject[objectProperty.@name];
									}
								}
							}
						}
					}
				}
				catch (err:*) {
					;
				}
			}
		}

That’s it, tricky but absolutely can be done

While trying to configure the project in flex builder 3 (and with 4 as well) I stumbled upon a weird bug that made me scratch my head for a while.
The bug was that all of the dialogs appeared empty, no configuration, almost no buttons.

Here’s a screenshot of the problem:

Now, I remembered a teammate I had a while back had the same problem and it appeared to be a WACOM with a windows 7 driver that caused the problem so I started disabling devices one after the other.

The problem was a logitech mouse software I have installed on the pc, once I quited this application everything went back to normal.

Here’s the icon on the taskbar. (not hard to trace)

Hope this post helps you and you won’t scratch your had for hours like I did.

What does that mean?

It means you can access that application components, get the children and get a good knowledge on how this application is build, you can also access it’s component and dispatch events.

OK, how?

Let’s start doing it. we will create a simple application, put an SWFLoader on stage and create a listener for the complete event.
Lets’s also add 2 global variables, one for SystemManager, another for IUIComponent (I will explain later)

This is what the application code should look like:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import mx.core.IUIComponent;
			import mx.managers.SystemManager;

			private var _systemManager:SystemManager;
			private var _innerApplication:IUIComponent;

			protected function loader_completeHandler(event:Event):void
			{
				_systemManager = SystemManager(loader.content);
			}
		]]>
	</mx:Script>

	<mx:SWFLoader id="loader" source="VistaRemix.swf" width="800" height="600" autoLoad="true" complete="loader_completeHandler(event)"/>
</mx:Application>

As you can probably see, we are assigning a value to _systemManager when the loader (SWFLoader) finished loading, this enables us to work with that application system Manager and access properties.

Continuing…

We will add 2 Event listeners inside that function

_systemManager.addEventListener(FlexEvent.APPLICATION_COMPLETE, sysManage_ApplicationComplete_Handler);
_systemManager.addEventListener(FlexEvent.UPDATE_COMPLETE, sysManage_UpdateComplete_Handler);

Now that we have those in place, let’s add the closure functions

			private function sysManage_UpdateComplete_Handler(event:FlexEvent):void
			{
				_innerApplication = _systemManager.application;
			}

			private function sysManage_ApplicationComplete_Handler(event:FlexEvent):void
			{
				_innerApplication = _systemManager.application;
			}

Great, now _innerApplication is actually an application, you can get it’s children, get properties, get components, dispatch events and more.

This comes in very handy when you want control over an application and you don’t have the source, you can create a clone of that application and create your own GUI for it, it’s an amazing feature.

This is a screenshot of debugging mode, check out the debugger watch section, these are all methods you can use on that variable, you can of course use much more…

Good luck!

In this post I will show you how you can share a project with your team using SVN and flash buider 4.

This is my first screencast in English after quite a few in my native tongue language so please excuse me is I stutter or swallow some of my words, I promise to keep getting better with time.

Flash builder 4 – share project with your team using SVN from Avi Tzurel on Vimeo.

I have been running production machines for a client, this client request to test the WebOrb service on another port other then 2037 (default).

It’s actually quite simple to create, but not intuitive.

if you are using WebOrb from the command line, you have a setting called “port”. all you have to do is run the command with the port param and everything will work great.

like so:

c:\inetpub\wwwroot\weborb30\weborbee.exe -port 1935

Video can be downloaded (progressive download) to the client like YouTube or can be streamed to him.

I won’t discuss the pro’s & con’s of streaming and progressive, we will only be discussing streaming in this post.

So, What is the post worthy problem we have when streaming video to the client?

Continue reading and find out.
When streaming video, you usually encode your video in a certain bitrate, this bitrate will work well in certain computers and won’t work well in others.

Why is that?

That’s because each of your users has a different connection thus being capable to receive a limited amount of bytes streamed to him.

So, you always have to find the “sweet spot” where you deliver a video that looks good and also light enough to fit a wider range of network connection speeds.

That is of course a problem becuase sometimes you want to stream hiQuality video and audio (HD) and you can’t because some of your users won’t be able to watch it smoothly.

Well, this is a problem we will solve here in this post.

Flash media server introduced a new way of streaming video to the client, it is called dynamic streaming and it is very dynamic (name implies just that).

That way, you can create several encodes to the same source movie and supply a movie best fit to the user cosuming it.

Another obvious advantage of this approach is the way it skips on top of the movie, when you skip to a further point in the movie, you are actually being supplied a different movie from the lowest quality to the highest.

So, how is it done, first, let’s create a flash file (I’m using flash CS4).

Now, we will create (by dragging and dropping from the components panel) an FLVPlayback control.

We will give it the same dimensions as the movie itself so it will fill the entire surface.

Now, we will give the player an instance name of “flvPlayer”

so, we have a movie, we have an FLVPlayback control, we called it “flvPlayer”.

We will create another layer, called “action script” and we will create this code inside.

import fl.video.*;
VideoPlayer.iNCManagerClass = NCManagerDynamicStream;
flvPlayer.source = "dynamicStream.smil";

OK, so as we can see we created a pointer to a file called “dynamicStream.smil”, this is a special file (XML format).

This file details the following

• FMS Url
• files you have encoded and a network speed in correlation

The file looks like this:

<smil>
    <head>
        <meta base="rtmp://your_fms_location/vod/" />
    </head>
    <body>
	<switch>
		<video src="mp4:erets7_03_vod1_300.mp4" system-bitrate="300000"/>
		<video src="mp4:erets7_03_vod1_500.mp4" system-bitrate="500000"/>
		<video src="mp4:erets7_03_vod1_800.mp4" system-bitrate="800000"/>
        </switch>
    </body>
</smil>

Now, when we put this file on our web-server, the user will get the file it can receive and play, not slower, not faster, just the perfect file for him.

NO buffering, NO waiting, NO frustration, smooth, cool and fast user experience.

Good luck.

You can download the complete solution from here:
Source - Dynamic streaming (flash media server) (116)

lack of documentation often lead to situation when the developer consuming your component doesn’t know what are the values you expect of him to set.

Well, there’s a solution for this, Flex introduced the “Inspectable” metadata tag, you can simply set this tag above your setter and the developer will get full intellisense and be able to know what you meant.

In this simple application, I create a custom mxml component based on Canvas, I create a property called myString and created an “Inspectable” metatag.

like so:

[Bindable]
private var _myString:String;

[Inspectable (enumeration="stringValue1,stringValue2,stringValue3")]
public function set myString(val:String):void
{
_myString = val;
}

So far, it’s as simple as it can get, now, check out a screenshot of my flex builder when setting this property from outside

And that’s it, that’s how simple it is to create enumeration and ease the life on your fellow developers.

Now, if you have users working behind a firewall, they probably can’t get passed it’s restrictions and they will (in most cases) be blocked and unable to see your application / video.

If you are working on a server like WebOrb (I’m working with it) then the data will also be blocked, and that is a bug issue

Here’s a way to solve this

Well, let’s first talk a bit more about RTMP, before ditching it and moving on.

With flash media server you can use RTMP over a few ports (1935, 80), 1935 will probably always be blocked because it is not a known port and even simple routers often block it.

port 80 makes things a bit more complicated, you have to make FMS listen to a specific IP or your web-server (if on the same server) will not work.

So, first rule is always use port 80, this is one way to make more users be able to connect to your application, watch your videos and interact with your service.

The connection is being made like so:

rtmp://your_ip_address:80/app_name

DO NOT use any type of arrays of ports, simply use port 80, if the client can’t connect to RTMP on port 80, he will no be able to connect on RTMP no matter the port you are using.

So, What am I actually saying over here…?

I’m saying you should only make 1 connection attemp, this attempt is on port 80 using RTMP, this should be your first choice, if the connection is unsuccesful, you should move the connection to use RTMPT which is RTMP encapsulated over HTTP, firewalls will not block this connection becuase it makes RTMP “hide” behind HTTP traffic on port 80.

The connection is made practically the same way

rtmpt://your_ip_address:80/app_name

Why not use RTMPT at all times?

You should not use RTMPT at all times because there’s a performance issue, there is an overhead on top of each packet sent.

Why not go through all the possible ports with RTMP first, Why only 80?

In most cases, firewalls will block every port (but 80), the timeouts the user will have to go through will be very long before he will finally be redirected to RTMPT.

I will post some code on how to fallback more efficiently later on this week, this post was actually inspired from a client’s solution I did this week during a consulting session.

Good luck