Christophe Coenraets | Rich Internet Applications, Flex, AIR, Java

FlexStore Revisited: Building an Animated Spark Layout

By Christophe Coenraets | Published: February 2, 2010

Six years ago, I wrote the FlexStore sample application for Flex 1.0 (code name Royale at the time). The original version is still running here and shows the progress we have made in six years! Two years later, I rewrote the application for Flex 2. One major difference in the Flex 2 version was that the product Tile List was animated to visually represent the items being filtered out or filtered back in. The animations were helpful, but I was never too happy with the code: the layout animation logic was tightly coupled to the container logic and therefore wasn’t very reusable.

In Flex 4, the new Spark component architecture cleanly separates containers from their layouts: You declare a container and plug a layout into it. You can use existing Layout classes (VerticalLayout, HorizontalLayout, TileLayout, LayoutBase), or create your own custom layout classes. So, I thought it would be nice to revisit the AnimatedList component I had written for the FlexStore 2 and take advantage of this new architecture. I created a custom layout class called “FilteredTileLayout” that you can plug in Flex 4 list classes. i.e. List or DataGroup.

Posted in Flex | 12 Comments

More Flex 4 / Spark ItemRenderer Samples

By Christophe Coenraets | Published: February 1, 2010

Here are a few additional examples of Flex 4 / Spark ItemRenderers. They are similar to the examples I provided in my previous post with a different set of items.

Posted in Flex | 3 Comments

Cool ItemRenderers Made Easy in Flex 4

By Christophe Coenraets | Published: January 28, 2010

Flex 4 makes a lot of things a lot easier to build. After looking at custom components and skins in my previous post, here are a couple of samples focusing on ItemRenderers, States, and Animations.

In this first example, I use the new “depth” attribute together with the new States syntax to make sure that the hovered ItemRenderer is always on top of the other ones. I also use a PostLayoutTransform to “zoom” the hovered ItemRenderer without any impact on the position of the other ItemRenderers in this TileLayout.

Posted in Flex | 4 Comments

Creating a Custom Component and Skins in Flex 4

By Christophe Coenraets | Published: January 22, 2010

The basic idea behind the Spark component model in Flex 4 is to entirely decouple the behavior of a component from its visual representation. You code the behavior of a component in one class and its visual representation in interchangeable MXML skin classes. This new architecture leads to lighter weight and easier to customize components.

As a simple example, I created a Spark version of the PhotoInput component I built for some of my Flex 3 samples (Salesbuilder and inSync). The PhotoInput component allows the user to take pictures using the webcam.

Posted in Flex | 5 Comments

Tampa Bay Adobe Developer Event this Thursday

By Christophe Coenraets | Published: January 18, 2010

I’ll be in Tampa with James Ward and Greg Wilson this week, and we thought it would be great to put together an informal event for the local Tampa bay developer community. The details below are from Greg’s original post.

When: Thursday, Jan 21 6:30pm-8:30pm
Location: Taverna Opa Tampa – Channelside – next to Splitsville – http://tavernaopatampa.com/info.html
Map: http://bit.ly/5kF4aR (Google Maps)

No slides and no presentations – just informal chat/Q&A

IMPORTANT PART –> Beer is on James, Christophe and me for the first hour! How can you resist now?!

Between the 3 of us and some of our local friends, we can answer questions on a wide variety of topics:

General questions about Flex, AIR, LiveCycle Data Services, BlazeDS, ColdFusion and more
Connecting applications built on the flash platform (Flex, AIR, etc.) to backend systems such as .NET, Java, PHP, ColdFusion, etc.
What’s new in LiveCycle data services 3.0
What’s new in ColdFusion 9 and ColdFusion Builder
What’s coming in Flex 4, AIR 2.0 and Flash Player 10.1
Everything you wanted to know about Augmented Reality
How to compute the volume of a cone and other mathematical puzzles (just making sure you are still reading)
What’s the deal with the announcement last October about Flash and iPhone?

Posted in Flex | 4 Comments

AIR 2.0 Web Server using the New Server Socket API

By Christophe Coenraets | Published: December 7, 2009

After exploring Java integration using the new Native Process API (here and here), Excel integration using the new file.openWithDefaultApplication(), and the new Microphone API, here is another application I wrote, this time to explore the new Adobe AIR 2.0 Server Socket API.

The “Mini AIR Web Server” is a simplistic implementation of an HTTPServer. Needless to say that it is far from being a production quality Web Server. The goal here is simply to use the well understood mechanics of a web server to learn how to use server sockets in AIR 2.0.

Installation Instructions

Download the AIR 2.0 beta runtime here.
Download MiniAIRWebServer.air here.
Double-click MiniAIRWebServer.air in Explorer or Finder to start the installation process.

To test the application, open a browser and test the sample HTML pages provided with the application:

NOTE: You may have to change the port number in these URLs depending on the port number you enter in the application.

Posted in Flex | 23 Comments

Embedding Tomcat and BlazeDS in an AIR 2.0 Application

By Christophe Coenraets | Published: December 2, 2009

In my previous post, I demonstrated how to create a simple Tomcat Launcher using the new AIR 2.0 Native Process API. The assumption in that sample was that Tomcat was already installed on your machine.

In this new sample application, I’m taking that idea a little further by embedding Tomcat as part of the native installer. The first time you run the application, Tomcat is automatically copied to your applicationStorageDirectory from where the AIR application starts it. In this sample, I still provide a simple console for the user to start and stop Tomcat manually, but in a real life application, you would probably want to start Tomcat automatically when the AIR application starts.

Posted in Flex | 19 Comments

Tomcat Launcher: Sample Application using the AIR 2.0 Native Process API

By Christophe Coenraets | Published: December 2, 2009

I have been playing with the new Native Process API of AIR 2.0, and here is a first sample application I wrote. “Tomcat Launcher” is like a mini Tomcat Console that allows you to start / stop Tomcat and view the standard output log without opening a DOS box or Terminal window. It also allows you to open that log in your default Text Editor which is another new feature of AIR 2.0 that I already explored in my “Open in Excel” sample application. Tomcat Launcher also provides a generic example showing how to use the AIR 2.0 native process API to execute Java code.

Posted in Flex | 10 Comments

“Open in Excel”: Another AIR 2 Mini Sample

By Christophe Coenraets | Published: November 24, 2009

In Adobe AIR 1.0 and 1.5, there were different options to “open” the data of a Flex DataGrid in Excel. For example, you could leverage the AIR native drag-and-drop support to drag rows from the DataGrid to an open Excel spreadsheet. You could also drag rows to the desktop (or anywhere on the file system) as an .xls file. These two approaches are demonstrated in my Salesbuilder sample application. Another approach was to use a server roundtrip to download the generated .xls file from the server and force Excel to open with the data.

There was however no immediate way to implement a straight (client-side only) “Open in Excel” feature (aka click a button to open your DataGrid data in Excel). With AIR 2.0 and the new File.openWithDefaultApplication() method this becomes extremely easy to implement. In the sample below, I provide an example of this new feature. The sample also supports the drag-and-drop approach from the AIR application to Excel and from the AIR application to the desktop (or anywhere else on the file system). This sample uses the as3xls library to create the Excel spreadsheet. View Source is enabled.

Installation Instructions

Download the AIR 2.0 beta runtime here.
Download AIR2Excel.air here.
Double-click AIR2Excel.air in Explorer or Finder to start the installation process.

Posted in Air, Flex | 14 Comments

“Voice Notes”: Record Voice Notes and Persist them in SQLite with AIR 2

By Christophe Coenraets | Published: November 18, 2009

As you probably already know, the Flash Player 10.1 and AIR 2 betas are now available on Adobe Labs. I’ve been playing with the Microphone API in AIR 2 while working on the booth here at Devoxx, and built this small sample application that allows you to record voice notes and store them in the embedded SQLite database so that you can replay them later.

No rocket science here (and no designer involved), just one more microphone API sample. You can install the application here (AIR 2 required):

Installation Instructions

Download the AIR 2.0 beta runtime here.
Download voicenotes.air here.
Double-click voicenotes.air in Explorer or Finder to start the installation process.

View Source (right click) is enabled.