Passing data between MXML files and opening one after Click on another

Question

I am pretty new to flex and was trying to understand how the entire Flex works

Scenario :

I started with creating a single MXML file where there will be a textbox and a button. If the button is clicked a popup will be displayed with the value of the textbox(this worked perfectly). The second thing that came to my mind is how to show the same data in some other page. SO, if i click on the button. It should load another page and display the data that was written in the textbox

My Code till now is this :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function open(event:MouseEvent):void{

                Alert.show("I am opening a page");
                Alert.show(txt_inp.text + " is written here");
            }
        ]]>
    </mx:Script>
    <mx:TextInput id="txt_inp" />
    <mx:Button id="openBttn" label="Click Me" click="open(event)" />
</mx:Application>

And Name.xml(The Second page is )

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="setYelp()">
    <mx:Script>
        <![CDATA[
            public var helloYou:HelloYou;
            public function yelpHandler():void{
                yelp.text = "Ayush"
            }
            public function setYelp():void {
                helloYou.openBttn.addEventListener(MouseEvent.CLICK,yelpHandler);
            }
        ]]>
    </mx:Script>
    <mx:Label id="yelp" text="yelp">

    </mx:Label>
</mx:Application>

I referred to some of the previously asked questions like this and tried following it, but couldn't really understand.

Also, in my flex builder I had two more options of MXML > MXML Module and MXML Component. Should I use them here, if not, when should I use it?

Answer 1

Why are you using multiple page? usually a Flex application is a single application with multiple views and sharing data is way easier in this situation.

If you want to pass information between different pages you can use cookies (see for example Accessing browser cookies from Flex)

Another flex solution is this http://custardbelly.com/blog/blog-posts/2010/11/15/flex-hero-persistant-data-in-mobileapplication/

The last thing that I can think about is using the javascript bridge to access the localstorage (o sqlite) of your browser and store information there.

But again why save information between requests and not simply create a single application that changes its views ?

Answer 2

1st solution
Use ViewStack component to integrate your 1st mxml and 2nd mxml.
This is what @wezzy said "single application with multiple views".
This is the most easily way to share values, if you can integrate to one mxml.

like this

<mx:ViewStack id="viewstack" width="100%" height="100%" selectedIndex="0" >
    <!-- Input Page is here  -->
    <mx:Canvas id="view1" width="100%" height="100%">
        <mx:TextInput id="txtName" width="150" maxChars="40" />
        <mx:Button label="Go to NextPage" click="viewstack.selectedChild=view2;"/>
    </mx:Canvas>

    <!-- Result Page -->
    <mx:Canvas id="view2" width="100%" height="100%">
        <mx:TextInput text="{txtName.text}" width="150" editable="false" />
        <mx:Button label="Back to PrevPage" click="viewstack.selectedChild=view1;"/>
    </mx:Canvas>
</mx:ViewStack>

2nd solution
Use SharedObject(or DB) to save and load values.

3rd solution
Use singleton variables to share the values between classes.
Please see this answer of mine. Flex - Problems in accessing static variable on another mxml page