In particular, we were at the FlashForward Job Fair, talking about all the great opportunities Yahoo! has for Flash and Flex developers. You can find a full list of the open positions at careers.yahoo.com.

We also dropped in on the end-of-conference Jam-Slam session, where we decided to go whimsical and throw some things at the audience. Well, not so much “things” of a “heavy steel ball” variety, but rather ideas, little snippets of Flash apps we thought would be incredibly cool to see built.  You’d be surprised how many good ideas one can fit into the two minutes of allotted time.

Although the presentation at the conference itself was without slides, I added some slides to it and re-recorded it for your entertainment. Here’s what we had to say:

The services and APIs mentioned in this little pep talk were: Yahoo! Pipes, Yahoo! Live, Yahoo! Maps AS3 API, Yahoo! Weather, Yahoo! Answers and Yahoo! Music. And of course, the links at the end of the talk lead you to our developer center and a sign-up page for the wonderful Open Hack Day (we’ll blog about it separately).

The session starts with a high-level look at the most obvious question, “What is Flex?” I discuss the Flex ecosystem, including ActionScript 3, the core Flex framework classes, and the tools like Flex Builder and the compilers in the free Flex SDK. With a foundation established, I move a bit more low-level as I introduce MXML. To avoid the inevitable questions later, I immediately explain the relationship between MXML and ActionScript. We take a look at some MXML code for a simple Button component, and then I show the ActionScript equivalent.

To start with MXML and Flex Builder, I begin by showing the Design View, adding components and manipulating properties in both code and visually. I try to cover the basics of properties, styles, and events, along with using a <mx:Script/> block to add functions and communicate between MXML and ActionScript. Next, we take a look at different layout modes, constraints, and positioning. Containers are an obvious subject to cover after layout, and I explain concepts like deferred instantiation and creation policies.

Before a short break, I typically give the class a look at how Flex projects are built and run. We see the Flex Builder debugger in action, and take note of the different debug and release SWFs. I explain the directory structure, including the bin and html-template directories, and I show how to customize the output. Finally, now that the class has gained a broader understanding of MXML, I show them the -keep compiler argument, and we dive into the generated code to see the MXML-to-ActionScript relationship in more detail.

After the break, when I’ve had a moment to grab something to drink, I start talking about loading external data. We use HTTPService to load simple text files and then we graduate to XML data. At the same time, I introduce binding and show how to use the lastResult versus using the service’s ResultEvent.RESULT with ActionScript. We play with XMLLists in the List component before I change the focus a bit to loading graphical assets like images, and we look at various ways to embed data in a Flex project.

We’re up to speed on most of the basics at this point. Getting into more intermediate material, I show how to use States and Transitions in MXML. The most obvious example to demonstrate states is a search form. We add a button to toggle advanced options, and I show how to add more items to the form with a new State. To make it a bit more interesting, I add a couple Transitions to resize the form as the new items are added or removed.

Using the same example for the next topic, I show how to make the search form into a simple MXML component. We take a look at XML namespaces and how they relate to ActionScript packages. I explain how the mx namespace works (because it isn’t declared with a package), and I mention how this relates to SWC files and Flex Library projects. This quick example is finished by placing two of our custom SearchForm components into the main application.

Finally, if I have time left, I give a short introduction to building ActionScript components for Flex. For this section, I have a set of slides, since there generally isn’t enough time for live coding anymore. Often, this material can be a bit advanced for some of the beginners, so the slides offer something to look at again later when they’re ready. The first look at components is the lifecycle from constructor to garbage collection. I spend time on each of several high-level steps. There’s a big focus on the invalidation and validation model, and I try to introduce the complex measurement system with a look at how a component and its parent communicate to determine the component’s size.

Slides from Flex Components Introduction

Ideally, I’d like to teach a separate class on Flex component development, since I have a lot more material that I can cover. Some live coding would make much of the component lifecycle a bit clearer, I think, and building a full component with styles, events, and other details requires a decent chunk of time. Additionally, I have more slides that explain how Lists and other components that use item renderers can be built, and that’s certainly a more advanced topic that would fit best in a component-focused class.

By the end of the class, the attendees are overflowing with new Flex knowledge, and all of them leave with a happy, “Thank you!” A few may have some more advanced questions if they’ve already begun some work with Flex. As I mentioned, I try to make my Custom Flex Components Slides available to the attendees for download afterwards. I know many folks like to look over slides at a later time to reacquaint themselves with the material. Feel free to download them yourself if you’d like a closer look at the information I present.