UPDATE: The latest RC for Flash Builder 4 now supports plugins again. I have updated the links to include the Eclipse plugin URL for each plugin.

This post is as much a reminder to me for future builds as it is for anyone else sick of having to manually look up where to down load the most common plugins every time they update. Start by downloading all the plug in files:

ANT

To get ANT installed you need to download and install JDT for eclipse.

Manual install: http://download.eclipse.org/eclipse/downloads/drops/R-3.5.1-200909170800/index.php

Eclipse update URL:

http://download.eclipse.org/releases/galileo/

Flex Formatter

Once you have used Flex Formatter you will never look back. It automatically formats your code, making you look like you have spent lots of time lining everything up. You can download the plugin files here http://sourceforge.net/projects/flexformatter/

Eclipse update URL:

http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite

subclipse

Subclipse is a must for anyone using SVN in their projects. It stops you running into a lot of problems, like turning up .svn files in search results. You can get it here
http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240

Eclipse update URL:

http://subclipse.tigris.org/update_1.6.x

For the manual install, once you have downloaded and unzipped these files copy the content of their plugin folder to the plugin folder in your Flash Builder 4 directory. You may also want to copy the features folder content to the features folder in the Flash Builder 4 folder too.

Once done restart Flash Builder and everything should be working.

Also be sure to check out SourceMate (currently in Beta).

I was able to use Charles Proxy to see that the application wasn’t even making the requests to the server, meaning it must be an issue with AIR rather than local or remote DNS, or web servers.

My requests were being made by the HTTPService class, and I couldn’t find any properties of methods that where related to caching, however I did find that URLRequest had two properties, useCache and cacheResponce.

 
var urlRequest:URLRequest = _new URLRequest();
urlRequest.cacheResponse = false;
urlRequest.useCache = false;

This is quite handy, although it didn’t seem to work for me, and also wasn’t idea for the situation I was in. After doing some digging on the web I found the classic solution of adding a random number to the end of the URL

 
 
 
 var urlRequest:URLRequest = _new URLRequest('http://www.example.com/');
 urlRequest.url += '?nocache=' + Math.random() * 100;

Again this isn’t ideal and could lead to problems, especially if you don’t know what server or URL the requests may be sent for. There is a chance the nocache (or any) variable could cause problems.

Eventually I noticed that the URLRequest’s cacheResponse entry on livedocs had a “See also” pointing to flash.net.URLRequestDefaults.cacheResponse. This solved all my problems, and is essentially a default for all URL requests made my AIR.

The properties appear to be static variables so you can set them like so:

1
2
3
4

 
// Turn caching off for AIR
URLRequestDefaults.cacheResponse = false;
URLRequestDefaults.useCache = false;

This only needs to be done once, so you can add it to your applications start up cycle.

Update framework

When using the ApplicationUpdater (without the UI), you can easily force the install of all updates, but this isn’t very user friendly, and not a great experience. Often it’s far too time consuming to write your own UI for the update framework, so ideally I wanted to create a way of supporting required updates whilst using the existing UI as much as possible.

In order to do this I wrote a decorator for the ApplicationUpdaterUI which added the new event RequiredStatusUpdateEvent. This is dispatched when the updateDescriptor file is downloaded and includes the value of a new node called required (which you need to add to your update.xml file):

 
<?xml version="1.0" encoding="utf-8"?> 
<update xmlns="http://ns.adobe.com/air/framework/update/description/1.0"> 
	<version>2</version> 
	<url>http://www.pixelbox.net/demos/extendedAppUpdater/ExampleAirApp-2.air</url> 
	<description>
		Version 2
		- Lots of great new features
		- Required security patch
	</description>
	<required>true</required>
</update>

The text “true” will translate into a Boolean set to true, anything else will be false.

You can then add a listener for the (along with any default events), to tell your user they have to update to the new required version. This can be as simple as:

 
           private function onUpdate(event:RequiredStatusUpdateEvent):void
            {
                if (event.required && event.available)
                    // Required update available 
                else
                    // There isn't a required update, so leave it up to the ApplicationUpdaterUI
            }

From a UX point of view this works rather well. You can choose how your application responds to a required update, and don’t need to force the install in the background and restart the app. I like to change the state of the app, as well as letting the ApplicationUpdaterUI window open. If the user upgrades through the default UI, great, if not they will be presented with a new app state, telling them there is a required update, perhaps even why it’s important. You may even want to let them do some things but not others (such as letting them save their work, or finishing their current workflow). Either way it gives your app the choice of how it wants to behave.

I have created a little example app (with view source enabled) that uses the this code, as well as a .swc and the example app as a project.

• Example AIR Application
• Extended Updater swc file
• Example Air App project
• Example update descriptor XML file

If you install the above air file, you will be able to check for updates and receive a required update. When this happens the app’s main function is disabled and a message displayed telling the user to upgrade.

Please let me know if you have any questions, or would like to add to this little framework, good luck. If you want to create your own without using the default UI check out this article on Black Pepper

NOTE: I have since discovered the Capabilities class that has a boolean called isDebugger. Therefore you can do this like so:

if (Capabilities.isDebugger)
{
trace('This app is running in the ADL');
}

Original post:

I recently came across the situation where I wanted to detect if my AIR application was running, “for real” or running in debug mode (in the Adobe Debug Launcher ADL).

With a standard Flex > SWF project you can change the HTML of the debug template to pass through a debug=true variable. However with an AIR project you don’t have this luxury.

The reason I want to do this, is I don’t want some things to happen when I’m debugging (such as sending stats to the server) and I don’t want to have custom variables or comment out code incase I forget to turn them back on before pushing live. By having a way of checking if the app is running in the ADL you can optionally stop things, safe in the knowledge that when they go live they will work.

I searched the web to see if there was a way to tell if AIR was running in debug mode, or in the ADL or was even a release build, but I couldn’t find a specific API call. What I did find is a number of methods that only worked if running in the ADL. All I had to do then was find one that returned different values depending on that fact. The Error class has a method getStackTrace() that return null if not running in the ADL and a string if it is, this was perfect and can be used like so:

if (new Error().getStackTrace() != null)
{
trace('This app is running in the ADL');
}

This code isn’t perfect, in the future the getStackTrace method could start working when not running in the ADL. You could also combine a few ADL specific methods, for better piece of mind. If you know of a better solution please let me know!

Now before I start there is one thing to look out for. I first wanted to change the background colour, and kept getting a flash of that Windows 98 turquoise before it change to my new colour… This had me really confused for a while, until I realised that the auto generated HTML that Flex Builder 3 creates has that same colour as it’s default background… Doh! (You can also get the compiler to change this, see the gotoAndLearn example for more info)

Quite a few of the settings of the loading screen can be set through the mx:Application tag, in your Application Class’s MXML. The most obvious being the background colour. This is also where you can specify your own download screen, or as Adobe call it, “DownloadProgressBar”.

At the highest level a Flex application is a two frame movie clip, the first frame being the aforementioned, “DownloadProgressBar” and the second being your Application class. In order to draw images and a progress bar on your loading class thing, you will need to extend the Sprite class (like a movieclip without frames) and implement the IPreloaderDisplay. ( Holy object orientation Batman! Don’t worry you can just copy my example and ignore that if you want!)

When creating your own “DownloadProgressBar” you need to keep it lightweight, otherwise you will have to make a “DownloadProgressBar” for that! Also some elements of the Flex framework won’t be available when it starts, so don’t go too crazy!

The first step is to add this to the tag in your Application’s MXML file

preloader="com.example.preloaders.myDownloadProgressBar"

Once this is added your application will use your custom “DownloadProgressBar” Class, rather than the default one. This means you can do lots of stuff yourself with the information provided, such as total to download and total downloaded, in addition to some events called at various stages of initilisation.

Download the Download Progress Bar example class here. I have commented as much as I can, and will try and put a demo together soon.

Other examples:

• http://www.onflex.org/ted/2006/07/flex-2-preloaders-swf-png-gif-examples.php
• http://flexiblemyself.blogspot.com/2007/10/custom-preloader.html
• http://iamjosh.wordpress.com/2007/12/18/flex-custom-preloader/
• https://defiantmouse.com/yetanotherforum.net/default.aspx?g=posts&t=82
• http://www.gotoandlearn.com/play?id=108

I came across PolarClock today, a great flash clock that kind of rotates depending on the time.

What was really interesting is that the developer has turned it into a screen saver using ScreenTime. When you change the settings on OS X you can see the flex app loading.

Will have to try it out, but first I will need to make something worthy of a screen saver!

I used the example to return a set number of days since one of our issues launched, by sending the function the number of days and the starting date.

/* This is a public static function so it can be called from my
utility class of useful converts and such! */

public static function returnDateXDaysFromY( x:Number , y:Date ):Date
{
  var xDaysFromY:Date = new Date(); // Date to return
  // I have removed a call to a function to set the time to zero, you can get caught out with summer time etc
  x = ((((x * 24)* 60) * 60) * 1000); // Turn days to miliseconds
  xDaysFromY.setTime( x + y.getTime() );
  return xDaysFromY;
}

Hopefully someone else out there will find this handy :)

Now, Ceros records a number of statistics, all in line with industry standards and auditable by ABCE, and this is strictly none of the above, but it’s an easy way to see how many people are interacting with something.

So what I did was create a simple PHP page which will write the current date to a text file, each on a new line. The script will also display the number of lines in that file (if no variables are sent).

I though it was such a nice little, simple, but utterly useful script that I would put it up here. I then also added it to the flickr widget in I made in ActionScript3 to record the number of times people click on the photos to change them… which was a totally depressing experience as it turns out no one does ;(

So here is the PHP script which needs to be alongside a text file referenced inside it…

and here is the Flex stuff with it added in (includes AS3 URLRequest example)…

and finally if you want to see how many people have clicked on that little widget to the right you can look here! (p.s. the first 15 were me!!!)

For the first incarnation (and I have many more ideas of how to do this) it will update with the time of day to show a representation of where I am (London). It then selects a random photo in the top 20 results to show.

Clicking the image now updates the photo from the original result set, rather than making a new request, which has made it a million times faster.

The only problem is the difficulty I have searching and selecting images. I am currently using the tag search to bring back images of London plus Morning, landmarks, afternoon, evening or night. landmarks you say?? Well the thing is, no one seems to tag photos with day or noon, people only tag things that aren’t the norm.

So I am planning on adding some more photos of my own that I can use, or find out a clever way I can do some self tagging, perhaps with favourites or something.

The next step is going to have to be integration with another service, perhaps twitter, weather.com or in the future fireeagle.

Download the source code for my Flickr widget!

Previously in flex I have used SOAP for communications, which is great, but it appears that Flickr provide SOAP services but no WSDL, great… what’s the point in that guys, you mares well just use REST! Well I guess that’s what they want you to do, so I decided to use their REST service.

This is as easy to do in AS3 as a SOAP web services, the only limitation is the Flickr API, annoyingly it’s not as easy to grab a random one of my photos as I initially hoped. So for the time being, it’s just a totally random Flickr photo.

So here is the code form my example REST web service in AS3 (Flex) which I expect would also work in AIR.

RandomPhoto Source Code