flex 4 title window + custom component + skin problem!

Question

I'm trying to put my components in a window container that can be closed by "x" moved on the stage, resized and so on. And I wonder which is the best way to do it. I want to use a skin class and the component class. The "solution" that is not working looks like this:

take a look at this and if you have a better idea on how to implement this, you are welcome. (:

thanks a lot!

I have in the main app:

// imports...
public function init():void {
    // runs on creationComplete event
PopUpManager.createPopUp(this, Login);
}

then I have in my Login class extends SkinnableContainer and set as default skin LoginSkin. Login Skins brgins like this:

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    width="500"
    height="150">
<fx:Metadata>
     [HostComponent("com.totty.app.components.login.Login")]
</fx:Metadata>
<!-- other things -->
</s:TitleWindow>

The problem is that it freeze my browser, then gives me this error:

Error: Error #1502: A script has executed for longer than the default timeout period of 15 seconds.
at mx.styles::StyleProtoChain$/getClassStyleDeclarations()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:106]
at mx.core::UIComponent/getClassStyleDeclarations()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:10207]
at mx.styles::StyleProtoChain$/getMatchingStyleDeclarations()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:814]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:483]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]
at mx.styles::StyleProtoChain$/addProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\styles\StyleProtoChain.as:505]

Answer 1

I believe you're getting that error because you're trying to use TitleWindow, a ui component, as a skin.

Try having your Login extend TitleWindow and LoginSkin extend spark.skins.spark.TitleWindowSkin (or just spark.components.supportClasses.Skin depending on how much you plan to customize things).