Close operations by using custom windows and moving and scaling windows

Close operations by using custom windows and moving and scaling windows

This tutorial is intended for friends who have a certain foundation for flex and are ready to start air development. Since air is targeted at desktop applications, compared with Flex web applications, there will naturally be more
Control the application window. While
One of the major features of air is that developers can use custom windows to replace system windows, so that developers can design the program UI more freely and design cross-platform desktop applications with a unique style.

Until then, the topic is officially started. The tutorial mainly implements the following functions.

1. shield the status bar at the bottom of the System window, flash window, and window. Use a custom window.
2. Scale, move, and close custom windows.

In the process of implementing the above operations, I added some additional operations to enrich our demos, which are very simple and practical.

3. The window is transparent when it is moved, and restored when the window is moved.
4. Close the window animation.
5. Fill in the window background.

1. shield the system window, flash window, and status bar at the bottom of the window. Use a custom window.

When an air project is created successfully, you will find that, in contrast to the web project, your project directory has a file named XXX-app.xml, which is the preparation file of our project, it is used to implement a custom window. Open it and modify the following code:

<! -- The type of system chrome to use (either "standard" or "NONE"). Optional. Default standard .-->
<! -- <Systemchrome></Systemchrome>

Remove the comment on systemchrome and change it

<! -- The type of system chrome to use (either "standard" or "NONE"). Optional. Default standard .-->
<Systemchrome>None</Systemchrome>

In this way, the system window is removed and the built-in window of Flash is used. Below we also remove the flash window. Set these attributes of javaswedapplication in your main mxml file.

<Mx: windowedapplicationShowtitlebar= "False"Borderthickness= "0"Showstatusbar= "False"Showgripper= "False".../>

In this way, all windows are completely removed, and only the content of the application is displayed after the program runs. You can refer to the help manual to understand the meaning of the above attributes. This raises the next question: how can we perform basic, zoom in, zoom out, and close operations after blocking all windows. Let's take a look at the following.

2. Zoom, move, and close the custom window.

Air has an additional class named nativewindow than the flex web application. We can operate on the window by using this class. In the demo, I used the following methods to shift the window. They were all triggered in the mouse mousedown event.

This. nativewindow. startresize ("L ");
This. nativewindow. startresize ("R ");
This. nativewindow. startresize ("T ");
This. nativewindow. startresize ("B ");
This. nativewindow. startresize ("TL ");
This. nativewindow. startresize ("rb ");

It is easy to see that l r B t represents left, right, bottom, and top, so when you call startresize, you can set appropriate parameters to easily scale the window in all directions. For window shifting, use

This. nativewindow. startmove ();

To close the window, you can call this. Close () in the button click event ().

Okay, the above is the operation on the custom window. The following is something I used to complete my demo and make it cool. I believe that everyone in their own applications will also need something similar. In addition to functions, the details of an application are also very important.

3. The window is transparent when it is moved, and restored when the window is moved.

To achieve this, we need to re-open our XXX-app.xml file and set the following content.

<! -- Whether the window is transparent. Only applicable when systemchrome is none. Optional. Default false. -->
<Transparent> true </transparent>

This allows us to make the background of the application transparent, which is very useful. For example, QQ pet is a background transparent application. With background transparent, we can develop very unique applications. The next step is simple.

Add this. Alpha = 0.xto the previously moved window mousedown event. The following is the code in the demo. I set the transparency to 0.6. This. Alpha is only transparent to the background of the application. To make more things transparent, you only need to set alpha for the corresponding control.

Private function moveme (): void {
This. nativewindow. startmove ();
This. Alpha = 0.6;
}

For transparent restoration, I set alpha = 1 in the mouseup event;

Private function mouseuphandle (): void {
This. Alpha = 1;
}

This simple setting may make your application look different. Why not try it :)

4. Close the window animation.

Me
The following Iris effect is used when the window is closed. What is the effect? You can just close it.
Flex has a lot of built-in effects for us to use. In many cases, we only need a proper combination to get unexpected results, such as move and
Wipedown can be used together to implement the MAC system, and the menu slides down. For example, with imagination, we can use very simple code to implement very useful functions. In the demo
To disable the animation.

<Mx: windowedapplicationCloseeffect= "Irisin".../>

<Mx: Iris ID = "irisin" Duration = "500" showtarget = "false"/>

5. Fill in the window background.

This
In fact, there are not many functions used in the development of the program. I don't want to make the demo look too monotonous, so I added the background, we know that flex cannot easily display the background repeatedly as HTML does, so
We use some special methods to deal with the following. The setbackground method in the demo is used to set the entire background. Bitmap involved here,
Bitmapdata,
If you are interested in the specific role of the graphics class, you can refer to the help manual. My point is that it is not too late to check the help when it is used, you only need to know what these classes can do for you.

Private function setbackground (): void {

VaR backgroundimage: bitmap;
VaR backgroundbitmapdata: bitmapdata;

Backgroundimage = new BG ();
Backgroundbitmapdata = new bitmapdata (backgroundimage. Width, backgroundimage. Height );
Backgroundbitmapdata. Draw (backgroundimage );

Workarea. Graphics. beginbitmapfill (backgroundbitmapdata, null, true );
Workarea. Graphics. drawrect (2000,200, 0 );
Workarea. Graphics. endfill ();
}