Flex: Accessing functions / components accross mxml pages

apache-flexmxml

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">

Best Answer

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).

Related Solutions

Possible to use Flex Framework/Components without using MXML

I did a simple bootstrap similar to Borek (see below). I would love to get rid of the mxml file, but if I don't have it, I don't get any of the standard themes that come with Flex (haloclassic.swc, etc). Does anybody know how to do what Theo suggests and still have the standard themes applied?

Here's my simplified bootstrapping method:

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<custom:ApplicationClass xmlns:custom="components.*"/>

ApplicationClass.as

package components {
    import mx.core.Application;
    import mx.events.FlexEvent;
    import flash.events.MouseEvent;
    import mx.controls.Alert;
    import mx.controls.Button;

    public class ApplicationClass extends Application {
        public function ApplicationClass () {
            addEventListener (FlexEvent.CREATION_COMPLETE, handleComplete);
        }
        private function handleComplete( event : FlexEvent ) : void {
            var button : Button = new Button();
            button.label = "My favorite button";
            button.styleName="halo"
            button.addEventListener(MouseEvent.CLICK, handleClick);
            addChild( button );
        }
        private function handleClick(e:MouseEvent):void {
            Alert.show("You clicked on the button!", "Clickity");
        }
    }
}

Here are the necessary updates to use it with Flex 4:

main.mxml

<?xml version="1.0" encoding="utf-8"?>
<local:MyApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:local="components.*" />

MyApplication.as

package components {
    import flash.events.MouseEvent;
    import mx.controls.Alert;
    import mx.events.FlexEvent;
    import spark.components.Application;
    import spark.components.Button;

    public class MyApplication extends Application {
        public function MyApplication() {
              addEventListener(FlexEvent.CREATION_COMPLETE, creationHandler);
        }
        private function creationHandler(e:FlexEvent):void {
            var button : Button = new Button();
            button.label = "My favorite button";
            button.styleName="halo"
            button.addEventListener(MouseEvent.CLICK, handleClick);
            addElement( button );
        }
        private function handleClick(e:MouseEvent):void {
            Alert.show("You clicked it!", "Clickity!");
        }
    }
}

Xml – MXML without Flex Framework/Components

Yes, it's possible. Your MXML files are essentially just a different way to specify classes. You can see what mxml files boil down to by compiling your project and providing -compiler.keep-generated-actionscript=true to mxmlc.

bar.mxml:

<?xml version="1.0" encoding="utf-8"?>
<flash:Sprite xmlns:flash="flash.display.*">
</flash:Sprite>

After compiling with mxmlc -compiler.keep-generated-actionscript=true bar.mxml, it turns into the following.

generated/bar-generated.as:

package {
    import flash.display.Sprite;
    // bunch of imports
    public class bar extends Sprite {
        public function bar() { super(); }
    }
}

Best Answer

Related Solutions

Possible to use Flex Framework/Components without using MXML

Xml – MXML without Flex Framework/Components

Related Topic