Yahoo! Flash(R) Blog

Learning Flex at Yahoo!

As you are probably aware, we have a web version of Yahoo! Messenger that was built with Adobe Flex. A little Flex magic also powers Yahoo! Maps. With these highly-visible projects using Flex, it’s not surprising that many Yahoo! developers frequently contact the Flash Platform team to soak up our Flex knowledge and learn more about this technology. To help foster the internal Flex community here, and to ensure that our developers have the right tools and skills, I teach a Flex class that covers material from the very basics of MXML all the way into some more advanced areas like custom component development. Typically, these sessions involve a lot of live coding with open Q&A between myself and the class as we explore Flex and its many features.

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.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!