@@ -32,7 +32,7 @@ The table below lists the common APIs used for application window development. F
| WindowStage | getMainWindow(callback: AsyncCallback<Window>): void | Obtains the main window of this window stage.<br>This API can be used only in the stage model.|
| WindowStage | loadContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to the main window in this window stage.<br>This API can be used only in the stage model.|
| WindowStage | createSubWindow(name: string, callback: AsyncCallback<Window>): void | Creates a subwindow.<br>This API can be used only in the stage model.|
| Window | loadContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.|
| Window | setBackgroundColor(color: string, callback: AsyncCallback<void>): void | Sets the background color for this window.|
| Window | setBrightness(brightness: number, callback: AsyncCallback<void>): void | Sets the brightness for this window.|
...
...
@@ -42,7 +42,7 @@ The table below lists the common APIs used for application window development. F
| Window | setFullScreen(isFullScreen: boolean, callback: AsyncCallback<void>): void | Sets whether to enable the full-screen mode for this window.|
| Window | setLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback<void>): void | Sets whether to enable the full-screen mode for the window layout. |
| Window | setSystemBarEnable(names: Array<'status'\|'navigation'>): Promise<void> | Sets whether to display the status bar and navigation bar in this window.|
| Window | setSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback<void>): void | Sets the properties of the status bar and navigation bar in this window.<br>`systemBarProperties`: properties of the status bar and navigation bar.|
| Window | setSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback<void>): void | Sets the properties of the status bar and navigation bar in this window.<br>**systemBarProperties**: properties of the status bar and navigation bar.|
| Window | show(callback: AsyncCallback\<void>): void | Shows this window.|
| Window | on(type: 'touchOutside', callback: Callback<void>): void | Enables listening for click events outside this window.|
| Window | destroy(callback: AsyncCallback<void>): void | Destroys this window.|
...
...
@@ -50,19 +50,22 @@ The table below lists the common APIs used for application window development. F
## Setting the Main Window of an Application
In the stage model, the main window of an application is created and maintained by an `Ability` instance. In the `onWindowStageCreate` callback of the `Ability` instance, use `WindowStage` to obtain the main window of the application and set its properties.
In the stage model, the main window of an application is created and maintained by an **Ability** instance. In the **onWindowStageCreate** callback of the **Ability** instance, use **WindowStage** to obtain the main window of the application and set its properties.
### How to Develop
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.
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.
Call `loadContent` to load the page content to the main window.
Call **loadContent** to load the page content to the main window.
```ts
importAbilityfrom'@ohos.application.Ability'
...
...
@@ -109,27 +112,32 @@ You can create an application subwindow, such as a dialog box, and set its prope
### How to Develop
1. Create or obtain a subwindow.
Call `createSubWindow` to create a subwindow.
Call `getSubWindow` to obtain a subwindow.
Call **createSubWindow** to create a subwindow.
Call **getSubWindow** to obtain a 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.
3. Load content for the subwindow and show it.
Call `loadContent` and `show` to load and display the content in the subwindow.
Call **loadContent** and **show** to load and display the content in the subwindow.
4. Destroy the subwindow.
When the subwindow is no longer needed, you can call `destroy` to destroy it.
When the subwindow is no longer needed, you can call **destroy** to destroy it.
console.error('Failed to create the subwindow. Cause: '+JSON.stringify(err));
return;
...
...
@@ -137,7 +145,7 @@ You can create an application subwindow, such as a dialog box, and set its prope
sub_windowClass=data;
console.info('Succeeded in creating the subwindow. Data: '+JSON.stringify(data));
// 1. Obtain an available subwindow.
windowStage.getSubWindow((err,data)=>{
windowStage_.getSubWindow((err,data)=>{
if(err.code){
console.error('Failed to obtain the subWindow. Cause:'+JSON.stringify(err));
return;
...
...
@@ -176,19 +184,30 @@ You can create an application subwindow, such as a dialog box, and set its prope
console.info('Succeeded in showing the window. Data: '+JSON.stringify(data));
});
});
// 4. Destroy the subwindow when a click event outside the window is detected.
sub_windowClass.on('touchOutside',()=>{
console.info('touch outside');
sub_windowClass.destroy((err,data)=>{
if(err.code){
console.error('Failed to destroy the window. Cause: '+JSON.stringify(err));
return;
}
console.info('Succeeded in destroying the window. Data: '+JSON.stringify(data));
});
});
})
}
destroySubWindow(){
// 4. Destroy the subwindow when it is no longer needed (depending on the service logic).
sub_windowClass.destroy((err,data)=>{
if(err.code){
console.error('Failed to destroy the window. Cause: '+JSON.stringify(err));
return;
}
console.info('Succeeded in destroying the window. Data: '+JSON.stringify(data));
});
}
onWindowStageCreate(windowStage){
windowStage_=windowStage;
// Create the subwindow when it is needed, for example, when a click event occurs in the main window. Calling onWindowStageCreate is not always necessary. The code here is for reference only.
this.showSubWindow();
}
onWindowStageDestroy(){
// Destroy the subwindow when it is no longer needed, for example, when the Close button in the subwindow is clicked. Calling onWindowStageDestroy is not always necessary. The code here is for reference only.
this.destroySubWindow();
}
};
```
...
...
@@ -201,16 +220,18 @@ To create a better video watching and gaming experience, you can use the immersi
### How to Develop
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:
- Method 1: Call `setFullScreen` to set the main window to be displayed in full screen. In this case, the navigation bar and status bar are hidden.
- Method 2: Call `setSystemBarEnable` to hide the navigation bar and status bar.
- Method 3: Call `setLayoutFullScreen` to enable the full-screen mode for the main window layout. Call `setSystemProperties` 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 1: Call **setFullScreen** to set the main window to be displayed in full screen. In this case, the navigation bar and status bar are hidden.
- Method 2: Call **setSystemBarEnable** to hide the navigation bar and status bar.
- Method 3: Call **setLayoutFullScreen** to enable the full-screen mode for the main window layout. Call **setSystemProperties** 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.
Call `loadContent` and `show` to load and display the content in the immersive window.
Call **loadContent** to load the content to the immersive window.
```ts
importAbilityfrom'@ohos.application.Ability'
...
...
@@ -256,9 +277,6 @@ To create a better video watching and gaming experience, you can use the immersi
letsysBarProps={
statusBarColor:'#ff00ff',
navigationBarColor:'#00ff00',
// The following properties are supported since API version 7.
isStatusBarLightIcon:false,
isNavigationBarLightIcon:false,
// The following properties are supported since API version 8.
statusBarContentColor:'#ffffff',
navigationBarContentColor:'#ffffff'
...
...
@@ -278,14 +296,6 @@ To create a better video watching and gaming experience, you can use the immersi
return;
}
console.info('Succeeded in loading the content. Data: '+JSON.stringify(data));
// 3. Show the immersive window.
windowStage.show((err,data)=>{
if(err.code){
console.error('Failed to show the window. Cause:'+JSON.stringify(err));
return;
}
console.info('Succeeded in showing the window. Data: '+JSON.stringify(data));
});
});
}
};
...
...
@@ -300,9 +310,11 @@ A floating window is created based on an existing task. It is always displayed i
### How to Develop
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 details about the file, see [Application Package Structure Configuration File](../quick-start/stage-structure.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 details about the file, see [Application Package Structure Configuration File](../quick-start/stage-structure.md).
> **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).
```json
...
...
@@ -320,21 +332,24 @@ A floating window is created based on an existing task. It is always displayed i
}
]
}
}
}
```
2. Create a floating window.
Call `window.create` to create a floating window.
Call **window.create** to create a 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.
4. Load content for the floating window and show it.
Call `loadContent` and `show` to load and display the content in the floating window.
Call **loadContent** and **show** to load and display the content in the floating window.
5. Destroy the floating window.
When the floating window is no longer needed, you can call `destroy` to destroy it.
When the floating window is no longer needed, you can call **destroy** to destroy it.
```ts
importAbilityfrom'@ohos.application.Ability'
...
...
@@ -383,18 +398,15 @@ A floating window is created based on an existing task. It is always displayed i
console.info('Succeeded in showing the window. Data: '+JSON.stringify(data));
});
});
// 5. Destroy the floating window when a click event outside the window is detected.
windowClass.on('touchOutside',()=>{
console.info('touch outside');
windowClass.destroy((err,data)=>{
if(err.code){
console.error('Failed to destroy the window. Cause: '+JSON.stringify(err));
return;
}
console.info('Succeeded in destroying the window. Data: '+JSON.stringify(data));
});
// 5. Destroy the floating window when it is no longer needed (depending on the service logic).
windowClass.destroy((err,data)=>{
if(err.code){
console.error('Failed to destroy the window. Cause: '+JSON.stringify(err));
return;
}
console.info('Succeeded in destroying the window. Data: '+JSON.stringify(data));
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).
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).
> **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).
## Available APIs
...
...
@@ -11,7 +15,7 @@ For details, see [Window](../reference/apis/js-apis-window.md).
| Instance| API| Description|
| -------- | -------- | -------- |
| Window static method| create(ctx: Context, id: string, type: WindowType, callback: AsyncCallback<Window>): void | Creates a system window when `ctx` is [ServiceExtensionContext](../reference/apis/js-apis-service-extension-context.md).<br>-`ctx`: application context. <br>-`type`: window type. |
| Window static method| create(ctx: Context, id: string, type: WindowType, callback: AsyncCallback<Window>): void | Creates a system window when **ctx** is [ServiceExtensionContext](../reference/apis/js-apis-service-extension-context.md).<br>- **ctx**: application context. <br>- **type**: window type.|
| Window | loadContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.|
...
...
@@ -29,7 +33,7 @@ This section uses the volume bar as an example to describe the steps for system
1. Create a system window.
In the case of [ServiceExtensionContext](../reference/apis/js-apis-service-extension-context.md), call `window.create` to create a system window of the volume bar type.
In the case of [ServiceExtensionContext](../reference/apis/js-apis-service-extension-context.md), call **window.create** to create a system window of the volume bar type.
2. Set the properties of the system window.
...
...
@@ -37,11 +41,11 @@ This section uses the volume bar as an example to describe the steps for system
3. Load content for the system window and show it.
You can call `loadContent` and `show` to load and display the content in the volume bar window.
You can call **loadContent** and **show** to load and display the content in the volume bar window.
4. Hide or destroy the system window.
When the volume bar window is no longer needed, you can call `hide` or `destroy` to hide or destroy it.
When the volume bar window is no longer needed, you can call **hide** or **destroy** to hide or destroy it.
