Hi there,
Noob here, recently coding. Please excuse me if i'm using
incorrect wording.
I've only just started to understand binding variables and
calling functions, however i've only managed to do this when all
the pages are in one main mxml file or within states. This grew
very messy with many views which have now been boken down to
components some in a viewstack.
My question is how to communicate from one component to
another. For example having a tree or tilelist in one component and
the selected results called in another component.
Thanks for any help
Larrybinding to another component
Here is some code for an app built with components. You can
see how the pieces talk to each other a bit.
------------------------- ViewStack1.mxml
---------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:Application xmlns:mx=''
http://www.adobe.com/2006/mxml''
xmlns:comp=''components.*''
layout=''vertical'' width=''100%'' height=''100%'' %26gt;
%26lt;comp:TopBar /%26gt;
%26lt;mx:HBox width=''100%'' height=''100%''%26gt;
%26lt;comp:LeftBar /%26gt;
%26lt;mx:VBox width=''100%'' height=''100%''%26gt;
%26lt;mx:ViewStack id=''myViewStack'' borderStyle=''none''
width=''100%'' height=''100%''%26gt;
%26lt;mx:VBox id=''home'' width=''100%''%26gt;
%26lt;comp:MainIntroText /%26gt;
%26lt;mx:HRule width=''50%'' height=''3''
strokeColor=''0xCC3333''/%26gt;
%26lt;comp:MainSecondaryText /%26gt;
%26lt;mx:HRule width=''50%'' height=''3''
strokeColor=''0xCC3333''/%26gt;
%26lt;comp:MainFinalText /%26gt;
%26lt;/mx:VBox%26gt;
%26lt;mx:VBox id=''about'' width=''100%''%26gt;
%26lt;comp:About /%26gt;
%26lt;/mx:VBox%26gt;
%26lt;mx:VBox id=''contact'' width=''100%''%26gt;
%26lt;comp:Contact /%26gt;
%26lt;/mx:VBox%26gt;
%26lt;/mx:ViewStack%26gt;
%26lt;/mx:VBox%26gt;
%26lt;/mx:HBox%26gt;
%26lt;/mx:Application%26gt;
------------------------------- About.mxml
-----------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:HBox xmlns:mx=''
http://www.adobe.com/2006/mxml''
width=''100%''%26gt;
%26lt;mx:VBox width=''65%''%26gt;
%26lt;mx:Text fontSize=''14'' width=''100%'' text=''This page tells
you about us.'' /%26gt;
%26lt;/mx:VBox%26gt;
%26lt;/mx:HBox%26gt;
----------------------------------- Contact.mxml
---------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:HBox xmlns:mx=''
http://www.adobe.com/2006/mxml''
width=''100%''%26gt;
%26lt;mx:VBox width=''65%''%26gt;
%26lt;mx:Text fontSize=''14'' width=''100%'' text=''This page tells
you how to contact us.'' /%26gt;
%26lt;/mx:VBox%26gt;
%26lt;/mx:HBox%26gt;
------------------- LeftBar.mxml -------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:VBox xmlns:mx=''
http://www.adobe.com/2006/mxml''
width=''200'' height=''100%''%26gt;
%26lt;mx:LinkButton label=''Adobe Labs - Flex''
click=''navigateToURL(new URLRequest('
http://labs.adobe.com/technologies/flex'),
'_blank');''/%26gt;
%26lt;mx:Spacer height=''20''/%26gt;
%26lt;mx:Label fontSize=''16'' text=''Flex Blogs''/%26gt;
%26lt;mx:LinkBar direction=''vertical'' width=''90%''
itemClick=''navigateToURL(new URLRequest(event.item.data),
'_blank');''%26gt;
%26lt;mx:Object label=''Adobe Flex Team Blog'' data=''
http://weblogs.macromedia.com/flexteam/''/%26gt;
%26lt;mx:Object label=''Flex Blog Aggregator'' data=''
http://www.allyourflexarebelongtous.com/''/%26gt;
%26lt;mx:Object label=''Adobe Flex Blog Aggregator'' data=''
http://weblogs.macromedia.com/mxna/index.cfm?query=byCategory%26amp;#38;categoryId=5%26amp;# 38;categoryName=Flex''/%26gt;
%26lt;/mx:LinkBar%26gt;
%26lt;mx:Spacer height=''20''/%26gt;
%26lt;mx:Label fontSize=''16'' text=''Example Flex Apps''/%26gt;
%26lt;mx:LinkBar direction=''vertical'' id=''addlRscList''
width=''90%'' itemClick=''navigateToURL(new
URLRequest(event.item.data), '_blank');''%26gt;
%26lt;mx:Object label=''Adobe Flex Store'' data=''
http://www.adobe.com/devnet/flex/samples/flex_store_v2/''/%26gt;
%26lt;mx:Object label=''Adobe Dashboard Example'' data=''
http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html''/%26gt;
%26lt;mx:Object label=''Buzzword Word Processor'' data=''
http://preview.getbuzzword.com/?s=true''/%26gt;
%26lt;mx:Object label=''Adobe Style Explorer'' data=''
http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html ''/%26gt;
%26lt;mx:Object label=''Adobe Component Explorer'' data=''
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html''/%26gt;
%26lt;/mx:LinkBar%26gt;
%26lt;/mx:VBox%26gt;
----------------------- MainFinalText.mxml
----------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:VBox xmlns:mx=''
http://www.adobe.com/2006/mxml''
width=''100%''%26gt;
%26lt;mx:Text width=''100%'' fontSize=''12''
text=''Here is the final text I want to show you.'' /%26gt;
%26lt;/mx:VBox%26gt;
--------------------------- MainIntroText.mxml
-------------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:VBox xmlns:mx=''
http://www.adobe.com/2006/mxml''
width=''100%''%26gt;
%26lt;mx:Text width=''100%'' fontSize=''12''
text=''Here is the main text I want to show you.'' /%26gt;
%26lt;/mx:VBox%26gt;
----------------------- MainSecondaryText.mxml
--------------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:VBox xmlns:mx=''
http://www.adobe.com/2006/mxml''
width=''100%''%26gt;
%26lt;mx:Text width=''100%'' fontSize=''12''
text=''Here is the secondary text I want to show you.'' /%26gt;
%26lt;/mx:VBox%26gt;
--------------- TopBar.mxml --------------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:HBox xmlns:mx=''
http://www.adobe.com/2006/mxml''
width=''100%''%26gt;
%26lt;mx:Script%26gt;
%26lt;![CDATA[
private function goToViews(view:String):void {
if(view == ''home''){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
}
if(view == ''about''){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.about;
}
if(view == ''contact''){
this.parentApplication.myViewStack.selectedChild=this.parentApplication.contact ;
}
}
]]%26gt;
%26lt;/mx:Script%26gt;
%26lt;mx:LinkButton label=''MySnazzyLogo'' fontSize=''20''
click=''goToViews('home');'' /%26gt;
%26lt;mx:VBox width=''100%''%26gt;
%26lt;mx:HBox width=''100%''%26gt;
%26lt;mx:Spacer width=''100%'' /%26gt;
%26lt;mx:LinkBar fontSize=''14''
itemClick=''goToViews(String(event.item.data));''%26gt;
%26lt;mx:Array%26gt;
%26lt;mx:Object label=''About Us'' data=''about''/%26gt;
%26lt;mx:Object label=''Contact Us'' data=''contact''/%26gt;
%26lt;/mx:Array%26gt;
%26lt;/mx:LinkBar%26gt;
%26lt;/mx:HBox%26gt;
%26lt;mx:HBox width=''100%''%26gt;
%26lt;mx:Spacer width=''150'' /%26gt;
%26lt;mx:Label fontSize=''25'' text=''Here is Some Additional
Text'' /%26gt;
%26lt;/mx:HBox%26gt;
%26lt;/mx:VBox%26gt;
%26lt;/mx:HBox%26gt;
binding to another component
Here is a short answer in case you have problems with all the
code I posted. To communicate to the app containing a ViewStack in
which a custom component has been placed:
this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
To communicate between components, give them IDs, and then
use this.parentApplication. and the ids to communicate between
components.
This won't solve all your needs, but check the FB2 help for
other info on components and interaction.
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:
%26lt;mx:TextInput id=''textinput1'' text=''test value'' .../%26gt;
%26lt;mx:Text id=''text1'' ... text=''{textinput1.text}'' .../%26gt;
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:
%26lt;mx:Text id=''text1'' ... text=''{parent.textinput1.text}''
.../%26gt;
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 %26lt;mx:Application%26gt; 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:
%26lt;mx:Text id=''text1'' ...
text=''{Application.application.textinput1.text}'' .../%26gt;
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:
%26lt;myComp:MyCustomComp id=''mycc1'' .../%26gt;
Then, in the same scope (the same component/file that
contains as the tag above) you can say:
%26lt;mx:Text id=''text1'' ... text=''{mycc1.textinput1.text}''
.../%26gt;
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:
%26lt;mx:Text id=''text1'' ...
text=''{mycc1.mycc11.mycc.12.textinput1.text}'' .../%26gt;
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
Thanks very much guys for the clear indepth and
understandable answers.
Very happy now and grateful.
Larry
Subscribe to:
Post Comments
(Atom)
No comments:
Post a Comment