Adobe AIR mini tutorial-use custom windows and move, zoom, and close operations

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 is naturally more control over application windows. 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.

As of this time, the topic is officially started. This 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.

I used the following Iris effect to use it 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 to make appropriate combinations to achieve unexpected results. For example, moving and WipeDown can be used together to implement the Mac system, the effect of sliding down the menu. For example, with imagination, we can use very simple code to implement very useful functions. In the demo, set the following settings to disable the animation.

<Mx: WindowedApplicationCloseEffect = "irisIn".../>

<Mx:Iris id = "irisIn" duration = "500" showTarget = "false"/>

5. Fill in the window background.

In fact, this function is not used much during development. 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 as Html does, so we use some special methods to handle the following. The setBackground method in demo is used to set the entire background. The specific functions of the Bitmap, BitmapData, and Graphics classes involved here can be found in the help manual if you are interested. 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 ();