BetaDesigns( Blog ) Flex and Component Development

Converting MX Component to Spark Component ( Part 2 – a )

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