Customize titlewindow-max. Min button-Drag and Drop Scaling

We will explain in two steps
1. How to add custom buttons and how to make them work
2. How to drag and zoom, and how to define the mouse cursor
 
First, we need to generate these buttons, which is not difficult. Take the close button as an example:
Private var btnclose: button;
[Embed ("/assets/images/buttonclose.png")] private var iconclose: Class; // load the picture of the close button

Then we will override the createchildren method of the component to create and close the button.
Protected override function createchildren (): void
{
Btnclose = new button ();
// Set the button style
Btnclose. setstyle ("upicon", iconclose );
Btnclose. setstyle ("downicon", iconclose );
Btnmax. setstyle ("upicon", iconmax );
Btnclose. setstyle ("overicon", iconclose );
// Load button
Rawchildren. addchild (btnclose );
// Listen to the close button event
Btnclose. addeventlistener (mouseevent. Click, oncloseclick );
}

Finally, we need to override the updatedisplaylist (unscaledwidth: Number, unscaledheight: Number) method to control the button position.
You can set the button position through the unscaledwidth and unscaledheight parameters, which are the boundaries of the component. I think it can be understood as the building width and height.
VaR thex: Int = The unscaledWidth-20;
VaR they: Int = 10
Btnclose. Move (thex, They );

OK. Now we have finished the placement button process. Similarly, it is not difficult to create personalized minimization and maximization buttons.

Next, let's talk about how to drag and drop.
First, let's take a look at how to simulate the changes of the mouse cursor when the mouse is placed on the edge of the window?
Let's take a look.
 
The red part is the sensing area, and the four-corner green block is the sensing area that scales the height and width at the same time.
We can provide a thickness for the sensing area, such as 5 pixels.
Let's take a look at all the cursors.
These two types are used in the green response area.
These two types are used in the red response area.
We only need to listen to the mouseevent. mouse_move event to obtain the current coordinates of the mouse. In the X and Y coordinates of the component, the height and width can be used to determine the area in which the mouse is located.
When the mouseevent. mouse_down event is triggered, the component size is changed by calculation to achieve drag and drop scaling.
For example, the mouse can be written in this way when you drag the right of the component, this. width = mouseX-this.x;
Note that I have listened on the current component and application respectively. application. the mouseevent of the parent. the mouse_move event. Why not use only the mouseevent of the component. what about the mouse_move event? This question is left for everyone to think about. You can modify it by yourself.

The idea is over. You can check out my code.
In this example, I adapted resizemanage. If you are interested, you can study it.