Custom ApplicationUpdaterUI for using AIR Update Framework in Flex 4

Posted on September 9, 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

 1 //
 2 // [1] Using ApplicationUpdaterUI as a popup window using ActionScript
 3 var updater: ApplicationUpdaterUI = new ApplicationUpdaterUI( new File ( 'pathToYourUpdaterXML' ), true, true );
 4 // Optional: setting skin
 5 updater.setStyle('skinClass', de.websector.utils.updater.ui.skins.silver.AppUpdaterUISilverSkin);
 6 // Optional:  change the height and width of the window
 7 updater.windowHeight = 300;
 8 updater.windowWidth = 500;
 9 // check for updates
10 updater.checkNow();
 1 //
 2 // [2] Using ApplicationUpdaterUI as an embedded view within your application
 3 // Important: Avoid using popup window: useWindow=false (default is true)
 4 // Optional: setting skin class via "skinClass"
 5 // Optional: If the view should be visible only if an update available set invisibleCheck="true" (default is false)
 6 <ws:ApplicationUpdaterUI
 7     xmlns:ws="http://websector.de"
 8     id="updater"
 9     width="100%" height="50"
10     configurationFile="{ new File ( Constants.UPDATE_FILE ) }"
11     skinClass="de.websector.utils.updater.ui.skins.firefox.AppUpdaterUIFirefoxSkin"
12     invisibleCheck="true"
13     useWindow="false"
14     />

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.

  1. AppUpdaterUIStandardSkin: Cloned interface of the Flex 3 based ApplicationUpdaterUI
  2. AppUpdaterUISilverSkin: Inspired from Adobes shiny XD components
  3. 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.

To see this content latest Flash Player Plugin is required.

Download full source

Full source is available at GitHub: 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

Any feedback?

comments powered by Disqus