Monthly Archives: February 2008

Live From 360Flex, Day One

As I begin, it’s ten minutes to 8:00am. We have a half hour until the first keynote of 360Flex Atlanta starts. Attendees are streaming into a line to get their badges and the first schwag of the conference. Adobe provided AIR 1.0 t-shirts for everyone, and they’re pretty damn sweet. Doug McCune and I stole ours from Tom and John’s room at midnight last night. For my fellow attendees, I assure you that there’s more cool stuff on the way.

In case you didn’t hear it from the MXNA zombies, Flex 3.0 and AIR 1.0 have officially gone live on Adobe’s website today, February 25, 2008. Rich Tretola was telling me last night that his first post about the then-codenamed Apollo appeared on his blog in late 2006. Has it been that long? I guess it has. At MAX 2006, Flex 2 posters were hot off the presses and that version of the framework was only about six months old. Mike Chambers was chilling at a little booth in the back corner of the conference passing out red Apollo t-shirts and showing people very early builds of this new and exciting technology on his laptop.

Matt Chotin is up at the podium preparing for the keynote and chatting with Ben Forta. Up past the projector screen, you can see OMNI Hotel’s glass elevator coming down with more attendees. The keynote will be in an open area of the hotel. If I had one of the rooms with balconies on my right, I’d be relaxing up there next to one of the matching plants that each room seems to have. It would be a unique view of the whole scene that I wouldn’t be able to pass up.

I see Deepa sitting in the first row to support Matt. Should I Stay, Or Should I Go? just played for a few seconds on the speakers in front. The seats are filling up, and I’ve overheard a few folks talking around me. Not everyone realizes that AIR 1 and Flex 3 are available right now. Some people are talking about Flash on the iPhone. That subject will never go away until it becomes a reality, I think.

Matt’s laptop is finally on screen after much ado around the projector. He’s getting some websites ready to show us. The hotel’s wireless is getting pounded by geeks like me, and I’m impressed that it’s staying pretty strong. We’re about to begin.

The Keynote Begins

Matt is “wowing [us] with his awesome PowerPoint skills”.

What’s available today? AIR 1.0, Flex 3 SDK, Flex Builder 3 Standard and Pro, Blaze DS, Adobe’s Open Source websites. The Flex SDK is available in two editions. The Adobe Flex SDK is the official release supported by Adobe that includes the Flex framework and compilers. The open source Flex SDK will be considered separate with different licensing and packaging for its intended audience. More on that in a bit.

Flex Builder Professional includes charts, AdvancedDataGrid, and OLAP, along with the profiler and automated testing support. Originally, in Flex 2, this was only supported by QTP, but Matt says that several more testing frameworks (I heard Borland, IBM, and one or two others) are supported now or will be supported in the near future.

Matt says he doesn’t want to focus much on Flex 3 today. It’s been out in beta form for a long time, and we all know the details. He gives us a quick overview of the available tools, pricing, and upgrade options. Next, he mentions the iLog Elixir components with maps, charts, and more. Adobe is the official distributor of the components, and they’re available for $799.

Matt’s going to demo several AIR applications. The first is AOL’s Top 100 videos. It’s a pretty sweet looking app with a big grid of video thumbnails. The poor wireless can’t handle watching one of the videos right now, but thankfully, I can keep blogging. Ted Patrick showed it to folks at Yahoo! a month or so ago, and it’s pretty simple and cool. Now, Matt is showing a NASDAQ app with cool charts. I only caught a quick look at it. The Parleys.com application has cool transitions between views similar to Adobe Media Player. It displays video presentations and interviews from user conferences. There’s a slide view similar to Adobe Connect, and there are some awesome controls for switching between video, slides, and navigating through a recorded talk.

Now we’re looking at the Google Analytics Reporting Suite application. Google is helping the developer build the app. They were impressed with the guy’s ability to scrape the Google Analytics site and build a powerful application based on that data. I’ve heard people say that they prefer this app to the actual Google Analytics site. That’s very cool. The Allurent Desktop Connection is an e-commerce app. It has some cool features like being able to pick a color and seeing all the products in the catalog that are available in that color. You can either use a simple color picker or grab a color straight from an image. The Digimix application is a cool sequencer built on AIR. Reminds me of my old days playing with Sonic Foundry ACID and other audio apps.

Adobe Rocks the Backend

Ben Forta isn’t going to talk about ColdFusion. We’re going to look at LCDS, BlazeDS, and Flex-supported backend technologies. He’s talking about how Flash Player natively supports things like regular web services, but he’s focusing on Flash remoting for a moment. Before, using Flash remoting was pretty hard in many situations. It was easy in CF because it was supported out of the box. Now, with BlazeDS available as an open source project, Flash remoting will be far easier for developers that use other backend technologies.

What’s the difference between LCDS and BlazeDS? Both have Flash Remoting and Messaging. LCDS also has data management features like data synchronization and conflict resolution that Ben explained was a pretty useful way to ensure that multiple database transactions don’t conflict.

We’re about to see a preview version of LCDS that will go into public beta next month on Adobe Labs. LiveCycle is a J2EE app that supports many platforms. Many components for LCDS are available pre-built. I see email components, encryption components, LDAP, PDF, database queries, but there’s a huge tree of available categories. There’s an interesting visual builder for these components, and we’re taking a look at LiveCycle Workspace, the default Flex app for users to view LiveCycle data. Full source code is available for this app, and developers can build their own views of the same data.

What’s Open Source and What’s Next?

The Flex SDK source code, including compilers and the debugger, are available under the MPL. The bug database is open, of course. Daily builds of Flex can be downloaded, and the roadmap is available for the world to view. The open source SDK is available as a download with only the MPL code, if desired. This version can be used with a separate add-ons package that contains everything from the SDK that doesn’t fall under the MPL (like the debugger Flash Player). Lots of flexibilty here for the open source purists. BlazeDS reference implementations are available for Java and CF, and Adobe is working with the community to provide other implementation for technologies like PHP, ASP.NET, etc.

How will the community integration work for Flex 3? To start, Adobe engineers will be handling most of the work, but Adobe plans to let the community start to patch the framework through bug reports, and eventually, some non-Adobe folks will get commit rights to the code repository.

According to Matt, Flex 4 was recently codenamed “Gumbo”. What do they want to do in this version? Improve collaboration between designer and developer through Thermo. Accelerated development from concept to reality quickly. Improving workflow. “Horizontal platform improvements” that benefit everyone (faster compiler, for example). Finally, they want to broaden the scope of Flex to expand the range of apps that can be built with it.

We get a quick look at Flash Player 10, codenamed Astro. New AS3 text components built on a new text engine (named Vellum). Hydra, a custom pixel shader language. Simple 3D effects. They won’t replace Papervision, but they will certainly help make Papervision better. Mainly, we’re hearing the same stuff that Adobe announced at MAX. However, this is the first announcement I’ve seen publicly about the implementation of a new Vector type in ActionScript. We’ll have typed Arrays. Matt says you know you’re at a developer conference when that’s the feature that got applause over the others. You may remember the Vector class from my overview of ECMAScript 4 a couple months ago.

The keynote ends with a hilarious video put together by Matt and the Flex team. Lot’s of self-deprecating humor and friendly jabs at fellow Flex teammates. Matt shows that he’s everyone’s friend with pictures of him sporting a thumbs up and a cheesy smile with frightened Adobeans. Doug McCune’s infamous Panel border bug gets featured too. Head over to Matt’s blog to view the Flex: Behind the Scenes video.

That ends the 360Flex day one keynote. If you’ll excuse me, I need to eat something and think about taking a nap. The Adobe party is tonight, and I want to be well-rested. Plus, I have my session Building Components That Use Item Renderers at 8:30am tomorrow. Seriously, with the timezone shift added onto my complete lack of sleep, that’s just plain mean. I’ll get my revenge, Tom Ortega. You just wait.

Talking about item renderers at 360Flex Atlanta

I see that Jesse and Ben just pimped their own sessions for 360Flex, so I might as well jump on the bandwagon. My session is titled Building Components that use Item Renderers. It’ll be divided into two parts. The first part will involve several examples in MXML and ActionScript demonstrating how to build item renderers. Part two will feature some tips about how you can build completely custom components that use item renderers.

Abstract

Item renderers provide a powerful way for developers to completely change the way a component displays each item from a data provider. After looking at how item renderers can be used with existing components, you’ll gain an understanding of all the classes and interfaces an item renderer system needs.

From there, Josh exposes the dirty details of how to build a component that supports drop-in renderers, what properties and methods should be exposed to the developer, and how to implement renderer caching to maximize performance. Highlights include peeks into how the Flex framework uses item renderers, how to use custom item renderers with existing Flex components, and how to build a component from scratch to use item renderers.

The session takes place Tuesday morning, February 26th, at 8:30am. I’ll forgive you if that’s too early to be fully awake, but I hope you’ll stop by with coffee and a muffin to see some code. You’re registered to go to 360Flex, aren’t you? Of course you are. Don’t be the guy who misses the best Flex event of the year!

How to use the Yahoo! AS3 Maps API in Flash CS3

Important: As of version 0.9.3, the Yahoo! Maps API for ActionScript 3 includes a component that may be used with Flash CS3. It’s a simple MXP installer like many other Flash CS3 components. The following tutorial is obsolete.

The official release of the ActionScript 3 API for Yahoo! Maps appeared on the Yahoo! Developer Network yesterday to much fanfare. Believe me, I’m excited as you are! We on the Yahoo! Flash Platform team have been working hard to ensure Maps got into the hands of AS3 developers. You may have noticed that this first version specifically targets Flex Builder and the free Flex SDK. I assure you, Flash CS3 support is definitely on the way, but due to technical reasons and time constraints, it’s not available just yet. That said, there’s nothing wrong with a little hacking if you’re too excited to wait until we have an official component.

We’d love to let you use the same SWC file with Flex and Flash. Unfortunately, the compiler in Flash CS3 treats SWC files a little strangely. Basically, the compiler sees the classes available in your SWC file, and it will compile your code that uses those definitions, but the classes themselves aren’t included in your output SWF. When you try to view the output SWF, you’ll see one or more VerifyErrors because the classes cannot be found. Since we cannot compile directly from the SWC, another interesting possibility is to load the classes at runtime to instantiate them.

If you didn’t know, SWC files are actually special ZIP files. If you open YahooMap.swc in your favorite archive manager, you’ll discover two files. First, you’ll see catalog.xml, which specifies the available classes and some other information that may be used by compilers. Additionally, there’s a file named library.swf, and that’s the one we’re most interested in using. This SWF file contains the compiled ActionScript code for the Yahoo! Maps AS3 API. Extract that file from the SWC to your filesystem (preferrably right next to the FLA file you’ll be using).

Yahoo! Maps SWC Extraction

What we’re going to do next is load the library.swf into our Flash application. Using the ApplicationDomain class, we’ll access the classes from the SWF to instantiate a YahooMap instance in our main SWF. It’s a little cumbersome if you need many of the available classes, but it doesn’t take too much code to set up the basics.

I’m just going to put this code on the timeline for simplicity’s sake, but you may set up a class, if you prefer. First, we have the variable that will store the com.yahoo.maps.api.YahooMap instance. I typed it as Object because we don’t have a compile-time reference to the required class and Object is most flexible being dynamic. Additionally, we have our Yahoo! API Key, sometimes called an application ID, placed in a constant because it won’t change. Finally, we have variables to store the references to classes we will be retrieving from library.swf:

var map:Object;
const APP_ID:String = "Put your own Application ID here";

// classes we will be loading
var YahooMap:Class;
var YahooMapEvent:Class;
var LatLon:Class;

Let’s load library.swf using a standard flash.display.Loader.

var mapsLoader:Loader = new Loader();
mapsLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);
mapsLoader.load(new URLRequest("library.swf"));

When library.swf has finished loading, the mapsLoaderCompleteHandler() event handler function will be called, and we will retrieve the required classes. Use the getDefinition() function from ApplicationDomain to load the classes and place them in the variables we set up a moment ago.

function mapsLoaderCompleteHandler(event:Event):void
{
	// of course, don't forget to remove your listeners!
	event.target.removeEventListener(Event.COMPLETE, mapsLoaderCompleteHandler);

	// save each of the classes we plan to use
	var appDomain:ApplicationDomain = event.target.applicationDomain;
	YahooMap = appDomain.getDefinition("com.yahoo.maps.api.YahooMap") as Class;
	YahooMapEvent = appDomain.getDefinition("com.yahoo.maps.api.YahooMapEvent") as Class;
	LatLon = appDomain.getDefinition("com.yahoo.maps.api.core.location.LatLon") as Class;

	// create the YahooMap instance
	this.map = new YahooMap(APP_ID, stage.stageWidth, stage.stageHeight);

	// we can call functions normally
	this.map.addPanControl();
	this.map.addZoomWidget();
	this.map.addTypeWidget();

	// using the loaded YahooMapEvent class
	this.map.addEventListener(YahooMapEvent.MAP_INITIALIZE, mapInitializeHandler);

	// cast as DisplayObject because yahooMap is typed as Object
	this.addChild(DisplayObject(this.map));
}

The mapInitializeHandler() function is called when the YahooMap is ready for interaction. We’ll set the zoom level and center on a specific latitude and longitude. As you can see, we use the LatLon class that we retrieved earlier.

// unfortunately we cannot use the YahooMapEvent type as the
// parameter because it isn't a compile-time constant.
function mapInitializeHandler(event:Event):void
{
	// once again, we can use the YahooMapEvent class here
	this.map.removeEventListener(YahooMapEvent.MAP_INITIALIZE, mapInitializeHandler);

	// sets the zoom level to a high-level city view.
	this.map.zoomLevel = 5;

	// here we use the loaded LatLon class
	this.map.centerLatLon = new LatLon(37.779160,-122.420049);
}

You’ll notice that the code itself isn’t much different than in the examples. By placing the loaded classes in a wide enough scope, we’ve made them accessible to all our functions here. For a more advanced application with extended functionality, you might consider placing the classes in a static variable somewhere so that they can be accessed globally.

To make things easy, so you don’t have to copy all my code, I’ve made my project files available (along with library.swf extracted from the SWC) in a zip. Download the YahooMaps in Flash CS3 project files. This hack will probably be short-lived, but I thought I’d share it anyway. As I mentioned before, a fully-supported Flash CS3 component can be expected in an upcoming release. Until then, happy hacking! 🙂

How to use the Flash Professional fl.* component set in a Flash Builder ActionScript project

Flex is great, but I don’t use it for every project. Sometimes, I want to build a very light application that needs UI controls, and Flex is too big, even when using the Flex framework RSL caching. Flash Professional (particularly CS3 and newer) comes with a pretty decent set of components, and add-ons like the Yahoo! Astra Components for Flash add several more to the arsenal. What if I want to use those components, but I need a better development environment than Flash Pro? I love Flash Builder. Can I use them there? Yes, absolutely.

The most obvious way one might expect to get the fl.* components working in Flash Builder is to simply add the source folder for the components to the source path of a project in Flash Builder. Don’t do this, though! It won’t work. For reference, that folder is located at the following location:

[Flash Pro]/en/Configuration/Component Source/ActionScript 3.0/User Interface

Unfortunately, simply adding that folder doesn’t work because the fl.* components have graphic skin assets that are normally located in your FLA file’s library. If those aren’t available, and you try to use only the source code in Flash Builder, you’ll end up getting errors like this one:

TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChildAt()
at fl.controls::BaseButton/fl.controls:BaseButton::drawBackground()[C:\Program Files\Adobe\Adobe Flash CS#\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;BaseButton.as:538]
at fl.controls::LabelButton/fl.controls:LabelButton::draw()[C:\Program Files\Adobe\Adobe Flash CS#\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;LabelButton.as:600]
at fl.controls::Button/fl.controls:Button::draw()[C:\Program Files\Adobe\Adobe Flash CS#\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;Button.as:167]
at fl.core::UIComponent/fl.core:UIComponent::callLaterDispatcher()[C:\Program Files\Adobe\Adobe Flash CS#\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\core;UIComponent.as:1379]
at [renderEvent]

If you want to use the default skin assets, you must ensure that they get included with your project. Last year, Colin Moock described a method for creating a fl.* components SWC. It’s good, but I know how to do it without quite as many steps:

  1. Create a new ActionScript 3.0 FLA in Flash Pro.

    New Flash File (ActionScript 3.0)

  2. Add the components you want to use to the library. You can drag them on stage or directly into the library.

  3. Right-click on any one of the components in the library. It doesn’t matter which one you choose.

    Export SWC…

  4. Select Export SWC File… from the context menu and save the SWC file somewhere with your filename of choice. I typically name it something like fl_components.swc.

  5. Right click on your ActionScript project in Flash Builder and choose Properties.

  6. Under ActionScript Build Path, choose Library path and click the Add SWC… button to find your SWC and add it to the project.

    Flash CS# SWC in Flash Builder Library Path

Once the SWC is added to the library path, there’s nothing special you need to do to start using the components. Flash Builder automatically finds all the classes and you can create new instances of anything (including the raw skin symbols, if you’re interested). For completeness, here’s how you create a Button in ActionScript:

var button:Button = new Button();
button.label = "Click Me!";
this.addChild(button);

Don’t want to use the default skins? Technically, they are not required. You can work with the straight source code for the fl.* components if you’re planning to use custom skins. These could be programmatic skins (similar to how Flex’s skins work) or you could embed your skins using [Embed] metadata to include external images or SWF symbols.

The fl.* components have many styles available for you to customize. Here’s a selection of the styles you might want to customize for a Button component:

button.setStyle("upSkin", CustomButtonUpSkin);
button.setStyle("downSkin", CustomButtonDownSkin);
button.setStyle("overSkin", CustomButtonOverSkin);
button.setStyle("disabledSkin", CustomButtonDisabledSkin);
button.setStyle("selectedUpSkin", CustomButtonSelectedUpSkin);
button.setStyle("selectedDownSkin", CustomButtonSelectedDownSkin);
button.setStyle("selectedOverSkin", CustomButtonSelectedOverSkin);
button.setStyle("selectedDisabledSkin", CustomButtonSelectedDisabledSkin);

Be sure to check the ActionScript Language Reference for full details about the available styles on each component you intend to skin.

Note: Some readers have reported that they continue to see skin-related errors when they use a SWC file exported from Flash Pro. The most likely cause is that their source path still contains the folder where the component source is located (see my warning above). Raw source code will always override a SWC when you have duplicate classes, so you’re still compiling without the skins when you have both the source for the components and the SWC in your project.