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

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.

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

20 Responses to “Custom ApplicationUpdaterUI for using AIR Update Framework in Flex 4”

  1. Jesse Lundberg Says:

    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.

  2. Tweets that mention WS-Blog » Custom ApplicationUpdaterUI for using AIR Updater Framework in Flex 4 -- Topsy.com Says:

    [...] 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 [...]

  3. ali Says:

    Dude, great job…thx :)

  4. Ramón Helena Says:

    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

  5. Custom AIR updater interface using ApplicationUpdater — Thanks, Mister! Says:

    [...] 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 [...]

  6. yigit Says:

    hi, nice job but it is not working with SDK build: 7219 .

    what version do u have ? (it does not recognize s:Label

  7. yigit Says:

    hmm, I’ve downloaded nightly build 10288 and it is working.

    thnks again for the great job!

  8. rich Says:

    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?

  9. sectore Says:

    @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

  10. obi Says:

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

  11. Greg Wilson Says:

    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

  12. sectore Says:

    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

  13. Dorian Says:

    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!

  14. Habib Ullah Bahar Says:

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

  15. sectore Says:

    Habib, are you using Flex 4 SDK build 13553 or higher?

    -Jens

  16. Hendrik Says:

    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

  17. sectore Says:

    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

  18. Nilesh Says:

    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

  19. sectore Says:

    @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

  20. Nilesh Says:

    @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

Leave a Reply

Follow sectore on Twitter