Migrate Flex 3 web app to AIR app with flat design

[atriaforever]

Back in 2007, we started the development of a Flex application whose main characteristics are:

• it is an administration tool, no animation here
• it is basically a set of list screens with corresponding add/update screens
• each of these add/update screens use different tabs with usual data oriented components on each tab, such as datafield, radio button, dropdown list...

Now that Flash will officially die in 2020, it is time for us to migrate this application from the current code base which is:

• Flex 3 for Flash and ActionScript (a lot!) on the client
• Java objects on the server accessed from the client using Flex remote objects

I have the following requirements for this migration:

• use a technology which runs on a browser or as an app on PC, Mac and tablets, and maybe smartphones (not mandatory as this app is an admin tool not to be used on the go)
• deliver modern UI (flat design expected)
• and the most important: which offers the lowest migration cost and delay, as we have a huge Flex3 MXML and AS3 code base to migrate

Please tell me:

• Is targeting AIR a viable solution for this migration?
• What are the difficulties we may face during this migration?
• Where can we find documentation to help on such a migration?
• What resources (themes, skins, other) are available to give an AIR app a nice and modern flat design? Default theme really look outdated.
• Any other point you may consider of interest in this context

[Colin Holgate]

Only the plugin will be end of life, and it's the end of 2020, so at the earliest you have until January 1st 2021.

Are you able to run your current application in Flash Player? If you are then you can create a projector version of the application, and that can run on Mac or PC as a standalone application. You wouldn't need to change anything, and it would only take a few seconds to create.

If you did make an AIR application it would effectively be the same thing, the first SWF you need to see would be what you would publish, and all of the other files that are needed would be added to the application bundle. That might take a few minutes to create.

So, depending on what your application is like you may well have almost no work at all to make it work as a standalone application.

[atriaforever]

Hi, thanks for quick feedback. I have some questions though.

• What do you mean exactly by "Are you able to run your current application in Flash Player?". Do you mean the Flash Player provided as a browser plugin or included in Google Chrome? If so, yes, the app runs in any web browser with the Flash plugin. If no, please me more specific.
• I googled a bit but could not find how to build a "projector" file from Flex. Do I need another software to build this 'projector file'? Which ones?
• Are they any limitation on "projector" app compared to AIR app?

[Colin Holgate]

Good follow up questions!

By Flash Player I meant the standalone applications. Suppose you're looking at a SWF file, and you double click it, what application gets opened? If Windows has nothing for you, look at this page as a way to get the standalone players:

Download Adobe Flash Player 26 Beta for Desktops - Adobe Labs

If you do get it opened in Flash Player, there should be an option to save the SWF as a projector.

An AIR application has better access to the file system, and it can also show a web view. But first see if double clicking on your initial SWF does open Flash Player, and if the rest of your application works correctly.

Is the application top secret? If you could show a link to it, or upload a zip file of everything, I could try making it as a projector.

[atriaforever]

I have downloaded the standalone player.

When I double click a local copy of the SWF, the player opens it, but the "create projector file" option is greyed (see below).

You can access a live version of the web app here:

https://test5.knowledgeplaces.com/admin

[Colin Holgate]

Thanks. I had noticed the grayed out menu item. I'll think about that!

[Colin Holgate]

Here is a page of old Flash Player files:

Archived Adobe Flash Player versions

I tried the one named  "(Released 6/11/2013) Flash Player 10.3.183.90 (61.1 MB)". Really I took the Mac only version of that, but hopefully the other one will work. With that I was able to make a projector of KnowledgePlace.swf, and could see the Flex interface when I ran it.

Not much else worked, because I don't have all the support files, but you do, so it should get further.

Here's an article on making an AIR application from a Flex project, if you do need to use AIR:

Adobe AIR * Creating your first desktop Flex AIR application in Flash Builder

[atriaforever]

Hi Colin, thanks for feedback.

I will probably go with AIR, as access to local resources and ability to deliver the app also on iPad and Android tablets are valuable benefits.

Question remains about the quality of the UI.

We already put our hands in AIR, and maybe we did not it the right way, but the app UI is really outdated, all forms looks like Windows 95 forms.

I have seen very nice things done with Feathers, like these: Feathers themes - Premium themes for Feathers UI | Themes

Can I do the same with Flex AIR only?

Is Feathers something endorsed/supported/maintained by Adobe?

Also, is FlatSpark, now included in Apache Flex, compatible with AIR on all platforms?

I am just looking for a way to give a nice flat UI design to my app.

[ASWC]

If you stick with AIR then you won't be able to deliver your product on a browser after 2020. If this will never be a problem ever then AIR can probably suit your needs to a few more years.

con: Delivering a AIR Flex project on mobile device will not be as easy as you think for 2 main reason: performance and touch screen capture.

pro: Flex components are easily customizable, the outdated look you are talking about can be changed by creating custom looks from the existing components.

con: Starling and Feather DO NOT adapt to existing framework and Flex is certainly out of the question. What that means is, you won't be able to switch to Starling/Feather WITHOUT reworking/changing completely your entire code base.

Feather/Starling authors are paid by Adobe to maintain their frameworks. Those frameworks unfortunately do not integrate/work very well with other frameworks including the stock flash classes.

AIR is not another technology than Flex, when you create a Flex project you can choose between running on web (flash) or on desktop (AIR) and you end up with the exact same classes anyway cos it's the same thing. With AIR you get the ability to export for different OS as executable as that's it so don't view AIR as something different than your Flex project, it's not.

[ChristianKiefer]

ASWC  schrieb

con: Delivering a AIR Flex project on mobile device will not be as easy as you think for 2 main reason: performance and touch screen capture.

I think the performance is not a problem for that kind of app: "it is an administration tool, no animation here"

[ASWC]

Standard Flex components rely heavily on vector graphics and even a simple view with bunch of inactive components can make a average tablet/phone lag heavily (drop fps to near zero) without mentioning their lack of (complete) support for touch screens (and also the drain on battery will be noticed). Flex Apache does provide an answer to that with a specific set of components for touch screens/mobile device but you'll have to make the switch yourself and modify some code. Anyway you'll have to run some tests.

[ChristianKiefer]

@atriaforever

You should test it. We have built a Apache Flex Mobile App and it is running very well at all kind of newer Android Devices we tested and on newer iOS devices (iPhone 5 or higher, Galaxy S3 or higher, LG4C, Xperia Z Ultra, Amazon Kindl Fire (~$50), Lenovo Tab 2 A7 (~$70), ... )... On a Galaxy S2 and iPhone 4 it has performance issues ... but is running...

There are a lot of good tutorials how to create a Flex Mobile App with good performance...

[Harbs.]

ChristianKiefer  wrote

There are a lot of good tutorials how to create a Flex Mobile App with good performance...

Yes. Use ActionScript item renderers as opposed to MXML and keep them as simple as possible.

Use bitmap caching

There are tricks to make really smooth scrolling. You can search the Apache Flex mailing lists for tips on that.

Basically, if you pay attention to what you are doing you can get really performant apps.

Another option is to try FlexJS which can target both HTML and AIR.

HTH,

Harbs