Be Careful with Renderers

After we added one fancy renderer to ADG to highlight our search results in case user performed a search I noticed that vertical scrolling slowed down way too much.

After some investigation we found the culprit: in case when no search was performed the renderer filled the cells with white solid fill using beginFill() and endFill(). We substituted this to just graphics.clear() and everything was fixed. So it appears that beginFill() – endFill() is quite expensive though primitive operation. Not funny

Flex Builder: Memory Profiler Problem with Object References View

Ok, now on Flex Builder memory profiler again.

It has Object References view which is supposed to show me which objects are holding my particular one from being garbage collected.

Let’s take a look what it shows me from time to time:

It tells me “expand to see references” but there is nothing to expand. Bitches

Mate: Drinking and RIA Development

It happened almost at the same time when I introduced myself to Mate-as-beverage and Mate-as-Flex-Framework

Both things are good stimulators. When you drink Mate it is a kind of a ritual, not just like you buy a bottle of Cola and just drink it. To prepare a good Mate you need to put a piece of your soul and some good thoughts into it, not to say about technology: the water must be of a particular temperature, you should know how much Mate to put in, how to pour water into it, etc. etc. When you done it well you are relaxing, your friends are relaxing and everything is just fine, everyone enjoys a good drink. If you done it improperly people will drink it, they will tell you it’s tasty but they will think “what the fucking crap is it?” ))

The same thing with Mate framework. Proper developer armed with Mate will make the design simpler and cleaner. When applied in wrong way it can make the application heavy and hard to understand. After few monthes of sometimes hard work I have something to summarize and say on this framework, maybe this will be helpful for some readers:

• the first thing to say: coding with a framework is more productive then coding without one. This is true in general and true for Mate. If you don’t agree with this – go and code for some bananas.
• Mate provides a variety of weapons that are nicely arranged as MXML tags. After you’ve become friends with few of them you can intuitively understand all others since framework is coherent and consistent. The latest thing I think is due to the fact that Mate is writen by a very small team and the core is actually written by a single man: Nahuel Foronda.
• As it would be real damage for your body if you drink liters of Mate each day and if you don’t drink anything else the same damage will occur to your application if you use Mate here and there without a mind. I went through it and I know what I say. Do not use Mate if you can do simple things inside your single class. Do not overcomplicate the design. I mean if you can dispatch and catch some minor helper event inside the same object you should bypass Mate event maps.
• Now about drawbacks. I encountered only one real drawback but in my case very important one: if you need to generate some models/views dynamically whitin the life-period of one swf and if you need to remove such views from the display list and substitute them by fresh ones you can go into trouble. The troubles will happen if you use injectors. Though the Dependency Injection is real power allowing you brain to not control each and other step in your algorithms sequences it creates a lot of bindings which  you can not delete in case you are removing your view from a display list.  So no matter how thoroughly you clean up your models/views that you don’t want to use anymore, no matter how many variable = null assignments you will do almost everything handled by those bindings will remain in memory and not GCed.
  Though still Mate can be used in this case: just without dependency injections. You still have EventHandlers, MethodInvoker and DataCopier workhorses that can save you a lot of time.
• My next thought may sound a bit heretic but I decided to keep the rule: minimize number of injectors in your event maps. Almost everything you reference in Mate xml constructs you reference by class names, not by some ids of concrete instances. So this rule pretty implies that you need to minimize the number of classes you are referencing in your event maps.

In general: Mate should and can be used for real applications development. I am sure that each developer using this framework will serve his own unique flavor of the Mate with its own taste. And this is very right thing: we are all different so why shouldn’t we do different code :p

When I decided to use Mate in my application I didn’t know ANYTHING about it, just have read some websites with different people impressions. But I decided I will employ it anyway. Now I have a framework in my pocket but the pocket is large and there is still a lot of place

Flex Profiler Sucks

I always try to find in everything positive things but if I have a tool that is designed to help me and it doesn’t do it at all then there is nothing fuckin’ positive at all there.

So, last few weeks I was regularly using Flex profiler to profile my app memory usage. I have seen a lot of small drawbacks in profiler. For example, if I have Loitering Objects view and then clicks there on some class it opens me additional view where I can see back references to the object instance, i.e. I can see there which objects keep my particular one from being GCed. And sometimes it just doesn’t show me those back references at all though keeps the object in the Loitering Objects view. But this is bearable, such kind of things are just small bugs.

But few days ago after I optimized one use case I wanted to move further and profile other use case that is more complicated. In the run/profile modes the app goes smoothly and fast, IE which I use as a default browser eats 100-120 Mb of memory while I have 2Gb, so no problems. Untill I run the app in profile mode. Then it stucks, I see in the Task Manager that IE eats up 530 Mb and shortly after this I get pretty runtime Visual Basic exception. What the fuck?

Here is a screenshot:

I will try now in FF browser (which I don’t support for this app), maybe any luck will be there.

And a lot of hugs to the guys who implemented this profiler. I would not work with you guys or hire you, try better.

UPD:
Firefox was able to render the view in the profile mode but it took for it 813 Mb of memory. Though not much helpful since memory graph in the Flex profiler ceased to update and when I clicked to create a memory snapshot it just hanged up.

Conclusion: seems like Flex profiler is good for unckle John application which shows vegetables grown in his garden. But for real production apps it just sucks. Pitty.

Focus Management for UI Components

A very simple post, just in case if someone will have the same problem.

I’ve got a screen, actually a form with a sequence of UI components, some are standard flex components like TextArea and some are custom. One custom component was ignored while user used “Tab” key to navigate from one field of the form to another.

I wanted to fix it very fast and started with hacks like adding an event listener to the previous component’s focusOut event and calling setFocus() method of that custom component. But that was not working like it should so I went to the Adobe Help and found out a very simple and proper fix: what ever your component is, if it inherits from UIComponent you can just add an implements IFocusManagerComponent instruction and current FocusManager which deals with the focus management on the form will handle your custom component in a standard nice way:

This all works very simple when you understand that focus management in Flex seems to be design using the Composite pattern. Thanks Max for noticing this.

You can read here about the IFocus Manager component.

Cheers

Image Objects Recognition

I’ve tried to implemetn a program that can recognized separate objects on the image with a single white background. For example a text is a pretty candidate for such thing.

First version is not yet ideal but it already can be useful for making some funny animation stuff.

To give you the impression what it can do here is a screenshot that shows which “objects” it can already recognize:

Recognized objects

It merges some symbols together but I will fix it soon

Problem with Flex deeplinking in case you have multiple SWFs on one page

This is my first time I encountered a situation where guys from Adobe implemented a feature in a little bit fucked up way.

I already wrote about deeplinking in Flex after I read basic tutorials on its implementation. Then my guys have implemented this solution in the application we are now developing and everything seems worked well in local environments.

But then we deployed the stuff in the remote environments where our SWFs are included into quite complex HTML pages of one CRM system. As you already guessed deeplinking didn’t work there.

We started to search why and found a pretty nice Fx JIRA issue which tells us (jesus christ !!) that the deepliking craps in case you have more then one SWFs in your HTML page and your SWF is not the first one.

We are now in the process of finding some solution. I hope we will dind out something in the net, if not we’ll have to fuck with the History.js ourselves.

If you are reading this and you are not a guy who doesn’t care please go to that  issue and vote for it. Adobe chooses issues to fix first depending on the number of votes from community.

Will add someting new when we resolve the problem.

UPD:

Max have solved the problem in following way:
there is a getPlayer() function in the History.js file which is responsible to return needed SWF object. We have modified this function so it returns not the first SWF on the page but the SWF with the specified object ID. It is not very nice fix since needed object ID is hardcoded in the function code but for our needs it suits right. Here is the modified code (pay attention to the ie/ff stuff):

function getPlayer(id) {
//history crash with multiple swfs fix
var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;

var result = null;
if (isIE)
{
result = document.getElementById("your_unique_id_for_ie");
}else
{
result = document.getElementById("your_unique_id_for_ff");
}
if (result != null)
{
return result
}
// /fix
return document.getElementById("your_unique_id_for_ie");
if (id && document.getElementById(id)) {
var r = document.getElementById(id);
if (typeof r.SetVariable != "undefined") {
return r;
}
else {
var o = r.getElementsByTagName("object");
var e = r.getElementsByTagName("embed");
if (o.length > 0 && typeof o[0].SetVariable != "undefined") {
return o[0];
}
else if (e.length > 0 && typeof e[0].SetVariable != "undefined") {
return e[0];
}
}
}
else {
var o = document.getElementsByTagName("object");
var e = document.getElementsByTagName("embed");
if (e.length > 0 && typeof e[0].SetVariable != "undefined") {
return e[0];
}
else if (o.length > 0 && typeof o[0].SetVariable != "undefined") {
return o[0];
}
else if (o.length > 1 && typeof o[1].SetVariable != "undefined") {
return o[1];
}
}
return undefined;
}

Now about the ID:
You should specify the ID in the HTML where you embed your SWF object: your_unique_id_for_ie where ID for the object tag is specified and your_unique_id_for_ff where ID for the embed tag is specified.

Supporting browser navigation and deep-linking in Flex applications

In web-applications sometimes (if you try to do things good then always) it is needed to support browser navigation (back, forward buttons, bookmarks) and deep-linking.

This kind of requirements is not that hard to implement like it might seem. All you need to do in most of cases is to support switching to different states of your app by direct URLs. You just adds additional parameters to the URL pointing to the outer HTML page.

I’ve spent few hours yesterday to research in Flex documentation what weapons Flex provides for deep-linking. Everything appears to be very nice and elegant there.

Flex provides IBrowserManager interface and BrowserManager class which you use to handle deep-linking and communication with browser. Behind the scenes it employs History.css, History.js and some other files to work via JavaScript capabilities with different types of browsers.
Also URLUtil class will be handy. It’s equipped with methods allowing you quickly translate additional parameters you have in the URL to the object and vice verse to make it easier for you to work with those parameters.

I’ve tried to do some kind of a PoC and integrated this thing to one module of my current application and it perfectly worked with IE7 and FF3.  What we were able to see after just some 1.5 hours of work is:

- ability to go by URL directly to the details page while without deeplinking it was always needed to go first to the list page

- ability to use back and forward browser buttons. History was nicely supported.

- ability to bookmark the pages

Though, some people have impression that standard Flex framework do not nicely support deep-linking. This can have few possible explanations as I think:

• some guys started to work with Flex quite long time ago when it was Flex 2. Those times as I understood people employed HistoryManager class to get history supported. And seems it didn’t worked properly with all browsers. Now Adobe says you need only use HistoryManager with Flex 2 and normally you must use BrowserManager.
• If you run your application from the Flex Builder under IE it uses local file system URI and underlying java script works incorrectly in this case. In FF you have no troubles even with local file system URI. This problem has quite nice solution. Use as a compilation target folder for your SWFs some folder under Apache htdocs or some other simple web-server so you can access your app in IE browser via normal http URL. After this you will be able to test deeplinking features under IE.

That’s all. It proved to me that BrowserManager and related features are reliable and can be used.

If you need full overview of deep-linking in Adobe Flex implementation then go here: Deep Linking.

One particularity of flex data binding

Yesterday I’ve been reading bout data binding in Flex. There was a link to one blog where one dude described that you can save your brain from WTF exclamations and hardcore debugging if you know that data binding in Flex is a bit tricky in one case. Also he said that this “issue” is not outlined visibilly enough in Adobe Flex Documentation.

The issue is when you try to set a property of the source object to the value that is already assigned (i.e. you pass to the setter the same value again) Flex will not propagate binding and update all bound values. This is simple and seems like all flexers in my surrounding know this from the ancient times.

The most interesting thing is that this “issue” is described very clear in the Adobe Flex 3 Help. A citation from there:

The Flex compiler automatically generates an event named
propertyChange, of the type ProperyChangeEvent, for all public
properties so that the properties can be used as the
source of a data binding expression.
If the property value remains the same on a write,
Flex does not dispatch the event or update the property,
where not the same translates to the following test:
(oldValue !== value)

That means if a property contains a reference to
an object, and that reference is modified to reference
a different but equivalent object, the binding is triggered.
If the property is not modified, but
the object that it points to changes internally, the binding
is not triggered.

RefUcktoring

I should have been in the mountains today and tomorrow and should have been having fun on my snowboard but this night when time came to get up and pack my things I felt that my throat is a bit ill and decided (it was not easy) to stay at home.

What one have to do when staying at home on weekend. I prefer learning, blogging and drawing This time I chosen to write about refactoring, more precisely about my approach to refactoring.
If you’ve been boiling for some time in IT soup you should know a lot of cases when you or your team needed to refactor some complex system. You are lucky if you have the man who built up the current version of the system to do the job but in a half of cases it will be just a dream. In such cases whoever will take the task should be able to:

1. Analyze
2. Plan
3. Implement
4. Test/Debug
5. Fix/Finalize

If the person is not capable to perform any or few of the listed parts of the task – then your project is in trouble.

So, in my project the last week was very hot one since it was last week when we could increment functionality, the next few weeks period will be stabilization phase. And the customer wanted us to improve performace of one thing which required a major refactoring. Not to say that we didn’t knew earlier that the bloody thing should be refactored. We knew that but there were a lot of other tasks + speaking honestly noone wanted to do that job since the guy who initially implemented the complex module (he did this well taking into consideration requirements at that time) was no more in the crew.

But like it always happens the customer insisted and there were no choices but to roll up the sleaves and quickly do the job. I estimated it roughly to 5 man/days.

My programming experience is not that much but I had few times before to lead some difficult refactoring as a manager. And each time I applied the same tehnique which always proves to be good:

1. Analyze
2. Plan
3. Implement
4. Test/Debug
5. Fix/Finalize

For points 1 and 2 you need anything where you can draw some simple diagrams. I use a kind of mind-mapping diagram where I try to desribe at the first level basic tasks definitions, then as the branches everything I know about the problem (but only needed things) and points where I need to research, then on the next levels concrete tasks that I need to implement to get the thing done. This is a very good materialization of the analizys process. All tasks that I need to implement I mark in a red font to have them sharply visible. It looks like this:

I always keep there only needed info, names of the classes, code snippets, etc.
When I feel the analysis is completed I start the point 3: implementation going from top to the bottom of the diagram. When a particular red leaf is done I mark it with green background. I do some small tests after each step and when all is green I start testing and fixing small things that always definitely shows around.

I completed the task in 12 hours almost without any breaks, even missed my lunch. It was interesting and it works
What I actually implemented is incremental loading of data and its caching. Now I know how any abstract caching is done technically. Think this will be useful in future. Big thanks to Max Hryniv who’s code teaches me a lot.
Also I’m not sure that this technique is suitable for everyone. I saw a lot of times when guys skip steps 1 and 2 and start right from the step 3. But almost always it results in UNDERestimation and troubles.