This example shows you how to create an Air application without the classical layout;
A part if the xml config file:
<systemChrome>none</systemChrome>
<transparent>true</transparent>
the Application:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundAlpha="0"
showTitleBar="false"
showStatusBar="false"
showGripper="false"
borderStyle="none"
layout="vertical" height="136" width="220">
<mx:Script>
<![CDATA[
private function startDragApplication():void{
stage.nativeWindow.startMove();
}
]]>
</mx:Script>
<mx:Panel title="Application title" borderAlpha="1" width="100%" height="100%" layout="absolute" />
</mx:WindowedApplication>
The relevant code in the application :
backgroundAlpha="0"//this sets the alpha of the background of the application to 0
showTitleBar="false"//this sets the visibility of the titlebar to false
showStatusBar="false"//this sets the visibility of the statusbar to false
showGripper="false"//this sets the visibility of the gripper to false
borderStyle="none"//this sets the style of the border to none
Thank you thank you thank you! This is the first flex 3 transparent example I’ve been able to find and it works perfect. Only one thing - I had to add mousedown=”startDragApplication()” to the WindowedApplication.
Great post.
Is there a way to target what component will trigger the mouseDown=”startDragApplication”? I’ve tried placing it on the component I would like the user to “drag” - e.g., a titleWindow, however, this is also affecting all the child components … so for example, if I place a mouseDown = startDragApplication on the TitleWindow, when I attempt to resize columns in a datagrid that is contained in that TitleWindow, I end up dragging the whole window instead of resizing columns…
I answered my own question.
Within the startDragApplication function, you can check for mouse location.
// make sure they click on the titlebar to drag
private function startDragApplication(event:MouseEvent):void{
var pt:Point = new Point(event.stageX, event.stageY);
pt = event.target.localToGlobal(pt);
pt = appWrapper.globalToContent(pt);
if (pt.y < 25){
stage.nativeWindow.startMove();
}
}
Yes this is a solution, but a more elegant way is to extend the component and add the feature to the titlebar like this example
http://www.aboutflex.net/flex/draggable-panel/
Fedele
Add A Comment