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 :)