Monthly Archives: February 2007

Ready for Apollo? Sign up for ApolloCamp NOW!!!


Grab the smores and your laptop, ApolloCamp is coming. On March 16, 2007 at 5PM-11:30PM Adobe is hosting ApolloCamp in San Francisco. This one night mini conference will have you building Apollo applications. Bring your laptop because we are bringing the bits. I will be at ApolloCamp and will be coding up a storm.

ApolloCamp Registration ( FREE EVENT )

ApolloCamp is limited to 300 developers. Signup launched yesterday and it is nearly 50% booked. If you want to go to ApolloCamp, stop what you are doing and register now. If you register, make sure to attend, there are some giveaways that you will NOT WANT TO MISS.

Who could ask for more:

Giveaways, Pizza, Beer, Wii, Red Bull, and bits, Programmer heaven!

See you at ApolloCamp!

Ted :)

FlexApps Component – Version 0.9


Today marks the first public release of the FlexApps Component 0.9 that takes pictures of your Flex application at runtime for FlexApps on Flickr. It is like adding a camera into your Flex app for uploading images to FlexApps. Simply add the component into your app and run it. To take a picture, you just: Right-Click > Send to FlexApps!

Download FlexApps Component 0.9

The component makes it easy to send high quality images of your Flex application to FlexApps for approval. I wrote a parallel application for approving the images uploaded through the FlexApps Component making it easy for me to process lots of images.

How to use FlexApp Component:

1. Unzip the FlexApps.zip into your Flex project.
2. Use the “FlexAppExample_Usage.mxml” as an example. You will need to create a namespace for com.flexapps.* and denote your apps properties within the component like so:

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
layout=”absolute”
xmlns:fxa=”com.flexapps.*”>

<fxa:FlexApps
title=”FlexApps Component”
description=”Sends images to FlexApps within a Flex application.”
tags=”ByteArray,URLRequest,uploader,AMF3,PNG,imaging”
url=”http://www.onFlex.org&#8221;
developer=”Ted Patrick – Adobe Systems”/>

Once the FlexApps component is in you app, you can take a series of images of your flex application working. It makes it quick and easy to send high quality images with full meta-data attached for addition to FlexApps.

Imaging Tips:

1. FlexApps Component will take an image to the edge of the Flex SWF file depending on the size of the browser window. The width is limited to 1200px and height to 1000px to minimize the image upload size.

2. Make sure to change out the component properties for your application. If I see any data from the default examples, I will be forced to discard the images.

3. I will only approve quality images. In order to make sure that FlexApps maintains a high level of quality I will be strict about what gets approved.

4. Have full approval before uploading images of your Flex application. I would love to see images of Flex apps you have built but please ask permission before posting images.

5. Please be patient after uploading images. I plan to approve images regularly but the approval process is without feedback. Please do not expect an email when images are approved or deleted. I will do my best to be prompt.

FlexApps Components in action:

FlexApp Component results:

The FlexApp component has some unique features and workflow. First it snaps an image of the whole application and writes it to a BitmapData Object. This image is then encoded into a JPG image in memory which results in a ByteArray object. I then encode an object containing the image metadata into AMF via the writeObject method on the ByteArray class. The ByteArray is then uploaded to onflex.org where the image is stored in a queue for processing and approval. Daily I open the management app in Flex and it displays all uploaded images in the queue. With one click, I can preview the image, edit the metadata, and either delete or upload the image to Flickr.

Ideally the FlexApps Component will make posting your FlexApps easy. I have gotten lots of mail about the FlexApps Flickr account and it has become very popular. What is interesting is that several people are using it to sell Flex as a solution for their clients. The Flickr gallery provides a simple way to flip though 150 images of Flex applications. I strongly encourage anyone with a Flex application to post images to FlexApps and mark the images with your contact information. FlexApps is a great way to locate Flex developers and consulting firms and get high quality referrals for Flex consulting projects.

What I find most interesting about this app is uploading a blend of binary image and AMF3 data to the server as a whole. In this case, a JPG with an embedded AMF3 object is uploaded to the server using php. The server does nothing but save the data to the file system and the Flex SWF and Flash Player does all the heavy lifting. In this case, data is uploaded, stored, and downloaded as binary data directly from onflex.org without server side modification. My server doesn’t have AMFPHP or Flex Data Services installed, I am simply using the Flash Players support of binary data creation to enable this apps functionality. The ability to read and write AMF3 bytes, compress and uncompress binary data, and manipulate binary data in memory are built into the flash.utils.ByteArray class within Flash Player 9.

The FlexApps components come pre-packaged with several classes from the spiffy AS3 CORELIB Library on Google Code. Make sure to check out this great free library it helped a ton with development. Special thanks for the JPGEncoder and the PNGEncoder within, they were invaluable!

I am planning some new features for the 0.91 release this week:
1. Add in a snazzy camera shutter sound.
2. Preview the image before uploading.

I am looking forward to approving your FlexApps images!

Cheers,

Ted :)

Flipper (FlexApps Viewer) by Cynergy Systems


Kellen Styler of the UEG (User Experience Group) at Cynergy Systems created Flipper while learning the deeper side of UI design in Flex 2. It was a generic Flickr image viewer but after pointing it at the FlexApps Flickr account I demanded a copy for my blog! I am working on an uploader component for FlexApps to get many more images of FlexApps onto Flickr.

Flipper FlexApps Viewer By Cynergy Systems

Special thanks to Dave Wolf, Carson Hager, Aaron Adams, and especially Kellen Styler for creating Flipper.

The parallax motion when full screen is a great effect.

Would you like your FlexApp on FlexApps???

1. Capture images of flex application.

2. Email: flexapps@adobe.com
SUBJECT: {FLEX APP NAME} by {DEVELOPER/COMPANY}
BODY: {DESCRIPTION}

3. Attach Images (NO ZIP FILES, NO ZIP FILES!!!)

4. SEND!

I would be very interested in seeing other FlexApps mashups in Flex!

Cheers,

Ted :)

Code-Behind in Flex 2


Microsoft languages typically implement a Code-Behind development model. Code-Behind allows you to separate user interface and application logic into classes that inherit from one another. This is a useful model and is easy to implement within Flex 2. So for anyone dreaming of Code-Behind in Flex 2, today is your lucky day. ;)

Code-Behind is just inheritance where the UI extends the application logic class, the Code-Behind. In Flex, since MXML generates an ActionScript Class, this provides the key to implementing Code-Behind. Onward!

Here is a simple example:

FlexCodeBehind Example

FlexCodeBehind Download

Step 1: Make a new Flex Project named “FlexCodeBehind”.

Step 2: Make a new ActionScript Class like so:

package: app
class name: MyClass
extends: mx.core.Application

code:

Step 3: Modify “FlexCodeBehind.mxml” to inherit from app.MyClass like so:

In MXML, the root tag extends the listed class, this is how you denote inheritance in MXML. In this case, we use the app.MyClass as the root tag which inherits from mx.core.Application. This makes the application an instance of FlexCodeBehind.mxml so all methods, properties, and events within FlexCodeBehind.mxml, app.MyClass, and mx.core.Application are there.

Also note how the new ‘app’ namespace is used in the MXML document. The xmlns:app denotes the path to MyClass or “app.*” just like an import statement. This is handy if you want to add in custom components within other packages and it is a key element of understanding MXML as a language.

Advantages:
1. Code in classes and UI in MXML.
2. Easy to understand.
3. Reusable.

MXML is very deep as a language. It provides a high level declarative tag based language atop ActionScript 3 (ECMA Standard) and allows for components and classes to work hand in hand via composition. Over time I have come to appreciate the subtleties in MXML and ActionScript as they work perfectly together. The twist comes when you realize that there is no different between MXML and ActionScript 3 classes, they are just classes and are 100% interchangeable. I will post some examples of this in follow-up posts.

ASP.NET Code-Behind Information – Note the similarities…

So there you are, Code-Behind in Flex.

Cheers,

Ted :)

FlexJobs – 100 Jobs in 20 Days


The FlexJobs list hit 100 jobs today. If you are looking for a job in Flex the list is one of the best ways to find a cutting edge position. The quality of companies and jobs posted there is pretty amazing for 20 days. I think it is one of the strongest signs of Flex growth yet. I will keep posting jobs to the list and I am seeing more and more companies doing this directly as well.

Want a Flex Job? –> Subscribe to FlexJobs

Have Flex work? –> Post to FlexJobs

Cheers,

ted :)

Flex Instantiation Life Cycle and Event Flow


Flex is an event driven programming model, everything (and I mean everything) happens due to an event. When developers first take a look at MXML it is often difficult to see the event flow or instantiation life cycle of an application given the XML markup. This is especially confusing to HTML and Flash developers because the development paradigm of Flex does not match what they are used to. HTML instantiates top to bottom where Flash executes across frames starting at Frame0. Flex is a bit different.

When I learned Flex, I struggled with understanding event flow and instantiation in MXML. I was puzzled because I really didn’t understand what event would kick start the logic or when events would fire. The key is understanding the event basics and seeing the initialization and event flow for yourself.

So lets look at a simple application in MXML.

Sample Application

Sample Application Source

When this application runs it dumps the instantiation and event flow into the TextArea via a binding. This allows us to see all events within the application occur independent of component instantiation order. As you can see in the application output there is a consistent order of events when this application starts. Here is the basic output up to the applicationComplete event. (The EventFlow0 object is the Application tag of the base app. The times to the left are the from the execution clock of the Flash Player.)

167ms >> EventFlow0.preinitialize
183ms >> EventFlow0.outTextArea.initialize
187ms >> EventFlow0.HelloButton.initialize
188ms >> EventFlow0.GoodByeButton.initialize
189ms >> EventFlow0.ClearButton.initialize
189ms >> EventFlow0.initialize
243ms >> EventFlow0.outTextArea.creationComplete
243ms >> EventFlow0.HelloButton.creationComplete
243ms >> EventFlow0.GoodByeButton.creationComplete
244ms >> EventFlow0.ClearButton.creationComplete
244ms >> EventFlow0.creationComplete
246ms >> EventFlow0.applicationComplete

Once the applicationComplete event it triggered, the components fire events when mouseEvents are dispatched to the components individually.

1807ms >> EventFlow0.HelloButton.rollOver
2596ms >> EventFlow0.HelloButton.rollOut
2954ms >> EventFlow0.HelloButton.rollOver
3170ms >> EventFlow0.HelloButton.rollOut
3543ms >> EventFlow0.HelloButton.rollOver
4052ms >> EventFlow0.HelloButton.click > Hello!
4267ms >> EventFlow0.HelloButton.click > Hello!
4474ms >> EventFlow0.HelloButton.click > Hello!
4569ms >> EventFlow0.HelloButton.rollOut
4907ms >> EventFlow0.GoodByeButton.click > Goodbye!
5130ms >> EventFlow0.GoodByeButton.click > Goodbye!

There is also some great documentation on the instantiation life cycle located here. Understanding this instantiation process is very important for Flex development. The example posted contains view source so feel free to take a peek and play with the events yourself.

So now you know the instantiation life cycle and event flow! I will be covering DOM events and event flow next. Event do not just happen at the component but they flow across the displaylist in phases.

Let the capture and bubbling phases begin!

Cheers,

Ted :)

Yahoo! Maps MASHUPS by Chuck Freedman


As a member of the Yahoo Maps team, Chuck Freedman helped deliver one of the first public facing Flex applications. Chuck just completed Yahoo! Maps MASHUPS by WROX and the book has gone on sale today. The book spans the AJAX/Flash/Flex APIs for Yahoo! Maps but more importantly has 6 chapters devoted to Flex 2. As Chuck puts it so elegantly, “Flex 2 was made for Mashups!”. I received a signed edition of the book from Chuck yesterday and I am honored to have been part of the books review process.

If you are interested in Maps and Flex, there is only one book you will need.

Buy the book at Amazon

Congratulations Chuck. Job well done!

Ted :)

Gradient 2.0 and Picnik.com photo editing


The world is full of gradients. Literally everything we look at has a gradient given lighting conditions. I was in Jeremy Chone’s office yesterday and we were discussing Picnik.com photo editing application from an aesthetic point of view. The site is brilliant and the designers and developers should be commended for creating a great user experience with Flex 2.0. Bravo!

Picnik.com

So Jeremy Chone and I were discussion trends in Flex applications and I mentioned Picnik.com. He hadn’t seen the site (if you haven’t go now) so we dialed it in. The application is very subtle and they hide the use of Flex 2.0 very well. It is the experience that matters here, not the technology in use yet I fail to see how this could be done using anything but Flex ( I am very biased :) ). Seeing the application is full of gradients I asked Jeremy his perspective on the Web 2.0 gradient design trend. In a deep French accent he quickly pointed out that the world is full of gradients. We then looked at the office walls around us and I was taken aback by the fact that even in a well lit office, gradients and shadows are everywhere.

Over the weekend I have been looking at gradients as I walk around and observing just how many of them are in our natural view of the world. The key with Picnik is that gradients make the application seem more natural and organic. There are no harsh corners and the colors flow together to enhance navigation and editing of photos. The Picnik UI treatment in Flex is the best I have seen. The controls are easier to use, the thick progress bar and gear animation provide excellent user feedback and altogether the elements are a perfect match for the site. The use of gradients and rounded corners gives this application visual balance. This is an award winning use of Flex and provides a great experience for end users.

I guess from a design perspective it never hit me that gradients were so present in my every day life. I thought it was just Web 2.0 design but in reality I think it is design emulating nature.

Take a look around you now, there are gradients everywhere.

Cheers,

ted :)