2 Replies Latest reply on Oct 24, 2012 2:45 AM by Gaius Coffey

    Migrating from VB to Flex/Flash

    Asahart-XEvNWS Level 1

      I'm having a hard time migrating from the Microsoft VB style environment to the Flash Builder 4.6 environment....and basically looking for a little help in getting my head around the way that Flash Builder is used to display Multiple Screen.

       

      I've programmed application with 20+ different screens and they were all modularized into Form and BAS files.  Where the Form file holds the Visual components and the BAS might hold the Logic info.

       

      Can anyone help explain how I could develop a Flex/AIR application that has 10 different screens in it.    I dont want to have ALL the code into 1 mxml file.

       

      Any info, suggestion and help would be apprecaited.

       

      Thanks

      Bill

        • 1. Re: Migrating from VB to Flex/Flash
          neoX286 Level 1

          Hi Nando,

           

          I doubt you will find a lot of help here in adjusting to the Eclipse (Flash Builder's underlying IDE) environment.  However, I wanted to say that no you do not need all screens in 1 mxml file.  I assume you were thinking this due to the states that you can set.  There are tons of different application design models that will dictate how you lay out your project, but you seem to be interested in an MVC-esque (Model-View-Controller) layout from what I read.

           

          You might find a lot of help by searching for MVC tutorials in Flex, but also you might want to clarify what you are targeting.  Are you targeting a mobile application or a desktop application?  I ask because mobile environments, while still running on AIR, are handled a little differently while laying them out.

           

          Regardless, the basic structure of flex remains the same.  Here's a quick rundown of how you will be working in the Flex environment:

           

           

          1. You will be building your user interface in MXML files.  I won't delve into the pros and cons or the how to write of MXML, as Google is very much your friend there.  You can also build your interface in Actionscript but at your phase MXML is probably an easier step into the language.

          2. You will be writing your Actionscript code in a mixed set of locations.  This is a compiled language, but it is used like a -scripting- language.  One-off pieces of code here and there are not uncommon in MXML, as ultimately your MXML file is compiled into Actionscript before being converted into SWF bytecode to run on the flash player.  For example:

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

                               xmlns:s="library://ns.adobe.com/flex/spark">

           

                    <fx:Script>

                              <![CDATA[

                                        private var myValue:Number = 30;

                              ]]>

                    </fx:Script>

           

                    <s:Label horizontalCenter="0" verticalCenter="0" text="{myValue * 3}"/>

           

          </s:Group>

           

          This will place a Label in the middle of the screen and have it display the text '90'.  The actionscript operator '*' (multiply) is used inside of the assignment you give to the Label component's property 'text'.  The variable is defined inside of a '<fx:Script/>' block in the same file which lets you define actionscript directly in your MXML file.

           

          You can also create Actionscript files which directly contain classes that you can perform logic in.  To reference a class to import the package it is in and target it's class name.  Plenty of google data on this subject.

           

          Here is an example of one way you could accomplish your task.  (Though I won't say it's the best way or that its the only way by any means).

          This assumes that you have three other MXML files representing each of three screens titled 'MyFirst/Second/ThirdScreenComponent' that have their own displays.  It's a simple system to iterate through the currently displayed screen by clicking a button.  It also shows the usage of a vertical layout to position elements.

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"

                               xmlns:s="library://ns.adobe.com/flex/spark">

           

                    <s:layout>

                              <s:VerticalLayout/>

                    </s:layout>

           

                    <fx:Script>

                              <![CDATA[

                                        private function onButtonClick(event:Event):void

                                        {

                                                  if (navigator.selectedIndex == 2)

                                                            navigator.selectedIndex = 0;

                                                  else

                                                            navigator.selectedIndex += 1;

                                        }

                              ]]>

                    </fx:Script>

           

                    <s:Button click="onButtonClick(event)" label="Next Screen"/>

           

                    <mx:ViewStack id="navigator" width="100%" height="100%">

                              <s:navigationContent width="100%" height="100%">

           

                                        <!-- This instantiates your first screen -->

                                        <s:MyFirstScreenComponent width="100%" height="100%"/>

           

                              </s:navigationContent>

                              <s:navigationContent width="100%" height="100%">

           

                                        <!-- This instantiates your second screen -->

                                        <s:MySecondScreenComponent width="100%" height="100%"/>

           

                              </s:navigationContent>

                              <s:navigationContent width="100%" height="100%">

           

                                        <!-- This instantiates your third screen -->

                                        <s:MyThirdScreenComponent width="100%" height="100%"/>

           

                              </s:navigationContent>

                    </mx:ViewStack>

           

          </s:Group>

          • 2. Re: Migrating from VB to Flex/Flash
            Gaius Coffey Level 2

            Hi,

            I think what you are looking for is the NativeWindow - you can set display classes for each window separately.

            This might be useful: http://airexamples.com/2010/03/13/opening-a-new-nativewindow-in-adobe-air/

            G