Mac Terminal Themes

I recently upgraded the view on my terminal to be something more readable than anything that comes with OSX. However, I don't really like the red color that comes with that theme -- I feel like its more of a salmon color, and I want something really RED for my red. Anyway, I changed the color using the Terminal preferences, no problem. But every time I restarted the terminal my color scheme would reset to the colors that came with IR_Black. The problem is there is no way to edit a color theme for Terminal, so all changes are temporary unless you create a new color theme. The solution: make all the color changes you want to your theme, then use the options menu to "Duplicate Settings" and make a new color theme. Its kind of a pain to have to create a whole new color theme every time you want to tweak, but it works.

Skinning in Degrafa

I know, I'm way behind the times, but I had my first experience skinning in Degrafa on a project last week. My perception of Degrafa previously was that it was a nice framework to give you markup for skinning, but doesn't really add anything over the Flex drawing API. This is partially true -- Degrafa doesn't do anything you can't do on your own with the graphics package. However, in true component programming spirit, they've abstracted the graphics package to the point that its almost stupid-easy to use. For very simple tasks it might not be worth bringing in Degrafa. For example, on this project I needed to skin a radio button to be pill shaped. I could have used Degrafa, but with the drawing API this is all the code I needed (in a skin class):

protected override function updateDisplayList(w:Number, h:Number):void{
   super.updateDisplayList(w, h);
   graphics.clear();
   if(name == "upSkin"){
      graphics.beginFill(UP_COLOR);
      graphics.lineStyle(1,UP_COLOR);
   } else {
      graphics.beginFill(DOWN_COLOR);
      graphics.lineStyle(1,DOWN_COLOR);
   }
 
   graphics.drawCircle(w - h/2, h/2, h/2);
   graphics.drawCircle(h/2, h/2, h/2);
   graphics.endFill();
   if(name == "upSkin"){
      graphics.beginFill(UP_COLOR);
      graphics.lineStyle(1,UP_COLOR);
   } else {
      graphics.beginFill(DOWN_COLOR);
      graphics.lineStyle(1,DOWN_COLOR);
   }
   graphics.drawRect(h/2, 0, w - h, h);
   graphics.endFill();
}

Not bad -- forget the repeated if statement and its only 13 lines of code. But later in the project I needed to put a gradient in the background of several components. I could have used the drawing API and a skin to accomplish this, or I could just add this inside the components MXML:

<degrafa:Surface height="100%" width="100%">
 <degrafa:fills>
  <degrafa:LinearGradientFill id="backgroundFill" angle="90">
   <degrafa:GradientStop alpha="1" color="0x555555" ratio="0"/>        
   <degrafa:GradientStop alpha="1" color="0x787878" ratio="0.2"/>
  </degrafa:LinearGradientFill>
 </degrafa:fills>
 <degrafa:GeometryGroup>
  <degrafa:RegularRectangle height="{height}" width="{width}" fill="{backgroundFill}"/>
 </degrafa:GeometryGroup>
</degrafa:Surface>

I prefer this way. Not only is it less code, but its easier to think about. And, in my opinion, that's what OO and component programming are all about: tackle a difficult task on the scale where its a simple task and create an abstraction so that the complex task becomes a series of easy tasks. Degrafa went down into the drawing API where each task is (relatively) easy and built up a framework so that we can do complex tasks as a series of completely intuitive easy tasks. Degrafa can also be used to make skin classes (as opposed to putting the Degrafa right in the component layout like I did in this case) and works great with CSS. They have tons of examples with source on their site and you can also get the SWC there.