AS3: Flex: Many screens

[mtv129]

AS3: Flex: Many screens

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

AS3: Main

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

Note: this is intended for those who are already well versed in AS3 code

I think each of you was wondering how to make many screens in the Flex SDK? here is the answer to your question, let's create MainApplication.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:views="views.*">

    <fx:Script>
        <![CDATA[

        ]]>
    </fx:Script>

    <views:Main/>
</s:Application>

attentive people will notice what has been added:

xmlns:views="views.*"

and

<views:FirstFile/>

first we will create a new folder called views (or with another name that is convenient for you), in it we will create 2 files FirstFile.mxml and SecondFile.mxml(in folder views) and let's add a button and Label to each of them:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[

        ]]>
    </fx:Script>

    <s:Label x="150">this is first file</s:Label>
    <s:Button>go to second file</s:Button>
</s:Application>

how can we understand this FirstFile.mxml, now let's go back to MainApplication.mxml and how can we understand this line:

xmlns:views="views.*">

is responsible for importing all classes from the views folder, and this is:

<views:FirstFile/>

is responsible for putting all the contents of FirstFile on the screen, but how do you go to the next one when you click a button? To do this, you need to delete the current screen and go to the next one, let's add a function to the button with the following actions:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            private var newScreen:*;
            protected function goToScene():void {
                newScreen = new SecondFile();//Class Scene
                parentApplication.addElement(newScreen);//Add Scene
                parentApplication.removeElement(this);// Remove current Scene
            }
        ]]>
    </fx:Script>

    <s:Label x="150">this is first file</s:Label>
    <s:Button click="goToScene()">go to second file</s:Button>
</s:Application>

parentApplication is the same as parent but for MXML

We can describe this by creating a variable with the class we want to place and adding it to our element and deleting the current one, repeat this for SecondFile:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            private var newScreen:*;
            protected function goToScene():void {
                newScreen = new FirstFile();
                parentApplication.addElement(newScreen);
                parentApplication.removeElement(this);
            }
        ]]>
    </fx:Script>

    <s:Label x="150">this is second file</s:Label>
    <s:Button click="goToScene()">go to first file</s:Button>
</s:Application>

if you test it, it turns out that we have 2 screens, this is how the transition between screens works, you can supplement this method by outputting everything into 1 function and much more

Summary

in this tutorial you learned how to create many screens and make a transition between them

That's all for now, thanks for your attention, this is made for AS3 Main: Tutorials and Resources