After our conversation on different possible ways to approach this task, I wondered how easy this would be to do with the OpenFlux DataGrid. My solution is simply a custom view for the DataGridRow that expands the height based on mouse over/selection.

I've included an example below with view source enabled.

The component is actually a grouping of multiple sub components including DataGridColumn, DataGridHeader, DataGridRow, DataGridCell which all extend either List or ListItem giving instant selection and drag/drop functionality. You can easily hook up your own custom controllers and views to add any functionality you desire.

Be sure to play around with the example below and view source to see how it all works. My only note is I'm having some SVN issues so this isn't yet committed to the OpenFlux project.

The app is below with view source enabled. So far the component is really simple and doesn't even have a controller. I plan on developing it further but wanted to show it off at the early stage so you can see how simple it is to get started creating a custom OpenFlux component.

I will be posting updates as I add more functionality. Let me know any ideas you have for what you would like to see.

View Source Code

View Source Code

We've still got a ways to go, OpenFlux is still in alpha release, but I'm really happy with what we've done so far and I can't wait to show it off. My session at 360|Flex will give you a great idea on what's currently possible, how to get started and future plans. Not to mention some sweet demos with full source code provided.

I'll also be looking to the crowd to drum up discussion on where to go next with the project. Although OpenFlux has been quoted as "Flex 4 Now", Plexiglass is definitely beyond the scope of the Flex 4 SDK. We've got a pretty solid core, I've experimented with Flex 4 compatibility and I think with the communities help this project can go a long way.

Below is a quick example (took 5 minutes) of a regular OpenFlux List component using the FlowLayout and an OpenFlux List using Plexiglass with the SpiralLayout. You can see by the source code, Plexiglass is really easy to get started with.

If you are interested in learning more come check out my session on Monday afternoon. On Sunday there is also free training on OpenFlux with Ben Stucki and I'll also be there to show you how to build a 3D component (e-mail info@360flex.com to RSVP).

Lastly: This will be my third time going to 360|Flex. The previous 2 (Seattle, Atlanta) I had a blast, learnt a lot, meet a bunch of great people and it sounds like this one is going to be even better. I look forward to seeing you all there and if you see me around please come say hi.

We've still got some work ahead of us before this goes public but I definitely can't wait to see OpenFlux get used and see what new 3D layouts others contribute.

As we get closer to release I'll be posting more examples and howtos on getting started with OpenFlux.

Click the image below to try out the example.

A regular OpenFlux layout class manages the the x/y positions of the item renderers. PlexiGlass layout classes goes a step further and manage z position, x/y rotations and the camera.

We've still got some cleaning up to do but the code for this example will be included once PlexiGlass goes public. Click the image below to try out the example.

I'm really excited for OpenFlux, have been contributing to the project quite a bit and I'm hoping to spend a lot more of time over the next while helping get OpenFlux to a stable release and posting examples on my blog so others understand what's possible.

The general difference between an OpenFlux component and the current Flex components is that the logic is separated in to a MVC architecture. This allows you to easily swap out one part of a component while keeping the functionality of the others. A List component goes a step further and separates the layout logic so you can easily invent new ways to layout your list items.

In this example I've created a cool (but possibly not too practical) OpenFlux List component that displays a deck of cards. Although it looks nothing like a standard List component, it is a List and has the same functionality that you would expect a List to have. For example, the cards are selectable and as you select multiple cards their suit/rank is displayed in a separate standard List.

To get the List working how I wanted all I had to do was use the Image component as my item renderer and create a custom layout class (which is now included with OpenFlux, called StackLayout). The StackLayout has gap and selectMode properties that you can play around with. Click the image below to try the working example.

You can checkout the latest OpenFlux source code, including code for the example, at the OpenFlux SVN webpage.