Custom ApplicationUpdaterUI for using AIR Update Framework in Flex 4
September 9th, 2009
Flex 4 is Rock ‘n’ Roll! However, Flex 4 is still beta and it can’t be perfect right now. Today one of the most missing feature for me is using the ApplicationUpdaterUI of the Adobe AIR Update Framework in Flex 4. This bug is already documented. (BTW: Please vote here to fix this issue! )
Anyway, I can’t wait for the final release of Flex 4, so I decided to build a custom ApplicationUpdaterUI component based on the new Spark skinning architecture. The custom ApplicationUpdaterUI is built on the top of the current version of Adobes AIR Update Framework and most of the current features are available (e.g. auto check, localization etc.) The component is full skinnable using it as an external window (as before) or as an embedded view component in an application (without the need of a popup window).
Usage
Usage of ApplicationUpdaterUI ( Download code )
-
-
-
//
-
// [1] Using ApplicationUpdaterUI as a popup window using ActionScript
-
var updater: ApplicationUpdaterUI = new ApplicationUpdaterUI( new File ( ‘pathToYourUpdaterXML’ ), true, true );
-
// Optional: setting skin
-
updater.setStyle(‘skinClass’, de.websector.utils.updater.ui.skins.silver.AppUpdaterUISilverSkin);
-
// Optional: change the height and width of the window
-
updater.windowHeight = 300;
-
updater.windowWidth = 500;
-
// check for updates
-
updater.checkNow();
-
-
-
//
-
// [2] Using ApplicationUpdaterUI as an embedded view within your application
-
// Important: Avoid using popup window: useWindow=false (default is true)
-
// Optional: setting skin class via "skinClass"
-
// Optional: If the view should be visible only if an update available set invisibleCheck="true" (default is false)
-
<ws:ApplicationUpdaterUI
-
xmlns:ws="http://websector.de"
-
id="updater"
-
width="100%" height="50"
-
configurationFile="{ new File ( Constants.UPDATE_FILE ) }"
-
skinClass="de.websector.utils.updater.ui.skins.firefox.AppUpdaterUIFirefoxSkin"
-
invisibleCheck="true"
-
useWindow="false"
-
/>
Skin examples
It’s pretty easy to create your own skin and add it to the component! Check out the 3 different skins and feel free to use these as an example for your custom skins.
- AppUpdaterUIStandardSkin: Cloned interface of the Flex 3 based ApplicationUpdaterUI
- AppUpdaterUISilverSkin: Inspired from Adobes shiny XD components
- AppUpdaterUIFirefoxSkin: That’s my favorite
. Do you know the status bar on the top of a HTML page in Firefox 3.0 if a popup is trying to open? This skin a clone of such a bar to inform the user, if an update available. No need for an extra popup window.
Download full source
Full source is available at GitHub (package: de.websector.utils.updater.ui.*) :
http://github.com/sectore/applicationupdaterui/
All source of ApplicationUpdaterUI is open source licensed under Mozilla Public License 1.1.
Personal TODOs
- Documenting / commenting code base
- It’s not a “most wanted feature” right now, but handling of an update using files (events: StatusFileUpdateEvent.FILE_UPDATE_STATUS and StatusFileUpdateErrorEvent.FILE_UPDATE_ERROR) would be nice. If I have the time, I’m going to implement it.
Happy updating
!
-Jens


September 9th, 2009 at 7:26 pm
Just got the email notification from JIRA – I had actually started something like this myself but hadn’t found the time to complete it. Thanks to your effort, it appears it will no longer be necessary!
Many thanks for posting this.
September 9th, 2009 at 8:18 pm
[...] This post was mentioned on Twitter by CT, Michael Ritchie and Jens Krause. CT said: Flex News: Custom ApplicationUpdaterUI for using AIR Updater Framework in Flex 4: Flex 4 is Rock 'n' R.. http://bit.ly/10DH3c [...]
September 9th, 2009 at 11:32 pm
Dude, great job…thx
September 10th, 2009 at 8:44 am
Jens,
Hello Jeans, oh really cool,
Thanks for share this useful tool.
Let´s make a Skin gallery for enhanced it.
Keep on,
Viele Grüße,
Ramón
September 14th, 2009 at 3:22 am
[...] application restarts and displaying additional update information. I found another good example by Jens Krause, but this example is for Flex 4. I needed something that would work for Flex 3. So here is what I [...]
September 17th, 2009 at 12:36 am
hi, nice job but it is not working with SDK build: 7219 .
what version do u have ? (it does not recognize s:Label
September 17th, 2009 at 1:24 am
hmm, I’ve downloaded nightly build 10288 and it is working.
thnks again for the great job!
October 9th, 2009 at 11:18 pm
Hey, very cool that you put this together…running into a problem though, with the latest SDK (beta 2)….
ArgumentError: Undefined state ‘normalAndInactive’.
in UIComponent.getState().
Looks like they changed some naming convention internally. Any idea how to fix?
October 21st, 2009 at 9:12 am
@rich: Which skin are you using? At a current project (AIR 1.5.2 + Flex 4 – SDK 4.0.0.10396) I’ve been using the AppUpdaterUIStandardSkin and it works like a charme…
-Jens
November 5th, 2009 at 2:20 pm
Really cool impl. 10x for sharing it
)
Btw I’ve forked your git project and made some fixes including compile support for Flash Builder and some skins modifications which can be found at http://github.com/outbounder/applicationupdaterui
(used github hardcore fork option
November 16th, 2009 at 1:48 am
This seems to have stopped working as of Flex SDK build #11810. I’ve also tried with today’s 11824.
It might be the underlying ApplicationUpdater – I haven’t had a chance to test yet.
Greg
http://GregsRamblings.com
November 16th, 2009 at 12:57 pm
Thanks for your advice, Greg!
There was an issue to set a custom skin class using
if( getStyle('skinClass') == undefined ) setStyle("skinClass", AppUpdaterUIStandardSkin);using the latest Flex SDK 4.0.0.11824. So the standard skin (SkinnableContainerSkin) of a SkinnableContainer, which is extended by my custom ApplicationUpdaterUI, was used, not the AppUpdaterUIStandardSkin…Anyway, this issue is fixed now and the source code has been updated for using latest Flex SDK 4.0.0.11824. Check it out: http://github.com/sectore/applicationupdaterui/
-Jens
December 6th, 2009 at 5:25 pm
In the meantime Adobe has released a new official ApplicationUpdaterUI SWC for the AIR 2.0 SDK, but it doesn’t seem to work with AIR 1.5 projects. So your solution is still very valuable! Thanks!
February 1st, 2010 at 9:57 pm
Hello, I got this error.
Please help me.
ReferenceError: Error #1069: Property initialized not found on spark.primitives.Rect and there is no default value.
at de.websector.utils.updater.ui.skins.standard::AppUpdaterUIStandardSkin/_AppUpdaterUIStandardSkin_Rect1_i()
February 3rd, 2010 at 4:46 pm
Habib, are you using Flex 4 SDK build 13553 or higher?
-Jens
February 4th, 2010 at 11:40 am
Hi,
first of all – great work
But, for me it doesn’t work correct.
I want to try out your class with a basic code like:
private var updater:ApplicationUpdaterUI
protected function init():void
{
Alert.show(“Init”);
updater = new ApplicationUpdaterUI( new File(“app:/config/updateConfig.xml”), true, true);
updater.setStyle(‘skinClass’, AppUpdaterUIStandardSkin);
updater.windowHeight = 300;
updater.windowWidth = 500;
updater.addEventListener(UpdateEvent.INITIALIZED, listener);
updater.initialize();
}
protected function listener( event:UpdateEvent ):void
{
Alert.show(“Listener”);
updater.checkNow();
}
But nothing happens.
Any idea?
(Of course the “Alter.show(“init”) is put out.
greets
February 5th, 2010 at 4:24 pm
Hendrik,
you don’t need to add an event listener to UpdateEvent.INITIALIZED to call updater.checkNow(); It will be handled by ApplicationUpdaterUI.as (line 455) itself: http://github.com/sectore/applicationupdaterui/blob/master/src/de/websector/utils/updater/ui/ApplicationUpdaterUI.as#L455
Call it right after instantiating ApplicationUpdaterUI. Check the posted example above
-Jens
February 18th, 2010 at 7:53 pm
You seem to using local location for update.xml. What if I need to store the update.xml on remote server and AutoUpdater shall refer that URL to check if new version is available.
–
N
February 18th, 2010 at 8:01 pm
@Nilesh: There is no difference compared to the standard way of Adobes ApplicationUpdater. Just one local xml file used as a configuration file (check example at http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/air/update/ApplicationUpdaterUI.html#configurationFile) and one remote xml file “update.xml”, which is hosted anywhere on your server and which implements all information about the update.
-Jens
February 20th, 2010 at 11:32 am
@sectore : I agree. I wanted to somehow specify remote URL in AppUpdaterUI constructor itself and it doesn’t seem to be working. Thats fine, now I am using config.xml in constructor which in turn will have updateURL value for remote update.xml.
I guess original AppUpdaterUI had updateURL value which can be set to remote URL instead of going through usage of configuration file.
Thanks for responding anyways !
There was another problem which @Habib mentioned above and that is not a valid if I use latest SDK. The SDK which comes along with FlashBuilder beta2 (10485)version is will have that issue.
–
Nilesh