Write Social Applications for Imeem in ActionScript Using Adobe Flex: Part 9

As promised in part 8 of the series of tutorials entitled "Write Social Applications for Imeem in ActionScript Using Adobe Flex: Part 1 - 8", today I'll show you how to filter search results by artist, album and the default filter (any). If you are new to the series, you can browse through the previous articles right from my profile page.

The way filtering works on imeem is by using a keyword followed by a semi-colon, which is used as a prefix to the search query. For example, filtering a query of "elvis presley" by artist will produce the following as the final query to be sent to imeem "artist:elvis presley", without the quotes. If no fiter is specified, then the query is simply whatever the user typed in. In our little application, we'll have the 3 filter types as mentioned above. So let's get started!

Open up the project, and make sure you have imeemMusicExtension.mxml open in Design View. From the toolbox, drag a RadioButtonGroup control onto the stage. Upon doing that, you should see something like this. Name the control rdgFilter. Add 3 radio buttons as in the screen shot. Give each one a label (Artist, Album, Any). Also, make sure you set the Selected property to true for the "Any" option, like this. It'll be the default filter. Drag a label control and position it right above the radio button group - as in the above screen shot.

Now, switch to Source View. For each radio button, set the "value" property - as in this screen shot. That is, set value="artist:" for the Artist radio button; for Album, set value="album:"; for Any, set value="". On the mx:RadioButtonGroup, add the following:

change="rdgFilter_change(event)"

All filtering will be handled by that method - whenever the user changes the filtering.

Still in Source View, let's write the code to make it all happen. First, here's how things will work:

1. upon application load, we will disable the filter (radio button group)
2. upon displaying the search results (for the first time), we will enable the filter (with Any being the default)
3. when users change the selected option, we will grab the Value of the chosen option and prepend it to whatever the user typed in
4. we will call the search method with the new query (filter + user input)

Go to the onInit method, and add the following line at the bottom:

rdgFilter.enabled = false;

Next, let's create the method rdgFilter_change.

private function rdgFilter_change(e:Event) : void {
var rbg : RadioButtonGroup = e.target as RadioButtonGroup;
var rb : RadioButton = rbg.selection;

txtQuery.text = rb.value.toString() + txtQuery.text.replace(/artist:/g, "").replace(/album:/g, "");
search_click(null);
}

When the user changes the filtering, the above method will be called. We extract the chosen option and store that into the RadioButton variable rb. We then remove any previous filter (artist: or album:) from the input textbox by using regular expressions. Next, we prepend the value of the chosen filtering option to what the user typed in. And finally, we call the search_click method, which will send the filtered query to imeem.

The final step is to enable the filtering control when the search results are loaded. That happens inside the onMediaSearch method. Locate that method, and add this right before the last line of code:

rbgFilter.enabled = true;

The altered code looks like this. You can now run the application to see it work!

Here's what I got for each filtering option: default (any), by artist, by album (and no query).

That's all there is to it! Users can now filter search results through the application. In the next tutorial, I will show you how to add the Duration field in the search results. I think it's important to see how long a song is!

Stay tuned!