Creating a custom combobox using Flash Catalyst

Published on: April 16, 2010
Comments: 7 Comments

Comboboxes are great components, but unfortunately, at the moment you cannot create a custom combobox in Flash Catalyst by simply using the HUD or right-click menu to convert the artwork. In my book “Flash Builder and Flash Catalyst: the new workflow” ( http://www.friendsofed.com/book.html?isbn=1430228350) I created a design for an e-commerce application where I used a custom combobox.  The design looks like this.

The design

Custom combobox in the sidebar

At the bottom of the navigation sidebar you are going to add yet another section. This time the section will contain a dropdown combobox that contains the categories in which the pictures from the photo gallery are divided. You could opt to get the categories list from the database, but since we only have four categories to add in this combobox, you might as well do it hard coded this time. So, add the following items to the combobox dropdown section which has a light gray background color:

  • All
  • Waterfalls
  • Reflections
  • Lakes
  • Mountains

I’ve deliberately chosen not to place them in an alphabetical order because I’m assuming that the top items will be the ones users are going to look for the most. Of course, you can place the items in an alphabetical order if you find this more suitable.

The combobox itself will get a focus color gradient indicating when it has the input focus. Use the same green-ish gradient colors for all gradients in the application. And next to the rectangle that holds the selected item, you draw a smaller square with an arrow in it. This will act as the trigger to open the dropdown list for the combobox component. Underneath the combobox there also has to be a button that allows the user to actually confirm the selection he’s made for filtering the photos he wants to view inside of the photo gallery.

Bringing the component to life

If you really think about it, you have to break down the combobox into basic parts and what I’ve come up with is the idea that a combobox is really nothing more than a Toggle Button with an additional Data List component in the toggled state. But that doesn’t make it an easy component to create from scratch. Also the fact that the selected item must be displayed in the collapsed combobox state means that we are going to have to do some custom programming in Flash Builder later on to dynamically fill out that value depending on the selected item in the Data List part of the component.

So let’s start working on this component by selecting the “Dropdown” and “Dropdown values” layer groups in the Layers panel and convert it into a Custom/Generic Component. Rename that component to “SearchComboBox”. Double click the newly created component, select the combobox rectangle, the selected value and the arrow button and convert that into a Toggle Button. Double click that component again and assign the label for the button, making it as wide as possible to fit the entire component and sharing this change with the other states again. Render the Focus color layer invisible for the Up and Disabled states. Before continuing with the other states you first have to convert the Dropdown values layer group into a Data List component. So, select that group and choose Convert Artwork to Component > Data List from the right click popup menu. In the component you still have to indicate the list items and their states. Double click the new component and select the selected item in the design to create the Repeated Item part. Space the items 2 pixels from each other, fill out the Design-Time Data panel to contain the five possible selection items and remove the other values in the design layer. Double click the repeated item component to dive into it. Remove the background color for the Up state. For the Over state, select the background layer and set the Opacity level to 50 in the Common section of the Properties panel. This will show a difference between the selected item and the one the user is hovering to possibly select. That’s it for the Data List component, so go back up one level using the bread crumbs at the top of the artboard. Rename the list component to “SearchValuesList” in the Library panel.

Again, go up one level so you reach the SearchComboBox level again.In this component you still need to make that list component visible in the proper state. In fact, you still need to make the proper states in the component. So, go ahead and duplicate the state in the Pages/States panel three times and name the states appropriately

  • Up
  • Over
  • Down
  • Disabled

In the Up and Disabled states, you make the data list invisible, because this will be the normal state. In the Over state, you need to set the toggle button’s Selected property to true by checking the checkbox in the Common section of the Properties panel. This will show the selection color for the combobox. You do the same thing for the Down state. Additionally you have to make the SerchValuesList component visible. In the Disabled state you need to set the button component disabled by unchecking the Enabled checkbox in the Common section of the Properties panel.

Now you have defined the states for the component, but you still have to define how the application will go from one state to another. Let’s start with the Data List part since this is the easy one. You select the SearchValuesList component in the Layers panel and add the following interaction:

  • Event: On Select
  • Action: Play Transition to State
  • State: Over
  • When: When any item is selected

Going back to the Over state keeps the focus rectangle displayed after a selection has been made in the list component.

For the combobox part itself it is slightly more complicated and there are a couple of interactions you have to define. Let’s handle them in the same order as the chain of events that take place when a visitor uses this component. The first event that will happen is the user hovering over the component. So, add the following interaction for the combobox component:

  • Event: On Roll Over
  • Action: Play Transition to State
  • State: Over
  • When: When in Up

The next event that will occur is the fact that the user click on the combobox to open it. That means that you have to go from the Over state (not the Up state) to the Down state for the component by adding the interaction:

  • Event: On Click
  • Action: Play Transition to State
  • State: Down
  • When: When in Over

Then the user can go in two directions. Either he selects an item in the list, which you’ve already covered by capturing the event on the SearchValuesList component. Or he can cancel the selection choice. In this last case the user actually clicks on the combobox component again. That is why you needed to add a condition to the view state change before. Now you need to add a similar interaction, but the other way around:

  • Event: On Click
  • Action: Play Transition to State
  • State: Over
  • When: When in Down

Now the combobox is closed again, but the hover color is still visible. That means there is only one more possible event and that is the user moving the mouse cursor away from the combobox component. So, on the combobox component you need to add one last interaction to go back to the normal state:

  • Event: On Roll Out
  • Action: Play Transition to State
  • State: Up
  • When: When in Over

Interactions on the combobox component

Adding all of these events to the component will render your generic component into a working combobox. If you like, you can still add a couple of transitions to the view state changes to make the (dis)appearing of the data list a little smoother, but it is not strictly necessary for our user experience.

I know it’s a bit of work to get this far, butat the time of writing there is no Spark equivalent for the ComboBox component, so you can use this method to easily create such a component directly from within Flash Catalyst. But at this point you’re done with the component for now and you go back to the main design level and rename the component to “SearchCombobox”.

Adding interaction in Flash Builder

Once you’ve imported the project into Flash Builder, you can find the custom combobox component in the components package under the name SearchComboBox.mxml. The first thing that isn’t working yet is the fact that when you select a certain value in the dropdown list part of the component, the label in the button part is not automatically updated. By default all items should be visible in the photo gallery. That means that you have to initialize the component to have that item selected. On the <s:List> component in the source, you simply set the selectedIndex property to zero. That will initialize the component when it’s first created. For the <s:ToggleButton> tag you simply change the value of the label property to “ALL”.Just run the application and you’ll see the component properly initialized this time.

Next up is solving the setting of the label when a certain item has been selected in the dropdown list. So, on the <s:List> component you see that an event handler for the change event has already been declared for going back to the Over state. This handler will react both to a mouse click and a selection made by using the arrow keys. Now, locate that event handler and inside of it you need to set the label of the button component to the selected item in the list component. You may need to add some identifiers for the components before you can refer to them in your ActionScript code. Don’t forget the fact that you are dealing with a complex data structure as list items, so you should reference only the text part of the item to assign it to the labelproperty of the <s:ToggleButton>component.

protected function list_changeHandler():void {
 
  currentState='Over';
 
  button.label = list.selectedItem.text1;
 
}

Naturally you could choose to implement this functionality upon the click event or the <ENTER> key for example. The principle stays the same. It’s just a different event that is triggering the selection.

(This post was also previously published on http://cookbooks.adobe.com)

7 Comments - Leave a comment
  1. Thanks, I’ve updated the post. It’s been a whils since I’ve written this post using the pre-release version of Flex 4, but couldn’t publish it until Flash Catakyst was released :-(

  2. Tink says:

    You can’t turn artwork into either of those with Catalyst?

  3. Neither component can be created in Flash Catalyst at the moment. But the product will be updated and more components will be available in the enxt releases/upgrades.

  4. Tink says:

    ppppffffftttt how naff is that!

  5. Well, I’ve been using Flash Catalyst for quite some time now and apart from a few issues like this one, it’s a great tool and I’m already a fan.

    I don’t know if you’re a developer or designer, but recreating a design is code can be a bitch and this tool just makes it a lot easier (even with its flaws)

  6. Ravula says:

    Don’t forget to add the sctleeedIndex=-1 setter if you use the MXML method to ensure that the prompt is displayed if your dataProvider is populated through a service result handler function. And also that the prompt value can’t be sctleeed again after you select another value unless your user knows how to deselect (control-click) not necessarily intuitive to all or they have another means of resetting the sctleeed value to -1 via an actionscript function.

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Welcome , today is Friday, August 18, 2017