Home > Programming > Color picker for mobile devices with Flex 4.5

Color picker for mobile devices with Flex 4.5

I don’t have much experience with Flex. I’ve just participated in the Babelium Project, a web application for language practising developed in Flex, and now I’ve been asked to port an Adobe AIR desktop application to android devices. In this last work, I came across some problems replacing the unsupported MX components by Spark components and some of them where a pain in the neck.

The ColorPicker was a tricky one to substitute. I found this SparkColorPicker, but I couldn’t make it work correctly on a tablet PC (I told you, I’m far from being an expert). The problem seems to be in the ComboBox which extends, as combo boxes and drop down lists are discouraged in AIR for mobile development. When clicking the button, the DropDown was opened and immediately closed making it impossible to choose a color.

After several attempts to fix the issue, I decided to implement my own color picker using the Callout class. This is how it looks like:

You can see the source code in this github repository:

Categories: Programming Tags: , ,
  1. Karen
    2012/01/11 at 21:18

    Thanks a lot! It is really neat thing. The only issue I have is that the whole color picker callout is black and the color collection is not showing until I tapped on it. I will look into it and see what I can do to solve this issue.

    • blizarazu
      2012/01/12 at 0:09

      You are right, the performance is not very good and it takes a bit until all the content is loaded. I suppose that the performance may be better or worse depending on the device. I’ve tested it on a bq Kepler tablet and it takes a pair of seconds to load the color collection.

      Another issue may be the size of the color items. It’s a bit difficult to choose the desired colour at the first attempt. But the size can be easily changed with few modifications on the code. I hope I can expand the post explaining the code.

      By the way, I didn’t manage to close the callout when it loses the focus without having selected a color. If someone knows how to do it, I will appreciate your help.

  2. Togeis
    2012/01/27 at 2:46

    Please put the source into your box again… Thx

    • blizarazu
      2012/01/27 at 16:29

      Fixed. Thank you for the warning.

  3. Casey
    2012/12/06 at 20:37

    Thank you.

  4. Pavlin
    2013/01/04 at 22:27

    Instead of creating several hundred components each displaying one color just make 1 bmp of png image of all those colors. Wrap the image data in BitmapData class and then you have pixel level operations such as getting pixel color. Once you know the coordinates of the user click/tap it is easy to get the corresponding pixel’s color. I haven’t tried it yer but I think the performance will many times better.

    • Pavlin
      2013/01/04 at 22:29

      I actually meant bmp OR png image.

    • blizarazu
      2013/01/04 at 23:14

      Thanks for the idea. I agree with you. Creating all those components is what slows everything. If you manage to do it that way we’ll appreciate if you shared your solution. Thank you.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: