diff --git a/en/application-dev/windowmanager/application-window-fa.md b/en/application-dev/windowmanager/application-window-fa.md index 75b71275759c812aaf3c69707e07a4378ba7e333..082e6d32b5354eec0e020cbeed605b7a30e0d2c8 100644 --- a/en/application-dev/windowmanager/application-window-fa.md +++ b/en/application-dev/windowmanager/application-window-fa.md @@ -53,7 +53,7 @@ You can create a subwindow, such as a dialog box, and set its properties. ```js import window from '@ohos.window'; - var windowClass = null; + let windowClass = null; // 1. Method 1: Create a subwindow. window.create("subWindow", window.WindowType.TYPE_APP, (err, data) => { if (err.code) { @@ -86,7 +86,6 @@ You can create a subwindow, such as a dialog box, and set its properties. 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. - ```js // 2. Move the subwindow. @@ -110,7 +109,6 @@ You can create a subwindow, such as a dialog box, and set its properties. 3. Load content for the subwindow and show it. Call `loadContent` and `show` to load and display the content in the subwindow. - ```js // 3. Load the page content to the subwindow. @@ -134,7 +132,6 @@ You can create a subwindow, such as a dialog box, and set its properties. 4. Destroy the subwindow. When the subwindow is no longer needed, you can call `destroy` to destroy it. - ```js // 4. Destroy the subwindow when a click event outside the window is detected. @@ -160,13 +157,16 @@ To create a better video watching and gaming experience, you can use the immersi 1. Obtain the main window. - The immersive window feature can be implemented only after the main window is obtained. You can call `window.getTopWindow` to obtain the main window. - + > **NOTE** + > + > 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. ```js import window from '@ohos.window'; - var mainWindowClass = null; + let mainWindowClass = null; // 1. Obtain the main window. window.getTopWindow((err, data) => { if (err.code) { @@ -186,7 +186,7 @@ To create a better video watching and gaming experience, you can use the immersi ```js // 2. Use method 1 to implement the immersive effect. - var isFullScreen = true; + let isFullScreen = true; mainWindowClass.setFullScreen(isFullScreen, (err, data) => { if (err.code) { console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err)); @@ -195,7 +195,7 @@ To create a better video watching and gaming experience, you can use the immersi console.info('Succeeded in enabling the full-screen mode. Data: ' + JSON.stringify(data)); }); // 2. Use method 2 to implement the immersive effect. - var names = []; + let names = []; mainWindowClass.setSystemBarEnable(names, (err, data) => { if (err.code) { console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); @@ -204,7 +204,7 @@ To create a better video watching and gaming experience, you can use the immersi console.info('Succeeded in setting the system bar to be visible. Data: ' + JSON.stringify(data)); }); // 2. Use method 3 to implement the immersive effect. - var isLayoutFullScreen = true; + let isLayoutFullScreen = true; mainWindowClass.setLayoutFullScreen(isLayoutFullScreen, (err, data) => { if (err.code) { console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); @@ -212,7 +212,7 @@ To create a better video watching and gaming experience, you can use the immersi } console.info('Succeeded in setting the window layout to full-screen mode. Data: ' + JSON.stringify(data)); }); - var SystemBarProperties = { + let sysBarProps = { statusBarColor: '#ff00ff', navigationBarColor: '#00ff00', // The following properties are supported since API version 7. @@ -222,7 +222,7 @@ To create a better video watching and gaming experience, you can use the immersi statusBarContentColor: '#ffffff', navigationBarContentColor: '#ffffff' }; - mainWindowClass.setSystemBarProperties(SystemBarProperties, (err, data) => { + mainWindowClass.setSystemBarProperties(sysBarProps, (err, data) => { if (err.code) { console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err)); return; @@ -234,7 +234,6 @@ To create a better video watching and gaming experience, you can use the immersi 3. Load content for the immersive window and show it. Call `loadContent` and `show` to load and display the content in the immersive window. - ```js // 3. Load the page content to the immersive window. diff --git a/en/application-dev/windowmanager/application-window-stage.md b/en/application-dev/windowmanager/application-window-stage.md index f0598cf8bfb90fe275f8fa45fb759b7093be21e2..98ae7d7d708c91f0d2920da23143d79e382ac653 100644 --- a/en/application-dev/windowmanager/application-window-stage.md +++ b/en/application-dev/windowmanager/application-window-stage.md @@ -56,25 +56,21 @@ In the stage model, the main window of an application is created and maintained ### How to Develop 1. Obtain the main window. - 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. 3. Load content for the main window. - Call `loadContent` to load the page content to the main window. - ```ts import Ability from '@ohos.application.Ability' class MainAbility extends Ability { onWindowStageCreate(windowStage) { // 1. Obtain the main window of the application. - var windowClass = null; + let windowClass = null; windowStage.getMainWindow((err, data) => { if (err.code) { console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); @@ -83,7 +79,7 @@ class MainAbility extends Ability { windowClass = data; console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); // 2. Set the touchable property of the main window. - var isTouchable = true; + let isTouchable = true; windowClass.setTouchable(isTouchable, (err, data) => { if (err.code) { console.error('Failed to set the window to be touchable. Cause:' + JSON.stringify(err)); @@ -113,31 +109,26 @@ 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. 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. 4. Destroy the subwindow. - When the subwindow is no longer needed, you can call `destroy` to destroy it. - - + ```ts import Ability from '@ohos.application.Ability' class MainAbility extends Ability { onWindowStageCreate(windowStage) { // 1. Create a subwindow. - var sub_windowClass = null; + let sub_windowClass = null; windowStage.createSubWindow("mySubWindow", (err, data) => { if (err.code) { console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err)); @@ -210,7 +201,6 @@ 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. 2. Implement the immersive effect. You can use any of the following methods: @@ -219,17 +209,15 @@ To create a better video watching and gaming experience, you can use the immersi - 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. - - + ```ts import Ability from '@ohos.application.Ability' class MainAbility extends Ability { onWindowStageCreate(windowStage) { // 1. Obtain the main window of the application. - var windowClass = null; + let windowClass = null; windowStage.getMainWindow((err, data) => { if (err.code) { console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); @@ -239,7 +227,7 @@ To create a better video watching and gaming experience, you can use the immersi console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); // 2. Use method 1 to implement the immersive effect. - var isFullScreen = true; + let isFullScreen = true; windowClass.setFullScreen(isFullScreen, (err, data) => { if (err.code) { console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err)); @@ -248,7 +236,7 @@ To create a better video watching and gaming experience, you can use the immersi console.info('Succeeded in enabling the full-screen mode. Data: ' + JSON.stringify(data)); }); // 2. Use method 2 to implement the immersive effect. - var names = []; + let names = []; windowClass.setSystemBarEnable(names, (err, data) => { if (err.code) { console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); @@ -257,7 +245,7 @@ To create a better video watching and gaming experience, you can use the immersi console.info('Succeeded in setting the system bar to be visible. Data: ' + JSON.stringify(data)); }); // 2. Use method 3 to implement the immersive effect. - var isLayoutFullScreen = true; + let isLayoutFullScreen = true; windowClass.setLayoutFullScreen(isLayoutFullScreen, (err, data) => { if (err.code) { console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); @@ -265,7 +253,7 @@ To create a better video watching and gaming experience, you can use the immersi } console.info('Succeeded in setting the window layout to full-screen mode. Data: ' + JSON.stringify(data)); }); - var SystemBarProperties = { + let sysBarProps = { statusBarColor: '#ff00ff', navigationBarColor: '#00ff00', // The following properties are supported since API version 7. @@ -275,7 +263,7 @@ To create a better video watching and gaming experience, you can use the immersi statusBarContentColor: '#ffffff', navigationBarContentColor: '#ffffff' }; - windowClass.setSystemBarProperties(SystemBarProperties, (err, data) => { + windowClass.setSystemBarProperties(sysBarProps, (err, data) => { if (err.code) { console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err)); return; @@ -312,13 +300,10 @@ 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). > **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 { @@ -339,15 +324,12 @@ 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. 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. 5. Destroy the floating window. @@ -362,8 +344,8 @@ A floating window is created based on an existing task. It is always displayed i class MainAbility extends Ability { onWindowStageCreate(windowStage) { // 2. Create a floating window. - var windowClass = null; - window.create(this.context, "floatWindow", window.WindowType.TYPE_FlOAT, (err, data) => { + let windowClass = null; + window.create(this.context, "floatWindow", window.WindowType.TYPE_FLOAT, (err, data) => { if (err.code) { console.error('Failed to create the floatWindow. Cause: ' + JSON.stringify(err)); return; @@ -415,4 +397,4 @@ A floating window is created based on an existing task. It is always displayed i }); } }; - ``` \ No newline at end of file + ``` diff --git a/en/application-dev/windowmanager/system-window-stage.md b/en/application-dev/windowmanager/system-window-stage.md index 2bc119ddc5d8c63337b95ef72b25af2c93d7b281..d3870d665bb39be5c4b454f6fd5e10b189758ea0 100644 --- a/en/application-dev/windowmanager/system-window-stage.md +++ b/en/application-dev/windowmanager/system-window-stage.md @@ -11,7 +11,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).
-`ctx`: application context.
-`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).
-`ctx`: application context.
-`type`: window type. | | Window | resetSize(width: number, height: number, callback: AsyncCallback<void>): void | Changes the window size.| | Window | moveTo(x: number, y: number, callback: AsyncCallback<void>): void | Moves this window.| | Window | loadContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.| @@ -47,14 +47,12 @@ This section uses the volume bar as an example to describe the steps for system import ExtensionContext from '@ohos.application.ServiceExtensionAbility'; import window from '@ohos.window'; -var windowClass = null; - export default class ServiceExtensionAbility1 extends ExtensionContext { onCreate(want) { console.log("[Demo] MainAbility onCreate") globalThis.abilityWant = want; // 1. Create a volume bar window. - var windowClass = null; + let windowClass = null; window.create(this.context, "volume", window.WindowType.TYPE_VOLUME_OVERLAY, (err, data) => { if (err.code) { console.error('Failed to create the volume window. Cause:' + JSON.stringify(err));