diff --git a/en/application-dev/windowmanager/application-window-fa.md b/en/application-dev/windowmanager/application-window-fa.md index 8908173be47d0c3a8bcdb91c1fab623b4d153c9f..f9b2a9dc4cde23085ca3783298fb05763a864f6f 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 10ea5f3476de69cd7fe9efa72a0a6bdd6a6a75d5..6122e1ca7358a36be5935e98a337a8e61fd03e78 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 `setSystemPropertites` 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));