Adobe Air GUI Question

Question

Hello,

I am new to Adobe Air and I have just started to learn. I am using FlexBuilder 3 to build a desktop app for Adobe Air. I am a bit confused with the GUI development. The app I am building has multiple input screens. What are the best practices for this type of app in terms of windows and input screens?

Should I use the Viewstack navigator to show and hide different screens within the app or is it better to create a new .mxml file for each input screen?

I am used to Visual Basic development and the concept of one form per input screen and I am having trouble figuring out how GUI development works in Air/Flex.

Thanks!

Answer 1

Instead of adding the code of all the controls directly to the ViewStack in the main application, declare them as separate mxml controls and use those controls in the viewstack.

Instead of

<mx:ViewStack>
  <mx:Canvas>
    <!-- contents of control 1 -->
  </mx:Canvas>
  <mx:VBox>
    <!-- contents of control 2 -->
  </mx:VBox>
  <mx:HBox>
    <!-- contents of control 3 -->
  </mx:HBox>
</mx:ViewStack>

Do:

<!-- MainApp.mxml -->
<mx:ViewStack>
  <local:Control1/>
  <local:Control2/>
  <local:Control3/>
</mx:ViewStack>

<!-- Control1.mxml -->
<mx:Canvas>
  <!-- contents of control 1 -->
</mx:Canvas>

<!-- Control2.mxml -->
<mx:VBox>
  <!-- contents of control 2 -->
</mx:VBox>

<!-- Control3.mxml -->
<mx:HBox>
  <!-- contents of control 3 -->
</mx:HBox>

And there is a Window class in AIR, if you haven't noticed it already