Re: Converting existing Flex code to Javascript (ExtJS)

[Frank]

Hi Kedar,

at CoreMedia, we apply Jangaroo to build UIs with Ext JS, so I can
tell
you doing so actually works, even for large scale projects.
Jangaroo's Ext AS / EXML was inspired by Flex, so EXML is quite
similar
to MXML.
Actually, when migrating to Ext 4 (we still use Ext JS 3.4), we think
about extending Jangaroo to support MXML instead of EXML.

On Feb 28, 2:04 pm, Kedar Dixit <dixitke...@gmail.com> wrote:
> My questions are as below:
> 1. If I have existing Flex code (that does NOT implement the EXT JS AS
> API), is there a way to still convert this into ExtJS? (maybe define a EXML
> that bridges the gap?

Jangaroo supports ActionScript, and Flex is completely written in
ActionScript.
So one could think it should be possible to compile Flex with Jangaroo
and
end up with Flex targeting JavaScript / HTML5. But this is not so
easy, since
Jangaroo does not implement all language features of ActionScript
(e.g. E4X
is missing) and it does not fully implement the Flash API, which is
used
extensively by Flex. Even if it would, the result would most likely be
megabytes
of JavaScript code---too bloated for a UI framework running in the
browser.
So your approach to use Ext JS components instead of Flex components
is much more realistic. For some disclaimers, see below.

> Has anyone tried this? Can you please share sample code if they have done
> it?

The only sample code publicly available are the examples from the
Github project
described on the Wiki page you mention. It you have not yet played
around
with these, you should really go ahead and clone this stuff:

https://github.com/CoreMedia/jangaroo-ext-as-examples

If you have trouble getting it to work, feel free to post here again!

> 2. Also, does it work when you have the declarative flex code (mxml instead
> of .as. I understand mxml is complied into an .as that then is written into
> fbc, but will the conversion to ExtJS work with .mxml files as well?)

EXML, like MXML, is another syntax to implement ActionScript classes.
You could tell the original mxmlc to keep the generated ActionScript
code
and compile that code with Jangaroo, but it uses too large parts of
the
Flex API and you cannot tell mxmlc to not generate Flash code, so this
is not the way to go. Currently, I'd recommend porting your
application to
EXML.

The examples show you in a step-by-step way how you can use Ext JS
from
pure ActionScript code and how you can combine this with declarative
code
written in EXML. So with some effort, it should be possible to convert
your
MXML code into EXML, using the Ext components corresponding to the
Flex
components your code uses. Be aware that some components and concepts
are quite different in Ext than in Flex. For example, in Ext, there is
no general
"repeater" component and no automatic property-binding (Flex:
[Bindable]).

Greetings
-Frank-

[Kedar Dixit]

Frank,

Thanks a lot for your valubalbe inputs. I have gone through the examples and played around a bit (although I admit, I still need to do some more digging). Here is what I did.

 

I created a simple Greeter action script (Greeter.as)

-----------------------------------------------------------------------------------

package com.acme.extas.json
{
    public class Greeter
    {
        /**
         * Defines the names that should receive a proper greeting.
         */
        public static var validNames:Array = ["Kedar", "Rahul", "John"];

        /**
         * Builds a greeting string using the given name.
         */
        public function sayHello(userName:String = ""):String
        {
            var greeting:String;
            if (userName == "")
            {
                greeting = "Hello. Please type your user name, and then press the Enter key.";
            }
            else if (validName(userName))
            {
                greeting = "Hello, " + userName + ".";
            }
            else
            {
                greeting = "Sorry " + userName + ", you are not on the list.";
            }
            return greeting;
        }
       
        /**
         * Checks whether a name is in the validNames list.
         */
        public static function validName(inputName:String = ""):Boolean
        {
            if (validNames.indexOf(inputName) > -1)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
    }
}

 

----------------------------------------------------------------------------

 

 

I ran the jooc compiler (mvn install) and sure enough it created a javascript file in the target folder.

 

---------------------------------------------------

joo.classLoader.prepare("package com.acme.extas.json",/*
{*/
    "public class Greeter",1,function($$private){return[
   
        /**
         * Defines the names that should receive a proper greeting.
         */
        "public static var",{ validNames/*:Array*/ :function(){return( ["Sammy", "Frank", "Dean"]);}},

        /**
         * Builds a greeting string using the given name.
         */
        "public function sayHello",function sayHello(userName/*:String = ""*/)/*:String*/
        {if(arguments.length<=0)userName="";
            var greeting/*:String*/;
            if (userName == "")
            {
                greeting = "Hello. Please type your user name, and then press the Enter key.";
            }
            else if (com.acme.extas.json.Greeter.validName(userName))
            {
                greeting = "Hello, " + userName + ".";
            }
            else
            {
                greeting = "Sorry " + userName + ", you are not on the list.";
            }
            return greeting;
        },
       
        /**
         * Checks whether a name is in the validNames list.
         */
        "public static function validName",function validName(inputName/*:String = ""*/)/*:Boolean*/
        {if(arguments.length<=0)inputName="";
            if (com.acme.extas.json.Greeter.validNames.indexOf(inputName) > -1)
            {
                return true;
            }
            else
            {
                return false;
            }
        },
    undefined];},["validName"],[], "0.8.0", "0.9.14"
);

 

 

--------------------------------------------------

 

 

Now my challenges are manyfold

1. In the above case, is there a way I can write an .exml file that would allow the jooc to compile the code into ExtJS code (again I am ok with a partial conversion, and I understand that worst case scenario it would be just plain bare skeleton code)

2. When I actually implement the Greeter.as in an mxml file  as below (Main.mxml)

-----------------------------------------------------------------------------------

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="initApp()">
<mx:Script>
        <![CDATA[
            private var myGreeter:Greeter = new Greeter();
           
            public function initApp():void
            {
                // says hello at the start, and asks for the user's name
                mainTxt.text = myGreeter.sayHello();
            }
        ]]>
    </mx:Script>

<mx:TextArea id = "mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" /><mx:HBox width="400">   
        <mx:Label text="User Name:"/>   
        <mx:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" />
    </mx:HBox>
   
 
</mx:Application>

----------------------------------------------------------------------------------

the jooc complier somehow does not really understand and compile or even attempt to compile the mxml file. Is there a configuration that would allow the jooc compiler to compile mxml files? Am I missing soemthing here?

 

Please pardon my naive questions, but I ahve never been excited before as I have been in the past few days  working with Jangaroo!

 

Best Regards,

Kedar

 

 

[Frank]

Currently, Jangaroo (version 2) only understands EXML, not MXML.
To get started with EXML, we have a tutorial project, please see here:
https://github.com/CoreMedia/jangaroo-tools/wiki/Ext-AS

If you want MXML support, you'll have to wait for Jangaroo 3 or
try Apache FlexJS, which is also still in an early stage.

Greetings
-Frank-