console.error('Failed to load the content. Cause:'+JSON.stringify(err));
return;
}
console.info('Succeeded in loading the content. Data: '+JSON.stringify(data))
});
}
onWindowStageDestroy(){
...
...
@@ -237,7 +243,7 @@ For details, see [FormExtensionContext](../reference/apis/js-apis-formextensionc
### Obtaining the Context on an ArkTS Page
In the stage model, in the `onWindowStageCreate` lifecycle of an ability, you can call `SetUIContent` of `WindowStage` to load an ArkTS page. In some scenarios, you need to obtain the context on the page to call related APIs.
In the stage model, in the onWindowStageCreate lifecycle of an ability, you can call **SetUIContent** of **WindowStage** to load an ArkTS page. In some scenarios, you need to obtain the context on the page to call related APIs.
**How to Obtain**
...
...
@@ -245,7 +251,7 @@ Use the API described in the table below to obtain the context associated with a
@@ -31,7 +31,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.|
...
...
@@ -46,9 +46,9 @@ You can create a subwindow, such as a dialog box, and set its properties.
1. Create or obtain a subwindow.
- Call `window.create` to create a subwindow.
- Call `window.getTopWindow` to obtain the top window – subwindow.
- Call `window.find` to find an available subwindow.
- Call **window.create** to create a subwindow.
- Call **window.getTopWindow** to obtain the top window – subwindow.
- Call **window.find** to find an available subwindow.
```js
importwindowfrom'@ohos.window';
...
...
@@ -89,61 +89,58 @@ You can create a subwindow, such as a dialog box, and set its properties.
```js
// Move the subwindow.
windowClass.moveTo(300,300,(err,data)=>{
windowClass.moveTo(300,300,(err)=>{
if(err.code){
console.error('Failed to move the window. Cause:'+JSON.stringify(err));
return;
}
console.info('Succeeded in moving the window. Data: '+JSON.stringify(data));
console.info('Succeeded in moving the window.');
});
// Change the size of the subwindow.
windowClass.resetSize(500,1000,(err,data)=>{
windowClass.resetSize(500,1000,(err)=>{
if(err.code){
console.error('Failed to change the window size. Cause:'+JSON.stringify(err));
return;
}
console.info('Succeeded in changing the window size. Data: '+JSON.stringify(data));
console.info('Succeeded in changing the window size.');
});
```
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.
console.error('Failed to load the content. Cause: '+JSON.stringify(err));
return;
}
console.info('Succeeded in loading the content. Data: '+JSON.stringify(data));
console.info('Succeeded in loading the content.');
// Show the subwindow.
windowClass.show((err,data)=>{
windowClass.show((err)=>{
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));
console.info('Succeeded in showing the window.');
});
});
```
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.
```js
// Destroy the subwindow 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 subwindow. Cause:'+JSON.stringify(err));
return;
}
console.info('Succeeded in destroying the subwindow. Data: '+JSON.stringify(data));
});
// Call destroy() to destroy the subwindow when it is no longer needed.
windowClass.destroy((err)=>{
if(err.code){
console.error('Failed to destroy the subwindow. Cause:'+JSON.stringify(err));
return;
}
console.info('Succeeded in destroying the subwindow.');
});
```
...
...
@@ -161,7 +158,7 @@ To create a better video watching and gaming experience, you can use the immersi
>
> The immersive window feature can be implemented only after the main window is obtained.
>
> Ensure that the top window of the application is the main window. You can use `window.getTopWindow` to obtain the main window.
> Ensure that the top window of the application is the main window. You can use **window.getTopWindow** to obtain the main window.
```js
importwindowfrom'@ohos.window';
...
...
@@ -180,76 +177,73 @@ To create a better video watching and gaming experience, you can use the immersi
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.
```js
// Use method 1 to implement the immersive effect.
