/customers/iconara.net/iconara.net/httpd.www/blog/wp-content/plugins/wp-super-cache/wp-cache-phase1.php Iconara » Amazon image finder component for Flex

Amazon image finder component for Flex

I have created a component which uses Amazon’s E-Commerce Service (ECS) to retrieve and display an image based on a query. This is quite handy if you, for example, have a music player and want to display the cover art for the currently playing track.

The component is currently called AWSImage (I might change the name, it sounds really boring) and is, not surprisingly, a subclass of Image. I have not released the code, nor can you download the component just yet, but more on that later.

An example application

Here is a sample application, change the properties and the the image should change momentarily.

[kml_flashembed movie="http://blog.iconara.net/wp-content/uploads/ecs-example.swf" width="450" height="600" /] An example application using the AWSImage component

The component

The component itself is really quite simple, you supply it with your Amazon WebServices (AWS) access key (you can sign up for one here), an index to search (books, music, dvd’s, software, etc.) and a desired image size (large, medium or small) and finally a query string. It will show the first image found.

In this example I have bound the image size and index to combo boxes and the query to a text field. Below you find the code that creates the component (size, index and query are the combo boxes and the query field in the application above).

<ixc:AWSImage id="img">
  <ixc:awsAccessKey>XGXEXTXYXOXUXRXOXWXN</ixc:awsAccessKey>
  <ixc:imageSize>{size.selectedItem}</ixc:imageSize>
  <ixc:indexName>{index.selectedItem}</ixc:indexName>
  <ixc:query>{query.text}</ixc:query>
</ixc:AWSImage>

Whenever any of the properties change the image is updated, providing all the properties are set.

Show me the code

I haven’t decided what to do with this component yet, and the source is not ready to be let out in the wild. However, I have already outlined how to talk to Amazon’s ECS in an article which I’m working on at the moment, hopefully I will get around to publishing it soon. With that article you can probably build your own, should you want to. I would like to release a framework containing an improved (see below) AWSImage and it’s support classes, but it depends on how much I time I will have in the next week.

Further development

AWSImage uses ECS’s ItemSearch operation, but you can also do direct item lookups, so a version of AWSImage that takes either a query string or an ASIN (Amazon’s internal product ID) is possible. The benefit of using an ASIN is that you can refer to a specific item instead of hoping that the first item in the search hits is the one you are looking for.

Also, AWSImage queries Amazon UK, which is what I want, but depending on who you and you users are you might want to be able to change that to the American, Canadian, German, French or Japanese site.

AWSImage is just scratching the surface on what you can do with Flex and Amazon’s ECS, there is much more to it than just images and items, there is a lot of data on each item and you can even build a whole e-commerce site that uses ECS in the background, if you wanted to.

8 Responses to “Amazon image finder component for Flex”

  1. JabbyPanda Says:

    Interesting, just saw on video.onflex.org a video talk with C.Cantrell where he promised to post on Google Code AS3 library to work with Amazon S3 service:

    http://video.onflex.org/2007/05/08/christian-cantrell-apollo-beta-sneak-peak-amazon-s3-client/

  2. Theo Says:

    I have a small framework that does approximately the above (showing an image based on a search or ASIN) ready if anyone reading this is interested. I haven’t publicly released it since I’m not in the mood of supporting it right now. But if you have the need, I don’t mind sharing.

  3. JabbyPanda Says:

    We use Amazon S3 services in my current project, but my Flash (Flex) based widgets do not have to communicate with Amazon S3 directly yet.

    So… just good to know, that my widget actually can communicate with Amazon S3 directly.

  4. Iconara » Finding cover art with Flex and Amazon WebServices Says:

    [...] This article was written quite a while ago, but I never got around finishing it. It outlines the basics on how to implement something like the component I wrote about in Amazon image finder component for Flex. [...]

  5. 2pha Says:

    I am writing a front end in flex for a jukebox I am building and this is exactly what I need. Any chance of seeing your source code? :) THanks

  6. Theo Says:

    @2pha: Click on the link that starts with “Iconara »” in the comment above yours.

  7. 2pha Says:

    Duhhh…I feel silly. Thanks mate.

  8. Theo Says:

    No problem. You are welcome with any questions you might have about the code.

Leave a Reply