By popular demand I added a few key codes to Pong to support AZERTY (French, Belgian) and Dvorak layouts. With the original support of QWERTY and QWERTZ (Germany and Central Europe) we covered most Latin keyboards, I hope. Let me know if some more is needed.

Also twisted the LEDs/indicators at the top. If someone hasn’t figured it out yet, they are (surprise!) indicating the key presses of the players and the bouncing of the ball on the racket. The current layout is more consistent with the movement.

Added an extra link to this blog on the intro screen because I had the passing feeling few have figured out that clicking on the company name in the lower right corner takes you here.

You can take a look at the application here and download the source code in the Morfik Labs.

I owe you with an article on AnalogClock internals, but today we are in for a quick tip.

What I wanted to do is: create a hover effect (i.e. the entire row is highlighted when the mouse is over) for continuous forms.

First I put a Container on the continuous form and placed all the other text controls and checkboxes and others on the Container (since the Detail does not have OnMouseOver/Out events), then set up the Container for OnMouseOver and OnMouseOut. It fundamentally worked, but the hovering effect was slooow and sometimes did not even register on some of the lines (depending on how fast I moved the mouse pointer).

I though the issue was related to the way the controls contained by Container bubble these events to Container. So I simply set the OnMouseOver/Out event handlers for all controls to the same event handlers and bingo! now it works properly. The exact code sample is below:

Procedure TestForm.InfoContainerMouseOut(Event: TDOMEvent);
Begin
  SwitchBandIndex( Event );
  InfoContainer.DOMStyle.backgroundColor := 'White';
End;

Procedure TestForm.InfoContainerMouseOver(Event: TDOMEvent);
Begin
  SwitchBandIndex( Event );
  InfoContainer.DOMStyle.backgroundColor := 'LightBlue';
End;

Now there are two more items I have to explain:

• SwitchBandIndex() will do some magic for continuous forms, making sure that by using controls like InfoContainer you will access the right instance of that control (since there are as many instances, as many bands/lines in your continuous forms are);
• DOMStyle is another magic property of all controls through which you can access and manipulate the style of the underlying HTML control: here I set the backgrtound color of the InfoContainer (for the technically more inclined: it is a DIV deep inside).

That’s it. Clean and simple. Now if we could manipulate the :hover pseudo-class easily…

I have just finished a new sample Morfik application that contains a lot of interesting stuff including custom controls, browser independent vector graphics, and more. I plan to write a detailed entry about the internal workings in the coming days.

Until then the very short summary:

• it was surprisingly easy to create the custom control (the clock itself): it took a few hours without knowing anything about the new Adapter architecture in Morfik;
• there is no single standard for vector graphics on all browsers, or there is (SVG), but Internet Explorer does not support it (instead it does VML) — so I created a rendering engine that sits above these and provides a browser independent way of doing vector graphics (it should work in recent versions of IE, Firefox, Netscape, Safari, Opera, and other Gecko 1.8+ based browsers).

You can take a look at the application here and download the source code in the Morfik Labs.

To Be Continued…