Migrating Flex Application to Haxe

#1

Hello Folks,
Here is what we want to do to migrate our Flex Application to Haxe :
1- Replace Flash Dependecies in Flex classes (AS Files) by OpenFL
2- Convert MXML files to AS with MXMLC compiler (option: keep-generated-actionscript)
3- Convert all AS files to HX (with as3hx library)

Do you think that one of these steps is simply too expensive to be attempted ? do openfl cover all flash classes used by Flex ?

#2

The pain would be,
2 and 3. There are portions of Flex SDK which does not inherit from FlashSDK and to convert them would be a task in itself.

Everything (Flash) else could be done with a little work.

~saumya

#3

Not every feature of Flash is supported in OpenFL, but many are. I’m not sure how many the Flex classes may be relying upon, but text (like stylesheet support) is not supported, nor is the TextLayoutFramework or certain features like accessibility options.

There may be a few things that Flex could rely on heavily (like tab order) that may not be quite perfect (since most games don’t rely on features like that) but issues like that would be simple to fix, and I would love to help support those better.

Is there a “Hello World” Flex application you could test on this process? That might be a helpful step

Also, it’s worth considering to go from AS/MXML to Haxe, but compiling to Flash Player. It’s highly valuable as an inbetween step, so you can be sure that things converted as you expected, without changing the runtime implementation. Then we could support additional targets, are you going for HTML5, or native?

#4

Hi Imane,
We are at the same step, we have to get rid of flash player, and after thinking about to port to FlexJS or to OpenFL.
We have decided start the porting to Haxe/OpenFL/HaxeUI for our Dashboarding platform.

Step 1 is easy and as3hx helps you a lot, but you need to manually check the translated code.
But replacing MXML is hard.
We have finally decided to port MXML using HaxeUI v2, but it mainly depends on what kind of Flex components are you currently using.
As long as they are mainly buttons and layout (Group/VBox/HBox) it works like a charm, but if you need complex components like Charts, complex grids like Flex OLAP grids that’s another story.

Regards,
Marc

#5

Thanks singmajesty
Good to know that OpenFL does not support all features of Flash.
We are going for HTML5/ JS

#6

Hi mmauri, thanks for your reply
Yes indeed it seems a little compilcated to do that. Did you port MXML with HaxeUI V2 manually or there is a way to do that dynamically ?

#7

Hi Imane,
We are doing it manually from mxml to HaxeUI xml’s

#8

Hi @Imane and @mmauri,
I’m also finding a porting solution for my Flex project (~500.000 lines of code).

How about your progress? Can you share some update?

#9

You can read more here:

1 Like
#10

Hi @Nguyenbs,
Yes, we published how was the decision process and how was the process migrating our Flex based app.
It is already in production on several customers, and we are quite happy with the new stack Haxe/OpenFL/HaxeUI.

Contact me, if you feel that I can solve any doubts you might have.

KR
Marc

#11

Can you please explain a little more how did you port mxml to haxeui ? My targeted output is html5 … Where from to start ? For example I have the mxml file like below :

    <?xml version="1.0" encoding="UTF-8"?>
<mx:TitleWindow layout="absolute" showCloseButton="true" creationComplete="
{
    center();
    return;
}

" close="
{
    close();
    return;
}

" xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox percentHeight="100" percentWidth="100">
        <mx:HBox percentWidth="100">
            <mx:Button click="
            {
                clear();
                return;
            }
            
            " label="Clear" />
            <mx:Button click="
            {
                add();
                return;
            }
            
            " label="Add" />
            <mx:Button click="
            {
                update();
                return;
            }
            
            " label="Update" />
        </mx:HBox>
        <mx:Text id="_DebugDialog_Text1" text="{output}" color="#ffffff" percentWidth="100" />
    </mx:VBox>
    <mx:Binding source="wndTitle" destination="this.title" />
    <mx:Script>
        <![CDATA[
        import flash.accessibility.*;
        import flash.debugger.*;
        import flash.display.*;
        import flash.errors.*;
        import flash.events.*;
        import flash.external.*;
        import flash.filters.*;
        import flash.geom.*;
        import flash.media.*;
        import flash.net.*;
        import flash.printing.*;
        import flash.profiler.*;
        import flash.system.*;
        import flash.text.*;
        import flash.ui.*;
        import flash.utils.*;
        import flash.xml.*;
        import mx.core.*;
        import mx.events.*;
        import mx.managers.*;
        import mx.styles.*;
        
        public function update():void
        {
            output = refObject.updateFnc();
            return;
        }

        public function close():void
        {
            mx.managers.PopUpManager.removePopUp(this);
            return;
        }

        public function clear():void
        {
            output = "";
            return;
        }

        internal function center():void
        {
            mx.managers.PopUpManager.centerPopUp(this);
            return;
        }

        public function add():void
        {
            var bck:String=output;
            output = refObject.updateFnc();
            output = output + "\n-----------------------\n";
            output = output + bck;
            return;
        }

        [Bindable]
        public var refObject:com.bykd.g4m.ui.debug.DebugRefObject;

        [Bindable]
        public var wndTitle:String="Debug Window";

        [Bindable]
        public var manager:com.bykd.g4m.ui.debug.DebugManager;

        [Bindable]
        public var output:String="";
        ]]>
        
    </mx:Script>
</mx:TitleWindow>