Peter Elst was up first and he talked about the basic stuff in AIR. Since the audience was divided into people already familiar with AIR and people who had no experience at all, this was a realy good start to get everyone up-to-speed. Topics ranged from basic AIR APIs like file access and drag-and-drop functionality to URL monitoring and basic SQLite access.

That’s where I stepped in and turned the volume up just a notch, because my session was entirely about working with the SQLite local database. Starting with the basics on accessing the database synchronously or asynchronously, I moved on to using the ColdFusion 9 ORM capabilities on the client side. That means that you don’t have to write any SQL statements to create or update the database. The cool thing about this specific ORM implementation is the fact that you can use that feature to synchronise your local database with a remote server as well. Unfortunately, during the workshop, the internet connection dropped and I could show it actually working, so you guys have to believe me that this is awesome stuff. You can find my slides from the session below.

Before having everyone falling asleep, I let Lee Brimelow take the stage and he went on about multitouch on devices. He talked about the new possibilities with multitouch and gestures in AIR and how you can test it on devices (laptops) that are not multitouch enabled.

Finally, Weyert De Boer took the stage and he had some great stuff to tell about using AIR’s socket server capabilities to create a custom HTTP server application. This was really impressive stuff.

At the end we had a small Q&A session and that was a wrap for us. So now, I would just like to thank everyone who attended the workshop and hopefully you’ve taken along some great new insights.

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…