10 Replies Latest reply on Jan 19, 2010 11:28 AM by msakrejda

    Code Reuse between Flex and AIR

    trivinci

      We've developed a full application in Flex and need to provide an out-of-browser version.  Since we'll continue to grow and maintain the app, we're hoping to use the same codebase for both Flex and AIR deployments.

       

      Is it possible to compile a Flex project to AIR?

       

      Thanks!

        • 1. Re: Code Reuse between Flex and AIR
          Cesare Rocchi Level 2

          Answer: yes.

           

          Explanation: Air is a "superset" of Flex, that is it contains the same functionalities plus some more, e.g. the flash.filesystem.* package.

           

          The only difference is that the "shell" of a Flex app is <Application ...>, whereas in Adobe Air it is <WindowedApplication ...>

           

          HTH

          1 person found this helpful
          • 2. Re: Code Reuse between Flex and AIR
            trivinci Level 1

            Excellent, and thanks for the quick response!

             

            It sounds like code can be reused (copied), but it cannot be shared (reside only in one place).  The copy needs to change references to "Application" to "WindowedApplication.", and needs to be under a separate project in Eclipse.  Is that assumption correct?

             

            Follow-up:

            We populate the Flex app via web services.  Flex adopts the context of the browser, so I can point the browser at the webserver and have all Flex service requests be relative.  How does that context get set in AIR, since there is no browser?

            • 3. Re: Code Reuse between Flex and AIR
              Cesare Rocchi Level 2

              Yes, you need two different projects, that is a requirement of the compiler.

              Probably, with some smart linking of folders, you can keep all the code in one place

              and share it between the projects.

               

              Air embeds a browser (based on webkit). So you can load whichever url you want.

              Urls have just to be absolute, as opposed to the flex setting.

               

              HTH.

              1 person found this helpful
              • 4. Re: Code Reuse between Flex and AIR
                trivinci Level 1

                Thanks Cesare,

                 

                Can't wait to try it out!

                 

                           -trivinci

                • 5. Re: Code Reuse between Flex and AIR
                  JeffryHouser Level 4

                  I would create at least three projects actually.

                   

                  One would be a library project for "common" code.  This will generate a SWC.

                   

                  Then one project for the Flex app, which can use the swc and will probably just contain the main application file. (mx:Application)

                   

                  And one project for the AIR app, which can also use the SWC and will probably contain the main application file ( mx:WindowedApplication as was stated earlier in this thread ), plus any additional desktop functionality you wanted to ad.

                  • 6. Re: Code Reuse between Flex and AIR
                    Cesare Rocchi Level 2

                    Jeffrey,

                     

                    You proposal is good if the project (I mean the global project of the application) is well planned.

                    In this case it is clear what goes in the swc, in the flex app and in the desktop one.

                     

                    If things are scruffier, then some way to change quickly the swc, without opening the library project and then compile

                    and then move the generated file, might be appreciated.

                     

                    That is why I proposed some smart linking.

                    Since Eclipse supports symbolic links, you can easily put the shared code anywhere on the harddrive

                    and then put a symbolic link the lib/ or src/ folder of your project.

                    Then, each change to the shared code is reflected in every other project linking to that folder.

                     

                    HTH.

                    • 7. Re: Code Reuse between Flex and AIR
                      injpix Level 3

                      The following link is relevant to the subject of this thread:

                      Building web and Adobe AIR applications from a shared Flex code base

                      • 8. Re: Code Reuse between Flex and AIR
                        trivinci Level 1

                        Wow!  Lot's a great advice here!  I learned at least a little something from every post.

                         

                        I've now structured my code to support reuse better.  I have everything in my Flash (web) project, but the only thing thats Flash-specific is now the 'main' class (the "Application"), and the AIR code can mimic, something like this...

                        <mx:Application
                            xmlns:mx="http://www.adobe.com/2006/mxml"
                            layout="vertical"
                            applicationComplete="init();">

                            <mx:Script>
                                <![CDATA[
                                    import com.mystuff.Globals;
                               
                                    private var globals:Globals = Globals.instance;
                                    private function init():void
                                    {
                                        mainPanelContainer.addChild(globals.mainPanel);
                                    }
                                ]]>
                            </mx:Script>

                            <mx:Canvas width="100%" height="100%" id="mainPanelContainer"/>
                           
                        </mx:Application>

                        and this...

                        <mx:WindowedApplication
                            xmlns:mx="http://www.adobe.com/2006/mxml"
                            layout="vertical"
                            applicationComplete="init();">

                            <mx:Script>
                                <![CDATA[
                                    import com.mystuff.Globals;
                               
                                    private var globals:Globals = Globals.instance;
                                    private function init():void
                                    {
                                        mainPanelContainer.addChild(globals.mainPanel);
                                    }
                                ]]>
                            </mx:Script>

                            <mx:Canvas width="100%" height="100%" id="mainPanelContainer"/>
                           
                        </mx:WindowedApplication>

                         

                        Both of these "main.mxml" files are in their respective "src" root directories.  All shared code is in src/com/mystuff and below within the Flex project.  The AIR project includes ${DOCUMENTS}/FlashApp/src/com as an additional source path.

                         

                        Seems like this should work, the AIR app can auto-complete attributes of Globals (a Singleton class), but at compile time I get a 1046: Type was not found or was not a compile-time constant: Globals.  Seems silly to be stuck on this, but here I am.  If anyone has any ideas...

                         

                        In case other readers are curious, there were lots of Google hits on flex singleton.  I settled on this reference:

                         

                        http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=262

                        • 9. Re: Code Reuse between Flex and AIR
                          timo888 Level 1

                          Regarding "the only difference..."

                           

                          Custom context menus are handled differently in Flex and in AIR. Different limitations apply.  See docs for details.

                          • 10. Re: Code Reuse between Flex and AIR
                            msakrejda Level 4

                            Cesare Rocchi wrote:

                             

                            If things are scruffier, then some way to change quickly the swc, without opening the library project and then compile

                            and then move the generated file, might be appreciated.

                            You don't need to do this manually. You can add the library project as a dependency. When you rebuild it, the dependents get rebuilt automatically. You don't have to move generated files by hand.