Thursday September 30, 2004

I wrote the guest editorial for this month's Creator newsletter. It covers a number of little tips to improve your productivity with the page designer; Read it here. Topics covered include techniques for dealing with the selection hierarchy, a way to quickly set default properties for components, and ways to deal with the snap-to-grid mode.

Wednesday September 29, 2004

One of my coworkers sent this link to me: http://madbean.com/blog/2004/17/totallygridbag.html. I found it hilarious; if you've written Swing code by hand you probably will too.

I don't want to start a flamewar here, but I really like the grid bag layout: it's the only way I can

• get components to line up the way I want them, and
• have them move and scale correctly for resizing, and
• be able to tweak component distances (12 pixels on the left, 11 on the right...)

Monday September 27, 2004

This is not going to help you in your day to day work, but.... here's how you can get to Creator's easter egg (if you're in Sun management, please look away...). Open the designer, drop an Output Text component, change its label to (exactly) "DonkeyOnTheEdge" (who can spot the movie reference?) and then double click on it. Voila!

You can use arrow up and down to speed up or slow down the scrolling list, and hit space to pause and unpause.

Hopefully nobody who participated in the 1.0 release were forgotten from the list. The easter egg code is hidden in a sneaky way inspired by some code obfuscation ideas by Peter van der Linden. I highly recommend his Just Java book. I think he has a new edition that he was signing at JavaOne right after the Creator book signing.

(2004-09-27 15:49:39.0) Permalink Comments [3]

Friday September 24, 2004

Okay this is not going to be a trip report, just thought I'd record some random impressions from the week here in France. We've been meeting various customers and component integrators. In Toulouse we had an open demo of Creator and a number of people have blogged on it: Here, here and here. (I'll blog some more on my discussion with Sylvain separately.)

It was a pretty wide-ranging demo; we showed data binding, writing a custom validator, importing a web service, dynamic navigation, value binding, and more. A couple of things didn't work at first and required some live debugging - luckily less pressure than last time . We had imported a live web service to obtain news headlines from the internet and wanted to show it in a browser, but we were doing this from behind a firewall, and had to get the event handler running in the app server to connect to the web service using a proxy. In earlier versions of Rave this required inserting a code clip in the backing file to initialize the proxy properties, so Octavian and I were searching all over for the clip and even went to the App Server administration tool to find the settings - but turns out it's no longer needed. When we simply imported the web service from the Add Web Service dialog, we could check the checkbox to use a proxy, and from there it was all automatic. Sigh. Luckily we discovered this while Craig was answering a Struts question :) The second failure happened when I had dropped a Formatted Label component on a page, without realizing it. (Octavian had selected the label component when demonstrating the context sensitive help). At runtime the page failed to deploy because that particular component requires arguments to be set. Luckily again the problem became apparent when checking the exceptions.

We hadn't planned the demo; we just winged each feature on the fly, so it wasn't as canned as it should be -- but that's the point I just wanted to make -- demos like these shouldn't really be canned; it's important to actually see real problems like this happening in demos because tracking down bugs are a real part of a developers life.

I've done demos on other people laptops. Demoing on French keyboards is a pretty interesting experience. I press "A" and a "Q" shows up on the screen etc. Takes a while getting used to. Keyboards can be switched to English layout, which worked better, as long as I didn't look at the keys!

Finally, I just thought I'd note that some initial notes for integrating JSF components with Creator are now available.

Tuesday September 21, 2004

I had a really interesting experience in the hotel this week: I got in the Elevator and there were no buttons anywhere to select my destination floor! Turns out I just followed people into the elevator; I shouldn't have done that.

The floor selector is OUTSIDE the elevator, on every floor. When you get to the elevator entrance, press the floor you want to go to. It then tells you which of the three elevator doors to use. You get in, and the elevator will go to the desired floors.

My first reaction was that this was a really bad user design; I have been trained to enter an elevator and look for the console to make sure my floor's button is selected - so this was discomforting.

But on the second trip a little while later I realized that this is a superior design! Provided of course people can get used to it - which may take a while.

Why is it superior? Because it allows the elevator controller to schedule the three elevators more optimally. That's because as soon as you arrive to the console on your floor, you tell it EXACTLY where you want to go, not just up or down. This extra information lets the elevator scheduler make better decisions since it doesn't have to wait until you get into the elevator to find out exactly where you want to go.

For example, let's say three different people arrive at the elevator on the eight floor. If they all press the down button in a regular elevator, one elevator will be dispatched to the eight floor. However, in this new system, if the three people are going to different floors and press say 1, 3 and 5, then all three elevators will be dispatched to the eight floor. And so on. I've used the elevator for a couple of days now and have totally gotten used to it and I definitely prefer it.

Monday September 20, 2004

I'm spending this week in Paris and Toulouse in France attending various meetings with customers and potential customers for Creator. We'll be doing various demos and listening to suggestions and requirements for upcoming releases.

I was hoping to work on the plane from San Francisco, but couldn't; I've finally discovered a disadvantage to my nice 17 inch Apple laptop: I can't open the screen on a plane when the guy in front of me reclines the seat as far back as it will go... And thanks to Murphy's Law of course the person in front of me went to sleep a half hour after the flight started and woke up a half hour before we landed... I saw other people with small laptops happily work through the night.... Grrrr.... On the other hand, I was able to read a book on JavaScript so I did get something useful out of those hours.

And I also did get to do some coding yesterday. After spending all morning in the beautiful Versailles, I needed to rest my legs so I did some coding in the hotel room. Rather than fix bugs I worked on a new feature. I wish I could tell you all about it, but... it's top secret!

Monday September 13, 2004

Last week I told you how to get a selection hiearchy display in Studio Creator. This week I'll show you how to inspect the rendered DOM for your web page. The feature is not very polished since it's just something I added to help me debug rendering bugs in the CSS2 layout engine, not a product level feature, but it can be useful for others too. For example, people working on JSF components get an easy way to view the HTML rendered from a component.

Here's roughly how it works: you press some modifier keys, then click on the design surface over the component you're interested in. The closest CSS2 box will be selected (shown with a red border). Various properties of that box are now shown in the property sheet. Now you can press Esc repeatedly to select the parent box and the property sheet is updated. Take a look at the screenshot fragment on the right. I have a button inside a grid panel, and I've selected the <table> box in the box hierarchy which corresponds to the grid panel component. The property sheet is showing the html element and its attributes, the component name, the rendered html (use the ... button to see it all; that's what's showing in the (mostly clipped) dialog box on the left).

For all boxes you will see the current page position (x,y), the size (width, height), the margins, the border width, etc.

You will also see the current CSS styles computed for the element. This is somewhat helpful, except it has some limitations. I have a better CSS inspector now that will find its way into the product some day...

One thing that's really useful for component authors (and was invaluable for me in proving that a bug was in a component's renderer rather than in the designer :-) is the ability to see the html rendered by a component. When you get to a box that is the "top level box" for a particular component, the "Rendered HTML" string for that component is displayed. For example, if you drop a grid panel, with a button in it, then DOM-select the button and hit Escape up to the <table> box rendered by the grid panel, you'll see that the Grid Panel has this "Rendered HTML" property value:

<?xml version="1.0" encoding="UTF-8"?>
<table id="form1:gridPanel1" style="left: 696px; top: 48px; position: absolute">
    <tbody>
        <tr>
            <td>
                <input id="form1:button1" name="form1:button1" type="submit" value="Submit"/>
            </td>
        </tr>
    </tbody>
</table>
</p>

So now I just need to tell you what the modifier keys are. In Creator 1.0, up to patch 2, press control and shift, then click. Starting with patch 3 I had to move the feature to control-alt instead, because in patch 3 control-shift is assigned to a new designer feature that I'll blog about as soon as patch 3 goes out the door!

Usual warning: this is not a supported feature, don't file bugs, etc. etc. Use at your own risk.

Wednesday September 08, 2004

My daughter Tyra had her first day of school today. She liked it. She's going to an immersion school where her teacher and most of her classmates speak Spanish, so she will soon know more Spanish than I do - which is limited to roughly (and I apologize for the likely spelling mistakes) Hola, Como Estas, Bueno, Si, and Adios. Adios!

Tuesday September 07, 2004

There's a hidden feature in Creator's page designer which lets you view the current selection "context"; it shows the series of parents for the currently selected component, and you can click on any of these to choose the parent. This is useful when you're in the middle of a nested component tree, such as within a data table for example.

The screenshot should get across the point. Various other page design tools offer a similar feature.

This is currently implemented by drawing a gray, semi transparent box on top of the bottom of the page (such that the underlying page can be seen through it), then writing out the component hierarchy, with the current selection in bold. Once the selection is cleared the hiearchy display is removed.

To check it out, run Creator with this flag:

   -J-Ddesigner.paintSelHierarchy=1

Of course, this feature is not supported and may even reboot your computer and cancel your life insurance policy. Perhaps I wasn't even supposed to let you know about it, so let's keep this between the two of us, okay?

This feature will become an official part of Creator one day, but people didn't like it cluttering the design area so it will probably show up in the tab area background instead.