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.

I then came across Phidgets motor controllers and I was immediately interested in it, mainly because it has an Flash/Flex Actionscript library that allows your Flash or Flex application to communicate with that controller. So I ordered one and started working on an application. What I came up with is a wooden maze that is placed on 4 servo motors and I can now control the maze by using a socket connection on mu Android phone running Android 2.1 (Eclair). I needed a special construction to get the rotational movement converted into a vertical movement to lift and tilt the maze and it kind of worked. I would have preferred to use linear motors instead, but they were just way too expensive for me. This did the trick as well. It was just a little harder to get the setup right. Just watch the video and keep in mind that this is merely a prototype.

If you want to investigate this source code even further, you can download the source file here.

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…

When creating AIR applications, you often create custom components, which you place in separate packages to help organize the structure of your project. And every once in a while you will also create a custom component that extends the WindowedApplication class, for example to create an application that automatically updates itself when a new version becomes available. such a component would look like this:

public class AutoUpdater extends WindowedApplication {
 
  private var appUpdater:ApplicationUpdaterUI;
 
  public function AutoUpdater() {
    super();
    appUpdater = new ApplicationUpdaterUI();
    addEventListener(FlexEvent.APPLICATION_COMPLETE, startAutoUpdate);
  }
 
  private function startAutoUpdate(event:FlexEvent):void {
    appUpdater.configurationFile = new File("app:/updateConfig.xml");
    appUpdater.isCheckForUpdateVisible = false;
    appUpdater.isDownloadUpdateVisible = false;
    appUpdater.isDownloadProgressVisible = false;
    appUpdater.addEventListener(UpdateEvent.INITIALIZED, autoUpdateInitialised);
    appUpdater.initialize();
  }
 
  private function autoUpdateInitialised(event:UpdateEvent):void {
    appUpdater.checkNow();
  }
}

Now, you can simply extend your new application from this AutoUpdater class by declaring it as the root tag of your main application file. However, in Flash Builder 4 this generates an error, as shown in the picture below.

In this screenshot you notice there are two errors, since for my project I also created another custom class which implements the URL monitoring system as well, on top of the automatic updates. Apparently the compiler expects each application to have its own XML configuration file, even though those components are not the actual starting point for your application.

To solve this problem you simply have to go to the project settings dialog. In that dialog you go to the “Flex Applications” part by selecting it on the left side. Within that section you can see each application within your project – yes, a single project can contain more than one applications.

You can notice that the AutoUpdater class (and in my case the MonitoredAutoUpdater class as well) is flagged as an application. Just select that application and click the “Remove” button. This will not remove the file from the project, but instead it just removes the application flag. And because the compiler will no longer recognize it as an actual appliaction, it will not search for that XML configuration file anymore, thus solving your problem.

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)

• Data/Services panel to allow a very easy connection with different kinds of back end technologies such as ColdFusion, Java, PHP and HTTP services.
• Automatic Data Transfer Object (Value Object) creation based on the return types of the services
• Drag & drop attachment of data to visual components
• Enhanced refactoring support
• Code generation of getters and setters
• Network traffic monitoring
• Enhanced memory profiling support
• …

I’ve been working with the prerelease versions for quite some time now and I must say I’m pretty found of the new features they’ve put in there. In short, this is one release you want to upgrade to as soon as possible. So, go ahead and point your browser to http://www.adobe.com/products/flex/ and download the latest version.

As second important release is ColdFusion Builder. In the early days you had ColdFusion Studio, but other than that, there was no real specific ColdFusion IDE available. So developers had to work with Dreamweaver and open source Eclipse plug-ins such as CFEclipse. But now, there is finally another new and improved ColdFusion IDE available and it’s called ColdFusion Builder. It is also based on Eclipse, which means that you can either install it as a stand-alone version or as a plug-in on top of your existing Eclipse installation. That means that you can also write your own extensions for ColdFusion Builder to help you (and other developers) write code a lot easier. You can have extensions for code snippets, templates, query generation etc. You even have an extension to help you write your own extensions!

This is similar to what you can do with Flash Builder as well, so if you’re a Flex developer and you also use ColdFusion as back end technology, you might be better off integrating both development environments into the same IDE. That can save you a lot of time not having to switch tools all the time. Just go ahead and download it at http://www.adobe.com/products/coldfusion/.

The last release of today is the Flash Platform Services for Social Network Integration. Wow, now that’s a term to remember. But what the hell does it mean? Well for starters it means that Adobe is making life simple for people who want to connect their Flash applications to social networks. The Social service has the following benefits:

• One API connects your application with multiple social networks
• The service adapts to social network changes so you don’t need to recompile your application
• Multiple pricing plans available

The social service consists of three parts:

• A simple ActionScript 3 API, which can be implemented in Flash or Flex and aggregates the different social network APIs, including Facebook Connect
• Plug-and-play widgets that use the social API for login, share, invite, select friends and other commands
• Dashboard analytics for reviewing and optimizing your social performance

Now, what does all that mean? Well, it means that you no longer have to worry about the ever changing Facebook or Twitter APIs, because the Social services will take care of the for you. You just write your code against the Social services API and the changes in the network services such as Facebook or Twitter are being monitored by Adobe and Gigya to make sure your applications don’t break when a new API is released. If you want to know more about this, you can always look at http://www.adobe.com/devnet/flashplatform/services/social/.

So, I must say that today is a very big day in my professional life, since I’m working with both Flex and ColdFusion. From now on, life as a Flex developer is going to be a lot easier…

Every once in a while you get the chance to meet with him at some ColdFusion event, but not often in Belgium. Well, here’s your chance now, because on March 9, 2010 he’s coming to Liege/Luik in Belgium. This event will not be about ColdFusion alone. There will alo be presentations on Flash Builder 4 and AIR 2.0. Tickets are free, but seats are limited, so hurry up and secure your seat at http://rialiege.eventbrite.com/.

I hope to see you guys there…

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…