Ben Stucki

If you weren’t at the Birds of a Feather session for Papervision at MAX 2007 and you missed my session at 360 Flex Atlanta…

… you might not know that I’ve been playing with Papervision3D a lot lately. Most of that work is actually pretty useful, and well… the rest of it involves 3D glasses.

I’ve finally made the source for this experiment available for download. Plus, I’ve added all of the anaglyphic rendering code to my personal googlecode project. The example shown here was written on the “Phunky” Papervision branch, but the classes in googlecode should let you render anaglyphs for any version. If you have an older Papervision3D project, you just need to swap out the existing Scene3D with AnaglyphicScene3D. For newer projects using the GreatWhite release, use the AnaglyphicRenderEngine. Now that the code’s available and all those glasses are out there, I expect to see some awesome 3D examples from you people!

Anaglyph Demo (1.53 kb)
AnaglyphTest.zip (8.04 kb)

OpenFlux is now officially open-sourced and available at http://openflux.googlecode.com/. If you haven’t heard of it yet, I’ve included some information below. Please try it out, join the mailing list, and let me know what you think!

What is OpenFlux?

OpenFlux is an open-source Flex component framework which allows developers to create radically new and custom Flex components. It’s based on the work seen in Ely Greenfield’s Flex Roadmap session (courtesy of João Fernandes) and is inspired by design patterns found in WPF/Silverlight, as well as example code available from Sho Kuwamoto. I certainly can’t say that it’s going to be exactly the same as what you might expect from future versions of Flex, but it’ll be a step in the right direction for your projects today. If you’re not familiar with those links, here are a few descriptions which apply just as well.

OpenFlux is an MVC Component Framework. Each component in OpenFlux is comprised of three core parts which work together to define the API (Model), graphics (View), and behavior (Controller) of a component. At first glance I’m sure this seems like it may be overkill for creating a component, and it does add a little bit of complexity. However, there is a huge advantage in that you can very quickly and easily add entirely custom graphics and/or behavior to a component without having to worry about rewriting or breaking the existing pieces.

OpenFlux is a set of Components. It includes completely new Buttons, Lists, and ScrollBars in the first release. By mixing and matching the views, controllers, interfaces, layouts, animations and utilities provided in OpenFlux you can create nearly any Button, ScrollBar, or List imaginable including Checkboxes, RadioButtons, TileLists, CircleLists, and more.

OpenFlux is an Advanced Layout and Animation API. It introduces a new layout system for lists and related components. We’re working very hard to make sure that this system is entirely extensible and shows at least as much thought as what went into the core framework. Watch out for some really interesting list examples soon.

OpenFlux is Degrafa’s Best Friend. Wondering how you’re going to make all those cool custom views for your OpenFlux components? Yup, these two were so meant for eachother that OpenFlux comes with Degrafa baked in. Consider yourself fully empowered to make people call you a bold-faced lier when you tell them it really is a Flex app. This is way beyond styling, way beyond skinning, it’s like we stole it from some future version of Flex or something.

Why OpenFlux?

The real purpose of OpenFlux is to be customized and used in your projects. Using a viewless component system means that you can create dramatically new and interesting components quickly and easily, without having to worry about breaking the other parts of the component. Ever spent days hacking away at the Accordian, TabNavigator, or List components? Me too, that’s why I built this. The answer isn’t to make everything protected, it’s to have a better component model!

There’s been a lot of buzz around the Degrafa Origin release that went out over a month ago, but there was something included that you probably haven’t heard of yet, Degrafa CSS Skinning. If you’re still putting the finishing touches on your submission to the 360Flex API Contest or you just want to get your existing application in the Degrafa Derby, maybe you should take a look. It’s dead simple to use, and it could give your application the edge you need to win.

I’ve included the full MXML (only four lines) of a Flex application below. All of the custom styling you see in the screen shot is controlled using Degrafa CSS.


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Style source="assets/style/style.css" />
<mx:Panel title="Degrafa CSS Skinning!" left="20" right="20" top="20" bottom="20" />
</mx:Application>


I’ve found that the first reaction most people have to seeing this demo is that it must be some kind of trick. Maybe we cut the graphics just right to make it look cool in the screen shot or maybe there’s some secret trickery going on in the components? So, for you non-believers we published this sample on samples.degrafa.com. You can resize it all you want, and even check out the source to see the CSS. The second reaction is that we must have seriously hi-jacked the framework in some way. Maybe we have some singletons stashed away or require special compiler setup? Nope. No ugly framework hackery or compiler requirements included. In fact, it’s just a plain old Programmatic Skin. A really awesome, well architected (if I do say so myself) Skin. Of course if you don’t believe me, you could just download the source from google code, and if you’re really feeling curious, check out the recording of my 615Flex User Group Presentation.

Have questions? Want to have an in depth conversation about the simple genius of the IFill interface? Come to 360|Flex Atlanta and stop me in the halls, at a party, or after Juan’s Degrafa Session. That’s what it’s all about. Not going to 360|Flex? Why not? Register here.