Flex custom component, best way to use it

Question

I have not completly understood how custom components work...

Let's assume I have my Main.mxml application

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:local="*">
    <fx:Script>
        <![CDATA[
            private var privateStr:String = "Stringa Private";
            public  var publicStr:String = "Stringa Public";
        ]]>
    </fx:Script>
    <local:AddUser height="100" width="500"/>   
    <s:Label id="lblText" x="120" y="120" width="418" height="115" text="!!!"/>                                    
</s:WindowedApplication>

And the component AddUser.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx"
    creationComplete="initialize_component()">  
    <fx:Script>
        <![CDATA[                                               
            public var btnName:String = "Login";
        private function initialize_component():void
        {
             login.label = btnName;              
            }
            private function doLogin():void
            {
             //some stuff here
            }

        ]]>
    </fx:Script>
    <s:TextInput id="txtuser" x="96" y="36"/>
    <s:TextInput id="txtpass" x="96" y="66"/>
    <s:Button id="login" x="96" y="96" width="128" click="doLogin()" />
</mx:VBox>

I would like that on the Button (login) click I get the publicStr/privateStr that are in the main.mxml... Am I getting everything wrong? how can I use more components like they are all part of the same application and use the same variables/methods?

Answer 1

It seems like you're having issues with the idea of encapsulation. Child components shouldn't know about parent components, and View components shouldn't do real work, only request work from Controller components. In very simple projects, your top level component can contain the controller logic, but many people prefer to keep it separate even in small projects. How to do this is beyond the scope of this answer.

So, how should the parent and child properly communicate? Child components should expose properties that the parent (or Framework, if you're feeling ready to use a dependency injection framework) can populate with only the data the child components need.

Child components request work from the controller by generating events.

So, doLogin() would containe something like

dispatchEvent(new Event('doLogin'));

and the parent component would be listening for this Event. In its handler, you would perform the login. More than likely, your login would be asynchronous, so you'll need another handler to listen for the login data to come back. When the login data comes back, you will then set the properties on the login View based on the return.