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.
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 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...)
Some time ago now I decided as a self improvement mechanism to re-write one of the Flex components from scratch so that I could get my head around the Flex Component Framework. So I set my eyes on the ColorPicker Brave or stupid you decide as this was going to be one of my first components ever, I should have probably started somewhere a bit smaller.. But hey.. It works and I learnt a hell of a lot. and now it's time to share. (more...)
