Link Bag September 05 2010

Yet another post that will gather links and useful information of stuff interesting to me and probably to my readers.

General

Launching beta, or “How to decide when and where to cut corners – A great post from CodeBetter.com with a reference to Nate Kohari’s post on the same subject. A very good read if you are planning in launching a product anytime soon.

Freelancing

10 Requirements for Working with Clients in Other Countries – I work with clients in other countries all of the time, mostly in the US and Japan, I think this post is very useful if you are in the same situation, I got something out of it, you will too.

Craftsmanship in Designing Websites – I am into software craftsmanship, until I read this post I didn’t know there’s a movement towards craftsmanship in design as well. good read.

CSS

CSS: Stretch a Box to its Parent’s Bounds – From my good friend @elado, a great css technique.

GIT

I am (as you know) a huge fan of Git, I know Git is a big source of misuse and misunderstanding, I have read a couple of great posts about it recently on how to use GitK tool

use-gitk-to-understand-git.aspx – the first post in the series.

Use gitk to understand git – merge and rebase – great stuff, great screenshots (even through it comes from a windows machine :-) )

Leave the first comment

Maintain sort on a DataGrid when the dataProvider is changed

Usually, in our flex application we do have a data-grid, this component is very useful for displaying data and have a sorting, ordering of columns and more, out of the box.

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!

Leave the first comment

Memory management in flex applications

lately there is alot of buzz about flex application performance, keeping your memory low and just in general, keeping everything managed under your fingers and not just counting on the flex framework to manage your memory.

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.

One comment so far, add another

keep your mxml files neat with View Helpers

I have been working with flex and consulting about flex development for quite some time now, I guess about 3 years of consulting and 4 years of hands-on development.

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:
Screen shot 2010-08-19 at 5.26.08 PM

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:

Screen shot 2010-08-19 at 5.36.53 PM

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

Leave the first comment

Find truncated string (paths) in SQL server

I recently encountered a strange bug with a client I designed a database for

the “bug” was that the paths he entered into the database got truncated because it was too long of a string, I made the field length at 250 chars and he needed more.

the problem was he already submitted quite some data into the database and could not remember where the paths were extra long.

so, I needed to find it for him so he could re-submit those.

I scratched my head for a couple of minutes on how can I fund those truncated strings, it could be quite difficult, because it’s a path to an MP3 file, I found a way to do it with a simple T-SQL script.

what I did was to simply find all of the song-paths that did not have an “.mp3″ at the end.

this is the script

SELECT layerID, layerName, mp3FileUrl FROM appLayers
	WHERE
	(
		mp3FileUrl NOT LIKE '%.mp3'
	)

an example result
/Maximum_Basof_Nipol/Od_Paam/Acc Gtr Chorus St 2.m

One comment so far, add another