Like this:
Come to the PaperVision 3D birds of a feather session at MAX on Monday night @ 7:30 in room 176 B to get your glasses and check out some cool Flash/Flex experiments that use ’em.
Author Archives: Doug
Come to the Custom Flex Components Birds of a Feather session at MAX!
I’m part of a panel that’s running the Flex Custom Component Development birds of a feather session at MAX. We’ve got an allstar group together: Deepa Subramanian, Tony Hillerson, Chafic Kazoun, Adam Flater, and Andy McIntosh. We’re all going to be hanging out and talking about component development in Flex. But we don’t know what to talk about. We’ve got a tentative list of topics we think people might want to discuss, but we want suggestions for things to cover.
When: Monday October 1 @ 9:30 pm
Where: Room 179 A
Here’s what we’re thinking so far:
- Invalidation/validation model
- Application components vs. custom components
- Performance/Memory Optimization
- Coding Conventions (naming conventions, mostly)
- Code Behind
- Component development in Cairngorm
- Underriding or Monkey Patching
- Where to go drinking after we’re done
So come by the BOF session on Monday night and we’ll talk about component development. I know it’s late, but seriously, come by or we’re going to cry. Bring your questions and ideas on what you want to cover. Leave comments about what we should try to cover or just email me directly (doug@dougmccune.com). See you there!
Doug.dorkiness += 3d_glasses
Here’s a screenshot of me having some fun with TileUI and 3D glasses. If you’re going to be at MAX, find me and we can all look cool together wearing 3D glasses. Attend the Papervision 3D birds of a feather session. Side note: Ben Stucki is the 3d glasses master.
Seriously, MAX is going to be ridiculous. I’m gonna get you wearing 3D glasses, flinging tiles around on a multi-touch table. This is gonna be fun.
Click the image for a larger size. You got 3d glasses?
My 360|Flex slides translated into Chinese
My presentation that I gave at 360Flex has been translated into Chinese by Robert Shuie. Thanks Robert! He translated my slides, as well as my blog post about the samples I presented. This is a bit of old news, since this happened about a month ago, but I’m trying to catch up on my life so I’m finally getting around to posting now 🙂 Anyway, fricking sweet that we’ve got such an awesome Flex community overseas that someone goes through the trouble of translating presentation slides.
Robert sent me an email when he did the translation and I loved this comment:
It is hard to translate “monkey patching” term into Chinese. I recently mark it as “????”, which means “force to evolve”. I have no idea if it fits the origin idea.
Ha 🙂
Nifty Flex Accordion Menu (like on Apple.com)
This is an example of using a slightly modified Flex Accordion to create a sweet looking menu. Someone on flexcoders asked how to make a menu like the one found here on Apple’s website.
Here’s the example I came up with to do this:
This movie requires Flash Player 9.
The Accordion
This is a Flex Accordion component (well, sort of…). It’s actually a slightly modified Accordion. The cool part is that FlexLib already had a modified Accordion component because I had made the Horizontal Accordion. Because of that there has been a VAccordion in FlexLib as well, which up until now has been exactly the same as the normal Accordion component in the framework.
So I added a new property to both VAccordion and HAccordion called headerLocation, which allows you to specify where the header should appear relative to the content. For VAccordion this property can be either “above” or “below”. Using above means it works just like the normal Accordion. But now you can also specify below, which will render the header below the content, which was the first requirement for this example.
The header renderer
The next problem was that the header of the Accordion needs to be more complex than a normal button. It needs to show two text fields, one for the title of the header and one for the descriptive text. And the description needs to wrap on multiple lines. So as I blogged about previously, I used the CanvasButtonAccordionHeader in FlexLib to easily use a complex header on an Accordion.
The header skin
Next we have the problem of the skin for the button. The skin isn’t too complex, but there are a few things that are hard to do with the standard Button skin. We want rounded corners on the bottom of the button but not the top. And we want nice control over the gradient of the button. What to do? FlexLib has an EnhancedButtonSkin that lets us do all this (and a lot more). Problem solved.
The mouse interaction
The menu we’re trying to emulate responds to mouse over events, not clicks like the normal Accordion does. This is easy enough to fix by simply faking a MouseEvent.CLICK event any time we get a MouseEvent.MOUSE_OVER event. By making our headers dispatch these fake click events we trick the Accordion into opening the child when the mouse rolls over each header.
And there you have it.
View the example in its own window (view-source enabled)
View the source of the example
In the source I’ve bundled a version of flexlib.swc that includes the new headerLocation property for the Accordion components. This is because I haven’t yet released an updated distribution zip on the FlexLib project page that includes this update (but I did commit the changes to SVN if you’re using that).
Using complex headers with the Flex Accordion
Here’s an example of how to use complex UI components for the header renderers of a Flex Accordion component. Normally the Accordion only allows you to specify a Button as the header renderer, and any customization still requires you to subclass Button, so it’s hard to get full control over the headers. The CanvasButton component in FlexLib is an extension of Button that acts like Canvas, which means that it subclasses Button but allows you to easily add children via MXML.
I’ve created a special extension of CanvasButton that is specifically for use as a header renderer in an Accordion. The new CanvasButtonAccordionHeader (nice name huh?) is now in the FlexLib SVN repository. Note that this is in the FlexLib SVN repository but is not in the zip distribution on the main FlexLib page yet, once we get a few more updates I’ll update the .zip distribution. For now you’ll have to get the source from the repository.
The example below shows using a header renderer for the Accordion that display a ComboBox and a CheckBox in the header. The point here is that since you’re effectively using a Canvas as the header, you can easily add whatever UI components to the headers that you want.
Browse the MXML source of this example.
This movie requires Flash Player 9.
My New Toy
I just got a new toy. Anyone care to guess what it might be? Note: there is some assembly required. I’ll be posting more when I get it up and running.
Click the thumbnail to view the full size image.
Some clips from my 360Flex presentation
Here are a few small video clips from my 360Flex presentation. The first is my favorite moment in the presentation when I get applause for saying “God damnit, make that protected.” 🙂 And the second clip is 7 minutes of the presentation where I talk about monkey patching (or “underriding”) the core Flex framework classes. I thought this was one of the cooler parts of the talk, so I decided to post the video of that section. You can get the full video (1 hour 20 minutes) of the presentation here.
The videos are licensed under Creative Commons license, so I’m supposed to do some attribution thing. They were filmed at the 360|Flex conference that was put on by John and Tom, video work done by Bryan Zug. You can get all the videos here. Cool?
FlexLib updates: new IconLoader component, bugfixes
A new component has been added to FlexLib: IconLoader from Tobias Patton, which allows you to load .icns (Mac OSX) or .ico (Windows) icons into your Flex projects.
New component: IconLoader
The IconLoader component converts a Macintosh OS X (.icns) or Windows XP (.ico) icon file, along with its alpha mask, to a Flex 2 UIComponent.
Documentation | Example | Contributor: Tobias Patton
New component: PromptingTextArea
This is exactly like the existing PromptingTextInput in FlexLib (is that perhaps the most-used component in flexlib?). Same thing, extends TextArea and allows you to specify a prompt to be displayed when the text area is empty.
The changelog for FlexLib .2 release:
- Added PromptingTextArea
- Added IconLoader
- Added case-insensitive option for Highlighter
- fixes for issues 35, 45, 47, 50
Keep reporting bugs! I do monitor the bug list and make fixes.
Also of note is that this is the first “corporate” contribution (outside of Adobe). Tobias Patton developed the IconLoader while working for EffectiveUI. We encourage companies to contribute components to FlexLib. You’ve got to release them under the MIT license, but we give you credit on the contributors page 🙂