Adobe MAX 2010 is less than 2 months away and while I’m in full preparation for my lab sessions I though I’d give a small teaser about what you can expect from it.

The lab I’m doing is going to be about the designer-developer workflow topic, which has become quite hot since Flash Catalyst has been released. I’ll be giving a brief introduction to Flash Catalyst for those who are not yet familiar with it. After that, I’ll talk a bit about the different kinds of workflows when using Flash Builder and Flash Catalyst. And of course you will get your hands dirty on the exercises to show you some cool tips and tricks. You will also walk away with a fully working web shop component (not including payment modules of course, since that would take us too far of-topic).

There are two sessions. The first one is held on Monday, October 25 at 5.00 PM and is already almost full. The second session is on Wednesday, October 27 in the morning. I know this is the morning after the MAX awards, but if I can make it there, then so can you. So, if you haven’t already registered, you should hurry before the session runs full.

This one works over the internet as well, since it simply downloads a CVS file every 10 minutes to automatically update the application. The design was made in Illustrator, brought into Flash Catalyst to get the arrow working and finally I took it to Flash Builder to attach the HTTPService that fetches the data. You can read the full implementation in my book "Flash Builder and Flash Catalyst: The New Workflow" as well, since it’s one of the many examples in there.

The second application is a remote control for my BTicino domotics system. I’ve been wanting to do this for a very long time now. But up until now I just couldn’t do it, because you couldn’t create this thing in Flash Lite 3. But now, with AIR on Android (and soon on other mobile platforms as well) I could create a socket connection to my MH200 controller and feed it directly with my input to control the shutters and lights. Naturally, the possibilities are only limited by your imagination.

Both applications are Flex 4 applications, which proves that, despite the fact that the Flex framework isn’t optimised for these mobile devices and Slider (special Flex framework for mobile) isn’t yet available, the application still works pretty damn well. Loading times are not that bad either. Imagine what an optimised Flex framework will be able to perform then…

The design

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

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)

At first it didn’t seem possible, because when you read about the things you can do with Flash Catalyst, you can find lots of information on how to create a custom data list, but it doesn’t go as far as saying how you can create a Tile. Maybe because you don’t need that component that often when you compare it to, for example, a listbox or datagrid. Is it possible at all, you might ask. And the answer is a definite YES. But how do you do it then?

Well, you start out with your designed element of course. And this time you are also going to convert it into a Data List using the HUD (Heads-Up Display) or the right-click popup menu. But that just turns it into a list and we need a Tile. Essentially, a Tile is also a list component, so ther should be some setting that you can choose to make it into the proper component. And there is. If you look at the Properties panel, in the Layout section for the repeated item, next to the horizontal and vertical layout, you can choose the Tile option as the layout. Of course you can alter the spacing for both directions in this case.

I hope this helps you guys out in case you’re wondering how to create such a Tile component…

Hey guys,

I know it has been rather quiet on my site lately. The reason for this is the fact that I’m currently writing a book. Now, what is it going to be about? Some of you may know this already by reading my Twitter posts or by following my LinkedIn status messages. For the others, I can say for now that it is about Flash Builder and Flash Catalyst and how those products are going to change the way you work on Flex projects as a developer. As a designer (or interaction designer) you are going to be more closely involved in creating and maintaining Flex 4 applications when using these products.

So, basically, it is not going to be a manual about Flash Builder, nor is it a manual about Flash Catalyst. But it is a guideline with general best practices and designer-developer workflow situations, explained in a very practical way.

You can now already pre-order the book on Amazon.com or by clicking on the cover image. Don’t mind the cover image for now. This is just a preliminary image, which will change by the time it is going to be released. The release date should be somewhere around April 2010.

Hopefully, you’ll like it…

A quick overview of the new features:

• Changed Heads-Up-Display (HUD)
• Smoother transitions
• Better animations
• More events available in a separate actions panel
• More Spark components available
• Better grouping in the lauers panel
• …

But Ryan Stewart has made an excellent screencast about this on his site, so I’ve included the video below as well.Just take a look a what’s different and what makes this a great tool…

So it’s really worth upgrading to the next bèta version. Go and download it from the Adobe Labs site or follow this url: http://labs.adobe.com/technologies/flashcatalyst/. Have fun…