I had to get an AIR application without the OS window, let’s say windowless or chromeless.
I needed to be able, with my own graphics, to minimize, restore, maximize, close, close in the system tray or dock, fullscreen and resize.
You can find several tutorials on Internet (with which I got inspired) but I put all these functionalities in one small example as it is convenient.
You need to set 2 parameters out of the code, in the XML description file:
<systemChrome>none</systemChrome> <transparent>true</transparent>
I won’t explain the code, I guess it is easy enough to find out. You can comment if something is not clear for you.
Here is the code of the main mxml file:
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showFlexChrome="false" creationComplete="init()"> <mx:Script> <![CDATA[ [Embed(source="assets/iconDock.png")] [Bindable] public var IconDock:Class; private function init():void { registerMovementHandler(); setDock(); } public function registerMovementHandler():void { appCanvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDrag); btResizeBottomRight.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow); btResizeBottomLeft.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow); btResizeTopRight.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow); btResizeTopLeft.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow); } public function mouseDrag(e:MouseEvent):void { if (e.target == e.currentTarget) stage.nativeWindow.startMove(); } public function resizeWindow(e:MouseEvent = null):void { if (e.target == e.currentTarget) { var corner:String; switch(e.currentTarget){ case btResizeBottomRight: corner = NativeWindowResize.BOTTOM_RIGHT; break; case btResizeBottomLeft: corner = NativeWindowResize.BOTTOM_LEFT; break; case btResizeTopRight: corner = NativeWindowResize.TOP_RIGHT; break; case btResizeTopLeft: corner = NativeWindowResize.TOP_LEFT; break; } stage.nativeWindow.startResize(corner); } } public function setDock():void { if (NativeApplication.supportsSystemTrayIcon){ dockProperties(); SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = dockMenu(); } } private function dockProperties():void{ SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "Soundstep | chromeless window"; SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock); } private function dockMenu():NativeMenu { var menu:NativeMenu = new NativeMenu(); var open:NativeMenuItem = new NativeMenuItem("Open"); var close:NativeMenuItem = new NativeMenuItem("Close"); open.addEventListener(Event.SELECT, undock); close.addEventListener(Event.SELECT, closeWindow); menu.addItem(open); menu.addItem(new NativeMenuItem("",true)); menu.addItem(close); return menu; } public function dock():void { stage.nativeWindow.visible = false; NativeApplication.nativeApplication.icon.bitmaps = [new IconDock() as Bitmap]; } public function undock(evt:Event):void { stage.nativeWindow.visible = true; stage.nativeWindow.orderToFront(); NativeApplication.nativeApplication.icon.bitmaps = []; } public function closeWindow(e:Event = null):void { stage.nativeWindow.close(); } public function setFullscreen():void { var state:String = (stage.displayState == StageDisplayState.FULL_SCREEN) ? StageDisplayState.NORMAL : StageDisplayState.FULL_SCREEN; stage.displayState = state; } ]]> </mx:Script> <mx:Canvas right="0" left="0" top="0" bottom="0" backgroundColor="#CF3232" id="appCanvas"> <mx:Label buttonMode="true" mouseChildren="false" text="Min" top="10" color="#000000" id="btMin" click="minimize()" horizontalCenter="58"/> <mx:Label buttonMode="true" mouseChildren="false" text="Max" top="10" color="#000000" id="btMax" click="maximize()" horizontalCenter="-45"/> <mx:Label buttonMode="true" mouseChildren="false" text="Close" top="10" color="#000000" id="btClose" click="closeWindow()" horizontalCenter="96"/> <mx:Label buttonMode="true" mouseChildren="false" text="Restore" color="#000000" id="btRestore" click="restore()" top="10" horizontalCenter="-91"/> <mx:Label buttonMode="true" mouseChildren="false" y="10" text="Tray/Dock" color="#000000" id="btSys" click="dock()" horizontalCenter="8"/> <mx:Label buttonMode="true" mouseChildren="false" text="Fullscreen" color="#000000" horizontalCenter="0" bottom="10" id="btFullscreen" click="setFullscreen()"/> <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeBottomRight" themeColor="#494949" right="0" bottom="0" /> <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeTopLeft" themeColor="#494949" left="0" top="0" /> <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeBottomLeft" themeColor="#494949" bottom="0" left="0" /> <mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeTopRight" themeColor="#494949" right="0" top="0" /> </mx:Canvas> </mx:WindowedApplication>
You can download the source or install the AIR application:
Comments
awesome thanks a lot
Hey nice work man, really appreciate this.
One bug though.. not sure if its because of something on my side but when I click on the borders the window jumps or resizes and just seems very buggy.
Im running on Vista, could this be why?
Hmm I’m not sure.
I noticed some bugs on Mac (not really often), I’m not sure why or if it can be solved. I don’t know if they are the same on Vista, I’m on XP. I’ll try to investigate.
I really appreciate the tutorial. Took me a while to find it, but I was thrilled when I did. Thank you a lot for sharing.
@Fabian After playing with the code and setup,use instead of using and the glitches will disappear. I think it must be a glitch in the chrome window after it’s been set to false.
Thanks for this! I’ve seen lots of AIR apps that have a small Flash file embedded on the page like you do above. “Install Now”. Is that something you created and you’re just pointing to the AIR app or is that a specific AIR thing? Thanks!
It is called “Badge” for Adobe AIR, initially created by Grant Skinner.
http://www.adobe.com/devnet/air/articles/badge_for_air.html
Romu
Cool, thanks Romuald…
whoah this blog is excellent i love reading your articles. Keep up the great work! You know, lots of people are searching around for this info, you can help them greatly.