Flex: Accessing functions / components accross mxml pages

Question

For simplicity lets say I have two flex mxml pages.

form.mxml
button.mxml

If the form.mxml page had the following code, it should work fine:

<custom:SelectView dSource="{_thedata}" id="form" visible="false">
</custom:SelectView>

<mx:LinkButton label="Show" id="lbShow" click="form.visible=true;>
<mx:LinkButton label="Show" id="lbHide" click="form.visible=false;>

But if the code was like:

form.mxml

 <custom:SelectView dSource="{_thedata}" id="form" visible="false">
 </custom:SelectView>

button.mxml

<mx:LinkButton label="Show" id="lbShow" click="form.visible=true;>
<mx:LinkButton label="Show" id="lbHide" click="form.visible=false;>

how can I make a call from button.mxml to change form.mxml

---- a bit more details ---

My page actually looks like this: where query:AdvancedSearchFields is basically including a flex form into the page, and I want it to show/hide the custom view below after the search is complete.

<query:AdvancedSearchFields searchType="projects" searchCategory="advanced" visible="true" id="AdvancedSearch" />

<custom:SelectView dSource="{_searchResults}" id="sv" visible="false">

Answer 1

Your button.mxml class must have a reference to the instance of the 'form' class which will be affected. Then it can operate on it directly:

Button.mxml:

<mx:Script>
<![CDATA[
    [Bindable] public var myForm:MyFormClass;
]]>
</mx:Script>

<mx:LinkButton label="Show" id="lbShow" click="myForm.form.visible=true;">
<mx:LinkButton label="Show" id="lbHide" click="myForm.form.visible=false;">

Generally, the most logical place to set this variable is in the parent of your Button class.

Answer 2

You could write a custom method that handles the button click events and raises a custom event. Then in form.mxml you can handle that event.

Splitting it up like this is a bit cleaner, as it makes the button.mxml file work on its own. Having Button.mxml have a direct reference to your form causes a tight-coupling between the two, and generally you should avoid tight-coupling.

EDIT: I just had another thought that also avoids tight-coupling and is a bit simpler:

form.mxml

<custom:SelectView dSource="{_thedata}" id="form" visible="{buttons.showForm}">
</custom:SelectView>

<!-- include your buttons.mxml component using an ID of "buttons" -->

buttons.mxml

<mx:Script>
<![CDATA[
    [Bindable] public var showForm:Boolean = true;
]]>
</mx:Script>

<mx:LinkButton label="Show" id="lbShow" click="this.showForm=true;">
<mx:LinkButton label="Hide" id="lbHide" click="this.showForm=false;">

This essentially emulates using a custom event by using variable binding. Any time the showForm variable in buttons changes the visible property of the SelectView will be updated via the bindings. This is lighter-weight than creating a custom event (though I think custom events are a bit better of a design for it).

Answer 3

If you need to deal with this problem more often, I'd suggest using an MVC framework like PureMVC. It's set up so that you have a Mediator object that listens for events from MXML components, then sends a notification which can be picked up by any other mediator. Then that mediator can manipulate its own visual component based on the notification and its associated data.

In the context of what you're doing (the simple version), you're okay with the basic solution. But once you're dealing with four or five or more components with lots of logic, you will not be happy at all.