Saturday, October 15, 2011

Creating a Flex AIR text editor: Part 5

Today I will tell you how to fix an annoying height bug in Flex for your text editor.

There is this frustrating bug (or a feature? a very annoying feature, in that case) which basically lies about the height of the movie the first time you ask about it. If you try returning the height of the Flex application using 'height' property in the beginning of your code, you will get a value of, lets say, 600. Then, if you manually resize the window using mouse by just 1 pixel (doesn't matter which way) and turn it 1 pixel back, to the initial position, you will see that if you check the height now, it will return a value of 580.

I still don't know why Flex decides to magically substract whole 20 pixels from the initial height. Or, rather, why does it ADD these extra 20 pixels in the beginning. Might be something with the native windows, might be something with the text area being sized to 100% and 100%, I don't know. After some time of rage, I have finally come up with a fix for this.

Let me warn you however, that the fix I am going to provide is rather hacky, however, doesn't eat up performance at all and doesn't take a lot of lines.

I noticed, that the height value returns to normal after the first resize. However, after several tests, I discovered that it does not return exactly after the first resize, but rather, there is a period of time (probably less than a second) in which the height returns to its normal value. I added an Event listener for the ENTER_FRAME event, and there I will perform a check - I will, every frame, attempt to change the height of the window, until the height actually changes (it doesn't work the first time, why? mystery!).

Basically, here are the variables that are used for this fix:

private var initHeight:Number;
private var heightFixed:Boolean = false;

Here's the code in the init() function:

// Create a listener for every frame
addEventListener(Event.ENTER_FRAME, everyFrame);

// Set initHeight to the initial height value on start
initHeight = height;

And here's the code in the everyFrame function:

private function everyFrame(evt:Event):void {
if (!heightFixed && height==initHeight) {
height = initHeight - 20;
if (height != initHeight) {
heightFixed = true;

This process is visually seamless to the user - there are no movements or weird effects, and it works.

The reason this bug was so annoying to me, is because it was holding me off from moving forward with the development of the application. The first thing that it messed up is the status bar - it was shifted like 20 pixels too close to the bottom, making it almost invisible. The second thing is the horizontal scroll bar, that (if word wrapping is off at start) didn't appear at start, and if you write lots of text without resizing, you'll see that there will be no horizontal scroll bar for you to scroll through your text.

This bug probably doesn't happen JUST to me, so this tutorial should be helpful for anyone having the same problems that I had, regardless if they are following my text-editor tutorials or just making their own, completely unrelated application and just happened to stumble upon this issue.

We will continue developing our text editor in the next part.

Thanks for reading!

No comments:

Post a Comment