BetaDesigns( Blog ).toString( );

In the previous post we began building our custom Spark colorPicker by creating the preview class and it's corresponding default skin.
In this post we will begin by creating a KeyboardManager class that will allow us to calculate the new index in the dataProvider after a Up/Down/Left/Right keyboard input.

This class can become quite complicated because we want the following behaviour from our keyboard manager.
The selected index should be able to move up past the top of the dataProvider and move to the bottom row and vice versa, in addition we should be able to go off the left hand side of the columns and appear on the right hand side and vice versa.

For example if the dataProvider has 25 items and each row contains 5 columns.

Up / Down Examples.
If we are at column 1 row 1 ( box 1 ) and we press up we should go to column 1 row 5( box 2 ) and then for every key press we should move up the column until we hit the row 1 column 1 index again. However if we press down then we should go to column 1 row 2 and so forth until we hit column 1 row 5 ( box 2 ). Then when we press down again we should move to the top of the column again row 1 column 1 ( box 1 ) and this should be the case for each column no matter how many rows it has.

Box 1          Box 2

(more...)

Just a quick list of the most useful breakpoints I have found for debugging purposes. This is more of a personal reference so that I can add them back to any new install of Xcode.

objc_exception_throw
[NSException raise]
malloc_error_break

In addition here is a great tech paper on debugging in xcode called Mac OS X Debugging Magic

And here is a nice tutorial for using instruments to debug

I came across this method for creating a Debug Logger for XCode projects.
Basically you create a macro that says only process this piece of code if we are running in debug mode. This allows you to create logging throughout your application without having to worry about removing it before you do a release build as it won't be included in the release code.

To begin you need to add a GCC_PREPROCESSOR_DEFINITIONS | DEBUG=1 to your projects TARGET>Get Info>BUILD settings.

Next go into YOUR_APPLICATION_NAME_Prefix.pch file ( located under Other Sources ) and place the following macro.

 
#ifdef DEBUG
# define trace(fmt, ...) NSLog((@"%s [Line %d] " fmt), __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__);
#else
# define trace(...)
#endif
 

This will create a custom Logger that can be used in the same way as NSLog except that it will output a more descriptive message showing the location and line number of where the log item is located.
edit: I have cheekily renamed it to trace();

 
trace( @" Does my debug tracer appear in production code?  %@",
@"NO!"  );
 

In this brief set of posts I wanted to document how to convert a simple MX component over to a Spark component. I have chosen to convert the MX ColorPicker because it is one of the components that Adobe hasn't moved over to the Spark framework yet as well as being the component that I used to learn the Flex3 Framework. You can see the outcome and view the source of that in my previous posts from a couple of years ago here and here

Below you can see the three components.

The Spark component does all the stuff the old MX one does like keyboard movement, selectedIndex, selectedColor, colorLabel, etc.. In addition I also added the ability to set/get the selectedItem and dispatching indexChange events.

To begin with lets look at what the current color picker does. (more...)

I tried emptying my trash can the other day only to find that i had over One and a half million items in there! after leaving it for the weekend i still had more than a million to delete so i had to resort to the Terminal. And gained myself an extra 10 gig in the process!

So i thought i would write a quick reminder to myself how to quickly empty the trash can instead of using the Finder tool which takes ages!

>> cd ~/.Trash

>> sudo rm -r *

In a recent post on Custom FlashBuilder Component Views I showed how to create a swc file with your custom component.
This raised a question by one of the commenters on how to create default custom skins for your components so that when you ship them a user can use your default skins without having to explicitly set them.
Normally you have to do something like this

 
<clock:BinaryClock
   skinClass="co.uk.betadesigns.binaryclock.BinaryClockSkin"
   />
 

Setting up my custom component with my custom skin, however if a user of my component doesn't know that they have to set this style they will get a runtime error something like this

 
Error:
   Skin for
   TestProject.ApplicationSkin2._ApplicationSkin_Group1.
   contentGroup.BinaryClock5
   cannot be found.
 

The way to get around this is to tell the library.swc file that you want to set a default style for your components in case one is not set. This allows you to provide one as well as allowing it to be overridden by anyone that wants to.

All you have to do is create a defaults.css file

 
/* CSS file */
@namespace "co.uk.betadesigns.components.binaryclock.*";
BinaryCounter
{
   skinClass : ClassReference(
   "co.uk.betadesigns.components.binaryclock.BinaryCounterSkin"
   );
}
 
BinaryClock
{
   skinClass : ClassReference(
   "co.uk.betadesigns.components.binaryclock.BinaryClockSkin"
   );
}
 

You need to create this in the top level package of your swc file under ( default package for FlashBuilder or src for Flex3 ).
The First element
@namespace is the namespace to the component you want to reference ( you can include multiple namespaces for multiple components in different packages ).
From this you can see that my BinaryClock is in the package co.uk.betadesigns.components.binaryclock.*
You then setup selectors for all the SkinnableComponents you want to give default skins for.
Next you simply need to include the defaults.css file in the compiler arguments.Properties>Flex Library Build Path>Assets>

Then in the Flex Library Compiler>Additional Compiler Arguments set -defaults-css-url defaults.css This will set the defaults.css file as the default css for all components in the swc

All Done.
Example Project files here. ( Right click save as )

I recently discovered that you can create custom components that can appear under your own company/personal folder inside Flash/Flexbuilder design view. Normally any custom component you create will appear under the Custom folder in the Components View and well thats not very good for branding now is it. In addition you also get an actual size representation of your component in Design view rather than just an empty box outline. For example the first image is the default and the second the custom. (more...)

For the last six months I have been working on a rather large enterprise application that uses parsley as it's main Dependency Injection Framework. This has led to many complex class' that contain multiple injected models, VO and other elements. Recreating these items inside test harness can become very cumbersome if you have to create a large injection heirarchy. Consider the following example. (more...)

After using eclipse for so long i have become a custom to my shortcuts and xcode just doesn't stand up to the job as far as i am concerned so here is a small list of the custom key bindings i have setup for myself. I will add more as I create them.

To create a custom key bindings file goto XCode>Preferences>Bindings> Duplicate an existing binding and name it whatever you want then go to and open the file you just created in a text editor so you can see the xml output.

~/Library/Application Support/Xcode/Key Bindings/*.pbxkeys

A good list of available commands can be found here

1. Duplicate code!

I can't believe xcode doesn't have this in Eclipse you simple select your text and press Ctrl + Alt and either Up or Down on the keypad and it will duplicate your code placing it either above or below the current selection. It will also reselect the newly duplicated code so that you can duplicate it as many times as you like.

I have been meaning to start building an iphone application for some time now and recently stumbled across Stanfords CS193p iphone development course on ITunes U I have found it really useful especially the Assignments. more...