diff --git a/en/application-dev/reference/apis/js-apis-window.md b/en/application-dev/reference/apis/js-apis-window.md index 9d60fe2118d81d8b423a851b6dbf759b48a10864..523758e9caf5ffcba94df7e7efc6756bb5d1fa28 100644 --- a/en/application-dev/reference/apis/js-apis-window.md +++ b/en/application-dev/reference/apis/js-apis-window.md @@ -1,4 +1,4 @@ -# Window +# @ohos.window The **Window** module provides basic window management capabilities, such as creating and destroying the current window, setting properties for the current window, and managing and scheduling windows. @@ -46,17 +46,15 @@ Enumerates the window types. ## Configuration9+ -Defines the parameters used for creating a subwindow. - -An asynchronous callback is used when a system window is created in the case that [ServiceExtensionContext](js-apis-service-extension-context.md) is used as the context. +Defines the parameters for creating a subwindow or system window. **System capability**: SystemCapability.WindowManager.WindowManager.Core | Name| Type| Mandatory| Description| | ---------- | -------------------------- | -- | ----------------------------------- | -| name | string | Yes| Name of the subwindow. | -| windowType | [WindowType](#windowtype7) | Yes| Type of the subwindow. | -| ctx | BaseContext | No| Current application context.
For details about the context in the FA model, see [Context](js-apis-Context.md).
For details about the context in the stage model, see [Context](js-apis-service-extension-context.md).
If this parameter is not set, no context is used. | +| name | string | Yes| Name of the window. | +| windowType | [WindowType](#windowtype7) | Yes| Type of the window. | +| ctx | BaseContext | No| Current application context.
For details about the context in the FA model, see [Context](js-apis-inner-app-context.md).
For details about the context in the stage model, see [ServiceExtensionContext](js-apis-inner-application-serviceExtensionContext.md). If this parameter is not set, no context is used.
A system window is created when **Context** is [ServiceExtensionContext](js-apis-inner-application-serviceExtensionContext.md).| | displayId | number | No| ID of the current physical screen. If this parameter is not set, the default value **-1** is used.| | parentId | number | No| ID of the parent window. If this parameter is not set, the default value **-1** is used. | @@ -302,7 +300,7 @@ Describes the translation parameters. createWindow(config: Configuration, callback: AsyncCallback<Window>): void -Creates a subwindow. This API uses an asynchronous callback to return the result. +Creates a subwindow or system window. This API uses an asynchronous callback to return the result. **System capability**: SystemCapability.WindowManager.WindowManager.Core @@ -310,8 +308,8 @@ Creates a subwindow. This API uses an asynchronous callback to return the result | Name| Type| Mandatory| Description| | -------- | -------------------------------------- | -- | --------------------------------- | -| config | [Configuration](#configuration9) | Yes| Current application context. | -| callback | AsyncCallback<[Window](#window)> | Yes| Callback used to return the subwindow created.| +| config | [Configuration](#configuration9) | Yes| Parameters used for creating the window. | +| callback | AsyncCallback<[Window](#window)> | Yes| Callback used to return the window created.| **Error codes** @@ -346,7 +344,7 @@ try { createWindow(config: Configuration): Promise<Window> -Creates a subwindow. This API uses a promise to return the result. +Creates a subwindow or system window. This API uses a promise to return the result. **System capability**: SystemCapability.WindowManager.WindowManager.Core @@ -354,13 +352,13 @@ Creates a subwindow. This API uses a promise to return the result. | Name| Type| Mandatory| Description| | ------ | -------------------------------- | -- | ------------------ | -| config | [Configuration](#configuration9) | Yes| Current application context.| +| config | [Configuration](#configuration9) | Yes| Parameters used for creating the window.| **Return value** | Type| Description| | -------------------------------- | ------------------------------------ | -| Promise<[Window](#window)> | Promise used to return the subwindow created.| +| Promise<[Window](#window)> | Promise used to return the window created.| **Error codes** @@ -393,7 +391,7 @@ try { findWindow(name: string): Window -Finds a window based on the ID. +Finds a window based on the name. **System capability**: SystemCapability.WindowManager.WindowManager.Core @@ -432,7 +430,7 @@ Obtains the top window of the current application. This API uses an asynchronous | Name| Type| Mandatory| Description| | -------- | -------------------------------------- | -- | ---------------------------------------- | -| ctx | BaseContext | Yes| Current application context.
For details about the context in the FA model, see [Context](js-apis-Context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| +| ctx | BaseContext | Yes| Current application context.
For details about the context in the FA model, see [Context](js-apis-inner-app-context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| | callback | AsyncCallback<[Window](#window)> | Yes| Callback used to return the top window obtained.| **Error codes** @@ -474,7 +472,7 @@ Obtains the top window of the current application. This API uses a promise to re | Name| Type| Mandatory| Description| | ------ | ----------- | ---- | ------------------------------------------------------------ | -| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-Context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| +| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-inner-app-context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| **Return value** @@ -899,7 +897,7 @@ promise.then((data)=> { create(ctx: BaseContext, id: string, type: WindowType, callback: AsyncCallback<Window>): void -Creates a subwindow in the FA model or a system window in the stage model. This API uses an asynchronous callback to return the result. +Creates a subwindow (in API version 8) or a system window (from API version 9). This API uses an asynchronous callback to return the result. > **NOTE** > @@ -911,7 +909,7 @@ Creates a subwindow in the FA model or a system window in the stage model. This | Name | Type | Mandatory| Description | | -------- | -------------------------------------- | ---- | ------------------------------------------------------------ | -| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-Context.md).
For details about the context in the stage model, see [Context](js-apis-service-extension-context.md).| +| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-inner-app-context.md).
For details about the context in the stage model, see [ServiceExtensionContext](js-apis-inner-application-serviceExtensionContext.md).| | id | string | Yes | Window ID. | | type | [WindowType](#windowtype7) | Yes | Window type. | | callback | AsyncCallback<[Window](#window)> | Yes | Callback used to return the subwindow created. | @@ -935,7 +933,7 @@ window.create(this.context, 'alertWindow', window.WindowType.TYPE_SYSTEM_ALERT, create(ctx: BaseContext, id: string, type: WindowType): Promise<Window> -Creates a subwindow in the FA model or a system window in the stage model. This API uses a promise to return the result. +Creates a subwindow (in API version 8) or a system window (from API version 9). This API uses a promise to return the result. > **NOTE** > @@ -947,7 +945,7 @@ Creates a subwindow in the FA model or a system window in the stage model. This | Name| Type | Mandatory| Description | | ------ | ------------------------- | ---- | ------------------------------------------------------------ | -| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-Context.md).
For details about the context in the stage model, see [Context](js-apis-service-extension-context.md).| +| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-inner-app-context.md).
For details about the context in the stage model, see [ServiceExtensionContext](js-apis-inner-application-serviceExtensionContext.md).| | id | string | Yes | Window ID. | | type | [WindowType](#windowtype7) | Yes | Window type. | @@ -1123,7 +1121,7 @@ Obtains the top window of the current application. This API uses an asynchronous | Name | Type | Mandatory| Description | | -------- | -------------------------------------- | ---- | ------------------------------------------------------------ | -| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-Context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| +| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-inner-app-context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| | callback | AsyncCallback<[Window](#window)> | Yes | Callback used to return the top window obtained. | **Example** @@ -1156,7 +1154,7 @@ Obtains the top window of the current application. This API uses a promise to re | Name| Type | Mandatory| Description | | ------ | ----------- | ---- | ------------------------------------------------------------ | -| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-Context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| +| ctx | BaseContext | Yes | Current application context.
For details about the context in the FA model, see [Context](js-apis-inner-app-context.md).
For details about the context in the stage model, see [Context](js-apis-ability-context.md).| **Return value** @@ -1983,7 +1981,7 @@ Sets whether to display the status bar and navigation bar in this window. This A | Name| Type| Mandatory| Description| | -------- | ---------------------------- | -- | --------- | -| names | Array<'status'\|'navigation'> | Yes | Whether to display the status bar and navigation bar.
For example, to display the status bar and navigation bar, set this parameter to **['status', 'navigation']**. By default, they are not displayed.| +| names | Array<'status'\|'navigation'> | Yes| Whether to display the status bar and navigation bar.
For example, to display the status bar and navigation bar, set this parameter to **['status', 'navigation']**. By default, they are not displayed.| | callback | AsyncCallback<void> | Yes| Callback used to return the result.| **Error codes** @@ -3723,41 +3721,6 @@ try { ### snapshot9+ -snapshot(callback: AsyncCallback<image.PixelMap>): void - -Captures this window. This API uses an asynchronous callback to return the result. - -**System capability**: SystemCapability.WindowManager.WindowManager.Core - -**Parameters** - -| Name | Type | Mandatory | Description | -| -------- | ------------------------------------------------------------ | --------- | ----------------------------------- | -| callback | AsyncCallback<[image.PixelMap](js-apis-image.md#pixelmap7)> | Yes | Callback used to return the result. | - -**Error codes** - -For details about the error codes, see [Window Error Codes](../errorcodes/errorcode-window.md). - -| ID | Error Message | -| ------- | ------------------------------ | -| 1300002 | This window state is abnormal. | - -**Example** - -```js -windowClass.snapshot((err, pixelMap) => { - if (err.code) { - console.error('Failed to snapshot window. Cause:' + JSON.stringify(err)); - return; - } - console.info('Succeeded in snapshotting window. Pixel bytes number: ' + pixelMap.getPixelBytesNumber()); - pixelMap.release(); // Release the memory in time after the PixelMap is used. -}); -``` - -### snapshot9+ - snapshot(): Promise<image.PixelMap> Captures this window. This API uses a promise to return the result. @@ -4078,7 +4041,6 @@ try { } catch (exception) { console.error('Failed to set backdrop blur. Cause: ' + JSON.stringify(exception)); } - ``` ### setBackdropBlurStyle9+ @@ -6697,7 +6659,6 @@ controller.animationForShown = (context : window.TransitionContext) => { ); console.info('complete transition end'); }; - ``` ### animationForHidden9+ @@ -6744,4 +6705,5 @@ controller.animationForHidden = (context : window.TransitionContext) => { ) console.info('complete transition end'); }; -``` \ No newline at end of file +``` + diff --git a/en/application-dev/windowmanager/application-window-fa.md b/en/application-dev/windowmanager/application-window-fa.md index 4fb66f780f7b0065acd9cbc0a9c491ce5a4c2bdf..6b163f3b9f0be3fa050c9eae1ed35a68133d6cdb 100644 --- a/en/application-dev/windowmanager/application-window-fa.md +++ b/en/application-dev/windowmanager/application-window-fa.md @@ -20,21 +20,19 @@ The table below lists the common APIs used for application window development. F | Instance| API| Description| | -------- | -------- | -------- | -| Window static method| create(id: string, type: WindowType, callback: AsyncCallback<Window>): void | Creates a subwindow.
This API can be used only in the FA model.| -| Window static method| getTopWindow(callback: AsyncCallback<Window>): void | Obtains the top window of the current application.
This API can be used only in the FA model.| -| Window static method| find(id: string, callback: AsyncCallback<Window>): void | Finds a window based on the ID.| -| Window | loadContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.| -| Window | moveTo(x: number, y: number, callback: AsyncCallback<void>): void | Moves this window.| -| Window | setBackgroundColor(color: string, callback: AsyncCallback<void>): void | Sets the background color for this window.| -| Window | setBrightness(brightness: number, callback: AsyncCallback<void>): void | Sets the brightness for this window.| -| Window | resetSize(width: number, height: number, callback: AsyncCallback<void>): void | Changes the window size.| -| 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.
**systemBarProperties**: properties of the status bar and navigation bar.| -| Window | show(callback: AsyncCallback\): void | Shows this window.| +| Window static method| createWindow(config: Configuration, callback: AsyncCallback\): void | Creates a subwindow.
**config** specifies the parameters used for creating the window.| +| Window static method| findWindow(id: string, callback: AsyncCallback<Window>): void | Finds a window based on the ID.| +| Window | SetUIContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.| +| Window | moveWindowTo(x: number, y: number, callback: AsyncCallback<void>): void | Moves this window.| +| Window | setWindowBackgroundColor(color: string, callback: AsyncCallback<void>): void | Sets the background color for this window.| +| Window | setWindowBrightness(brightness: number, callback: AsyncCallback<void>): void | Sets the brightness for this window.| +| Window | resize(width: number, height: number, callback: AsyncCallback<void>): void | Changes the window size.| +| Window | setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback<void>): void | Sets whether to enable the full-screen mode for the window layout. | +| Window | setWindowSystemBarEnable(names: Array<'status'\|'navigation'>): Promise<void> | Sets whether to display the status bar and navigation bar in this window.| +| Window | setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback<void>): void | Sets the properties of the status bar and navigation bar in this window.
**systemBarProperties**: properties of the status bar and navigation bar.| +| Window | showWindow(callback: AsyncCallback\): 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.| +| Window | destroyWindow(callback: AsyncCallback<void>): void | Destroys this window.| ## Setting the Subwindow of an Application @@ -46,16 +44,16 @@ 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. - - ```js + - Call **window.createWindow** to create a subwindow. + - Call **window.findWindow** to find an available subwindow. + +```js import window from '@ohos.window'; let windowClass = null; // Method 1: Create a subwindow. - window.create("subWindow", window.WindowType.TYPE_APP, (err, data) => { + let config = {name: "subWindow", windowType: window.WindowType.TYPE_APP, ctx: this.context}; + window.createWindow(config, (err, data) => { if (err.code) { console.error('Failed to create the subWindow. Cause: ' + JSON.stringify(err)); return; @@ -63,17 +61,8 @@ You can create a subwindow, such as a dialog box, and set its properties. console.info('Succeeded in creating subWindow. Data: ' + JSON.stringify(data)); windowClass = data; }); - // Method 2: Obtain a subwindow. - window.getTopWindow((err, data) => { - if (err.code) { - console.error('Failed to get the subWindow. Cause: ' + JSON.stringify(err)); - return; - } - console.info('Succeeded in getting subWindow. Data: ' + JSON.stringify(data)); - windowClass = data; - }); - // Method 3: Find a subwindow. - window.find("subWindow", (err, data) => { + // Method 2: Find a subwindow. + window.findWindow("subWindow", (err, data) => { if (err.code) { console.error('Failed to find the subWindow. Cause: ' + JSON.stringify(err)); return; @@ -81,15 +70,15 @@ You can create a subwindow, such as a dialog box, and set its properties. console.info('Succeeded in finding subWindow. Data: ' + JSON.stringify(data)); windowClass = data; }); - ``` - +``` + 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 // Move the subwindow. - windowClass.moveTo(300, 300, (err) => { + windowClass.moveWindowTo(300, 300, (err) => { if (err.code) { console.error('Failed to move the window. Cause:' + JSON.stringify(err)); return; @@ -97,7 +86,7 @@ You can create a subwindow, such as a dialog box, and set its properties. console.info('Succeeded in moving the window.'); }); // Change the size of the subwindow. - windowClass.resetSize(500, 1000, (err) => { + windowClass.resize(500, 500, (err) => { if (err.code) { console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); return; @@ -108,18 +97,18 @@ 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. + Call **SetUIContent** and **showWindow** to load and display the content in the subwindow. ```js // Load the page content to the subwindow. - windowClass.loadContent("pages/page2", (err) => { + windowClass.SetUIContent("pages/page2", (err) => { if (err.code) { console.error('Failed to load the content. Cause: ' + JSON.stringify(err)); return; } console.info('Succeeded in loading the content.'); // Show the subwindow. - windowClass.show((err) => { + windowClass.showWindow((err) => { if (err.code) { console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); return; @@ -131,11 +120,11 @@ 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. + When the subwindow is no longer needed, you can call **destroyWindow** to destroy it. ```js // Call destroy() to destroy the subwindow when it is no longer needed. - windowClass.destroy((err) => { + windowClass.destroyWindow((err) => { if (err.code) { console.error('Failed to destroy the subwindow. Cause:' + JSON.stringify(err)); return; @@ -158,14 +147,14 @@ 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.getLastWindow** to obtain the main window. ```js import window from '@ohos.window'; let mainWindowClass = null; // Obtain the main window. - window.getTopWindow((err, data) => { + window.getLastWindow((err, data) => { if (err.code) { console.error('Failed to get the subWindow. Cause: ' + JSON.stringify(err)); return; @@ -177,32 +166,23 @@ 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 **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 **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. - let isFullScreen = true; - mainWindowClass.setFullScreen(isFullScreen, (err) => { - if (err.code) { - console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err)); - return; - } - console.info('Succeeded in enabling the full-screen mode.'); - }); - // Use method 2 to implement the immersive effect. let names = []; - mainWindowClass.setSystemBarEnable(names, (err) => { + mainWindowClass.setWindowSystemBarEnable(names, (err) => { if (err.code) { console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in setting the system bar to be visible.'); }); - // Use method 3 to implement the immersive effect. + // Use method 2 to implement the immersive effect. let isLayoutFullScreen = true; - mainWindowClass.setLayoutFullScreen(isLayoutFullScreen, (err) => { + mainWindowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err) => { if (err.code) { console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); return; @@ -216,7 +196,7 @@ To create a better video watching and gaming experience, you can use the immersi statusBarContentColor: '#ffffff', navigationBarContentColor: '#ffffff' }; - mainWindowClass.setSystemBarProperties(sysBarProps, (err) => { + mainWindowClass.setWindowSystemBarProperties(sysBarProps, (err) => { if (err.code) { console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err)); return; @@ -227,18 +207,18 @@ 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. + Call **SetUIContent** and **showWindow** to load and display the content in the immersive window. ```js // Load the page content to the immersive window. - mainWindowClass.loadContent("pages/page3", (err) => { + mainWindowClass.SetUIContent("pages/page3", (err) => { if (err.code) { console.error('Failed to load the content. Cause: ' + JSON.stringify(err)); return; } console.info('Succeeded in loading the content.'); // Show the immersive window. - mainWindowClass.show((err) => { + mainWindowClass.showWindow((err) => { if (err.code) { console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); return; diff --git a/en/application-dev/windowmanager/application-window-stage.md b/en/application-dev/windowmanager/application-window-stage.md index 6ab30dbf328b23e983981d7f67f4f8ca0b013835..3b05b3049ef9b23b3157d469fbe335032ebc6511 100644 --- a/en/application-dev/windowmanager/application-window-stage.md +++ b/en/application-dev/windowmanager/application-window-stage.md @@ -32,20 +32,19 @@ The table below lists the common APIs used for application window development. F | WindowStage | getMainWindow(callback: AsyncCallback<Window>): void | Obtains the main window of this window stage.
This API can be used only in the stage model.| | WindowStage | loadContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to the main window in this window stage.
This API can be used only in the stage model.| | WindowStage | createSubWindow(name: string, callback: AsyncCallback<Window>): void | Creates a subwindow.
This API can be used only in the stage model.| -| Window static method| create(ctx: Context, id: string, type: WindowType, callback: AsyncCallback<Window>): void | Creates a subwindow.
- **ctx**: application context.
- **type**: window type.| -| Window | loadContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.| -| Window | setBackgroundColor(color: string, callback: AsyncCallback<void>): void | Sets the background color for this window.| -| Window | setBrightness(brightness: number, callback: AsyncCallback<void>): void | Sets the brightness for this window.| -| Window | setTouchable(isTouchable: boolean, callback: AsyncCallback<void>): void | Sets whether this window is touchable.| -| Window | moveTo(x: number, y: number, callback: AsyncCallback<void>): void | Moves this window.| -| Window | resetSize(width: number, height: number, callback: AsyncCallback<void>): void | Changes the window size.| -| 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.
**systemBarProperties**: properties of the status bar and navigation bar.| -| Window | show(callback: AsyncCallback\): void | Shows this window.| +| Window static method| createWindow(config: Configuration, callback: AsyncCallback\): void | Creates a system window.
**config** specifies the parameters used for creating the window.| +| Window | setUIContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.| +| Window | setWindowBackgroundColor(color: string, callback: AsyncCallback<void>): void | Sets the background color for this window.| +| Window | setWindowBrightness(brightness: number, callback: AsyncCallback<void>): void | Sets the brightness for this window.| +| Window | setWindowTouchable(isTouchable: boolean, callback: AsyncCallback<void>): void | Sets whether this window is touchable.| +| Window | moveWindowTo(x: number, y: number, callback: AsyncCallback<void>): void | Moves this window.| +| Window | resize(width: number, height: number, callback: AsyncCallback<void>): void | Changes the window size.| +| Window | setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback<void>): void | Sets whether to enable the full-screen mode for the window layout. | +| Window | setWindowSystemBarEnable(names: Array<'status'\|'navigation'>): Promise<void> | Sets whether to display the status bar and navigation bar in this window.| +| Window | setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback<void>): void | Sets the properties of the status bar and navigation bar in this window.
**systemBarProperties**: properties of the status bar and navigation bar.| +| Window | showWindow(callback: AsyncCallback\): 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.| +| Window | destroyWindow(callback: AsyncCallback<void>): void | Destroys this window.| ## Setting the Main Window of an Application @@ -56,16 +55,12 @@ 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 @@ -84,7 +79,7 @@ class MainAbility extends Ability { console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); // 2. Set the touchable property of the main window. let isTouchable = true; - windowClass.setTouchable(isTouchable, (err) => { + windowClass.setWindowTouchable(isTouchable, (err) => { if (err.code) { console.error('Failed to set the window to be touchable. Cause:' + JSON.stringify(err)); return; @@ -113,22 +108,17 @@ You can create an application subwindow, such as a dialog box, and set its prope ### How to Develop 1. Create a subwindow. - - Call **createSubWindow** to create 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. + Call **setUIContent** and **showWindow** 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. - + When the subwindow is no longer needed, you can call **destroyWindow** to destroy it. + ```ts import Ability from '@ohos.application.Ability' @@ -145,14 +135,14 @@ 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)); // 2. Set the position, size, and other properties of the subwindow. - sub_windowClass.moveTo(300, 300, (err) => { + sub_windowClass.moveWindowTo(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.'); }); - sub_windowClass.resetSize(500, 1000, (err) => { + sub_windowClass.resize(500, 500, (err) => { if (err.code) { console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); return; @@ -160,14 +150,14 @@ You can create an application subwindow, such as a dialog box, and set its prope console.info('Succeeded in changing the window size.'); }); // 3. Load the page content to the subwindow. - sub_windowClass.loadContent("pages/page3", (err) => { + sub_windowClass.setUIContent("pages/page3", (err) => { if (err.code) { console.error('Failed to load the content. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in loading the content.'); // 3. Show the subwindow. - sub_windowClass.show((err) => { + sub_windowClass.showWindow((err) => { if (err.code) { console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); return; @@ -180,7 +170,7 @@ You can create an application subwindow, such as a dialog box, and set its prope destroySubWindow() { // 4. Destroy the subwindow when it is no longer needed (depending on the service logic). - sub_windowClass.destroy((err) => { + sub_windowClass.destroyWindow((err) => { if (err.code) { console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err)); return; @@ -211,19 +201,15 @@ 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: - - 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 **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. 3. Load content for the immersive window and show it. - Call **loadContent** to load the content to the immersive window. - + ```ts import Ability from '@ohos.application.Ability' @@ -240,26 +226,17 @@ 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. - let isFullScreen = true; - windowClass.setFullScreen(isFullScreen, (err) => { - if (err.code) { - console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err)); - return; - } - console.info('Succeeded in enabling the full-screen mode.'); - }); - // 2. Use method 2 to implement the immersive effect. let names = []; - windowClass.setSystemBarEnable(names, (err) => { + windowClass.setWindowSystemBarEnable(names, (err) => { if (err.code) { console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in setting the system bar to be visible.'); }); - // 2. Use method 3 to implement the immersive effect. + // 2. Use method 2 to implement the immersive effect. let isLayoutFullScreen = true; - windowClass.setLayoutFullScreen(isLayoutFullScreen, (err) => { + windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err) => { if (err.code) { console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); return; @@ -273,7 +250,7 @@ To create a better video watching and gaming experience, you can use the immersi statusBarContentColor: '#ffffff', navigationBarContentColor: '#ffffff' }; - windowClass.setSystemBarProperties(sysBarProps, (err) => { + windowClass.setWindowSystemBarProperties(sysBarProps, (err) => { if (err.code) { console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err)); return; @@ -302,13 +279,12 @@ 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). + 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/background-task-overview.md). - + ```json { "module": { @@ -324,24 +300,21 @@ 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. + Call **window.createWindow** 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. + Call **setUIContent** and **showWindow** to load and display the content in the floating window. 5. Destroy the floating window. - When the floating window is no longer needed, you can call **destroy** to destroy it. + When the floating window is no longer needed, you can call **destroyWindow** to destroy it. ```ts import Ability from '@ohos.application.Ability' @@ -352,7 +325,8 @@ A floating window is created based on an existing task. It is always displayed i onWindowStageCreate(windowStage) { // 2. Create a floating window. let windowClass = null; - window.create(this.context, "floatWindow", window.WindowType.TYPE_FLOAT, (err, data) => { + let config = {name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: this.context}; + window.createWindow(config, (err, data) => { if (err.code) { console.error('Failed to create the floatWindow. Cause: ' + JSON.stringify(err)); return; @@ -360,14 +334,14 @@ 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)); windowClass = data; // 3. Set the position, size, and properties of the floating window. - windowClass.moveTo(300, 300, (err) => { + windowClass.moveWindowTo(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.'); }); - windowClass.resetSize(500, 1000, (err) => { + windowClass.resize(500, 500, (err) => { if (err.code) { console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); return; @@ -375,14 +349,14 @@ A floating window is created based on an existing task. It is always displayed i console.info('Succeeded in changing the window size.'); }); // 4. Load the page content to the floating window. - windowClass.loadContent("pages/page4", (err) => { + windowClass.setUIContent("pages/page4", (err) => { if (err.code) { console.error('Failed to load the content. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in loading the content.'); // 4. Show the floating window. - windowClass.show((err) => { + windowClass.showWindow((err) => { if (err.code) { console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); return; @@ -391,7 +365,7 @@ A floating window is created based on an existing task. It is always displayed i }); }); // 5. Destroy the floating window when it is no longer needed (depending on the service logic). - windowClass.destroy((err) => { + windowClass.destroyWindow((err) => { if (err.code) { console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err)); return; @@ -401,4 +375,6 @@ A floating window is created based on an existing task. It is always displayed i }); } }; - ``` \ No newline at end of file + ``` + + \ 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 5df5ada6bf29585371882e06c3394293dbd5b05c..fd4cef1f3bf3f7e918b0cf42a93fad741a81dc91 100644 --- a/en/application-dev/windowmanager/system-window-stage.md +++ b/en/application-dev/windowmanager/system-window-stage.md @@ -15,14 +15,14 @@ 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 | 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.| -| Window | show(callback: AsyncCallback\): void | Shows this window.| +| Window static method| createWindow(config: Configuration, callback: AsyncCallback\): void | Creates a subwindow or system window.
**config** specifies the parameters used for creating the window.| +| Window | resize(width: number, height: number, callback: AsyncCallback<void>): void | Changes the window size.| +| Window | moveWindowTo(x: number, y: number, callback: AsyncCallback<void>): void | Moves this window.| +| Window | SetUIContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.| +| Window | showWindow(callback: AsyncCallback\): void | Shows this window.| | Window | on(type: 'touchOutside', callback: Callback<void>): void | Enables listening for click events outside this window.| | Window | hide (callback: AsyncCallback\): void | Hides this window. This is a system API.| -| Window | destroy(callback: AsyncCallback<void>): void | Destroys this window.| +| Window | destroyWindow(callback: AsyncCallback<void>): void | Destroys this window.| ## How to Develop @@ -33,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-inner-application-serviceExtensionContext.md), call **window.createWindow** to create a system window of the volume bar type. 2. Set the properties of the system window. @@ -41,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 **SetUIContent** and **showWindow** 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 **destroyWindow** to hide or destroy it. ```ts import ExtensionContext from '@ohos.application.ServiceExtensionAbility'; @@ -57,7 +57,8 @@ export default class ServiceExtensionAbility1 extends ExtensionContext { globalThis.abilityWant = want; // 1. Create a volume bar window. let windowClass = null; - window.create(this.context, "volume", window.WindowType.TYPE_VOLUME_OVERLAY, (err, data) => { + let config = {name: "volume", windowType: window.WindowType.TYPE_VOLUME_OVERLAY, ctx: this.context}; + window.createWindow(config, (err, data) => { if (err.code) { console.error('Failed to create the volume window. Cause:' + JSON.stringify(err)); return; @@ -65,14 +66,14 @@ export default class ServiceExtensionAbility1 extends ExtensionContext { console.info('Succeeded in creating the volume window.') windowClass = data; // 2. Change the size and position of the volume bar window, or set its properties such as the background color and brightness. - windowClass.moveTo(300, 300, (err) => { + windowClass.moveWindowTo(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.'); }); - windowClass.resetSize(500, 1000, (err) => { + windowClass.resize(500, 500, (err) => { if (err.code) { console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); return; @@ -80,14 +81,14 @@ export default class ServiceExtensionAbility1 extends ExtensionContext { console.info('Succeeded in changing the window size.'); }); // 3. Load the page content to the volume bar window. - windowClass.loadContent("pages/page_volume", (err) => { + windowClass.setUIContent("pages/page_volume", (err) => { if (err.code) { console.error('Failed to load the content. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in loading the content.'); // 3. Show the volume bar window. - windowClass.show((err) => { + windowClass.showWindow((err) => { if (err.code) { console.error('Failed to show the window. Cause:' + JSON.stringify(err)); return;