Throw away those Flickr proxies! They added an open crossdomain file on http://static.flickr.com. Fuck yeah! Read the blog post here. You can see the crossdomain file here: http://static.flickr.com/crossdomain.xml. Thank GOD. I no longer need to route every single Flickr image through my server just to get access to BitmapData for an image. This is one of those things that bugged me so much about Flickr. They gave us a nice open crossdomain file on their server we use for api calls, but not on the server that gives us images.
w00t!!
P.S. I usually don’t do these rehashing of blogosphere posts, but this one makes my life a helluva lot easier, so I wanted to share in case anyone missed it.
I’ve been reflecting on how my session at 360|Flex went. Overall I was very happy, I really enjoyed the communal vibe we got going with the discussions. The session ended up being a conversation among developers. I started out giving a presentation with slides and all that jazz, but that quickly got sidetracked and we ended up just sort of shooting the shit and sharing different tips on custom component development. Awesome. That meant I was able to chill and let everyone else teach the session. It kept me interested, and I hope it did for everyone in the session too.
David Coletta took notes during my session (as he did for all the sessions he attended at 360Flex, friggin good work with the notes David). I should also point out that David contributed a lot to the discussion while he was note-taking, impressive! Dan from polygeek.com has some thoughts on the session as well. He wrote that the “session itself was sort of open source,” which I think is really cool that that’s how it turned out. There are a few more notes on the session from some guy named Dave. Apparently he overheard someone say “will there be notes posted from this meeting? This is really kind of scattering my thoughts.” I worry that it was a bit too incoherent, I definitely jumped from slides to code to pulling up random websites to discussion. I hope it was a good balance for people, but I could see how it might have been difficult to follow.
If you have any thoughts about what you liked about the session and what you didn’t, please email me and let me know, or leave comments.
The thing I liked the most about the session is that I learned a bunch of stuff. I don’t claim to know everything about developing custom components, a lot of the people in my session knew a ton more than me. Here’s a list of the things that I learned during the session:
I suck at properly using commitProperties and invalidating properties correctly for optimal component performance. This was pretty hilarious during the session because before the session I was talking to Deepa and she asked if I was going to go over when to use commitProperties and using dirty flags for property validation and all that. I said that I don’t know how to do that, I end up not doing it in my code, so no, I wasn’t going to cover it. She was appalled. It was like I told her I’m naming my first child Silverlight. So then the funny part is that I’m up there at the podium and the very first question that was asked was Andy McIntosh asking “Doug, can you explain when to use commitProperties?” I almost died, it was hilarious. So I promptly responded that no, I don’t know a good explanation of the proper use of commitProperties, would Andy like to discuss how he does it? And then Andy and Deepa taught the session for a while while I took notes. Awesome.
Monkey Patching is a sweet term. I called it “underriding” classes in the framework, not sure where I got that term, it’s certainly not a “correct” term, but I didn’t have anything better. So then Tony Hillerson pipes up and tells me that in other languages there’s a term called monkey patching that is used to describe pretty much the exact same thing. Cool, I had no idea.
There’s a [Mixin] metadata tag. I had never even heard of this. I was going over using a static function to initialize default styles for your component and then Adam Flater yells out that you could use the [Mixin] metadata tag and that would allow you to have an init() method that would get called once for your class. So in the session I pulled up the blog post on Adam’s site and we went over the code straight off his blog. Cool.
I sound like Tom Hanks with Tourette’s. I disagree with this one, but it’s hard for me to judge my own voice. Doug Schmidt seems prettyadamant about this, so it must be true.
Other random stuff. When we were talking about styles vs properties on custom components Tony talked about using both styles and properties to define the same property, which meant that a developer could take their pick and use either the property or the style (ie they could do it all with CSS if they want, or all via direct properties in AS). Nice, hadn’t thought of doing that. We all bitched about not being able to reference static variables for our Event names in the Event metadata. Doesn’t seem like anyone’s found a solution to that one (same for defining possible enumerated values for properties in the Inspectable metadata tag). Someone else mentioned that when I was showing my custom event code I had forgotten to have a Event.clone() function to clone the custom event. Yup, my bad, good catch. That’s what I love about participatory audiences.
We ended up covering a lot more material with a lot more expert knowledge than I would ever have been able to provide on my own. I think maybe instead of a single presenter running a session we should think about doing more panel-like discussions on a specific topic. Get four or five badass Flex devs together, have one person in charge of making sure things don’t get completely off track, and then just let the discussion take over. Let everyone share the tips that they know. It might end up being the worst session ever, but I think it would turn out really well. What do you guys say… Deepa, Tony, Andy, Adam, David, you all in?
Here are the slides from my presentation at 360|Flex, as well as most of the code I presented. The presentation is embedded below using SlideRocket, or you can view it at the standalone link here.
That presentation is almost the same as the one I actually went with in the session (minus a few unimportant last minute edits). The hard part about doing a session that jumps between the slides and code in Eclipse is I don’t have any of the code we went over in the presentation. So here are a few of the examples that I covered, with source code.
Resizable Wrapper component Demo | Source Code
This is a container component that adds resize handles and a drag bar that allows you to resize it’s contents and drag it around. Pretty straightforward, not too exciting. You would use the component like any other container and wrap it around the object you wanted to resize. So something like:
Adding resize handles to every UIComponent Demo | Source Code
Now this is where we get into the cool stuff. In my talk I explained “underriding” core framework classes (I guess it’s actually called monkey patching, thanks to Tony Hillerson for teaching me this). I first learned about this technique on Michael Labriola’s blog. In this example I use the resize/drag component that I made and apply it at the base mx.core.UIComponent level. This means that every single framework class that extends UIComponent (every ui component in the Flex SDK) will have the ability to use the resize handles. No need for an extra wrapper container, or an extended ResizableImage or anything like that. It just works. Isn’t that cool?
Templating example Demo | Source Code
I didn’t even get to this in my presentation, I ran out of time and skipped it. I’ll probably do a longer blog post about it in the next few days, but for now here’s an example with code for MXML templating. The basic idea is that I created a base “media player” class that included a progress bar to indicate the playhead time and a play/stop button. Then I used that class as the “template” and extended it to play a wav file and display the filename. Then I extended that to play an mp3 and display the id3 info in the component. And the last extension plays a video and displays the playing video in the component contents.
Thanks to smart people
A HUGE thank you goes out to all the awesomely smart people in my session that ran the thing for me. I’m going to write up a more detailed post with my thoughts on how the session went later, but I want to give a big thank you to Deepa Subramanian (for just being overall badass and answering a ton of questions), Andy McIntosh (for rocking the commitProperties discussion), Tony Hillerson (for monkey patching his way into the session), Adam Flater (for teaching me about [Mixin]), and David Coletta (for sharing his experiences with custom components while working on Buzzword). The session was fun because I got to sit back and let these guys teach everyone how to do custom component development.
Well, almost ready. Mohawk? Check. Silly shirt with my silly face on it? Check. Presentation? Ummm, it’s coming along…
Here’s the brief description I finally wrote up about my custom component development session:
This session will focus on advanced component development techniques. We’ll cover some of the basics to make sure everyone’s up to speed, but the focus will not be on updateDisplayList() or createChildren(). Topics that will be covered include: diving deep into the framework to find the meaning of life, overriding the framework to create the components you actually want, using events to communicate from your components, using styles and setting default styles for your components, ‘underriding’ base framework classes like UIComponent, MXML templating, how to deal with pesky private variables when overriding a class, and how to steal other people’s ideas (and code) to make you look smart.
I’m still working on the presentation and I have absolutely no idea how I’m supposed to take up an hour and 20 minutes. Like that description hints at, I’m going to try to focus on what I consider the “non-standard” stuff in component development. I’m not going to make a Hello World Flex component. I’ve got a few cool tricks to show (at least I think they’re dorky cool), and I’ll cover some of the harder stuff like doing good event dispatching from your components and using styles correctly. If I run out of content the session will devolve into a “bitch about what you don’t like in the Flex framework” session, and I have a feeling we’ll be able to fill up a substantial block of time with that.
I’ve posted a video that shows the progress that I made during the first 12 days of working on TileUI. For about the first 2 weeks I saved a snapshot of the progress I had made (I tried to save a snapshot each day, but I missed a few). The video below is a combined video of each of these, it starts at day 1 and goes through day 12.
I stopped taking daily snapshots (and I stopped making much progress) after the first two weeks because I started working on a contracting gig. I’ve gotten much further with the software now (as the previous AIR demo video shows). But I’m not making the day to day advances like I did the first few days (man, if only I could be unemployed forever).
Here’s a quick breakdown of how things went:
Day 1: Learn Actionscript Physics Engine. By the end of the day I had a decent physics simulation running that allowed me to throw around particles. Prior to this project I had never worked with APE, it’s a solid physics engine (my only complaint is how CPU intensive it is).
Day 2: Learn PaperVision 3D. Combine PaperVision with APE. Prior to this I hadn’t played with PV3D and I figured it was about time I learn. By the end of the day I had figured out the basics of PV3D and managed to map APE particles to 3D tiles in PV3D. Damn, these libraries are good.
Day 3: I got the tiles to display images. And I got the basic selection system working where you can lasso a set of tiles and they get grouped. The group was just a messy group of tiles, but it was a start.
Day 4: Added Flickr support to load tiles straight from Flickr. Added dynamic sizing of tiles.
Day 6: Made grouping tiles put them into 3D stacks. Added double clicking tiles to do something based on the tile content, ie open larger Flickr image. (I don’t remember why I don’t have a day 5 or 8 snapshot)
Day 7: Improved Flickr support, ability to page through results, load multiple search results, etc. Added spiral stack.
Day 9: Added the menu system. Added the twist menu item to twist a stacked pile. Allowed breaking piles you made.
Day 10: Added the fan layout method.
Day 11: Added the grid layout method.
Day 12: Added the leafing layout method.
So what?
I thought this was cool because it shows a) how awesome and fast developing in Flex/AS3 is and b) how badass open source community libraries for Flex are. I was able to grab these open source libraries and within a few days have something pretty sweet to show for it. A big thanks to everyone behind the PaperVision project, and to Alec Cove for the APE engine. You guys make this stuff easy.
At last count I am using 10 different open source libraries in the TileUI project in one way or another.
I’ll be at Adobe this Friday for the FlexCamp event. If you’re there then find me and say hi (sadly no mohawk at the moment, so I’m not as easy to spot). I’ll probably be one of the people drinking in the back. I don’t know how the whole sessions thing is going to work. I suggested a session on the FlexCamp wiki to talk about Flex community libraries (like FlexLib, Papervision, etc). So I have no idea what the deal will be in terms of these attendee-suggested sessions, but people on the wiki have shown some interest in the community library session, so if you want to come talk about all the cool libraries that are available I guess we’ll try to do that at some point in the night.
If you want to play with tileUI I’ll have a demo (both as a web-based Flex app and a desktop AIR app) you can try to throw tiles of your face all over the place.
The first half of my interview for the Flex Show is up online. Listen to me blabber. We go over 360Flex, FlexLib, a bunch of open source Flex libraries, and I talk about my thoughts on Flex component development.
We had some technical issues (all my fault). My mic wasn’t nearly as good as Jeff’s, which is pretty clear in the audio. And my internet connection was piss-poor, so while he could hear me just fine, I only heard bits and pieces from Jeff’s end, which made it a little difficult to have a conversation. I think Jeff edited it a bit to make it sound like we were actually talking, but often he asked a question and I waited for him to type it out before I could answer it. And to top it all off my recording program froze up before the end of the interview, so the last bit is a backup recording that Jeff thankfully made. But what else do you expect from a tech podcast? 🙂
I’ve started noticing FlexLib components out in the real world. It’s a pretty cool feeling to launch some Flex app and suddenly realize that some component you wrote is being used. Here are a couple of screenshots of a few Flex apps that I’ve seen using a few components from FlexLib.
Salesbuilder demo app by Christophe Coenraets
Uses the SuperTabNavigator. This is a great use the SuperTabNavigator. By setting the tabs to be rectangular and skinning the close button on the tabs, it ends up looking great. Download the air app, play with it, and notice how super the tabs really are.
Synchronicity by Eric Cancil and team (sorry, I only know the name of the guy who blogs it)
I was using this app to test it out and watch some recorded performances and then I noticed that the tabs use the SuperTabNavigator (see those blue tabs with the close button?). I also noticed that the form fields use what looks like the PromtpingTextInput control (see the fields that say Firstname, Lastname, and City?).
AgileAgenda by Marc (don’t know last name)
Uses the Horizontal Accordion.
Also, I just started a contract working with a Flex startup here in the Bay Area. When I got set up with the project files I noticed that in the /lib directory was flexlib.swc 🙂 They’re using the Highlighter component.
If you’re using a FlexLib component in a Flex app, I’d love to know about it. Send me an email if you want. It would be interesting to try to figure out which components are used most.
I’ve been reflecting on how my session at 
The first half of my interview for the Flex Show is up online. 
