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
Replies
AdChoices