Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

Project 5: Customizing Projects > Making the Application Draggable - Pg. 288

288 Project 5: customizing Projects In this phase it is important to not touch the states declaration and the last group element, contentGroup , needed to host all the content of our application. For the rest we can customize it as we like, by changing colors, adding gradients, etc. Once done, we assign the skin to our application as follows. <s:WindowedApplication ... skinClass="skins.CustomApplicationSkin"> Then, we run it. We should see something like in Figure 5.4. Figure 5.4 our application with a custom background. It is important to notice that since we have chosen a custom back- ground we have lost some property of the standard chrome, like the possibilitytodragthewindowandabuttontocloseit.Let'saddit. making the Application Draggable To make the window draggable we need a visual component that listens for mouse clicks and triggers the drag functionality. We will use a group that is filled with a rectangle and shows the tab bar on top of it. <s:Group id="topBar" width="100%"> <s:TabBar dataProvider="{applicationStack}" top="7" horizontalCenter="0"/> </s:Group> This group has an ID that we need to set an event listener as follows. private function init():void { topBar.addEventListener(MouseEvent.MOUSE_DOWN, mouseDrag); }