flex 4: window system development ideas

Question

My application will need some windows but I can't use the popUpManager to handle custom components so I'm thinking to implement a new window system.

But I still don't know how to merge it with my custom components. Any ideas?

My code:

My login skin:

<s:Skin(...)>
   <s:Group>
      (...login components...)
   </s:Group>
</s:Skin>

`package com.totty.app.components.login { import com.totty.app.TottysBrain; import com.totty.app.components.window.Window; import com.totty.app.events.LoginSuccessEvent; import com.totty.tottysBrain.components.BrainyDynComponent; import com.totty.tottysBrain.components.BrainyWindow;

import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.Alert;
import mx.managers.PopUpManager;

import spark.components.Button;
import spark.components.CheckBox;
import spark.components.Group;
import spark.components.Label;
import spark.components.TextInput;
import spark.components.supportClasses.SkinnableComponent;

[Event(name="loginSuccess", type="com.totty.app.events.LoginSuccessEvent")]
public class Login extends BrainyDynComponent {
    [SkinPart(required="true")]
    public var email:TextInput;

    [SkinPart(required="true")]
    public var password:TextInput = new TextInput();

    [SkinPart(required="false")]
    public var rememberMe:CheckBox;

    [SkinPart(required="false")]
    public var notification:Label;

    [SkinPart(required="true")]
    public var submit:Button = new Button();

    private var _currentState:uint = 0;
    private var _states:Array = ['default', 'logging', 'loginFailure', 'loginSuccess'];

    private var _default:Boolean = false;
    private var _logging:Boolean = false;
    private var _loggingSuccess:Boolean = false;
    private var _loggingFailure:Boolean = false;

    public function Login() {
        super();

        defaultCommand = 'users.login';
        defaultSkin = LoginSkin;

        _setCurrentState(0);

        onPartAdded('submit', function():void {
                submit.addEventListener(MouseEvent.CLICK, _submitLoginButton_click);
        });

        onPartRemoved('submit', function():void {
                submit.removeEventListener(MouseEvent.CLICK, _submitLoginButton_click);
        });

        onPartAdded('window', function():void{
            //window.addEventListener('close', _window_close);
            //window.title = 'Login';
        });
    }

    private function _window_close(evt:Event):void{
        dispatchEvent(evt);

        var parentAsGroup:Group = parent as Group
        parentAsGroup.removeElement(this);
    }

    protected function _submitLogin():void {
        _setCurrentState(1);
        submitData({email:email.text, password:password.text, rememberMe:rememberMe.selected});
    }

    override protected function _onSuccess(result:*):void {
        Alert.show(result);
        _setCurrentState(3);
        if(result) {
            dispatchEvent(new LoginSuccessEvent(email.text, rememberMe.selected));
            _loggingSuccess = true;
        }else{
            _setCurrentState(4);
            _loggingSuccess = false;
        }
    }

    override protected function _onFailure(result:*):void {
        Alert.show(result);
        _setCurrentState(4);
        _loggingSuccess = false;
    }

    private function _submitLoginButton_click(evt:MouseEvent):void {
        _submitLogin();
    }

    private function _setCurrentState(n:uint):void{
        if(_currentState == n) return;

        _currentState = n;
        invalidateProperties();
    }

    override protected function commitProperties():void{
        super.commitProperties();




        switch(_currentState){
            case 0:
                // default
                //window.footerText = '';
            break;
            case 1:
                // logging
                //window.footerText = 'logging';
            break;
            case 2:
                // loginFailure
                //window.footerText = 'loginFailure';
            break;
            case 3:
                // loginSuccess
                //window.footerText = 'loginSuccess';
                //parentBrain.removeElement(this);
                //var parentAsGroup:Group = parent as Group
                //PopUpManager.removePopUp(this);
                //parentAsGroup.removeElement(this);
            break;
        }
    }
}

}`

Now I have the main application to add this component in a window. I would prefer to be able to be able to see the window while I'm designing the interface. That means that the window component must be added to the component. Not to use the but something like to contain all the contents of the component.

Answer 1

Maybe you already saw this, but its a good place to start, anyway :)

http://code.google.com/p/flexmdi/