move chromeless windowedapplication on drag in flex 4

Question

I have implemented a chromeless windowedapplication in flex 4. But doing so i noticed that all the maximize, minimize and even the ability to drag the window around is gone. I need the ability to drag the window around. I have done a lot of googling and have been unable to come up with anything. Could somebody plz point me in the right direction.

Thanks in advance.

Answer 1

You'll have to create a custom skin for your WindowedApplication. If you look in the code of WindowedApplication, you'll find this:

[SkinPart (required="false")]
public var titleBar:TitleBar;

which means you can add a TitleBar to the skin, but you don't have to. As a matter of fact the default WindowedApplicationSkin doesn't have a titleBar.

Including a TitleBar in the custom skin will automatically give you the dragging behavior you're after. The default TitleBarSkin comes with the regular window buttons (minimize, maximize, close), so you may want to create a custom skin here too. One without the buttons if you don't need them.

Here's a stripped down example.

The custom skin for WindowedApplication (just a white background and a TitleBar):

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" >

    <fx:Metadata>[HostComponent("Object")]</fx:Metadata>

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalAndInactive" />
        <s:State name="disabledAndInactive" />
    </s:states>

    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:SolidColor id="backgroundFill" color="0xffffff" />
        </s:fill>
    </s:Rect>

    <s:TitleBar left="0" right="0" top="0" height="24" 
                skinClass="skin.TitleBarSkin" />

    <s:Group id="contentGroup" left="0" right="0" top="25" bottom="0" />

</s:Skin>

The custom skin for your TitleBar (just a gradient background and a close button):

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        minHeight="24" >

    <fx:Metadata>
      [HostComponent("spark.components.windowClasses.TitleBar")]
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalAndMaximized" />
        <s:State name="disabledAndMaximized" />
    </s:states>

    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xBABABA" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Button id="closeButton" label="close" right="0" verticalCenter="0" />

</s:Skin>

Apparently, the 'closeButton' is required, so you'll have to include it in the skin. But if you still want to get rid of it, just set its 'visible' and 'includeInLayout' properties to 'false'.