未验证 提交 6f6ab963 编写于 作者: O openharmony_ci 提交者: Gitee

!11336 翻译完成:10578 system-window-stage.md + application-window-stage.md

Merge pull request !11336 from wusongqing/TR10578
......@@ -57,7 +57,7 @@ In the stage model, the main window of an application is created and maintained
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.
......@@ -113,9 +113,9 @@ You can create an application subwindow, such as a dialog box, and set its prope
1. Create or obtain a subwindow.
Call **createSubWindow** to create a subwindow.
Call **createSubWindow** to create a subwindow.
Call **getSubWindow** to obtain a subwindow.
Call **getSubWindow** to obtain a subwindow.
2. Set the properties of the subwindow.
......@@ -132,11 +132,12 @@ You can create an application subwindow, such as a dialog box, and set its prope
```ts
import Ability from '@ohos.application.Ability'
let windowStage_ = null;
let sub_windowClass = null;
class MainAbility extends Ability {
onWindowStageCreate(windowStage) {
showSubWindow() {
// 1. Create a subwindow.
let sub_windowClass = null;
windowStage.createSubWindow("mySubWindow", (err, data) => {
windowStage_.createSubWindow("mySubWindow", (err, data) => {
if (err.code) {
console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err));
return;
......@@ -144,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;
......@@ -183,9 +184,11 @@ 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');
})
}
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));
......@@ -193,8 +196,17 @@ You can create an application subwindow, such as a dialog box, and set its prope
}
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();
}
};
```
......@@ -209,7 +221,7 @@ To create a better video watching and gaming experience, you can use the immersi
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.
......@@ -299,7 +311,7 @@ A floating window is created based on an existing task. It is always displayed i
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**
>
......@@ -320,7 +332,7 @@ A floating window is created based on an existing task. It is always displayed i
}
]
}
}
}
```
2. Create a floating window.
......@@ -386,9 +398,7 @@ 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');
// 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));
......@@ -397,7 +407,6 @@ A floating window is created based on an existing task. It is always displayed i
console.info('Succeeded in destroying the window. Data: ' + JSON.stringify(data));
});
});
});
}
};
```
\ No newline at end of file
......@@ -2,7 +2,11 @@
## Overview
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&lt;Window&gt;): 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&lt;Window&gt;): 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 | resetSize(width: number, height: number, callback: AsyncCallback&lt;void&gt;): void | Changes the window size.|
| Window | moveTo(x: number, y: number, callback: AsyncCallback&lt;void&gt;): void | Moves this window.|
| Window | loadContent(path: string, callback: AsyncCallback&lt;void&gt;): 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.
```ts
import ExtensionContext from '@ohos.application.ServiceExtensionAbility';
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册