提交 2cad8f64 编写于 作者: G Gloria

Update docs against 19915+19924

Signed-off-by: wusongqing<wusongqing@huawei.com>
上级 18e8ec05
...@@ -26,32 +26,30 @@ In the stage model, you can perform the following operations during application ...@@ -26,32 +26,30 @@ In the stage model, you can perform the following operations during application
## Available APIs ## Available APIs
The table below lists the common APIs used for application window development. For details about more APIs, see [Window](../reference/apis/js-apis-window.md). The table below lists the common APIs used for application window development. For details about more APIs, see [Window](../reference/apis/js-apis-window.md).
| Instance | API | Description |
| Instance| API| Description| | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| -------- | -------- | -------- |
| WindowStage | getMainWindow(callback: AsyncCallback&lt;Window&gt;): void | Obtains the main window of this window stage.<br>This API can be used only in the stage model.| | WindowStage | getMainWindow(callback: AsyncCallback&lt;Window&gt;): 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&lt;void&gt;): 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 | loadContent(path: string, callback: AsyncCallback&lt;void&gt;): 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&lt;Window&gt;): void | Creates a subwindow.<br>This API can be used only in the stage model.| | WindowStage | createSubWindow(name: string, callback: AsyncCallback&lt;Window&gt;): void | Creates a subwindow.<br>This API can be used only in the stage model. |
| Window static method| createWindow(config: Configuration, callback: AsyncCallback\<Window>): void | Creates a system window.<br>**config** specifies the parameters used for creating the window.| | Window static method| createWindow(config: Configuration, callback: AsyncCallback\<Window>): void | Creates a system window.<br>**config** specifies the parameters used for creating the window. |
| Window | setUIContent(path: string, callback: AsyncCallback&lt;void&gt;): void | Loads the page content to this window.| | Window | setUIContent(path: string, callback: AsyncCallback&lt;void&gt;): void | Loads the page content to this window. |
| Window | setWindowBackgroundColor(color: string, callback: AsyncCallback&lt;void&gt;): void | Sets the background color for this window.| | Window | setWindowBackgroundColor(color: string, callback: AsyncCallback&lt;void&gt;): void | Sets the background color for this window. |
| Window | setWindowBrightness(brightness: number, callback: AsyncCallback&lt;void&gt;): void | Sets the brightness for this window.| | Window | setWindowBrightness(brightness: number, callback: AsyncCallback&lt;void&gt;): void | Sets the brightness for this window. |
| Window | setWindowTouchable(isTouchable: boolean, callback: AsyncCallback&lt;void&gt;): void | Sets whether this window is touchable.| | Window | setWindowTouchable(isTouchable: boolean, callback: AsyncCallback&lt;void&gt;): void | Sets whether this window is touchable. |
| Window | moveWindowTo(x: number, y: number, callback: AsyncCallback&lt;void&gt;): void | Moves this window.| | Window | moveWindowTo(x: number, y: number, callback: AsyncCallback&lt;void&gt;): void | Moves this window. |
| Window | resize(width: number, height: number, callback: AsyncCallback&lt;void&gt;): void | Changes the window size.| | Window | resize(width: number, height: number, callback: AsyncCallback&lt;void&gt;): void | Changes the window size. |
| Window | setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback&lt;void&gt;): void | Sets whether to enable the full-screen mode for the window layout. | | Window | setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback&lt;void&gt;): void | Sets whether to enable the full-screen mode for the window layout. |
| Window | setWindowSystemBarEnable(names: Array&lt;'status'\|'navigation'&gt;): Promise&lt;void&gt; | Sets whether to display the status bar and navigation bar in this window.| | Window | setWindowSystemBarEnable(names: Array&lt;'status'\|'navigation'&gt;): Promise&lt;void&gt; | Sets whether to display the status bar and navigation bar in this window. |
| Window | setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback&lt;void&gt;): 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 | setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback&lt;void&gt;): 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 | showWindow(callback: AsyncCallback\<void>): void | Shows this window.| | Window | showWindow(callback: AsyncCallback\<void>): void | Shows this window. |
| Window | on(type: 'touchOutside', callback: Callback&lt;void&gt;): void | Enables listening for click events outside this window.| | Window | on(type: 'touchOutside', callback: Callback&lt;void&gt;): void | Enables listening for click events outside this window. |
| Window | destroyWindow(callback: AsyncCallback&lt;void&gt;): void | Destroys this window.| | Window | destroyWindow(callback: AsyncCallback&lt;void&gt;): void | Destroys this window. |
## Setting the Main Window of an Application ## Setting the Main Window of an Application
In the stage model, the main window of an application is created and maintained by a **UIAbility** instance. In the **onWindowStageCreate** callback of the **UIAbility** instance, use **WindowStage** to obtain the main window of the application and set its properties. You can also set the properties (for example, **maxWindowWidth**) in the [module.json5 file](../quick-start/module-configuration-file.md#abilities). In the stage model, the main window of an application is created and maintained by a **UIAbility** instance. In the **onWindowStageCreate** callback of the **UIAbility** instance, use **WindowStage** to obtain the main window of the application and set its properties. You can also set the properties (for example, **maxWindowWidth**) in the [module.json5 file](../quick-start/module-configuration-file.md#abilities).
### How to Develop ### How to Develop
1. Obtain the main window. 1. Obtain the main window.
...@@ -66,10 +64,10 @@ In the stage model, the main window of an application is created and maintained ...@@ -66,10 +64,10 @@ In the stage model, the main window of an application is created and maintained
Call **loadContent** to load the page content to the main window. Call **loadContent** to load the page content to the main window.
```ts ```ts
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
export default class EntryAbility extends UIAbility { export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage) { onWindowStageCreate(windowStage) {
// 1. Obtain the main window of the application. // 1. Obtain the main window of the application.
let windowClass = null; let windowClass = null;
...@@ -99,15 +97,13 @@ In the stage model, the main window of an application is created and maintained ...@@ -99,15 +97,13 @@ In the stage model, the main window of an application is created and maintained
console.info('Succeeded in loading the content.'); console.info('Succeeded in loading the content.');
}); });
} }
}; };
``` ```
## Setting a Subwindow of an Application ## Setting a Subwindow of an Application
You can create an application subwindow, such as a dialog box, and set its properties. You can create an application subwindow, such as a dialog box, and set its properties.
### How to Develop ### How to Develop
1. Create a subwindow. 1. Create a subwindow.
...@@ -126,12 +122,13 @@ You can create an application subwindow, such as a dialog box, and set its prope ...@@ -126,12 +122,13 @@ You can create an application subwindow, such as a dialog box, and set its prope
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
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
let windowStage_ = null; let windowStage_ = null;
let sub_windowClass = null; let sub_windowClass = null;
export default class EntryAbility extends UIAbility {
export default class EntryAbility extends UIAbility {
showSubWindow() { showSubWindow() {
// 1. Create a subwindow. // 1. Create a subwindow.
windowStage_.createSubWindow("mySubWindow", (err, data) => { windowStage_.createSubWindow("mySubWindow", (err, data) => {
...@@ -196,13 +193,12 @@ You can create an application subwindow, such as a dialog box, and set its prope ...@@ -196,13 +193,12 @@ You can create an application subwindow, such as a dialog box, and set its prope
// 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. // 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(); this.destroySubWindow();
} }
}; };
``` ```
## Experiencing the Immersive Window Feature ## Experiencing the Immersive Window Feature
To create a better video watching and gaming experience, you can use the immersive window feature to hide the system windows, including the status bar and navigation bar. To achieve this effect, you can use the immersive window feature, which is available only for the main window of an application. To create a better video watching and gaming experience, you can use the immersive window feature to hide the system windows, including the status bar and navigation bar. This feature is available only for the main window of an application.
### How to Develop ### How to Develop
...@@ -212,17 +208,19 @@ To create a better video watching and gaming experience, you can use the immersi ...@@ -212,17 +208,19 @@ To create a better video watching and gaming experience, you can use the immersi
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 either of the following methods: 2. Implement the immersive effect. You can use either of the following methods:
- Method 1: Call **setWindowSystemBarEnable** to hide the navigation bar and status bar.
- 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 1: Call **setWindowSystemBarEnable** to hide the status bar and navigation bar.
- 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 status bar and navigation 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
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
export default class EntryAbility extends UIAbility { export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage) { onWindowStageCreate(windowStage) {
// 1. Obtain the main window of the application. // 1. Obtain the main window of the application.
let windowClass = null; let windowClass = null;
...@@ -276,9 +274,8 @@ To create a better video watching and gaming experience, you can use the immersi ...@@ -276,9 +274,8 @@ To create a better video watching and gaming experience, you can use the immersi
console.info('Succeeded in loading the content.'); console.info('Succeeded in loading the content.');
}); });
} }
}; };
``` ```
## Setting a Floating Window ## Setting a Floating Window
...@@ -287,55 +284,31 @@ A floating window is created based on an existing task. It is always displayed i ...@@ -287,55 +284,31 @@ 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. **Prerequisites**: To create a floating window (a window of the type **WindowType.TYPE_FLOAT**), you must request the **ohos.permission.SYSTEM_FLOAT_WINDOW** permission. For details, see [Declaring Permissions in the Configuration File](../security/accesstoken-guidelines.md#declaring-permissions-in-the-configuration-file).
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**
>
> 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/continuous-task-dev-guide.md).
```json
{
"module": {
"requestPermissions":[
{
"name" : "ohos.permission.SYSTEM_FLOAT_WINDOW",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when":"inuse"
}
}
]
}
}
```
2. Create a floating window. 1. 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. 2. 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. 3. 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.
5. Destroy the floating window. 4. Destroy the floating window.
When the floating window is no longer needed, you can call **destroyWindow** to destroy it. When the floating window is no longer needed, you can call **destroyWindow** to destroy it.
```ts ```ts
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window'; import window from '@ohos.window';
export default class EntryAbility extends UIAbility { export default class EntryAbility extends UIAbility {
onWindowStageCreate(windowStage) { onWindowStageCreate(windowStage) {
// 2. Create a floating window. // 1. Create a floating window.
let windowClass = null; let windowClass = null;
let config = {name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: this.context}; let config = {name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: this.context};
window.createWindow(config, (err, data) => { window.createWindow(config, (err, data) => {
...@@ -345,7 +318,7 @@ A floating window is created based on an existing task. It is always displayed i ...@@ -345,7 +318,7 @@ A floating window is created based on an existing task. It is always displayed i
} }
console.info('Succeeded in creating the floatWindow. Data: ' + JSON.stringify(data)); console.info('Succeeded in creating the floatWindow. Data: ' + JSON.stringify(data));
windowClass = data; windowClass = data;
// 3. Set the position, size, and properties of the floating window. // 2. Set the position, size, and properties of the floating window.
windowClass.moveWindowTo(300, 300, (err) => { windowClass.moveWindowTo(300, 300, (err) => {
if (err.code) { if (err.code) {
console.error('Failed to move the window. Cause:' + JSON.stringify(err)); console.error('Failed to move the window. Cause:' + JSON.stringify(err));
...@@ -360,14 +333,14 @@ A floating window is created based on an existing task. It is always displayed i ...@@ -360,14 +333,14 @@ A floating window is created based on an existing task. It is always displayed i
} }
console.info('Succeeded in changing the window size.'); console.info('Succeeded in changing the window size.');
}); });
// 4. Load the page content to the floating window. // 3. Load the page content to the floating window.
windowClass.setUIContent("pages/page4", (err) => { windowClass.setUIContent("pages/page4", (err) => {
if (err.code) { if (err.code) {
console.error('Failed to load the content. Cause:' + JSON.stringify(err)); console.error('Failed to load the content. Cause:' + JSON.stringify(err));
return; return;
} }
console.info('Succeeded in loading the content.'); console.info('Succeeded in loading the content.');
// 4. Show the floating window. // 3. Show the floating window.
windowClass.showWindow((err) => { windowClass.showWindow((err) => {
if (err.code) { if (err.code) {
console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
...@@ -376,7 +349,7 @@ A floating window is created based on an existing task. It is always displayed i ...@@ -376,7 +349,7 @@ A floating window is created based on an existing task. It is always displayed i
console.info('Succeeded in showing the window.'); console.info('Succeeded in showing the window.');
}); });
}); });
// 5. Destroy the floating window when it is no longer needed (depending on the service logic). // 4. Destroy the floating window when it is no longer needed (depending on the service logic).
windowClass.destroyWindow((err) => { windowClass.destroyWindow((err) => {
if (err.code) { if (err.code) {
console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err)); console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err));
...@@ -386,5 +359,6 @@ A floating window is created based on an existing task. It is always displayed i ...@@ -386,5 +359,6 @@ A floating window is created based on an existing task. It is always displayed i
}); });
}); });
} }
}; };
``` ```
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册