@@ -55,12 +55,15 @@ In the stage model, the main window of an application is created and maintained
...
@@ -55,12 +55,15 @@ In the stage model, the main window of an application is created and maintained
### How to Develop
### How to Develop
1. Obtain the main window.
1. Obtain the main window.
Call **getMainWindow** to obtain the main window of the application.
Call **getMainWindow** to obtain the main window of the application.
2. Set the properties of the main window.
2. Set the properties of the main window.
You can set multiple properties of the main window, such as the background color, brightness, and whether the main window is touchable. The code snippet below uses the **touchable** property as an example.
You can set multiple properties of the main window, such as the background color, brightness, and whether the main window is touchable. The code snippet below uses the **touchable** property as an example.
3. Load content for the main window.
3. Load content for the main window.
Call **loadContent** to load the page content to the main window.
Call **loadContent** to load the page content to the main window.
```ts
```ts
...
@@ -108,17 +111,21 @@ You can create an application subwindow, such as a dialog box, and set its prope
...
@@ -108,17 +111,21 @@ You can create an application subwindow, such as a dialog box, and set its prope
### How to Develop
### How to Develop
1. Create a subwindow.
1. Create a subwindow.
Call **createSubWindow** to create a subwindow.
Call **createSubWindow** to create a subwindow.
2. Set the properties of the subwindow.
2. Set the properties of the subwindow.
After the subwindow is created, you can set its properties, such as the size, position, background color, and brightness.
After the subwindow is created, you can set its properties, such as the size, position, background color, and brightness.
3. Load content for the subwindow and show it.
3. Load content for the subwindow and show it.
Call **setUIContent** and **showWindow** to load and display the content in the subwindow.
Call **setUIContent** and **showWindow** to load and display the content in the subwindow.
4. Destroy the subwindow.
4. Destroy the subwindow.
When the subwindow is no longer needed, you can call **destroyWindow** to destroy it.
When the subwindow is no longer needed, you can call **destroyWindow** to destroy it.
```ts
```ts
importAbilityfrom'@ohos.application.Ability'
importAbilityfrom'@ohos.application.Ability'
...
@@ -201,6 +208,7 @@ To create a better video watching and gaming experience, you can use the immersi
...
@@ -201,6 +208,7 @@ To create a better video watching and gaming experience, you can use the immersi
### How to Develop
### How to Develop
1. Obtain the main window.
1. Obtain the main window.
Call **getMainWindow** to obtain the main window of the application.
Call **getMainWindow** to obtain the main window of the application.
2. Implement the immersive effect. You can use any of the following methods:
2. Implement the immersive effect. You can use any of the following methods:
...
@@ -208,8 +216,9 @@ To create a better video watching and gaming experience, you can use the immersi
...
@@ -208,8 +216,9 @@ To create a better video watching and gaming experience, you can use the immersi
- Method 2: Call **setWindowLayoutFullScreen** to enable the full-screen mode for the main window layout. Call **setWindowSystemBarProperties** to set the opacity, background color, text color, and highlighted icon of the navigation bar and status bar to ensure that their display effect is consistent with that of the main window.
- Method 2: Call **setWindowLayoutFullScreen** to enable the full-screen mode for the main window layout. Call **setWindowSystemBarProperties** to set the opacity, background color, text color, and highlighted icon of the navigation bar and status bar to ensure that their display effect is consistent with that of the main window.
3. Load content for the immersive window and show it.
3. Load content for the immersive window and show it.
Call **loadContent** to load the content to the immersive window.
Call **loadContent** to load the content to the immersive window.
```ts
```ts
importAbilityfrom'@ohos.application.Ability'
importAbilityfrom'@ohos.application.Ability'
...
@@ -279,12 +288,13 @@ A floating window is created based on an existing task. It is always displayed i
...
@@ -279,12 +288,13 @@ A floating window is created based on an existing task. It is always displayed i
### How to Develop
### How to Develop
1. Apply for permissions.
1. Apply for permissions.
To create a floating window (of the **WindowType.TYPE_FLOAT** type), you must configure the **ohos.permission.SYSTEM_FLOAT_WINDOW** permission in the **requestPermissions** field of the **module.json5** file. For more configuration information, see [module.json5 Configuration File](../quick-start/module-configuration-file.md).
To create a floating window (of the **WindowType.TYPE_FLOAT** type), you must configure the **ohos.permission.SYSTEM_FLOAT_WINDOW** permission in the **requestPermissions** field of the **module.json5** file. For more configuration information, see [module.json5 Configuration File](../quick-start/module-configuration-file.md).
> **NOTE**
> **NOTE**
>
>
> If the task for creating the floating window is reclaimed by the system, the floating window will no longer be displayed. If you want the floating window to be displayed in such a case, apply for a [continuous task](../task-management/background-task-overview.md).
> If the task for creating the floating window is reclaimed by the system, the floating window will no longer be displayed. If you want the floating window to be displayed in such a case, apply for a [continuous task](../task-management/background-task-overview.md).
```json
```json
{
{
"module":{
"module":{
...
@@ -304,12 +314,15 @@ A floating window is created based on an existing task. It is always displayed i
...
@@ -304,12 +314,15 @@ A floating window is created based on an existing task. It is always displayed i
```
```
2. Create a floating window.
2. Create a floating window.
Call **window.createWindow** to create a floating window.
Call **window.createWindow** to create a floating window.
3. Set properties for the floating window.
3. Set properties for the floating window.
After the floating window is created, you can set its properties, such as the size, position, background color, and brightness.
After the floating window is created, you can set its properties, such as the size, position, background color, and brightness.
4. Load content for the floating window and show it.
4. Load content for the floating window and show it.
Call **setUIContent** and **showWindow** to load and display the content in the floating window.
Call **setUIContent** and **showWindow** to load and display the content in the floating window.
In the stage model, system applications are allowed to create and manage system windows, including the volume bar, wallpaper, notification panel, status bar, and navigation bar. For details about the supported system window types, see [WindowType in Window](../reference/apis/js-apis-window.md#windowtype7).
In the stage model, system applications are allowed to create and manage system windows, including the volume bar, wallpaper, notification panel, status bar, and navigation bar. For details about the supported system window types, see [WindowType in Window](../reference/apis/js-apis-window.md#windowtype7).
When a window is displayed, hidden, or switched, an animation is usually used to smooth the interaction process.
In OpenHarmony, the animation is the default behavior for application windows. You do not need to set or modify the code.
However, you can customize an animation to be played during the display or hiding of a system window.
> **NOTE**
> **NOTE**
>
>
> This document involves the use of system APIs. Use the full SDK for development. For details, see [Guide to Switching to Full SDK](../quick-start/full-sdk-switch-guide.md).
> This document involves the use of system APIs. Use the full SDK for development. For details, see [Guide to Switching to Full SDK](../quick-start/full-sdk-switch-guide.md).
...
@@ -13,22 +19,26 @@ In the stage model, system applications are allowed to create and manage system
...
@@ -13,22 +19,26 @@ In the stage model, system applications are allowed to create and manage system
For details, see [Window](../reference/apis/js-apis-window.md).
For details, see [Window](../reference/apis/js-apis-window.md).
| Window static method| createWindow(config: Configuration, callback: AsyncCallback\<Window>): void | Creates a subwindow or system window.<br>**config** specifies the parameters used for creating the window.|
| Window static method | createWindow(config: Configuration, callback: AsyncCallback\<Window>): void | Creates a subwindow or system window.<br>**config** specifies the parameters used for creating the window. |
| Window | getTransitionController(): TransitionController | Obtains the transition animation controller. This is a system API. |
| TransitionContext | completeTransition(isCompleted: boolean): void | Completes the transition. This API can be called only after [animateTo()](../reference/arkui-ts/ts-explicit-animation.md) is executed. This is a system API.|
| Window | showWithAnimation(callback: AsyncCallback\<void>): void | Shows this window and plays an animation during the process. This is a system API. |
| Window | hideWithAnimation(callback: AsyncCallback\<void>): void | Hides this window and plays an animation during the process. This is a system API. |
## How to Develop
## Developing a System Window
This section uses the volume bar as an example to describe how to develop a system window.
This section uses the volume bar as an example to describe the steps for system window development.
@@ -56,7 +56,7 @@ The application window mode refers to the display mode of the main window when i
...
@@ -56,7 +56,7 @@ The application window mode refers to the display mode of the main window when i
The window implementation and development vary according to the application development model, that is, FA model and stage model.
The window implementation and development vary according to the application development model, that is, FA model and stage model.
For details about the overall architecture and design ideas of the two models, see [FA Model Overview](../ability/fa-brief.md) and [Stage Model Overview](../ability/stage-brief.md).
For details about the overall architecture and design ideas of the two models, see [Interpretation of the Application Model](../application-models/application-model-description.md).
You are advised to use the stage model for window development.
You are advised to use the stage model for window development.