Napkin skins, stage two: programmatic skins

We can build on stage one by using programmatic skins (click on the screenshot to see the app):

There were no significant changes to the MXML file: the only change is the reference to the CSS stylesheet. Looking at scrawl3.css (when you select View Source in the app's context menu), we see that the changes to the stylesheet are limited to styles that are specified as ClassReferences, for example:

    track-skin: ClassReference('skins.scrawl.ScrollTrackSkin');

These are references to programmatic skins written in ActionScript, which you can find in the source tree under skins.scrawl. The simplest one, ScrollTrackSkin.as, specifies the skin for the ScrollBar's track (but not for the thumb or the arrow). The drawing happens in the overridden method updateDisplayList() and, aside from a drawing a simple border around the track, does only one interesting thing:

    // fill with zero alpha: if no fill, mouse events are not recognized
    drawRoundRect(1, 1, w-2, h-2, 0, 0x000000, 0.0);

I found that, without this line, clicking on the track does not move the ScrollBar thumb to the location of the click -- the mouse event is ignored, presumably because it doesn't hit any area drawn by the track skin. My solution for that was to add an invisible background for the track. I have also used this solution in my other programmatic skins, but I am not sure that this is the "recommended" way to address this issue.

Another simple programmatic skin is ScrollArrowSkin.as. Someone with a different balance of graphical vs. coding skills would have probably created this as a graphical skin. For me, this was the simplest way to go. One advantage of using the programmatic skin is that you can make slight variations for up-/over-/down-skins within the same skin class. In this case, I have used conditions on the skin's name to determine the color and direction of the arrow, which allowed me to use the same skin class for all ScrollBar arrow skins:

    down-arrow-down-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
    down-arrow-over-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
    down-arrow-up-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
    ...
    up-arrow-down-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
    up-arrow-over-skin: ClassReference('skins.scrawl.ScrollArrowSkin');
    up-arrow-up-skin: ClassReference('skins.scrawl.ScrollArrowSkin'); 

Programmatic skins also allow for some nifty tricks. The code in ComboBoxSkin.as that draws the border of the ComboBox uses Math.random() to draw it differently every time:

    g.moveTo(Math.random() * borderThickness, Math.random() * borderThickness);
    g.lineTo(w - (Math.random() * borderThickness), Math.random() * borderThickness);
    g.moveTo(w - (Math.random() * borderThickness), Math.random() * borderThickness);
    g.lineTo(w - (Math.random() * borderThickness), h - (Math.random() * borderThickness));
    ...

This helps give the ComboBox that ragged scrawled-on-a-napkin look: the border is different for the up-, over- and down-skins. If you play with the box dividers, you'll see that the ComboBox redraws itself with a slightly different border, even for the same skin. A similar principle is at work for the DataGrid's border (in ScrawlBorder.as), as well as for the cross-hatch pattern for the ScrollBar thumb skin (ScrollThumbSkin.drawCrossHatch()) and the ComboBox's down-skin (ScrawlUtil.drawCrossHatch() in the util package):

    // draw \\\\\\\\
    for(i = -h; i < w; i += 6)
    {
      vstart = Math.max(-i, 0);
      vdistance = Math.min(h, w - i);
      vstartOffset = vstart + 3 - (6 * Math.random());         
      g.moveTo(i + vstartOffset, vstartOffset);
      g.lineTo(i + vdistance, vdistance + 2 - (4 * Math.random()));
    }

    // draw ////////
    for(i = 0; i < w + h; i += 6)
    {
      vstart = Math.max(i - w, 0);
      vdistance = Math.min(h, i);
      vstartOffset = vstart + 3 - (6 * Math.random());
      g.moveTo(i - vstartOffset, vstartOffset);
      g.lineTo(i - vdistance, vdistance + 2 - (4 * Math.random()));
    }

Once again, programmatic skins allow us to call this code only for the ComboBox's down-skin while reusing the same class for all three skins:

    down-skin: ClassReference('skins.scrawl.ComboBoxSkin');
    over-skin: ClassReference('skins.scrawl.ComboBoxSkin');
    up-skin: ClassReference('skins.scrawl.ComboBoxSkin');

As one final touch, the DataGrid's border looks like it was drawn with a marker, with varying pressure on the marker producing color variations along the way. This effect is accomplished by specifying the following gradient type in ScrawlBorder.updateDisplayList():

    g.lineGradientStyle(GradientType.LINEAR, [borderColor, borderColor], [1.0, 0.5], [0, 255],
                        null, SpreadMethod.REFLECT);