R – Detecting out-of-view flex controls

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!");
        }
    }
}

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