Error on adding FullScreenListener in creationComplete handler

This is an issue i hit upon while i was doing the Full Screen App (you can see it here). I wanted to add a listener to listen for the FullScreenEvent (package flash.events.FullScreenEvent) in my Application. So i put that onto my creationComplete handler on the Application, i.e.

mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" creationComplete="initStuff()"

and

private function initStuff():void{
stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);
}

But, this threw a real time error (RTE) saying...

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at JustFullScreen/::initStuff()
at JustFullScreen/_Application1_creationComplete()

The above error means that the "stage" object is null when it is trying to set the listener. What perplexes me is that if i put this addListener code in a later part of the application, it works. Which means that the stage is getting intitialized between the Application's creationComplete and the place in the code where i'm calling it. Is this a bug or does the stage get initialized later, dispatching a different event? I'm still digging.

Addendum (half hour later): I observed now that including the SystemManager class (mx.managers.SystemManager) and then using the following code in the creationComplete handler works.

import mx.managers.SystemManager;

private function initStuff():void{
systemManager.stage.addEventListener(
FullScreenEvent.FULL_SCREEN, handleFullScreen);
}

So why is the systemManager object required if it is in the creationComplete handler and not if it is in a later part of the code... I'm confused now!!! Gotta tread back to the Flex Gurus :)
The code is here...

• The one using SystemManager
• The one where it is being called later
  

Addendum again (the next day) - Thanks Joan for the info. Thanks to her, i found the solution for the above problem...

It seems that the stage is available only after the updateComplete or applicationComplete Events. Read the post that demystified things for me...

My Full Screen Video App - Ver 1.0

I wrote about full screen support in flash, a long time back in Nov '06 (see that post here). I have been planning to write one myself. So finally i got myself down to write it. Before i put you through the app, some details on the API.

To make your application have a fullscreen support you need to do the following things.

1) Have the latest Flash Player (get it here)

2) Use the new Full Screen API
import flash.display.StageDisplayState into your Application and set the displayState of the stage. I have the following function toggling the FullScreen feature. "fsChk" is a CheckBox, based on which I'm toggling the functionality

private function toggleFullScreen():void{

stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);

if(fsChk.selected) {
stage.displayState = StageDisplayState.FULL_SCREEN}

else {
stage.displayState = StageDisplayState.NORMAL}
}

3) Update the html-template in which you have the flash App
In the object & embed parts of the html code of the page in which the flash app is inserted, you need to add a new parameter allowFullScreen to true. You can refer the source of the app and view the html for details.

If you want to know more about this feature, refer the Adobe DevCenter article on the same or view the PDF that i have created, collating all that information.

Now the Application. This is just a small video player which can go full screen by checking a Flex CheckBox. This is written in Flex2.0 and you can find all the source files here...

Click here to view the Application
(confirm that you have the latest Flash player)

P.S - I have muted the video to start with, un-mute it if it pleases you :)

Nice use of Flex Charts :)

I never thought that FLEX Charts would be used for advertisement purposes. But dashboardcompany.com has done a nice bit of innovation and to prove their point to people, they have an advertisement on their homepage using FLEX Charts, that reads. Check out their ad here...

Experience Your Data in a Whole New Light.

Nice work guys :)

ProgrammableWeb.com

I stumbled on this site called ProgrammableWeb.com today. The site keeps you up to date with the latest Mashups & APIs in Web2.0. It has special coverage of :

• Mashup of the Day
• The programmableweb.com blog
• Mashup Dashboard
• API Dashboard
  
• Developer Dashboard

I'm still exploring it... looks like fun !

Abrupt YouTube security policy change

Due to abrupt youTube security policy change, my youTube App doesnt work anymore :(

Possibly due to an exploit, youTube abruptly changed their crossdomain.xml file to only allow access from the youtube.com domain. As a result, YouTube developer API calls no longer work if the SWF exists in a non-youtube.com domain. You can read more on this on Joe's Blog here.

Woe is me... I think i'll try to port my app to the new BrightCove API that i came across today. Lets wait and watch :)

It seems Flickr did it too... seems like Death of open crossdomain.xmls. Read the post by Renaun Erickson

Card Layout - Draft 1

This is just a draft and its a simple application (with just over 100 lines of code). I finally intent to wrap it into a FLEX Container. So here's my Card Layout

The Card Layout in Java is similar to the View Stack implementation in FLEX. But when i first heard about this layout in awt package, I always expected it to be a container where views animate like flipping cards. It was quite a disappointment. So i decided to write one in FLEX & decided to call it Card Layout.

You can get the code... here

FLEX - i - FRAME

One of the biggeset pain points of FLEX/Flash (as i see it) is its inability to render HTML in its totality. FLEX supports a few HTML Tags, but not all. Another question that people pose to me is... "When are you guys gonna include PDF rendering in Flash ?".

I hope the answer to that is soon (since its the logical way to go), but here's a (partial) answer to people's woes. I call it "FLEX - i - FRAME". Its an old wine in new bottle, considering the fact that Flash Designers/Developers have been using it since time immemorial.

Thanks to Cristophe, who ported the idea to FLEX1.5 in AS2 (read the post here) and then Brian who gracefully ported the same to AS3 with FLEX 2.0 (read that post here). It has an awesome way of resizing the iFrame when the Flex Application is sized. The great part is, it can make it look like you are rendering HTML and even PDF content inside a Flash/Flex Application.

I took Brian's iFrame MXML component and made a quick application (in about half hour) to show its capabilities. This application will be a one-stop-shop for all resources pertaining to Adobe India's "Adobe Developer Olympiad" RIA Challenge. You can choose from a choice of sites/resources and PDFs from inside this application. So here it is

FLEX - i - FRAME

(To view source, right click on the movie once
you click the above link OR click here)

You can download the whole source code, complete with all dependent files (javascripts, assets.. etc) and use it to playaround with iFrame yourself :)

The trick is very simple. Its just a clever use of the External API interface that lets the Actionscript inside a Flash movie, talk to the Javascript inside the html (in which it is embedded). In this case, the approach is to let the javascript position an IFrame on top of a specific area of your Flex application to provide a container for the HTML content which will then appear embedded in the application.

The IFrame component extends Canvas and is used like any other Flex container. Behind the scenes, it acts as a proxy for the actual HTML IFrame. For example, when the IFrame component is resized or moved it automatically asks the HTML document to resize/move the actual IFrame. You can easily find the ExternalInterface calls in IFrame.mxml and the corresponding JavaScript functions in iFrameDemo.html (renamed to iFrameDemohtml.mxml for reading purposes).

But what kind of surprised me was the amazing perfomance of the History Managemet API. While still within the FLEX Application, you can use the browser back button to navigate to earlier pages... really NEAT !!!

People participating in the ADO RIA Challenge, go ahead and use this innovatively in your application. For more details on ActionScript - JavaScript interaction through External APIs, refer the following links.

• External Interface API (FLEX2 documentation)
• Using External API
• External Interface (Learn By Coding example by Chris)
• Beyond External Interface, the FLEX - AJAX Bridge