Skinning a CheckBox in Degrafa: The Missing Override

CheckBox Degrafa Skin

A CheckBox in Flex is essentially a Button with a built in icon to visually describe the checked/unchecked state. The difference however becomes obvious when skinning. If you skin the CheckBox the same way you skin a normal Button, you’ll end up changing the whole area of the CheckBox. What you actually want is to change the icon of the CheckBox. And the example here adequately describes the details of this process. The only problem is when you add a label to the CheckBox, the text will be off. This is because the icon is not registering (or is registering 0) any width or height values. After hours of investigation and debugging I found out about overriding the measuredWidth and measuredHeight properties inherited from ProgrammaticSkin. So after adding the following lines to the MXML skin the label aligned correctly:

override public function get measuredWidth():Number
{
return 14; // The desired width of the "box"
}

override public function get measuredHeight():Number
{
return 14;
// The desired height of the "box"
}

Vibrant Ink Theme in Flex Builder 3

Vibrant Ink Theme

I wanted to change the color scheme of Flex Builder to something more pleasing to the eyes. I’m used to coding with the default color scheme but I wanted to try something new and perhaps as a bonus help me code longer by reducing eye strain and conserving battery by replacing the power hungry white background.

So I started looking for a nice color scheme and found a lot of really good ones. I settled with the Vibrant Ink theme. I thought the process would be as straightforward as downloading a color scheme preferences file and importing it in Flex, similar to the theme pack in TextMate. But most of the preferences files I downloaded apparently only works with the vanilla version of Eclipse with Java, only some colors are being changed in Flex Builder producing an ugly combination of uncoordinated colors.

I ended up doing everything manually, changing each syntax element’s color in the Flex Builder Preferences window. I also needed to know the exact color of each of the elements in the theme so I inspected the source of the theme preferences file and used a handy color picker tool as well to grab the colors from screenshots of the theme.

Here are the colors for each of the syntax elements. I couldn’t find exact counterparts from the theme for some of the Flex related elements so I picked my own colors for them. You can use this as reference for your own customization. It will only take you a few minutes to change everything.

ActionScript Element Color Properties
ASDoc #772CB7
Bracket/Brace #FFFFFF
Comment #9933CC I
Default Text #FFFFFF
Keyword: class #CC7733 B, U
Keyword: function #FFCC00 B
Keyword: interface #AF912B B
Keyword: package #FFCC00 B
Keyword: trace #CC6666 B
Keyword: var #6699CC B
Metadata #66FF00 B
Operator #FFFFFF
Reserved #CC7733 B
String #CCCC33 B
CSS Element Color Properties
@font-face #FFCC00 B
@import #339999 B
@media #663333 B
Comment #9933CC
Default Text #FFFFFF
Delimiters #FFFFFF
Property Name #999966
Property Value #FFFFFF
Selector #FF6600
String #CCCC33
MXML Element Color Properties
Comment #9933CC
Component Tag #FF6600
Default Text #99CC99 I
Processing Instruction #FFFFFF
Special Tag #FFCC00
String #CCCC33
Editor Element Color
Line number foreground #787878
Current line highlight #333300
Print Margin #4C4C4C
Find Scope #191919
Selection foreground color Default
Selection background color #3399FF
Background color #1C1C1C
Foreground color #FFFFFF
Hyperlink #0000FF

Better Button Strokes in Degrafa

Better Button Strokes in Degrafa

View Sample | Source Code

Degrafa supports strokes but the output is a little disappointing. A quick solution is to apply age-old Photoshop skills. And that is to create a smaller shape enclosed inside another shape to mimic a stroke. The containing shape’s background color will serve as the artificial stroke. You also need to add 2 pixels to both the height and width if you’re going to use this approach since a real stroke is an extra 1 pixel (at least in this example) border around the button, easily take care of this inside the overriden updateDisplayList function.

The result looks smoother and more consistent than Degrafa’s built in stroke. However this approach will require more code and may consume more system resource.

The smoothness of the stroke is also affected by the chosen color. It seems that the darker the color of the stroke or if it’s a complement of the button’s color, the less smooth it appears. The size of the corner radius also affects the smoothness of the stroke. You just have to experiment to find the best combination. Thicker strokes on the other hand look alright, so I guess this example only applies to 1 pixel strokes.

Another thing I noticed with Degrafa is it sometimes renders inconsistent corner radii (see screenshot above). One corner may seem off or may not be curved at all. This can be fixed, albeit inelegantly, by using a RoundedRectangleComplex to allow setting of radii for individual corners.

Right Way to Extract Degrafa SWC in Mac OS

Degrafa Logo

Degrafa is a powerful open source graphics framework for Flex. I’m really excited to use it on my current project. But one minor issue I encountered early on is extracting the zipped Degrafa SWC file in Mac OS. When you double click on the zip file, Snow Leopard will extract the SWC from the zip and extract the contents of the SWC as well since a SWC file is essentially just a zip file with a different extension. There are at least 2 simple solutions, one is to use the terminal and run the unzip command on the Degrafa zip file to extract only the zip file and not the SWC, or change some system settings to modify Mac OS’ unzipping behavior. More details here.

How to Run TortoiseSVN in Mac OS X

TortoiseSVN is my favorite SVN tool, unfortunately it only runs in Windows. And now that I’m using a Mac, I really miss its functionality and ease of use. Yes you can run SVN in the terminal but it’s a hassle when you’re trying to access more advanced functions such as comparing differences between revisions, merging and accessing logs.

There’s a very good alternative however to TortoiseSVN called SCPlugin but unfortunately it still doesn’t work with Snow Leopard. I’ve used SCPlugin before and it’s good but I still prefer TortoiseSVN over it. So here’s the pretty obvious thing that I did to run TortoiseSVN in Mac.

I installed VirtualBox and created a Windows XP virtual machine. I then installed TortoiseSVN and used VirtualBox’s Shared Folders feature to make a folder from my Mac machine visible inside the virtual Windows XP. You must install VirtualBox Guest Additions to be able to use the Shared Folders feature.

TortoiseSVN in Mac OS X

It may be a bit of an overkill and it pretty much consumes a lot of resources but I think it’s the only way right now.  You could also run it only when using TortoiseSVN and not leave the virtual machine running in the background to save resources. And having a Windows virtual machine could come in handy as well during application testing.

Wireless Internet Connection Sharing in Ubuntu 9.10 (Karmic Koala)

WiFi

At first I couldn’t find any obvious way of making this work so I thought it was going to be another frustrating process. After a bit of research I stumbled upon this post on how easy it is to share an existing (non-WiFi) internet connection through WiFi. It was written for the Intrepid Ibex release but still works. The only thing you don’t need to do anymore is install the dnsmasq-base package since it’s already activated by default in Karmic Koala.

Installing Flash Player 10 in Ubuntu 9.10 (Karmic Koala)

Let me begin by saying that I’m not a Linux expert. I’ve worked with it several times before but never really stuck with it. But now I’m trying once more, to completely switch from Windows to Linux especially now with the latest Ubuntu release which looks very promising.

One of the least expected problems I encountered with Karmic Koala is installing Flash Player 10 plugin in Firefox. I was surprised to find out how frustrating and unstraightforward it was to perform this.

I tried several approaches like downloading the Flash Player .deb package (which I think was especially made for Ubuntu) and running it but it resulted in an error notification about certain dependencies that I still need to install, using the apt-get command to automate installation of packages which also resulted in cryptic messages about missing dependencies and name collisions, downloading an RPM and using the YUM package which also failed. All in all it took me almost an hour of research, trial and error to discover the very simple solution that worked, and here it is in 5 easy steps.

  1. Download the Flash Player plugin from http://get.adobe.com/flashplayer/ and select the .tar.gz from the package drop down selection box, nevermind the other options.
  2. Extract the content of the package using your preferred approach, either by double clicking on the package file then dragging the content to extract it or running the tar -zxvf command in the terminal. A single file, named libflashplayer.so will be extracted.
  3. You need to move this file to the /usr/lib/mozilla/plugins folder. You can’t just drag and drop it to this folder due to lack of permission, you need to perform it with super user privileges.
  4. So with Firefox closed, run the terminal and go to the folder where libflashplayer.so is located then move the file using the sudo mv libflashplayer.so /usr/lib/mozilla/plugins/ command.
  5. Now run Firefox and double check if the plugin was successfully installed by typing about:plugins in the URL bar, you should be able to find Shockwave Flash in the list.

iPhone Game Development

I recently started writing about my experience in porting Tongits (a game running on Adobe AIR) to the iPhone. So far I’ve already written two introductory posts. I’ll be regularly posting technical articles and tutorials specific to iPhone game development as I progress with the project. For those interested in how I will be pulling this off you can visit iTongits and subscribe to the feed.

Profiler Causing Debugger Problems in Flex Builder 3

I had to blog this since we encountered this issue twice already. I found the solution from BetaDesigns but we encountered a slightly different case the 2nd time that requires a different approach.

In the first case, you just need to delete a line from the mm.cfg file. If you’re using Windows XP, you’ll find the file in the C:\Documents and Settings\{your user name}\ folder. Find the line that contains the string ProfilerAgent.swf and delete it.

Different Approach

In the second case, you might not find that line from the mm.cfg file. So what we did was delete or rename the ProfilerAgent.swf file from the .metadata\.plugins\com.adobe.flash.profiler folder in your workspace.

Hope this helps.

PureMVC Program Flow Part 1 – The View

It has been a great experience so far working with PureMVC. There was quite a huge barrier for entry due to its steeper learning curve but after gaining enough practical knowledge of the framework, my team was able to quickly implement most of the UI related logic and some business logic requirements of our project while maintaining integrity of the code. Now the only thing left to do is to connect the application to the data in the backend.

In this post, I would like to discuss the general flow of an application built on top of PureMVC. This is how we understood the framework and it’s the approach we used for our application. The flow is actually pretty simple and straightforward, even obvious. We used the Multicore version of PureMVC but this discussion will focus on the Standard version.

The View

This part of your application contains the MXML components, Mediators, custom events, and maybe some Interfaces.

Ideally, you should create a separate Flex Library project for all your MXML components. In this way your UI guy can easily take ownership of that area of your project. He does not need to share any code from the other developers, he just needs to focus on one separate and independent area of the application. He practically just needs to checkout a separate folder made especially for him only.

These MXML components do not know nor care about PureMVC or any other architecture that you may have in your project. Their only concern is the user interface. They take care of input from the user by dispatching appropriate events. They also expose a minimal set of API that allows interested parties (the Mediator in PureMVC’s case) to manipulate the user interface.

One example of this API exposure is an “update” function exposed by a custom tab navigation component that requires extra UI-only processing such as transition effects, alpha, hiding, disabling etc. These extra UI related processing or logic is encapsulated inside the component’s exposed “update” function. You may also even go as far as define a standard Interface for all related MXML components to implement to make it even easier and more intuitive for interested parties to access their API.

The Mediator is the entity that connects the MXML view components to PureMVC. It has a direct reference to one or more of your MXML components. If you are expecting that one of your Mediators will be taking care of more than one MXML component, it’s good practice to standardize access to these components via a common Interface. However, this does not mean you only have to register the Mediator once, you still have to register the Mediator for each MXML component it is interested in.

The heart of PureMVC is its Notification system and a large chunk of that can be found inside Mediators. From the name itself, the Mediator “mediates” the flow of data and acts as a middle man between the View and the rest of the application. The way it does this “mediating” is through Notifications.

The Mediator listens to events dispatched by the MXML components and forwards this to the rest of the application using Notifications. Commands mapped to the Notifications will be triggered. The Commands may then perform business logic related processing such as comparing values and deciding based on those values. This will in turn update the appropriate Proxy or more succinctly, update the application’s data.

The Mediator also handles Notifications it is interested in especially those coming from the Proxy. Since the Proxy takes care of the application’s data, any change to it should also reflect on the UI. This UI update process is also accomplished through Notifications. We will discuss details of the Proxy and it’s role in the program’s flow in another post.

You can also directly access Proxies (Model) from the Mediator but I do not recommend this approach since this will tightly couple your Mediators to your Proxies. I suggest you limit the Mediator’s role to sending and handling Notifications and just leave Proxies to your Commands (Controller). We will discuss this relationship (Mediator <-> Command <-> Proxy) in detail in a later post.

Summary

Although I tried putting in everything I know so far about the framework, I’m sure I still missed a lot of essential stuff. Working with PureMVC entails continuous learning anyway so I’m sure we will be discovering more interesting things along the way.

I was planning to discuss all the aspects involved in the flow (the Model & the Controller) in this post but decided to split them into parts seeing that this post has become this long already.

So much good stuff to discuss, think in PureMVC!

Next Page »