The Joy of Flex

Wednesday 8:30 am. Giveaways! Tom and John are up on the stage giving away crap. Ther will be a SurveyMonkey survey about what worked and what didn’t at the conference, with an iPod giveaway. How do Tom and John do this? They do as much as possible themselves. They don’t know how “real” conference planners do this but they assume it’s a full time job for most. Tom and John do it in addition to their day jobs. They hire out pros to do stuff they can’t do, like eventbrite for their payment system for example. Looking for a marketing partner. Is it worth it? Immensely. It’s a lot of time and effort for them, especially if people learn a lot, make new friends, get a job or a client, and have fun!

Do they make money? Short answer is no. Long answer is that income was $46K from sponsors, $86K from attendees, total of $132K. Cost was $84K for food, $27K for A/V (including $2.4K for power) , $15.9K for promotional (including $8K for shirts), total of $126.9K. After everything, they probably lost a little money. Think of it as a start-up, that’s what it is. They want to stick with the 360 number for attendees, not make the conference bigger, because they like the small size.

Mixbook demo. It’s all about mixing together what’s on everyone’s digital cameras and making a printed “mixbook” or embedding on MySpace or a blog. What’s different about Mixbook is they used Flex and that they’re collaborative: you get all the photos from all the people at an event, a trip, a wedding, etc.. Pretty cool. The Flex interface is al drag and drop, zoom and rotate with the mouse. They have a lot of predefined layouts for a page of photos, you just drag photos onto a page, drag a layout onto the page. They are hiring, too.

I just gave a quick demo as part of this keynote. It was a little lame because I just focused on product features. I could have talked a little more about the company, where we’re going, what we’re going to do next, that sort of thing. But hey, the product is really the important thing.

Doug McCune is demoing TileUI. He saw the BumpTop video and realized that by combining PaperVision and ActionScript Physics Engine he could pull together something pretty close to BumpTop in Flex. He’s not sure what he’s going to do with it, not clear what the licensing issues are. But this is amazingly cool and we could use some of the physics stuff in the document organizer.

Sam Agesilas is demoing Saffon, a UML modeling tool. This is its first public showing. He is a designer and likes to work with pretty tools. Existing modeling tools are ugly. Will be available September 1, licensed with MIT license so anyone can do anything with it. Brings in a body of ActionScript code, models it in real time and animates the classes. It looks amazingly good: the design is clean and beautiful. He’s showing how you can type right into the model and rename a method and change its signature. It can parse the entire Flex framework codebase in about two minutes. He is obviously one of those very rare individuals who can both design and code really well.

 Ali Daniali has brought some of the code jam team up on the stage and is demoing the Northwest Harvest food drive web site that they have built over the course of the conference. Really incredible how many people were willing to give up so much time and take so much effort to work on this project instead of sleeping. Kudos to all you guys.

Technorati Tags: 360Flex

Overall, I was extremely happy with it. I can’t believe that up until Sunday I still thought I was going to do it without slides. It was a good decision to start working on that slide deck in the airport lounge. By Tuesday I felt like I had a good slide deck, and I had practiced a few key demos enough that I was feeling confident. I guess there are three lessons learned here: one, it’s never too late to start your slide deck; two, there’s no real reason to panic if you don’t start the slide deck until you’re about to get on the plane; and three, the more you practice, the better. One benefit of working on the slide deck all the way until the last minute is that I could incorporate a few things I learned from watching other people’s presentations.

Another really nice thing was that I felt like I was talking about really important stuff, no fluff, but I realized pretty quickly that I had considerably more material than time. That’s a good feeling because it means I could pick and choose the very best stuff to talk about. For example, I had six feature areas to demo and then dive into, and I only really covered four of them, and I only went into the code for two of those.

My talk was packed, standing room only and most of that filled too. While talking, I felt like I had hit the right balance between having figured out roughly what I wanted to say, but not rehearsed, so it was very spontaneous. There was a lot of laughter, mostly laughing with and not at! Best laugh line was when I was talking about some of the code in layout, and said, “they are not hacks, they are just performance optimizations that are difficult to maintain.” Later I saw that someone had twittered that line and called it the quote of the conference. Many, many people stopped me later to say that they really liked the talk, and I got a lot of good questions both during and after the talk. One person even said he thought I was funny! Imagine that. Another person pointed out that it would have been cool if my talk had been scheduled in the last time slot of the day so we could have just run over for as long as people were interested in staying. I asked someone to take notes of all the questions during the talk and email the notes to me.

My biggest goof was that early in the talk I asked for a show of hands of how many people had never actually used Buzzword, virtually every hand went up, and I had decided in advance that if that happened, I would give a five minute demo. But then I started taking a few questions and forgot to the demo, but dove right into the architectural overview. I realized my mistake pretty soon (“oh crap, I was going to do a demo and I forgot!”), got a good laugh (both with and at), and went back and did the demo. But it would have been better to have done the demo before the architectural overview.

Many people told me they were blown away by LiveTest, and personally it was one of the most rewarding things to demo — I showed recording, debugging, training, and executing a test — because it’s such an important part of the app but normally no one gets to see it.

All the talks have been videotaped and I’m told that the videos will be available for download in a few weeks. I’m not sure I have the stomach to watch it but I hope to get a copy and post it.

Technorati Tags: 360Flex, Buzzword

Here are my slides from my talk about Buzzword. I think the talk went really well, except that I had about 50% more material than time for it. Great questions from everyone, and it was a lot of fun to get to talk about it for a bunch of people that were so interested!

Technorati Tags: 360Flex, Buzzword

10 am. Topics this talk will cover: SystemManager and FocusManager, Accessibility, Localizing Flex Apps, Functional Testing, Deep Linking, Performance, and Random Thoughts.

The framework is the set of class libraries that Adobe provides to Flex developers. UI Components, Media Components, Layout Management, Charting Components, Expressiveness, and Data. As the framework evolves, this list will grow. We try to focus on making the framework extensible rather than trying to build every possible component into the framework. Read the code in the framework!

The display list. The player maintains a tree of all visible or potentially visible components. That’s the display list. At the root of the tree is the application, and everything else is a leaf or branch in that tree. All the addChild, removeChild calls are manipulating the display list. The SystemManager is the way to access fonts, styles, etc. on the display list.

The SystemManager is at the root of the Flex SWF, it’s one of the first classes that is instantiated. The most important job of the SystemManager is actually creating the application and adding it to the display list. The first few bytes of the SWF are enough to instantiate the SystemManager, which tells the player to stop executing after frame 1. (A Flex app is a two-frame movie; the first frame has the SystemManager, the preloader, and a few other things; the second frame has all your code, the Flex framework, etc.) The SystemManager then creates the preloader, which creates the progress bar. Then the SystemManager creates the app instance and sets Application.systemManager to itself. Then the application starts creating itself, creating all of its children, then emits the CREATION_COMPLETE event. That’s when the app is added to the display list by the SystemManager. Then the APPLICATION_COMPLETE event is emitted.

The SystemManager also manages layers of children for popups, cursors, and tooltips. You can access these top-level objects through the SystemManager.

The FocusManager manages focus on components in response to mouse or keyboard activity from the component level (vs. the player level). An application can actually have multiple instances of FocusManager, because it governs a tab loop, and you might want to have more than one tab loop. The player has a fair amount of focus management built into it, but we override a lot of that in the framework in order to manage it at the component level rather than the player level. So there are the concepts of player level focus and component level focus, and FocusManager manages component level focus.

As an application developer you may not need to worry about FocusManager related interfaces, but if you are a component developer, you will. Basic keyboard and focus handling is as simple as implementing IFocusManagerComponent and writing a UIComponent.keyDownHandler. Also there is a property on UIComponent called focusEnabled which says that your component can receive focus. For example, a Label will have focusEnabled set to false. All the controls in the framework can be operated with the keyboard. They all implement a keyDownHandler function.

It is an application developer’s responsibility to think about accessibility. Consider how users will interact with content. The Flash Player is already compliant, so you get a lot for free: you can use the player API (flash.accessibility package) to handle screen reader interaction And there is a lot of accessibility built into the framework as well.

To compile an accessible SWF, you have to enable it. That’s because we don’t compile the accessibility classes in by default, in order to save space. So we make it opt-in so you know you’re making things bigger.

Localization in Flex is similar to Java: properties files with key-value pairs. They are called resource bundles. You can do this in ActionScript or in MXML. In ActionScript you decorate your variable declarations with [ResourceBundle]. In MXML you use the @Resource directive. Properties files have to be in UTF-8 format.

In Flex 2 you need to do the work yourself to request the right locale SWF based on the browser’s preferred language. In Flex 3 there is more support for this but there is still work you have to do to load the right locale SWFs, and you can switch locale at runtime (which you can’t do in Flex 2).

Different languages take up different amounts of space because the text may be bigger or smaller depending on the language As a rule, the application will resize and reflow containers to handle these differences automatically, assuming you use constraint-based layout.

In Moxie, we added the ability to do runtime localization. You no longer have to compile the resources into the SWF, you can put them in a separate SWF, you can compile multiple languages into a single SWF and change on the fly. You access all resources through a new manager, the ResourceManager. Binding expressions that reference resources will automatically update when the language changes. You can localize non-string assets, and you can programmatically create resources at runtime and use them just like they were compiled in.

There is an Automation framework in Flex (mx.automation) that allows you to automate user level interactions, and verify that the application state is expected before and after each interaction. All the Flex framework components implement the automation interfaces. As an application developer you need to use human readable unique identifiers for each object in the app (the defaults work but are ugly), you need to remove unused containers from the automation hierarchy (showInAutomationHierarchy=false), and you need to link in the required automation libraries (not included by default because it increases the SWF size). There are other test tool vendors besides Mercury who are working on support for the Flex automation framework, but no news right now on who they are or when they might be available.

Flex 3 adds support for deep linking, where the URL changes according to the state of the application. There is a new BrowserManager that keeps track of anchors and fragments. The anchor is the part before the # sign in the URL, and the fragment is the part after the # sign. The fragments get stored in the browser history so you can use the back and forward buttons. The HistoryManager from Flex 2 is still there for backward compatibility but is turned off.

Improving Startup Performance. Watch what you do at startup. Don’t call setStyle() if you can avoid it, it’s one of the most expensive calls in the framework since it can trigger reloading styles in every component on the display list. If you have to call setStyle(), do it in the INITIALIZE event handler instead of the CREATION_COMPLETE handler. Use deferred instantiation when possible (leave creationPolicy=”auto”). Avoid unneccessary nesting of containers. You can use the Canvas container for absolute positioning which reduces layout and measurement. Also, In Moxie, you can set sibling-relative constraints and partition components into columns and rows.

Playing complex effects smoothly. Try increasing the duration of the effect with the duration property. And the less there is for the Flash Player to redraw, the smoother the effect plays. Avoid bitmap-based backgrounds. And try Effect.suspendBackgroundProcessing=true, but be careful to start it back up again. You can also improve things by temporarily hiding the background under which the effect is playing so it doesn’t have to redraw on every frame; hook into the EFFECT_START and EFFECT_END events to do this.

Access modifiers. Typically you see public, private, protected, and mx_internal. When we were porting the framework to AS3, anything we knew you would need access to we made public, anything in a derived class we made protected, anything we thought you would not need access to, we made private. We made mistakes there! File a bug! It’s easy for us to make something protected instead of private. If something is mx_internal, we are saying this might change. If you are accessing an mx_internal property, maybe it’s a bug, and it should be promoted to protected or public, so file a bug. If you use mx_internal you sign up to do maintenance later.

We have an open bug base now at http://bugs.adobe.com/flex. Please file bugs! The better your bug description, the better the chances are that it will get fixed. We thrive on feedback from the community. Also please search for bugs, and if you find it’s already logged, vote for it so we know that it’s important to many people.

Flex engineer blogs:

• Ely Greenfield: quietlyscheming.com

• Alex Harui blogs.adobe.com/aharui

• Gordon Smith: blogs.adobe.com/gosmith

Technorati Tags: 360Flex

Tuesday 8:30 am. Why do we care about memory management? We want our apps to run fast and run well. Users get mad if it’s slow. We want our apps to be stable, no leaks, no crashes, leave room for other apps to play. We want our code to hold up to scrutiny.

There are many times that excessive memory can be consumed. Large datasets, extended runtime requirements (hours/days/weeks), large forms with views and controls (e.g., home loan application), low-end hardware.

Demo: non-optimzed image browser app that loads a very large number of large images into memory before displaying anything: it hangs, you can see in task manager that it’s just sucking down memory and doing nothing else. Demo: optimized version of the same app, written differently: used much less memory, responded quickly to same user action.

(Side comment: he’s using an Eclipse plug-in called Snippets, looks like it’s a tool to manage code snippets, wonder what it is?)

The non-optimized verison was using a Tile container with a Repeater inside. A Repeater has to instantiate every instance in memory. The optimized verison was using a TileList, which only gets the visible instances, and gets more when it needs to (e.g., when scrolling).

Grant Skinner, Alex Harui are good bloggers to read on the topic of memory management.

Memory allocation in Flash Player: 1) Flex asks for small chunks frequently, player asks for larger chunk from OS more infrequently, can end up with larger memory footprint than your app is actually using.

Deallocation: garbage collection process will use deferred reference counting, and mark and sweep, to find unused memory and deallocate it.

Player garbage collection route deferred reference counting works by counting strong references, not weak references.

Mark and sweep starts at the root, works its way down the hierarchy of memory objects, memory used to store objects not reachable will be reclaimed.

Demonstration: Grant Skinner’s garbage collection simulator: www.gskinner.com/blog/archives/2006/09/garbage_collect.html.

Pros: performance, since it doesn’t run all the time and every time, it saves on processor cycles and response time. Cons: indeterminate, GC only runs when more memory is needed; iterative, may take a few passes to finish consolidating; and involuntary, there is no supported/recommended way for a developer to force GC.

Best practices — allocation concerns. With a dataset retrieved from a service, get an initial page of data, then get additional pages as needed. Paging is built into LCDS. Best practices — assets. Predict what your user is going to need and load only the minimal assets at first, then load more as needed.

Use deferred instantiation when possible. Be wary of creationPolicy=”all”. Try to avoid removeChild() / addChild() when it would work just as well to reuse an object or just toggle the visible property.

Modules: don’t unnecessarily load/unload modules. If you need to unload a module, make sure to remove all references pointing to it. In particular if you have an event listener from within the module to something outside the module, that can prevent the module’s memory from being reclaimed.

In AIR, you have to be careful with NativeWindow. After making a NativeWindow you must call close() before it can be GC’ed. But you must remove references before you can call close(). Also in AIR, when you open a FileStream object in asynchronous mode, pending event listeners can prevent the FileStream object from being GC’ed.

Demonstration of a memory analysis tool called Redbug that can graph the memory usage of a Flex application. Need to put calls to Redbug into hte app. See http://www.realeyesmedia.com/redbug/. Might be a useful tool for us, does things that the profiler doesn’t do.

Some interesting discussion about why the default value for the reference parameter in addEventListener() is false (strong reference) instead of true (weak reference), since a weak reference is often a better choice from the point of view of memory management. One good argument is that the default is strong reference because it makes the app more likely to behave correctly (vs. crash or fail) even at the expense of a memory leak.

What is available to help with memory management? Some tips on debugging and refactoring: during the testing phase, keep an eye on memory consumption and see what’s happening in the app when memory spikes. Try not to change too much code at once before re-testing. And keep old versions so you can compare between two different approaches.

Memory can be consumed by unexpected things: mouse movement, modal popups, service polling, scrolling within components. Don’t get too wrapped up in slight variances in memory allocation. Also keep in mind that a different interaction path will result in a different profile. So try to use non-interactive repeatable sequences.

In Flex 3 beta 1, there is a profiler that provides a lot of tools for looking at memory management, memory allocation, and so on.

To get an accurate number for how much memory the flash plug-in or the AIR runtime is taking, call System.totalMemory() — don’t rely on numbers from the Windows Task Manager. Note that System.totalMemory() reports the total combined memory of all therunning instances of the flash player, not just the currently running one.

Take a look at Grant Skinner’s Janitor class that manages all references to an object, you make all reference-related calls through the Janitor, then you can tell the Janitor to clean up all the references.

Technorati Tags: 360Flex

Monday 4 pm. Today what we have are “point and grunt” interfaces. Right now the state of affairs is you point at something and you do something sort of like grunting. What about other alternative user gestures? A gesture is movement of a part of the body to express meaning. These alternative user gestures should always be alternatives, not the only ways to do things. Alternatives make for happy power users.

How do you talk to applications that you use? How do you express intent to your computer or its applications? Clicking things. Use menus. Drag and drop. All these gestures work well, don’t replace them, but add to them. You click buttons, tabs, links, images. Menus are good for arranging a lot of options out of the way of the view. In Flex applications, menus don’t get used that much — tabs are often used instead. Drag and drop is a great way to express relationships between things.

Context menus: like right-click menus, also radial menus. Keyboard shortcuts: Ctrl-S, Command-Shift-Z. Command line interfaces, e.g., the Unix command line. Mouse gestures: drag right to left to go back, drag left to right to go forward, drag up across a link to open in a new window, cross a bunch of links to open them all in tabs.

Expressiveness. Mouse gestures and a command line interface are more expressive; menus and keyboard shortcuts are less expressive.

Human-Computer Interface. Fitts’ Law predicts how much time it takes to point at something. Paul Fitts, 1954.

Some implications. Make buttons bigger. Hack the target’s size. Crossing creates an effective large size since once you cross you can keep going. Edges are targets of infinite size. Good examples of edges are the Mac menu bar at the top of the screen, and the Dock at the bottom of the screen. Hot corners are another good example.

You could also make buttons closer to the pointer, but then you get UI like 20 toolbars on the screen at once. Ouch!

Why do we care about time? While learning an app, time-to-task is a small problem. It’s ok because the user is exploring anyway. But as tasks become instinctive, the time-to-task must be short. So that’s why we get accelerator keys for common tasks like Save.

Menus: first you have to find the thing, then how deep is it in the menu? Very high Fitts. Acott-Zhai Steering Law (2D Fitts) describes time to find things in two dimensions.

Dragging and dropping: where is the thing I need to drag, where is the drag target? High Fitts, and added time due to muscle strain.

How do the “alternatives” save time? Context menus come up where the mouse is already. A radial menu is even better because all the options are equidistant from the mouse pointer position. Keyboard shortcuts are fast because there is no mouse travel, small distance to target (hands to keyboard, fingers to keys). Common shortcuts are keys close to the modifier key (e.g., Ctrl-S, Ctrl-Z). Command lines save time because there is no mouse travel at all, very expressive, convey lots of information in a small space. Mouse gestures have travel, but less wasted travel. Could be targeted or not, can be as expressive as needed.

Alternative gestures come down to training. For example, showing keyboard short cuts in the menu bar. Commensurate Effort = Cost vs. Reward. In other words, is the cost of learning the alternative gesture worth the time saved? Power users are more likely to take the time and effort to learn the alternatives.

Incorporate alternative gestures into your Flex Apps. Example of using Cairngorm’s command pattern and attaching gestures to commands. See labs.effectiveui.com/commando. Commando allows you to register a verb to a Cairngorm Command, register a set of options to the command, and parses a line of text into a verb and a set of options. We could do something like this in Buzzword pretty easily by attaching a command line interface to our CmdFactory class. (In fact it’s not that different from the command recording mechanism.)

Technorati Tags: 360Flex

Monday 2:30 pm. Code samples are at http://renaun.com/360Flex. Renaun Erickson is an Adobe employee and a co-author of a Wrox book Professional Flex 2. This talk is based on a chapter from that book.

The Flex logging framework is a much more powerful way to log what’s going on in your application, like the trace() statement but much more. There are Loggers and Targets. Loggers are the class that the message is called on. It can be filtered by category. Created by Log.getLogger() or new LogLogger(). Typically you cast it to an ILogger interface instead of using the LogLogger type directly.

Targets are what handle the messages, and you can have more than one target per logger, so you can have tracing go to both the debug console and a text window in your app and a web service and whatever else. Targets have filtering capabilities so you can filter by both level and category. By convention category is typically your package name but you can use anything you want.

Example: in-application trace panel that lets you turn loggging on and off at runtime.

Question about the performance implications of making it easier to put a lot of logging code in your application. With trace() you are forced to keep it to a minimum because otherwise it becomes unmanageable. But with a logging framework you can write a lot of logging code, but then there’s no good way to completely no-op it out of your app for production. Best practice until there is compiler support is to run all your trace statements through one global function where you can no-op it there.

Example: using a separate AIR application to monitor logging messages. This is pretty cool and might be something worth considering for Buzzword — it might be preferable in cases where we need to get tracing at runtime off a production client, but it’s a pain to get it in realtime from the trace dialog.

Example: RIALogger. See http://renaun.com/rialogger. This is a more full featured AIR application that gives you an API you can write to in your Flex app, and then records logging messages. Since it’s AIR it can save log files to disk.

Example: He demoed using logging framework to trace out what you think the state of your application is supposed to be at various points in your class methods. The target can then do things like record scripts based on the logging output it received, and then compare those scripts to known good states for testing. This is interesting to compare with how we handle LiveTests. We could use this approach with an AIR application to take the local file I/O out of the picture, sending all the snapshots back and forth over a local connection to the AIR app that would do all the local file I/O in a real, supported way.

Another neat thing you can do to get logging out of your production builds is to write some regular expression tasks in Ant that rip all the logging statements out of your code. We should probably do some profiling and figure out if and when this would be worth doing for our production builds.

Technorati Tags: 360Flex

Monday 1 pm. This talk is supposed to show off the new workflow features that let you get artwork from CS3 apps into Flex. George Comninos has been on the Flex Builder team as long as there has been a Flex Builder, something like three years now.

He’s starting by talking about skinning. Showing off the Flex Style Explorer as a way of demonstrating the basics of skinning just by writing or modifying CSS. Graphical skins are the next step and let you use GIF, PNG, JPEG, SVG, Flash SWF symbols, and assets in a SWC. They scale elegantly and can be applied using CSS. Programmatic skins can be written, that’s how Halo was created. Programmatic skins can be styled with CSS as well. (Programmatic skins are beyond the scope of this talk.) Third-party skins are also available.

Fireworks demo. Commands / Flex Skins / New Flex Skins, pick multiple or specific components to skin. You get a set of panels with all the components you picked, and then you can apply styles to each component’s skin style. Then, in Flex Builder, you can import Skin Artwork, and point at either a folder of bitmaps, or a SWF or SWC file, then you can point to the folder that you created with Fireworks and bring in the skins into a folder in the project and a corresponding CSS file. There’s a naming convention that creates a default mapping between graphics files and component skin styles.

In Flex Builder 3 there is now a design view for CSS, which lets you graphically describe the appearances for all the states of a component (e.g., a Button) and see the results in realtime. You can switch back and forth between the design view and the source view just like in the component design view.

Illustrator CS3. Illustrator uses vector artwork, exports as a Flash asset. Demoed creating a star-shaped button, then exporting to Flex Builder as a SWF file, importing from that SWF file in Flex Builder, automatically generates CSS file that you can reference with a <mx:Style> tag.

Flash CS3 and the Flex Component Kit. You can create a standard Flash movie on the timeline, then convert it to a Flex component, then publish it in SWF/SWC format and use it in Flex Builder as a component.

Demoed a game, “Attack of the Yellow Dots,” where all the indiviual object animation was done in Flash, then the animating objects were converted into components and imported into Flex to create the game.

Demoed a mocked up panel laid out in Fireworks using Flex components, then exported it to Flex Builder as a Flex project, where all the components turn into real Flex components.

Technorati Tags: 360Flex

10 am. I’m at Aaron Adams’ talk called “Design Eye for the Dev Guy” aimed at developers who are stuck doing their own design and don’t have the support of a dedicated design department or team member. At Cynergy Systems, designers are called PPGs, “pretty picture guys.” The two classes from design school he uses every day are color theory and 2-d theory (rules about how you

group elements). Design is not all about feeling, even though emotional response is important, there are rules.

Before worrying about color and details, think about construction and composition. Sketch things out get away from the pixels, turn the computer off and sketch on paper. Iterate a lot of versions. But don’t worry about color: worry about focal points, flow. If you go into a presentation with just a wireframe and you use any kind of specific design or color, the owner will get caught up in the details: not sure I like that color, can we see three different versions with different colors? You can kill all of that distraction with true wireframes. Make it obvious that it’s not a polished design.

Color theory. Color has impact in terms of its context. The effect of a color depends on its background. In the context of a user interface, how you combine elements could be lost on the user, focal points could be put in the wrong place because of bad color combination choices.

Focal points. Use color and contrast to keep the focus on important tasks. Say that in the UI there is one action that is most important, then if everything is the same color and there is little contrast, then the focus could be lost. Mark down the key focal points. Use elements of design to help the user get their job done.

Prioritizing actions. Drive the UI based on the flow of tasks that the user has to accomplish. Think about reading left to right (for English speakers), use that as a basis for laying out tasks to be performed. Validate the UI by putting it in front of people and get them to talk to you about what they see. Get some tough skin and listen to criticism.

Switching from PhotoShop to Fireworks as a primary UI design tool increased Aaron Adams’ productivity by 100%. Use layers to build things up, creates depth, realism, shading. Trying playing around with overlaps and transparency: “broad sweeping strokes of realism” like shadow and depth adds a richness to the UI. Back in Flex 1.5 when we had the first Flex style explorer, people responded well to simple things like translucent panels.

Fall in love with the details of the design. The developer focus is typically on the details of the code. But if you are responsible for making things look good as well, look at the details of the design. For example, look at your favorite UI and figure out what about it is so attractive to you.

More quick suggestions: eliminate excessive lines, allow elements room to breathe, design for a consistent implementation, understand context, broad sweeping strokes of realism vs. physical reality.

Question about 508 compliance: has anyone actually seen a real 508 compliant app in Flex? How do you do it? Aaron hasn’t seen one.

Question about how to stop designing: there’s always a better design out there, but eventually you have to nail it down and start coding. Set milestones for finishing design and then come back in the next version.

Question: When are transitions more than just cool and actually useful and important for helping people get their work done? Examples: Immediate feedback to the user, e.g., modal dialog shaking its head left to right. Changing context: moving from one module to another where there is a big break between the component layouts.

Question: what about concepts that apply different to different ages, genders, etc. Look at how your users interact with the product, know your users.

Question: how about letting users customize the colors, animations, etc.? When those features get added in, turns out the percentage of people who actually use it is low. Don’t give users the tools to screw up the UI.

Question about designer-developer workflow. We do a look-first approach, where we focus on the UI first, get some comps up. But the question is also about whether designers should be allowed to dictate the functionality, or are so enamored of a particular look that they don’t allow needed functionality to be part of the design.

More suggestions for making things pixel perfect: build in layers back to front; tackle one element at a time; get dirty, don’t overly depend on tools; borderSkin is your friend; Embed fonts in SWF for more control; find and use good class extensions, know your blendMode attributes; and don’t give up until it looks right.

Question about embedding fonts. People making arguments that it’s too slow to load an embedded font, or that it’s unnecessary unless you have specific needs like animating the text. On the other hand, if you need a consistent look, you have to embed the font.

More suggestions: good design is good iteration; keep project owners and marketing happy; allow others to review design before implementing; design comps in tools other than Flex; leverage Flex skins templates; turn off your computer and pick up a pencil; Fireworks is a great every-person application; stand on the shoulders of giants (without copying).

Question about examples of what developers typically get wrong. Poor use of color is a big one.

Question about Adobe FlexStore example: is it a good design, are there any major design flaws in it? It shows off a lot of Flex features, so that’s good. It provides a good left to right flow.

Question: is there a source for good design reference applications built in Flex? There are some examples at cynergytv.com.

Technorati Tags: 360Flex

9:06 am. Ted Patrick is taking the stage now. Wants to talk about Flex! The market has changed since we started working on Flex 2, the bar has been raised higher since we started. Great time to be developing in Flex, deploying to Flash Player and soon AIR.

Customers want better experiences, more compatibility, desktop-like experiences. Walt Mossberg just reviewed picnik.com but never mentioned Flex at all. He doesn’t care about the technology, just the experience. Walt Mossberg gets it about RIAs.

He’s showing screen shots of Buzzword now. What does better mean? Better means Buzzword. The keyboards in the room stop clicking.

Next up is SlideRocket. Ted is talking about the collaborative aspects of having documents (in this case slideshows) on the web: he posted a SlideRocket deck, then Mitch (the developer of SlideRocket) came in and fixed a bunch of problems with it. It sounds like they have access control at the slide level? Not sure if I’m getting that right, but he’s talking about having Emmy Huang update the Flash Player adoption slide in a deck.

Showing a slide of Picnik, says it has the best use of the back button in an application to date, I assume he means in an RIA app. They are using the pound sign (URL fragment) approach to manage state.

Flash player adoption. Says they think they are at 92% adoption of Player 9 now. They have 8 million installs per day, 2.44 billion installs and rising. I assume this is really just the download rate, and I’m sure lots of people download it repeatedly, but it’s still a very big number!

Real growth for Flex is arriving, not only in the Internet but also in the intranet. Interesting effect this will have on developers, pulling them into big companies. He thinks that this growth is phenomenal for 13 months into Flex 2.

Ted Patrick is bringing Chuck Friedman up on the stage to show something called Ribbit, technology for routing and managing phone calls in Flash.

“The app is 100% Flex, it’s the only technology we could use to deploy an app like this.” Sounds familiar. Developer.ribbitphone.com is the URL. You can apply to be part of the prerelease there. Unfortunately the demo isn’t working, due to problems with the WiFi.

Ted’s back on stage, talking about Kapow Technologies. It’s an API generation tool that lets you generate a REST-based API against an existing web site. It is essentially a robot that goes out and looks at the site, analyzes the form, and creates an API from it. Allows integration with sites that don’t have public APIs. He’s showing how you can use Kapow to create an API for LinkedIn and then write an app that uses it.

I’m noticing that most of the things Ted is talking about have appeared previously on his blog. I wonder if that’s a common problem for people talking at conferences — they want to talk about new cool stuff, but they’ve already posted about it on their blogs.

Ted’s talking about the solitaire card game he is developing for AIR. The deck is shuffled on the server, then allows lots of people to play at the same time and compare their results having used the same deck. He’s showing how you can set the background alpha to 0.0 and make the cards float on top of everything else running on the desktop. He also just dropped a hint about shipping AIR for Linux.

He’s showing AIR Chat, which he developed for the AIR bus. They are using Amazon EC2 on the back end. They used the WebKit browser control <mx:HTML> to display the chat log. It is pointed at a local .html file in the assets directory, and whenever a message comes in, a Flex event is dispatched, and it calls into JavaScript through the DOM integration to update the <div> with a standard appendChild() call.

The history of Flex. Started out in 2000 creating a developer paradigm for SWF. In 2001 they were trying to figure out a declarative language for creating a SWF. This became MXML. In 2002 “Royale” begins development, and in 2004 Flex 1.0 arrives as a J2EE server. Also in 2004 they start researching how to integrate Flex as an Eclipse plug-in. in 2004 they ship Flex 1.5, again J2EE server, but they realize that the Flash Player performance is the bottle neck. In 2005 Flex 2.0 alpha comes out at MAX, and starts to address performance. In 2006 Flex 2.0 ships with SDK and data services, and in 2007 we get Flex 2.0.1, LCDS 2.5, and Flex 3.0 beta.

Where is Flex going? They have delivered on the component model but not on the graphics model. Coming next is graphics tags to make graphics definitions more declarative. Application performance will improve, since rendering speed of player is critical. ActionScript performance is also going to improve. Tamarin (open source ActionScript 3.0 engine) is going to be the ECMA4 runtime and Adobe is relying on outside open source engineers to help make this happen. Text is also going to improve: it’s unacceptable not to be able to control glyphs, kerning, sizes and heights, script direction, etc. More skinning and styling with graphics is coming.

Flex news. New Flex 3 beta is shipping in October, before trial expires. Pricing/licensing jump from Flex 2 to Flex 3 is going to be “gentle.” There are 1000 community bug base accounts, everyone can log bugs at bugs.adobe.com/flex and help the team make the product better: the better the bug report, the better the product will be. This is along the roadmap to open source. Flex 3 will ship as open source with full governance at the same time that the commercial product is released, not afterwards but right at the same time. Ship date is early 2008 for a number of reasons, partly to raise the bar on quality and actually respond to more feature requests and fix the bugs that are coming in from the community.

AIR news. They are really focused on customer API feedback to make the APIs better. Again, submit bugs through labs. They added SQLite into the AIR runtime to allow running local databases when offline, as well as sync to a server when connected. Adding application signing and security. The onAIR Bus Tour leg 2 begins tomorrow: onair.adobe.com. AIR 1.0 will ship in early 2008, in parallel with Flex 3, designed to ship at the same time. I can’t tell for sure but it sounds like this is a schedule ship: “we’re taking the time.”

MAX 2007. Ted was pulled onto the MAX conference planning team. Chicago, Barcelona, Tokyo over two weeks. Over 60 Flex sessions, mostly given by Flex engineers themselves. Bootcamp with Dev Team, Flex “Meet the Team” session. Registration for MAX 2007 has already surpassed the 2006 total. There will be a 360Flex discount code for MAX.

Technorati Tags: 360Flex