Working around a IE6 bug ... only to create new problems

Today, I ran into a bug that was mainly caused by trying to escape other bugs.
The IE6 bug I ran into seems to be an undocumented one, but it is possible that the lack of proper description caused me not to find it on the net. Here it is: when
applying a relative position and a filter image on a table cell (th or td), the onhover functionality of included cells doen't work anymore.
It costed me some time to discover this one, but the main question was: why the hell
would you apply a relative position to a table cell?
Well, that was to escape the problem that on IE6, setting the border-spacing to 0 in CSS is not supported there. Thanks to vacskamati,
a hack was exposed to solved this, exploiting bugs in IE6. But unfortunately, it also sets the position to relative...

Vertical scrollbar problems in IE6

The real story of the scrollbar width problem in IE6 is easier circumvented than I thought.
This is the actual problem: when declaring an inner box inside a scrollarea having a width of 100%,
the inner box takes over the width of the scrollarea, and the scrollarea gets bigger with the width
of the scrollbar. I guess it's the IE6 box problem revisited, although I was taught that it only happened
in quircks mode, so I never actually bothered about it..

220 px ruler

Here, the width is not as expected in IE6
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

This is a solution I found on the net, but it is not satisfying for me: part of the content is also
hidden by the scrollbar, and it also assumes the scrolbar width is exactly 16px.

220 px ruler

Here, part of the content is hidden in IE6.
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5  6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

Of course, we could remediate that by having another box inside like below, but that means
inserting extra HTML code only to fix this item...

220 px ruler

Here, no content is hidden in IE6.
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

But the simplest solution is not use a width of 100%: the content seems to scale automatically
to the right width.

220 px ruler

This is the best solution.
1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0  1  2  3  4  5  6  7  8  9  0

New device, new inspiration

Tuesday, I bought a new device: a Mio Moov 510 GPS device. As usual, it took me quite some time to come to a decision, as I want to spend as less as possible and have as much functionality as possible. The reason I realized I needed a route planner after all is the usual annoyances when I'm driving and my wife needs to read the map. Last year, I borrowed a GPS enabled Mio PDA to drive to my holiday destination, and that was such a good experience that we decided we should never go on holidays without one anymore. And now with hew holidays to be planned, I had to made a decision on what to buy. As my wife needed a new mobile phone, I first tried to see if we could get a device that would do both. Choices seemed quite limited: I found one PDA device from Mio that had both functionalities, but the price including navigation software was about double the price of a standalone gps module, and the damn thing didn't have Wifi. Other choices included an Android phone, but the only turn by turn navigation system there is based on openStreetMap, but I didn't want to take the risk to use that a only database for driving around on my holidays. (Professionally, I would care less ;)). IPhone also fell off as there were only vague plans from TomTom on supporting the device, and the pricing would be too high anyway. So I decided to go for the Mio 510, and buy a low budget Bluetooth receiver so I could play with it from J2ME on my current mobile phone (Nokia 6300).

So I bought the Mio, and started to explore the stuff a bit. It turned out
that the Mio can store logs, which can be interpreted by the open source application GPSBabel, and thus allows me to export my tracks to google earth. As it also exports to gpx, chances are that I can use it to geotag my pictures too, which was the first case I wanted to do on my mobile!

So I am currently investigating how to get the Mio to store enough data for two weeks holidays, as the logs seem to grow very rapidly. I should try to get some statistics some day...

This is what currently is in the gpslog.ini file:

[GPS logging]
enabled = 1
maxfiles = 10
rotate = 1
maxfilesize = 2097152
location = \My Documents\


First thing I am trying now is to change the data location to store the data on the SD disk, as the space on the device is surely too limited to store this amount of data. I tried \Storage Card\, but that didn't seem to work. I found on gpspassion that the name of the folder is apparently in the registry, but I got no idea how to get there. Searches on the net also gave no results. So next thing I will probably try is to unlock the device using the informations on gpspassion.

Another problem I discovered is the short battery life: the device only has a 700mAh battery, which according the the manufacturer gives you 2,5 hours. I also have the feeling that this is rather exaggerated. Probably I should try to hook up extra NiMh batteries, since 4.8 volts is actually enough to drive the USB port. (USB specs claim 4.75 to 5.25 volts) Using2900mAh batteries should get me up and running for 5 times the current duration... Another track to investigate is solar panels, but I think I will be hard to found something that delivers (700 /2.5) 280mA * 5V. Probably, this problem is even more urgent than the previous one, as we were also planning to use the device on bike/walking trips...

Next thing to find out is an application to change the exif data inside my pictures...

Internet explorer 6 AND 7

Yes, it is possible to install both: solution from tredosoft
Now that I know this, I can starting our application as well on IE6 as IE7 too, as I already heard there are some problems with IE7. More topics on this will folow shortly!

Maintainable CSS

For the project I'm currently doing, I need some IE hacks in my CSS stylesheets.
Up to now, I've been using the following approach: I have one base.css, which includes a layout.css, a color.css and a typography.css. This approach seems to be working well until now, but my css code is getting dirty by the various CSS hacks I've been applying to get IE6 to do whatI want it to do.

So now I'm thinking to split off all the IE6 anomalies in a separate baseIE.css, using the conditional include in the html file:

<!--[if IE.xx]>
<link rel="stylesheet" type="text/css" media="screen" href="/css/IEstylesheet.css">
<![endif]-->

This way, base.css will be much clearer, and the whole code will be easier to maintain.

Scrollable part above fixed part in html container

As a follow-up of the previous post, I also want to publish a solution for the next situation: what if there is no fixed part above the scrollable part? Problem here is that setting top undoes setting the bottom in IE.
So we have to make sure that the top is not set in IE6 (using ones of the infamous CSS hacks):

html>body .content{
/* this part is moved out of the common part,
and will only be taken into account if the browser is not IE6 */
top: 0;
}


Now we still have to make that the height is correct in IE6, as the height is set to auto by default:

height: expression((offsetHeight +offsetTop)+'px');

The problem is that we can't retrieve the bottom from javascript,
so we have to rely on the fact that the height is set automatically, and the top will be set accordingly. We want the following: newHeight = parentHeight - bottomOffset, while bottomOffset = parentHeight -topOffset.

Non-scrollable pages with fixed header/footer in CSS

I had a lot of trouble creating pages that don't have scrolling pages when the data on them gets too large. However, I think that it's an important asset if you're creating web applications: an application should always have all its functionality visible on loading (without having to scroll down). (I often refer to this as the dashboard feeling.).

This is how I did it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style>
body, html{
height:100%;
margin: 0px;
position:relative;
}
.content{
top: 10em;
/*next line is here because IE6 ignores bottom when top is defined.
The line itself will be ignored by other browsers */
/*take care because the value for the bottom offset is calculated in function
of the top, because we want to be dependent on em units */
height:expression(offsetParent.offsetHeight - offsetTop*2 + 'px');
bottom: 10em;
width:40%;
position:absolute;
background-color:red;
}

</style>
</head>
<body style="background-color:yellow">
<div class="content">
test
</div>
</body>
</html>


Note the tricks I had to do for getting the thing working in IE6: since top and bottom are not working correctly together (see bug report on quirksmode), I had to use expression here, which introduces sone javascript in the css. Also important: the header and footer have fixed heights defined as em, so if the user chooses the increase/decreaase fonts, the header/footer scales along.

My Flex and Maven experiments

Trying to mavenize the as3mock project last days, as I need for a customer. However, flexmojos seems to be in some intermediate state now, meaning documentation is quite fuzzy now.
However, I got the archetype for libraries working using the following sequence:

• mvn archetype:generate -DarchetypeRepository=http://repository.sonatype.org/content/groups/public -DarchetypeGroupId=org.sonatype.flexmojos -DarchetypeArtifactId=flexmojos-archetypes-library -DarchetypeVersion=3.1.0

  That is similar to the explanation on the flexmojo wiki, but with changed version number.


• applied the changes as described on Carsten Schlipf's blog.


• if you want to run the tests, you should also make sure that flashplayer is in the path

Testing flash eventListeners

In a previous project, we had a lot of trouble in testing eventListeners: we used the asynchronous test features of flexunit, but that made the code very hard to read, and slow to execute. As an example: how do you know that an event hasn’t been fired? The only way to do that is through some reasonably timeout, but that comes with a price. Another thing is you have start using inline functions, which again obfuscates the code even more.
So how are we going to test then, if we’re not going to use asynchronous functions?
Let’s split the problem in two: validating if the object responds as wished to incoming events, and firing an event.
Let’s start with the last one:

Testing if an event has been fired by your application

The trick here is to use good coding practices on your object: since event dispatching is not the core functionality of your class anyway, you’re class should delegate this to a helper. Instead of extending your object from EventDispatcher or implementing IEventDispatcher, you should pass this IEventDispatcher from outside the code, whether through the constructor, or through some setter. That way, you can pass a test double (stub/fake/mock) as IEventDispatcher to the class, and so you can test if it has been called correctly with using asynchronous code.
However, there is a small caveat: upon receiving the Event, the target and currentTarget are no longer referring to your class, but to the IEventDispatcher you sent. If this is unwished behavior, there are two things you can do: create a subclass of Event that allows you to pass in the target, or create your own EventDispatcher that delegates its calls back to the original object that implement IEventDispatcher in some way or another.

package {
import flash.events.Event;
import flash.events.IEventDispatcher;
public class ClassThatDispatchesEvents {
private var eventDispatcher:IEventDispatcher;
public function ClassThatDispatchesEvents(eventDispatcher:IEventDispatcher) {
....
this.eventDispatcher = eventDispatcher;
}

....
eventDispatcher.dispatchEvent(new Event("test"));
....

}
}


Testing if your class responds to an incoming event

Again, the trick here is delegation: instead of subscribing your class yourself to the events, again pass an IEventDispatcher to the constructor. Instead of adding the eventListeners directly to you class, add them to the IEventDispatcher instead. In the test double (stub/fake/mock) implementation of the eventDispatcher, you have access to the the function that was subscribed to the event , and it can be called synchronously. Et voila, your listeners are tested synchronously, while it’s still possible to have them declared as private. I'm also planning to publish a helper class for this purpose somewhere...

Flex 3 profiling without FlexBuilder Pro

Although you can't use the profiler UI from FlexBuilder if you have no professional license, you can get some profiler stuff working if you do the following:

• find the ProfilerAgent.swf file in the .metadata\.plugins\com.adobe.flash.profiler folder of your eclipse workspace.


• edit/create mm.cfg (to be found/created in %USERPROFILE% on win xp), and add the following line:
  PreloadSwf=\ProfilerAgent.swf?host=localhost&port=9999, where you replace the with the actual path found in the previous step.
  

From now on, you can start to use things from the flash.sampler library (included with FlexBuilder), and call inspection methods like getSize, startSampling etc. (see Flex help) if you start your application in debug mode...

By the way: the original post that helped me out is to be found here: http://arielsommeria.com/blog/?p=48