John Lindal’s Blog

The Brick Testament

This site is worth a look: The Brick Testament

I discovered it from Dan Piraro’s blog. Regardless of whether you are a Christian or you just like LEGO, the people behind the site have clearly put in a lot of effort!

User Interface Layout Resizing

After taking a walk this evening, I’m beginning to doubt the simplicity of proportional sizing. This example is what it should achieve. But how is it possible? To make the numbers simple, assume horizontal sizing:

| 10 | 35 | 10 | 35 | 10 |

Assuming the configuration shown in the example, if each list is 35% of the resulting width, then the gutters will grow, too. If you ignore the fixed margin for each list, then the size is 35/90 = 38.8% of the width, but this doesn’t help. The only way to keep the margins the same is to place each list inside its own container, with each container taking 50% of the available width and enforcing fixed padding inside. Perhaps the example works because each list enforces its own margins, so the two items do actually take 50% each? Normally, widgets don’t do this. The example is from a specialized report builder.

So proportional sizing isn’t simple. It requires introducing layers of nested containers which serve no purpose other than anchoring enclosed objects. I shouldn’t be surprised. This happens all the time within the web browser.

Proportional clearly isn’t useless, either, but I do wonder if it’s worth the extra trouble.

Localizing User Interface Layout

Layout and Localization (l10n) have been on my mind a lot recently because these are two pieces of my company’s Big Bet on which I have been working and because the intersection of the two is an issue that I never resolved in the JX Application Framework. While taking a walk yesterday evening, I think I finally found the right answer. But first, some background…

I started real GUI programming with Think C and its class library on Mac OS 6. (My earlier games written in FORTRAN, while graphical, don’t really count ) This provided the same simple layout resizing functionality that I built into JX: fixed left, fixed right, or elastic (and the same for vertical). Back then, localization wasn’t a big deal, but since everybody was encouraged to put strings into the resource fork, it was theoretically simple, though painful in practice, to localize an application: simply replace the contents of the resource fork. I didn’t think deeply about it at the time, since I never actually localized any of my programs, but one would have to replace both the string bundles and the layouts, because the layouts contained all the labels, and the arrangement of items would have to change to accommodate changes in label length after translation.

Later, while I was transitioning to Linux and the X Window System, I heard about Galaxy. They had developed a springs-and-struts layout manager which, while I went starry eyed at its sophistication, I never really understood. It supposedly made the layout so flexible that it could automatically handle changes to label lengths due to translation. Truly an impressive feat, though now that I have analyzed the problem, it seems that it would have been quite confusing to use because of the complexity of the underlying behavior. Certainly, Java’s SpringLayout class is very complex, and I think it had the same goal.

Nowadays, I work within the web browser. This has also chosen to go down the path of algorithmic layout. The order in which the elements are listed in the HTML source provides the foundation, and CSS rules are used to control the layout algorithm: floating, absolute positioning, etc. To say that this is a mess is an understatement. Heroics are routinely required to achieve what would be quite simple in a desktop application.

This led me to the realization last night that algorithmic layout really is the wrong way to go. It may start out simple enough, and it may sound great that one layout will work for everything, but if it needs to be the foundation on which applications are built, it will eventually become unwieldy, and designers will curse its limitations.

So, back to the basics:

A designer’s drawing should be easy to translate into program data.

Start with fixed positioning.

The layout needs to expand and shrink gracefully.

Allow fixed or elastic behavior for each individual element.

The layout needs to be localized.

Create a separate layout for each locale. Help the engineers stay sane by ensuring that additions and removals affect all locales.

The layout needs to acommodate changes in font size.

The solution to this seems to beg for algorithmic layout, but I don’t think it’s necessary. OS X Finder only lets you change the font size of the file names (which is easy), not the rest of the text. Web browsers only let you change the size of the text in the page. If you want to change everything, scale all coordinates by the size of 1 em. It won’t look perfect, but for those who really need a bigger font, it will be infinitely better than squinting.

A bit of web searching revealed that Apple’s latest Interface Builder for OS X does just this. Their expand/shrink mechanism is more general than in JX, since it decouples the behavior of the left and right edges (same for top and bottom), thereby allowing proportional sizing, but it is still simple! A separate layout is created and maintained for each locale.

Coupled with the fact that fdesign only works on Linux, I’m clearly going to have to finally write Mondrian to give JX a real layout editor!

Don’t take yourself too seriously!

A colleague forwarded this site to me. Great stuff!

Waterfall 2006

My personal favorite is:

Eliminate Collaboration: Get More Done Alone

The Godfather

I think I’ve mentioned in earlier posts just how boring it is to be sick. Being in the hospital is even worse. But it gave me a chance to watch The Godfather. It was on infinite re-runs on one channel.

Terrifying movie! It must suck living in a world where you really can’t trust anybody.

I am hopelessly out of touch with film, since I tend to read books, unlike the guy I saw in an infomercial who, while hawking his book on how to get rich on real estate, proudly stated that he had read, like, maybe 5 books in his entire life. (Do textbooks count?)

Given this blissful ignorance of film, The Godfather must be a very influential film, because even I could recognize scenes that had inspired others:

The Devil’s Advocate

The sequence where Al Pacino stands in church and dips his finger into the Holy Water while Keanu Reeves listens to an endless list of crimes recited by a federal agent who is ultimately hit and killed by a car is clearly intended to parallel the sequence where Al Pacino renounced Satan at the baptism of his godson while his rivals were gunned down. Whoever wrote the sequence for The Devil’s Advocate must have been having fun.

The Fairly OddParents

Big Daddy sleeps with a horse head pillow. This must be a reference to the scene where the movie directory wakes up to find the head of his best, most expensive horse lying in his bed, as payback for refusing one of Don Corleone’s requests.

What’s New with Phil & Dixie

In response to a gambler not being able to pay, the bookie orders one of the goons to Tear up one of his Alpha Nightmares and leave the head in his bed.

Gastroenteritis

If I remember correctly, our bodies are 70% water. At 3AM Friday morning, my body decided to see how low that number could go. By the time I went to the ER at 9:30AM, it took 3 liters to get me somewhere close to normal. OK, so I should have gone sooner, but I was in such bad shape that I didn’t even realize it. Thank God my wife did.

After they stabilized me in the ER, the doctor’s statement was priceless: To be safe, we should check you in to the hospital overnight for observation. What’s your insurance? Aetna? Let me check…OK, we can check you in here. If it were Kaiser, they would want to move you, but you have good insurance.

Yeah, as if I could have tolerated moving to a different hospital. And I ended up staying there until Sunday evening. Clearly, it’s just not possible to have health insurance that is too good. Thanks, Jerry!