ScaleNine

There’s more information starting to filter out about Gumbo, the next iteration of the Flex SDK. A lot of Flex developers were excited after seeing Ely Greenfield’s presentation at MAX last year and it’s great to see things starting to take shape. There’s a lot of change under way and I’m sure the Flex and Thermo teams are moving ahead full steam with an eye on this year’s MAX Conference.

Of course, the things I’m most interested in are the ways they’re improving designer/developer workflows. As I mentioned previously, there’s a lot of stuff that has to happen to make that collaboration smooth. Here’s a few things that caught my eye:

FXG
FXG is the graphics markup that will allow you to compose graphics for things like skins and visual displays. This is similar in concept to Degrafa, but with more focus on Thermo and the capabilities of Flash Player 10.

Skin Parts, States and More
All these features surround the new approach to creating components in Flex 4. With skins being separate you’ll be able to do a lot of wild stuff without feeling the current constraints you may be experiencing in Flex 3. Things are going to get a lot easier.

Advanced Animations
A lot of designers and developers I’ve spoken with have had issues working with Effects and Transitions in current versions of Flex. Animations are being reworked to be more versatile and support both component and non-component objects like FXG, colors, etc. I definitely like the sound of “intelligent” and “blended” effects.

New Text Elements
I use HTML text a lot in applications to support styled and dynamic text. It’s great to see additional support coming for <div>, <span>, etc.

This is all really great stuff to read and I can’t wait to see it come across in code. I’m also looking to see how this all integrates with Thermo. For more information, check out Deepa Subramaniam’s post with a round-up of links.

Everyone is getting excited as more details come out about Thermo. I’m sure the number of email requests to get on the “super pre-alpha” have flooded Adobe inboxes. The reason is that Thermo is looking to solve a huge gap in designer/developer workflow. This gap exists across pretty much every development workflow in various shapes and sizes, so it’ll be interesting to see what Adobe comes up with.

Thermo looks like a great tool, but it’s only half the story. The other part of the story (a big part) is what Flex 4 (Gumbo) is doing to make all the things in Thermo possible. You know, the code that’s generated behind the scenes as a designer is turns artwork into a working interface, adds transitions, etc. There’s a lot of work being done on Flex 4 to make Thermo look good, but each component, Flex 4 and Thermo, is vitally important.

If you were at last year’s MAX and saw Ely Greenfield’s presentation on “the flex roadmap”, then you probably know what I’m talking about. After MAX I tried to explain to people what I saw in his presentation, but it usually just wouldn’t come across. Now, on Adobe TV there’s a video of exactly what Ely was talking about. In the video he changes the way a component looks and acts all in a skin file. I assume this would be done by designer’s in Thermo so they don’t have to touch any code. This is also the same presentation that inspired Ben Stucki to create OpenFlux.

I showed this video to another developer and he asked, “Well, what will there be left for me to do? Create data and clean up Thermo code?” To him, making custom components was the fun part and now it seems part of that responsibility is falling on designers in Flex 4. The thing is, you can’t do everything with Thermo and Flex 4 out of the box, like turn a List into a spinning globe. I think things will definitely change to allow designers to have more control, but developers will now be freed up to do even more innovative things.

Things are definitely going to get interesting. Check out the video here.

Now that I’m back from Chicago I thought I’d put together a list of features I took away from the “Thermo” demo that was given at MAX. Imagine creating Flex UIs and experience using the very familiar toolsets in Photoshop, Illustrator and Flash. Adobe’s “Thermo” project does that and more with strict emphasis on a tool for a designer to create the front-end of an application. This is the answer to so many questions and issues people have had with the designer/developer workflow. There’s an Abobe Labs page where you can learn a bit more, which includes images.

There were a number of features shown, including the ability to import a Photoshop file and then easily convert artwork into working components. Once the artwork is imported a designer can go through and convert the artwork to working components. When this is done, everything that is selected is converted to MXML with reference to external image assets. One example that was shown was a graphic that was designed to be used as a text input was selected and then from a menu item was converted into a functional TextInput, skins and all. One thing I’m hoping is if you import vector art, the vector properties are maintained and converted to MXML path data and colors, alphas, etc. values remain editable.

For more complex components, like a scrollbar, you work within layers to specify which artwork is which part of the component. For example, you can designate which artwork is a scrollbar thumb by simply dragging the artwork within a layers palette into a folder called “thumb”. I imagine this feature may evolve to support custom components where a developer might specify the different parts of a component, which would translate into folders inside of the Thermo component/skin palette.

Another thing that was shown was the ability to create a relationship between a List and a ScrollBar. So, the List was separate from the ScrollBar, but there was an icon that was dragged to point to the List and a relationship was created. Once those items were linked the ScrollBar now controlled the List.

You can easily work with transitions and effects on different portions of the UI using layers and simplified timelines to do what traditionally may have taken a good understanding of writing those out in MXML. Once you felt your effect was where you’d like it, you could scrub through the timeline back and forth to preview your work.

Additionally, it is really easy to make a dummy data set for mockup purposes. What was traditionally a more elaborate process of creating a dummy XML file and assets has transitioned into a seamless process of using a very visually approach to defining data, editing data and simulating data populating your UI. The data can be worked with via a data grid based structure.

“Thermo” is great because Adobe has focused on patterns and tools a designer is already familiar with from other products and made a really familiar workspace for a designer to create user interfaces for Flex and AIR. The features that were presented were awesome and there’s already people talking about additional features they’d like to see. “Thermo” is an awesome tool, but from what I’ve heard we might have to wait a while, but it’ll be worth it.