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 )

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

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

the hosts file is a file that controls the routing to websites, both localhost and other websites, for example, I can say that whenever I enter http://www.kensodev.com in the browser, the address is then traced back to 127.0.0.1 instead of going to the DNS server and lookup the address there.

this is a very efficient way to do testing to websites, so you don’t have to use localhost or everything.

for example, I always use a local prefix to a website to identify it’s on my machine.

http://local.kensodev.com will be the local version of this website and so on and so forth.

there are many cases where you might want to edit the hosts file, in mac it’s not that intuitive to find it like in windows so here’s a quick tip

(I am using textmate bug you can use whatever you want)

to edit the file simply enter this command into the terminal

sudo mate /private/etc/hosts

You will then be prompted to enter a password and after you edit the file and press save, you will have to enter the password again.

This is it, that is how you edit the hosts file on the mac

CSS

CSS sprites workflow – Chris coyier posted a very useful tip about the workflow of creating a website when you plan to use sprite css, he suggests a two-step process.

Freelancing

Are You Giving Back to Your Community? – FreelanceSwitch with another great post, I actually posted on a very similar subject here “should all developer be (active) members in the virtual community”

The real secret to freelance success – this post talks about why freelances (some) fail and some experience great success.

9 productivity techniques for freelancers –  as a freelancer I always look for ways to be more productive, I found this post very useful for me.

Ruby on rails

Mongomatic – (from the website) Mongomatic is a Ruby library that lets you easily model your MongoDB documents in your applications.

That’s it (short) for the first link bag, another one is coming in about a week, be sure to keep yourself up to date though the RSS feed (link on the right)

The category will be called “link bag” and I will post new things to it on a weekly basis hopefully.

The links will vary from technology links to freelancing tips, everything that is an interest to me and hopefully for the readers of this blog as well.

You can keep yourself up to date though the RSS Feed or come back later this week.

Thanks

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

Well, me being an enthusiastic flex developer is no secret, nor me being a GIT fan-boy.

I thought it will be helpful to post my template for the gitignore files in all repositories containing flex projects

this is how it looks like

.DS_Store
.actionScriptProperties
.flexProperties
.project
.settings/*
bin-debug/*

The reason I’m ignoring all the settings files and the properties files is because all of these are environment specific, often not all developers on the team use the same settings and properties and that can break the entire working process.

On other browsers, everything seemed fine and the overlay was in the correct opacity.

This bug is very easy to fix.

this was my code before:

	$('.guestboox_more').colorbox({
		inline:true,
		href:'.guestbook_more_details',
		innerWidth:'610px',
		opacity: '.2',
		transition: 'elastic'
	});

And this is the code after (this fixed the problem)

	$('.guestboox_more').colorbox({
		inline:true,
		href:'.guestbook_more_details',
		innerWidth:'610px',
		opacity: '0.2',
		transition: 'elastic'
	});

The problem was only that IE7 didn’t recognizance .2 as 0.2 and needed to be more specific (as often IE needs).
I hope this will save you some time.

for quite some time now I have been developing and consulting on flash media server advanced topics, I have been teaching students and consulting companies on issues regarding this great peace of software.

Adobe seemed vert silent about this product for some time, not publishing any new materials what so ever, so it was very nice to see this link, I read it and it has some good observations and very well written instructions on how to harden your server.

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!