You need to traverse the run-time DOM to access members in different
component scopes.
Se the notes below.
Tracy
Communicating between Components:
Note: for "loose coupling" use events. But that is another topic.
A non-trivial flex application is "component" based. While all of the
built in controls are components, the question of communicating between
components really only arises when you are using a custom component. A
custom component, whether implemented in mxml or ActionScript, has its
own "scope". Within that component (Application is a component too!),
all sibling child controls share the same scope, so you can refer to
controls by their id. If the controls(components) have public
properties or methods, you can refernce those members directly through
the id:
<mx:TextInput id="textinput1" text="test value" .../>
<mx:Text id="text1" ... text="{textinput1.text}" .../>
Ok, so far, its a "duh" right?
When you use custom components in a Flex app, at run time they make a
document object model hierarchy (DOM). Each subcomponent has its own
scope and can't *directly* reference the member properties or methods of
its sibling subcomponents.
So again, within a component, you can refernce siblings directly, as in
the example above. But there are two other cases inherent in a
hierarchy. You might want to reference "up", to get to public members
of the parent, or 'down", to get to public members of some child.
Accessing members in the parent:
On an ordinary component DOM, you can reference the parent component
using the .parent property. Say that a control with id="textinput1"
exists in the parent of the current component. then you could do:
<mx:Text id="text1" ... text="{parent.textinput1.text}"
.../>
Accessing members in the main application:
Components can be nested, sometimes very deeply. If the reference you
want is all the way at the top-level, main application (the one with the
<mx:Application> tag), you could do
{parent.parent.parent.textinput1.text}, but you would have to count the
component levels just right. Instead, you can use
Application.application to get to that scope:
<mx:Text id="text1" ...
text="{Application.application.textinput1.text}" .../>
You can shoretn this style of reference by importing
mx.core.Application, and assigning Application.application to a
variable, like _app, the doing (_app.textinput1.text)
Accessing members of a child component:
Say that in this case, a child component has the TextInput control you
want to reference. First, make sure the child component has an id:
<myComp:MyCustomComp id="mycc1" .../>
Then, in the same scope (the same component/file that contains as the
tag above) you can say:
<mx:Text id="text1" ... text="{mycc1.textinput1.text}" .../>
Accessing a nested component:
As mentioned above you can go "up" the hierarchy using
"parent.parent...". You can als go "down" the hirearchy using id
references:
<mx:Text id="text1" ...
text="{mycc1.mycc11.mycc.12.textinput1.text}" .../>
Additional notes:
If you are using SWFLoader to load an entire Application, you can
reference the immediate parent application using "parentDocument". You
can also use Application.application to reach the main app, as shown
above.
Accessing members of an application loaded by SWFLoader is a bit more
complicated. See the example here:
http://www.cflex.net/showFileDetails.cfm?ObjectID=690
________________________________
From: [email protected] [mailto:[EMAIL PROTECTED] On
Behalf Of keszeli
Sent: Monday, November 12, 2007 7:58 PM
To: [email protected]
Subject: [flexcoders] Want to call a function from custom component on
button click...
In my main application I have these lines of code:
<mx:RemoteObject id="remoting" fault="faultHandler(event)">
<mx:method name="login" result="truck(event)" />
</mx:RemoteObject>
In a custom component:
<mx:TextInput id="usr"/>
<mx:TextInput id="pss"/>
<mx:Button label="Log in"
click="remoting.getOperation('login').send(usr.text,pss.text)"
id="button1"/>
than again calling a custom component in main application:
<comp:login/>
when I run the application it says 'Access of undefined property
remoting' if the custom component is embedded within main app all runs
fine. I'm probably wrong but maybe I should use something like
<comp:login button1="[and here should be probably the code for click
event]"/>...
