1# @ohos.arkui.UIContext (UIContext) 2 3In the stage model, a window stage or window can use the **loadContent** API to load pages, create a UI instance, and render page content to the associated window. Naturally, UI instances and windows are associated on a one-by-one basis. Some global UI APIs are executed in the context of certain UI instances. When calling these APIs, you must identify the UI context, and consequently UI instance, by tracing the call chain. If these APIs are called on a non-UI page or in some asynchronous callback, the current UI context may fail to be identified, resulting in API execution errors. 4 5**@ohos.window** adds the [getUIContext](./js-apis-window.md#getuicontext10) API in API version 10 for obtaining the **UIContext** object of a UI instance. The API provided by the **UIContext** object can be directly applied to the corresponding UI instance. 6 7> **NOTE** 8> 9> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version. 10> 11> You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer. 12 13## UIContext 14 15In the following API examples, you must first use [getUIContext()](./js-apis-window.md#getuicontext10) in **@ohos.window** to obtain a **UIContext** instance, and then call the APIs using the obtained instance. In this document, the **UIContext** instance is represented by **uiContext**. 16 17### getFont 18 19getFont(): Font 20 21Obtains a **Font** object. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Return value** 26 27| Type | Description | 28| ------------- | ----------- | 29| [Font](#font) | **Font** object.| 30 31**Example** 32 33```ts 34uiContext.getFont(); 35``` 36### getComponentUtils 37 38getComponentUtils(): ComponentUtils 39 40Obtains the **ComponentUtils** object. 41 42**System capability**: SystemCapability.ArkUI.ArkUI.Full 43 44**Return value** 45 46| Type | Description | 47| --------------------------------- | --------------------- | 48| [ComponentUtils](#componentutils) | **ComponentUtils** object.| 49 50**Example** 51 52```ts 53uiContext.getComponentUtils(); 54``` 55 56### getUIInspector 57 58getUIInspector(): UIInspector 59 60Obtains the **UIInspector** object. 61 62**System capability**: SystemCapability.ArkUI.ArkUI.Full 63 64**Return value** 65 66| Type | Description | 67| --------------------------- | ------------------ | 68| [UIInspector](#uiinspector) | **UIInspector** object.| 69 70**Example** 71 72```ts 73uiContext.getUIInspector(); 74``` 75 76### getMediaQuery 77 78getMediaQuery(): MediaQuery 79 80Obtains a **MediaQuery** object. 81 82**System capability**: SystemCapability.ArkUI.ArkUI.Full 83 84**Return value** 85 86| Type | Description | 87| ------------------------- | ----------------- | 88| [MediaQuery](#mediaquery) | **MediaQuery** object.| 89 90**Example** 91 92```ts 93uiContext.getMediaQuery(); 94``` 95 96### getRouter 97 98getRouter(): Router 99 100Obtains a **Router** object. 101 102**System capability**: SystemCapability.ArkUI.ArkUI.Full 103 104**Return value** 105 106| Type | Description | 107| ----------------- | ------------- | 108| [Router](#router) | **Router** object.| 109 110**Example** 111 112```ts 113uiContext.getRouter(); 114``` 115 116### getPromptAction 117 118getPromptAction(): PromptAction 119 120Obtains a **PromptAction** object. 121 122**System capability**: SystemCapability.ArkUI.ArkUI.Full 123 124**Return value** 125 126| Type | Description | 127| ----------------------------- | ------------------- | 128| [PromptAction](#promptaction) | **PromptAction** object.| 129 130**Example** 131 132```ts 133uiContext.getPromptAction(); 134``` 135 136### animateTo 137 138animateTo(value: AnimateParam, event: () => void): void 139 140Applies a transition animation for state changes. 141 142**System capability**: SystemCapability.ArkUI.ArkUI.Full 143 144Since API version 9, this API is supported in ArkTS widgets. 145 146**Parameters** 147 148| Name | Type | Mandatory | Description | 149| ----- | ---------------------------------------- | ---- | ------------------------------------- | 150| value | [AnimateParam](../arkui-ts/ts-explicit-animation.md#animateparam) | Yes | Animation settings. | 151| event | () => void | Yes | Closure function that displays the dynamic effect. The system automatically inserts the transition animation if the status changes in the closure function.| 152 153**Example** 154 155```ts 156// xxx.ets 157@Entry 158@Component 159struct AnimateToExample { 160 @State widthSize: number = 250 161 @State heightSize: number = 100 162 @State rotateAngle: number = 0 163 private flag: boolean = true 164 165 build() { 166 Column() { 167 Button('change size') 168 .width(this.widthSize) 169 .height(this.heightSize) 170 .margin(30) 171 .onClick(() => { 172 if (this.flag) { 173 uiContext.animateTo({ 174 duration: 2000, 175 curve: Curve.EaseOut, 176 iterations: 3, 177 playMode: PlayMode.Normal, 178 onFinish: () => { 179 console.info('play end') 180 } 181 }, () => { 182 this.widthSize = 150 183 this.heightSize = 60 184 }) 185 } else { 186 uiContext.animateTo({}, () => { 187 this.widthSize = 250 188 this.heightSize = 100 189 }) 190 } 191 this.flag = !this.flag 192 }) 193 Button('change rotate angle') 194 .margin(50) 195 .rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }) 196 .onClick(() => { 197 uiContext.animateTo({ 198 duration: 1200, 199 curve: Curve.Friction, 200 delay: 500, 201 iterations: -1, // The value -1 indicates that the animation is played for an unlimited number of times. 202 playMode: PlayMode.Alternate, 203 onFinish: () => { 204 console.info('play end') 205 } 206 }, () => { 207 this.rotateAngle = 90 208 }) 209 }) 210 }.width('100%').margin({ top: 5 }) 211 } 212} 213``` 214 215### showAlertDialog 216 217showAlertDialog(options: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions): void 218 219Shows an alert dialog box. 220 221**System capability**: SystemCapability.ArkUI.ArkUI.Full 222 223**Parameters** 224 225| Name | Type | Mandatory | Description | 226| ------- | ---------------------------------------- | ---- | ------------------- | 227| options | [AlertDialogParamWithConfirm](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithbuttons) \| [AlertDialogParamWithOptions](../arkui-ts/ts-methods-alert-dialog-box.md#alertdialogparamwithoptions10) | Yes | Defines and displays the **\<AlertDialog>** component.| 228 229 230**Example** 231 232```ts 233uiContext.showAlertDialog( 234 { 235 title: 'title', 236 message: 'text', 237 autoCancel: true, 238 alignment: DialogAlignment.Bottom, 239 offset: { dx: 0, dy: -20 }, 240 gridCount: 3, 241 confirm: { 242 value: 'button', 243 action: () => { 244 console.info('Button-clicking callback') 245 } 246 }, 247 cancel: () => { 248 console.info('Closed callbacks') 249 } 250 } 251) 252``` 253 254### showActionSheet 255 256showActionSheet(value: ActionSheetOptions): void 257 258Defines and shows the action sheet. 259 260**System capability**: SystemCapability.ArkUI.ArkUI.Full 261 262**ActionSheetOptions parameters** 263 264| Name | Type | Mandatory | Description | 265| ---------- | ---------------------------------------- | ---- | ---------------------------------------- | 266| title | [Resource](../arkui-ts/ts-types.md#resource) \| string | Yes | Title of the dialog box. | 267| message | [Resource](../arkui-ts/ts-types.md#resource) \| string | Yes | Content of the dialog box. | 268| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true** | 269| confirm | {<br>value: [ResourceStr](../arkui-ts/ts-types.md#resourcestr),<br>action: () => void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.| 270| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | 271| alignment | [DialogAlignment](../arkui-ts/ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**| 272| offset | {<br>dx: [Length](../arkui-ts/ts-types.md#length),<br>dy: [Length](../arkui-ts/ts-types.md#length)<br>} | No | Offset of the dialog box relative to the alignment position.{<br>dx: 0,<br>dy: 0<br>} | 273| sheets | Array<SheetInfo> | Yes | Options in the dialog box. Each option supports the image, text, and callback. | 274 275**SheetInfo parameters** 276 277| Name | Type | Mandatory | Description | 278| ------ | ---------------------------------------- | ---- | -------------- | 279| title | [ResourceStr](../arkui-ts/ts-types.md#resourcestr) | Yes | Text of the option. | 280| icon | [ResourceStr](../arkui-ts/ts-types.md#resourcestr) | No | Sheet icon. By default, no icon is displayed.| 281| action | ()=>void | Yes | Callback when the sheet is selected. | 282 283**Example** 284 285```ts 286uiContext.showActionSheet({ 287 title: 'ActionSheet title', 288 message: 'message', 289 autoCancel: true, 290 confirm: { 291 value: 'Confirm button', 292 action: () => { 293 console.log('Get Alert Dialog handled') 294 } 295 }, 296 cancel: () => { 297 console.log('actionSheet canceled') 298 }, 299 alignment: DialogAlignment.Bottom, 300 offset: { dx: 0, dy: -10 }, 301 sheets: [ 302 { 303 title: 'apples', 304 action: () => { 305 console.log('apples') 306 } 307 }, 308 { 309 title: 'bananas', 310 action: () => { 311 console.log('bananas') 312 } 313 }, 314 { 315 title: 'pears', 316 action: () => { 317 console.log('pears') 318 } 319 } 320 ] 321}) 322``` 323 324### showDatePickerDialog 325 326showDatePickerDialog(options: DatePickerDialogOptions): void 327 328Shows a date picker dialog box. 329 330**System capability**: SystemCapability.ArkUI.ArkUI.Full 331 332**DatePickerDialogOptions parameters** 333 334| Name | Type | Mandatory | Description | 335| ------------------ | ---------------------------------------- | ---- | -------------------------------------- | 336| start | Date | No | Start date of the picker.<br>Default value: **Date('1970-1-1')** | 337| end | Date | No | End date of the picker.<br>Default value: **Date('2100-12-31')**| 338| selected | Date | No | Selected date.<br>Default value: current system date | 339| lunar | boolean | No | Whether to display the lunar calendar.<br>Default value: **false** | 340| showTime | boolean | No | Whether to display the time item.<br>Default value: **false** | 341| useMilitaryTime | boolean | No | Whether to display time in 24-hour format.<br>Default value: **false** | 342| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width for the top and bottom items. | 343| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width of all items except the top, bottom, and selected items. | 344| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width of the selected item. | 345| onAccept | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No | Callback invoked when the OK button in the dialog box is clicked. | 346| onCancel | () => void | No | Callback invoked when the Cancel button in the dialog box is clicked. | 347| onChange | (value: [DatePickerResult](../arkui-ts/ts-basic-components-datepicker.md#datepickerresult)) => void | No | Callback invoked when the selected item in the picker changes. | 348 349**Example** 350 351```ts 352let selectedDate: Date = new Date("2010-1-1") 353uiContext.showDatePickerDialog({ 354 start: new Date("2000-1-1"), 355 end: new Date("2100-12-31"), 356 selected: selectedDate, 357 onAccept: (value: DatePickerResult) => { 358 // Use the setFullYear method to set the date when the OK button is touched. In this way, when the date picker dialog box is displayed again, the selected date is the date last confirmed. 359 selectedDate.setFullYear(Number(value.year), Number(value.month), Number(value.day)) 360 console.info("DatePickerDialog:onAccept()" + JSON.stringify(value)) 361 }, 362 onCancel: () => { 363 console.info("DatePickerDialog:onCancel()") 364 }, 365 onChange: (value: DatePickerResult) => { 366 console.info("DatePickerDialog:onChange()" + JSON.stringify(value)) 367 } 368}) 369``` 370 371### showTimePickerDialog 372 373showTimePickerDialog(options: TimePickerDialogOptions): void 374 375Shows a time picker dialog box. 376 377**System capability**: SystemCapability.ArkUI.ArkUI.Full 378 379**TimePickerDialogOptions parameters** 380 381| Name | Type | Mandatory | Description | 382| ------------------ | ---------------------------------------- | ---- | ------------------------------------ | 383| selected | Date | No | Selected time.<br>Default value: current system time | 384| useMilitaryTime | boolean | No | Whether to display time in 24-hour format. The 12-hour format is used by default.<br>Default value: **false**| 385| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width for the top and bottom items. | 386| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width of all items except the top, bottom, and selected items. | 387| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width of the selected item. | 388| onAccept | (value: [TimePickerResult](../arkui-ts/ts-basic-components-timepicker.md#timepickerresult)) => void | No | Callback invoked when the OK button in the dialog box is clicked. | 389| onCancel | () => void | No | Callback invoked when the Cancel button in the dialog box is clicked. | 390| onChange | (value: [TimePickerResult](../arkui-ts/ts-basic-components-timepicker.md#timepickerresult)) => void | No | Callback invoked when the selected time changes. | 391 392**Example** 393 394```ts 395class sethours{ 396 selectTime: Date = new Date('2020-12-25T08:30:00') 397 hours(h:number,m:number){ 398 this.selectTime.setHours(h,m) 399 } 400} 401uiContext.showTimePickerDialog({ 402 selected: this.selectTime, 403 onAccept: (value: TimePickerResult) => { 404 // Set selectTime to the time when the OK button is clicked. In this way, when the dialog box is displayed again, the selected time is the time when the operation was confirmed last time. 405 let time = new sethours() 406 if(value.hour&&value.minute){ 407 time.hours(value.hour, value.minute) 408 } 409 console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) 410 }, 411 onCancel: () => { 412 console.info("TimePickerDialog:onCancel()") 413 }, 414 onChange: (value: TimePickerResult) => { 415 console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) 416 } 417}) 418``` 419 420### showTextPickerDialog 421 422showTextPickerDialog(options: TextPickerDialogOptions): void 423 424Shows a text picker in the given settings. 425 426**System capability**: SystemCapability.ArkUI.ArkUI.Full 427 428**TextPickerDialogOptions parameters** 429 430| Name | Type | Mandatory | Description | 431| ----------------------- | ---------------------------------------- | ---- | ---------------------------------------- | 432| range | string[] \| [Resource](../arkui-ts/ts-types.md#resource)\|[TextPickerRangeContent](../arkui-ts/ts-basic-components-textpicker.md#textpickerrangecontent10)[] | Yes | Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. | 433| selected | number | No | Index of the selected item.<br>Default value: **0** | 434| value | string | No | Text of the selected item. This parameter does not take effect when the **selected** parameter is set. If the value is not within the range, the first item in the range is used instead.| 435| defaultPickerItemHeight | number \| string | No | Height of the picker item. | 436| disappearTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width for the top and bottom items. | 437| textStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width of all items except the top, bottom, and selected items. | 438| selectedTextStyle | [PickerTextStyle](../arkui-ts/ts-basic-components-datepicker.md#pickertextstyle10) | No | Font color, font size, and font width of the selected item. | 439| onAccept | (value: [TextPickerResult](../arkui-ts/ts-methods-textpicker-dialog.md#textpickerresult)) => void | No | Callback invoked when the OK button in the dialog box is clicked. | 440| onCancel | () => void | No | Callback invoked when the Cancel button in the dialog box is clicked. | 441| onChange | (value: [TextPickerResult](../arkui-ts/ts-methods-textpicker-dialog.md#textpickerresult)) => void | No | Callback invoked when the selected item changes. | 442 443**Example** 444 445```ts 446{ class setvalue{ 447 select: number = 2 448 set(val:number){ 449 this.select = val 450 } 451} 452class setvaluearr{ 453 select: number[] = [] 454 set(val:number[]){ 455 this.select = val 456 } 457} 458let fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 459uiContext.showTextPickerDialog({ 460 range: this.fruits, 461 selected: this.select, 462 onAccept: (value: TextPickerResult) => { 463 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 464 let setv = new setvalue() 465 let setvarr = new setvaluearr() 466 if(value.index){ 467 value.index instanceof Array?setvarr.set(value.index) : setv.set(value.index) 468 } 469 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 470 }, 471 onCancel: () => { 472 console.info("TextPickerDialog:onCancel()") 473 }, 474 onChange: (value: TextPickerResult) => { 475 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) 476 } 477}) 478``` 479 480### createAnimator 481 482createAnimator(options: AnimatorOptions): AnimatorResult 483 484Creates an **Animator** object. 485 486**System capability**: SystemCapability.ArkUI.ArkUI.Full 487 488**Parameters** 489 490| Name | Type | Mandatory | Description | 491| ------- | ---------------------------------------- | ---- | ------- | 492| options | [AnimatorOptions](./js-apis-animator.md#animatoroptions) | Yes | Animator options.| 493 494**Return value** 495 496| Type | Description | 497| ---------------------------------------- | ------------- | 498| [AnimatorResult](./js-apis-animator.md#animatorresult) | Animator result.| 499 500**Example** 501 502```ts 503import { AnimatorOptions } from '@ohos.animator'; 504let options:AnimatorOptions = { 505 duration: 1500, 506 easing: "friction", 507 delay: 0, 508 fill: "forwards", 509 direction: "normal", 510 iterations: 3, 511 begin: 200.0, 512 end: 400.0 513}; 514uiContext.createAnimator(options); 515``` 516 517### runScopedTask 518 519runScopedTask(callback: () => void): void 520 521Executes the specified callback in this UI context. 522 523**System capability**: SystemCapability.ArkUI.ArkUI.Full 524 525**Parameters** 526 527| Name | Type | Mandatory | Description | 528| -------- | ---------- | ---- | ---- | 529| callback | () => void | Yes | Callback used to return the result.| 530 531**Example** 532 533```ts 534uiContext.runScopedTask( 535 () => { 536 console.log('Succeeded in runScopedTask'); 537 } 538); 539``` 540 541## Font 542 543In the following API examples, you must first use [getFont()](#getfont) in **UIContext** to obtain a **Font** instance, and then call the APIs using the obtained instance. 544 545### registerFont 546 547registerFont(options: font.FontOptions): void 548 549Registers a custom font with the font manager. 550 551**System capability**: SystemCapability.ArkUI.ArkUI.Full 552 553**Parameters** 554 555| Name | Type | Mandatory | Description | 556| ------- | ---------------------------------------- | ---- | ----------- | 557| options | [font.FontOptions](js-apis-font.md#fontoptions) | Yes | Information about the custom font to register.| 558 559**Example** 560 561```ts 562import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 563let font:Font = uiContext.getFont(); 564font.registerFont({ 565 familyName: 'medium', 566 familySrc: '/font/medium.ttf' 567}); 568``` 569### getStstemFontList 570 571getSystemFontList(): Array\<string> 572 573Obtains the list of supported fonts. 574 575**System capability**: SystemCapability.ArkUI.ArkUI.Full 576 577**Return value** 578 579| Type | Description | 580| -------------- | --------- | 581| Array\<string> | List of supported fonts.| 582 583**Example** 584 585```ts 586import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 587let font:Font|undefined = uiContext.getFont(); 588if(font){ 589 font.getSystemFontList() 590} 591``` 592 593### getFontByName 594 595getFontByName(fontName: string): font.FontInfo 596 597Obtains information about a system font based on the font name. 598 599**System capability**: SystemCapability.ArkUI.ArkUI.Full 600 601**Parameters** 602 603| Name | Type | Mandatory | Description | 604| -------- | ------ | ---- | ------- | 605| fontName | string | Yes | System font name.| 606 607**Return value** 608 609| Type | Description | 610| ------------------------------------ | ------- | 611| [FontInfo](js-apis-font.md#fontinfo10) | Information about the system font.| 612 613**Example** 614 615```ts 616import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 617let font:Font|undefined = uiContext.getFont(); 618if(font){ 619 font.getFontByName('Sans Italic') 620} 621``` 622 623## ComponentUtils 624 625In the following API examples, you must first use [getComponentUtils()](#getcomponentutils) in **UIContext** to obtain a **ComponentUtils** instance, and then call the APIs using the obtained instance. 626 627### getRectangleById 628 629getRectangleById(id: string): componentUtils.ComponentInfo 630 631Obtains the size, position, translation, scaling, rotation, and affine matrix information of the specified component. 632 633**System capability**: SystemCapability.ArkUI.ArkUI.Full 634 635**Parameters** 636 637| Name | Type | Mandatory | Description | 638| ---- | ------ | ---- | --------- | 639| id | string | Yes | Unique component ID.| 640 641**Return value** 642 643| Type | Description | 644| ---------------------------------------- | ------------------------ | 645| [ComponentInfo](js-apis-arkui-componentUtils.md#componentinfo) | Size, position, translation, scaling, rotation, and affine matrix information of the component.| 646 647**Example** 648 649```ts 650import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 651let componentUtils:ComponentUtils = uiContext.getComponentUtils(); 652let modePosition = componentUtils.getRectangleById("onClick"); 653let localOffsetWidth = modePosition.size.width; 654let localOffsetHeight = modePosition.size.height; 655``` 656 657## UIInspector 658 659In the following API examples, you must first use [getUIInspector()](#getuiinspector) in **UIContext** to obtain a **UIInspector** instance, and then call the APIs using the obtained instance. 660 661### createComponentObserver 662 663createComponentObserver(id: string): inspector.ComponentObserver 664 665Creates an observer for the specified component. 666 667**System capability**: SystemCapability.ArkUI.ArkUI.Full 668 669**Parameters** 670 671| Name | Type | Mandatory | Description | 672| ---- | ------ | ---- | ------- | 673| id | string | Yes | Component ID.| 674 675**Return value** 676 677| Type | Description | 678| ---------------------------------------- | ------------------------- | 679| [ComponentObserver](js-apis-arkui-inspector.md#componentobserver) | Component observer, which is used to register and unregister listeners for completion of component layout or drawing.| 680 681**Example** 682 683```ts 684import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 685let inspector:UIInspector = uiContext.getUIInspector(); 686let listener = inspector.createComponentObserver('COMPONENT_ID'); 687``` 688 689## MediaQuery 690 691In the following API examples, you must first use [getMediaQuery()](#getmediaquery) in **UIContext** to obtain a **MediaQuery** instance, and then call the APIs using the obtained instance. 692 693### matchMediaSync 694 695matchMediaSync(condition: string): mediaQuery.MediaQueryListener 696 697Sets the media query criteria and returns the corresponding listening handle. 698 699**System capability**: SystemCapability.ArkUI.ArkUI.Full 700 701**Parameters** 702 703| Name | Type | Mandatory | Description | 704| --------- | ------ | ---- | ---------------------------------------- | 705| condition | string | Yes | Media query condition. For details, see [Syntax](../../ui/arkts-layout-development-media-query.md#syntax).| 706 707**Return value** 708 709| Type | Description | 710| ------------------ | ---------------------- | 711| MediaQueryListener | Listening handle to a media event, which is used to register or deregister the listening callback.| 712 713**Example** 714 715```ts 716import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 717let mediaquery: MediaQuery = uiContext.getMediaQuery(); 718let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events. 719``` 720 721## Router 722 723In the following API examples, you must first use [getRouter()](#getrouter) in **UIContext** to obtain a **Router** instance, and then call the APIs using the obtained instance. 724 725### pushUrl 726 727pushUrl(options: router.RouterOptions): Promise<void> 728 729Navigates to a specified page in the application. 730 731**System capability**: SystemCapability.ArkUI.ArkUI.Full 732 733**Parameters** 734 735| Name | Type | Mandatory | Description | 736| ------- | ---------------------------------------- | ---- | --------- | 737| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters.| 738 739**Return value** 740 741| Type | Description | 742| ------------------- | ------- | 743| Promise<void> | Promise used to return the result.| 744 745**Error codes** 746 747For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 748 749| ID | Error Message | 750| ------ | ---------------------------------- | 751| 100001 | if UI execution context not found. | 752| 100002 | if the uri is not exist. | 753| 100003 | if the pages are pushed too much. | 754 755**Example** 756 757```ts 758import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 759import { BusinessError } from '@ohos.base'; 760let router:Router = uiContext.getRouter(); 761try { 762 router.pushUrl({ 763 url: 'pages/routerpage2', 764 params: { 765 data1: 'message', 766 data2: { 767 data3: [123, 456, 789] 768 } 769 } 770 }) 771} catch (err) { 772 let message = (err as BusinessError).message; 773 let code = (err as BusinessError).code; 774 console.error(`pushUrl failed, code is ${code}, message is ${message}`); 775} 776``` 777 778### pushUrl 779 780pushUrl(options: router.RouterOptions, callback: AsyncCallback<void>): void 781 782Navigates to a specified page in the application. 783 784**System capability**: SystemCapability.ArkUI.ArkUI.Full 785 786**Parameters** 787 788| Name | Type | Mandatory | Description | 789| -------- | ---------------------------------------- | ---- | --------- | 790| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters.| 791| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 792 793**Error codes** 794 795For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 796 797| ID | Error Message | 798| ------ | ---------------------------------- | 799| 100001 | if UI execution context not found. | 800| 100002 | if the uri is not exist. | 801| 100003 | if the pages are pushed too much. | 802 803**Example** 804 805```ts 806import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 807import { BusinessError } from '@ohos.base'; 808let router:Router = uiContext.getRouter(); 809router.pushUrl({ 810 url: 'pages/routerpage2', 811 params: { 812 data1: 'message', 813 data2: { 814 data3: [123, 456, 789] 815 } 816 } 817}, (err: Error) => { 818 if (err) { 819 let message = (err as BusinessError).message; 820 let code = (err as BusinessError).code; 821 console.error(`pushUrl failed, code is ${code}, message is ${message}`); 822 return; 823 } 824 console.info('pushUrl success'); 825}) 826``` 827 828### pushUrl 829 830pushUrl(options: router.RouterOptions, mode: router.RouterMode): Promise<void> 831 832Navigates to a specified page in the application. 833 834**System capability**: SystemCapability.ArkUI.ArkUI.Full 835 836**Parameters** 837 838| Name | Type | Mandatory | Description | 839| ------- | ---------------------------------------- | ---- | ---------- | 840| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters. | 841| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 842 843**Return value** 844 845| Type | Description | 846| ------------------- | ------- | 847| Promise<void> | Promise used to return the result.| 848 849**Error codes** 850 851For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 852 853| ID | Error Message | 854| ------ | ---------------------------------- | 855| 100001 | if UI execution context not found. | 856| 100002 | if the uri is not exist. | 857| 100003 | if the pages are pushed too much. | 858 859**Example** 860 861```ts 862import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 863import { BusinessError } from '@ohos.base'; 864import router from '@ohos.router'; 865let routerF:Router = uiContext.getRouter(); 866class routerTmp{ 867 Standard:router.RouterMode = router.RouterMode.Standard 868} 869let rtm:routerTmp = new routerTmp() 870try { 871 routerF.pushUrl({ 872 url: 'pages/routerpage2', 873 params: { 874 data1: 'message', 875 data2: { 876 data3: [123, 456, 789] 877 } 878 } 879 }, rtm.Standard) 880} catch (err) { 881 let message = (err as BusinessError).message; 882 let code = (err as BusinessError).code; 883 console.error(`pushUrl failed, code is ${code}, message is ${message}`); 884} 885``` 886 887### pushUrl 888 889pushUrl(options: router.RouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 890 891Navigates to a specified page in the application. 892 893**System capability**: SystemCapability.ArkUI.ArkUI.Full 894 895**Parameters** 896 897| Name | Type | Mandatory | Description | 898| -------- | ---------------------------------------- | ---- | ---------- | 899| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Page routing parameters. | 900| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 901| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 902 903**Error codes** 904 905For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 906 907| ID | Error Message | 908| ------ | ---------------------------------- | 909| 100001 | if UI execution context not found. | 910| 100002 | if the uri is not exist. | 911| 100003 | if the pages are pushed too much. | 912 913**Example** 914 915```ts 916import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 917import { BusinessError } from '@ohos.base'; 918import router from '@ohos.router'; 919let routerF:Router = uiContext.getRouter(); 920class routerTmp{ 921 Standard:router.RouterMode = router.RouterMode.Standard 922} 923let rtm:routerTmp = new routerTmp() 924routerF.pushUrl({ 925 url: 'pages/routerpage2', 926 params: { 927 data1: 'message', 928 data2: { 929 data3: [123, 456, 789] 930 } 931 } 932}, rtm.Standard, (err) => { 933 if (err) { 934 let message = (err as BusinessError).message; 935 let code = (err as BusinessError).code; 936 console.error(`pushUrl failed, code is ${code}, message is ${message}`); 937 return; 938 } 939 console.info('pushUrl success'); 940}) 941``` 942 943### replaceUrl 944 945replaceUrl(options: router.RouterOptions): Promise<void> 946 947Replaces the current page with another one in the application and destroys the current page. 948 949**System capability**: SystemCapability.ArkUI.ArkUI.Full 950 951**Parameters** 952 953| Name | Type | Mandatory | Description | 954| ------- | ---------------------------------------- | ---- | --------- | 955| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page.| 956 957**Return value** 958 959| Type | Description | 960| ------------------- | ------- | 961| Promise<void> | Promise used to return the result.| 962 963**Error codes** 964 965For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 966 967| ID | Error Message | 968| ------ | ---------------------------------------- | 969| 100001 | if UI execution context not found, only throw in standard system. | 970| 200002 | if the uri is not exist. | 971 972**Example** 973 974```ts 975import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 976import { BusinessError } from '@ohos.base'; 977let router:Router = uiContext.getRouter(); 978try { 979 router.replaceUrl({ 980 url: 'pages/detail', 981 params: { 982 data1: 'message' 983 } 984 }) 985} catch (err) { 986 let message = (err as BusinessError).message; 987 let code = (err as BusinessError).code; 988 console.error(`replaceUrl failed, code is ${code}, message is ${message}`); 989} 990``` 991 992### replaceUrl 993 994replaceUrl(options: router.RouterOptions, callback: AsyncCallback<void>): void 995 996Replaces the current page with another one in the application and destroys the current page. 997 998**System capability**: SystemCapability.ArkUI.ArkUI.Full 999 1000**Parameters** 1001 1002| Name | Type | Mandatory | Description | 1003| -------- | ---------------------------------------- | ---- | --------- | 1004| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page.| 1005| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 1006 1007**Error codes** 1008 1009For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1010 1011| ID | Error Message | 1012| ------ | ---------------------------------------- | 1013| 100001 | if UI execution context not found, only throw in standard system. | 1014| 200002 | if the uri is not exist. | 1015 1016**Example** 1017 1018```ts 1019import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1020import { BusinessError } from '@ohos.base'; 1021let router:Router = uiContext.getRouter(); 1022router.replaceUrl({ 1023 url: 'pages/detail', 1024 params: { 1025 data1: 'message' 1026 } 1027}, (err: Error) => { 1028 if (err) { 1029 let message = (err as BusinessError).message; 1030 let code = (err as BusinessError).code; 1031 console.error(`replaceUrl failed, code is ${code}, message is ${message}`); 1032 return; 1033 } 1034 console.info('replaceUrl success'); 1035}) 1036``` 1037 1038### replaceUrl 1039 1040replaceUrl(options: router.RouterOptions, mode: router.RouterMode): Promise<void> 1041 1042Replaces the current page with another one in the application and destroys the current page. 1043 1044**System capability**: SystemCapability.ArkUI.ArkUI.Full 1045 1046**Parameters** 1047 1048| Name | Type | Mandatory | Description | 1049| ------- | ---------------------------------------- | ---- | ---------- | 1050| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page. | 1051| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 1052 1053**Return value** 1054 1055| Type | Description | 1056| ------------------- | ------- | 1057| Promise<void> | Promise used to return the result.| 1058 1059**Error codes** 1060 1061For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1062 1063| ID | Error Message | 1064| ------ | ---------------------------------------- | 1065| 100001 | if can not get the delegate, only throw in standard system. | 1066| 200002 | if the uri is not exist. | 1067 1068**Example** 1069 1070```ts 1071import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1072import { BusinessError } from '@ohos.base'; 1073import router from '@ohos.router'; 1074let routerF:Router = uiContext.getRouter(); 1075class routerTmp{ 1076 Standard:router.RouterMode = router.RouterMode.Standard 1077} 1078let rtm:routerTmp = new routerTmp() 1079try { 1080 routerF.replaceUrl({ 1081 url: 'pages/detail', 1082 params: { 1083 data1: 'message' 1084 } 1085 }, rtm.Standard) 1086} catch (err) { 1087 let message = (err as BusinessError).message; 1088 let code = (err as BusinessError).code; 1089 console.error(`replaceUrl failed, code is ${code}, message is ${message}`); 1090} 1091``` 1092 1093### replaceUrl 1094 1095replaceUrl(options: router.RouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 1096 1097Replaces the current page with another one in the application and destroys the current page. 1098 1099**System capability**: SystemCapability.ArkUI.ArkUI.Full 1100 1101**Parameters** 1102 1103| Name | Type | Mandatory | Description | 1104| -------- | ---------------------------------------- | ---- | ---------- | 1105| options | [router.RouterOptions](js-apis-router.md#routeroptions) | Yes | Description of the new page. | 1106| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 1107| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 1108 1109**Error codes** 1110 1111For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1112 1113| ID | Error Message | 1114| ------ | ---------------------------------------- | 1115| 100001 | if UI execution context not found, only throw in standard system. | 1116| 200002 | if the uri is not exist. | 1117 1118**Example** 1119 1120```ts 1121import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1122import { BusinessError } from '@ohos.base'; 1123import router from '@ohos.router'; 1124let routerF:Router = uiContext.getRouter(); 1125class routerTmp{ 1126 Standard:router.RouterMode = router.RouterMode.Standard 1127} 1128let rtm:routerTmp = new routerTmp() 1129routerF.replaceUrl({ 1130 url: 'pages/detail', 1131 params: { 1132 data1: 'message' 1133 } 1134}, rtm.Standard, (err: Error) => { 1135 if (err) { 1136 let message = (err as BusinessError).message; 1137 let code = (err as BusinessError).code; 1138 console.error(`replaceUrl failed, code is ${code}, message is ${message}`); 1139 return; 1140 } 1141 console.info('replaceUrl success'); 1142}); 1143``` 1144 1145### pushNamedRoute 1146 1147pushNamedRoute(options: router.NamedRouterOptions): Promise<void> 1148 1149Navigates to a page using the named route. This API uses a promise to return the result. 1150 1151**System capability**: SystemCapability.ArkUI.ArkUI.Full 1152 1153**Parameters** 1154 1155| Name | Type | Mandatory | Description | 1156| ------- | ---------------------------------------- | ---- | --------- | 1157| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters.| 1158 1159**Return value** 1160 1161| Type | Description | 1162| ------------------- | ------- | 1163| Promise<void> | Promise used to return the result.| 1164 1165**Error codes** 1166 1167For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1168 1169| ID | Error Message | 1170| ------ | ---------------------------------- | 1171| 100001 | if UI execution context not found. | 1172| 100003 | if the pages are pushed too much. | 1173| 100004 | if the named route is not exist. | 1174 1175**Example** 1176 1177```ts 1178import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1179import { BusinessError } from '@ohos.base'; 1180let router:Router = uiContext.getRouter(); 1181try { 1182 router.pushNamedRoute({ 1183 name: 'myPage', 1184 params: { 1185 data1: 'message', 1186 data2: { 1187 data3: [123, 456, 789] 1188 } 1189 } 1190 }) 1191} catch (err) { 1192 let message = (err as BusinessError).message; 1193 let code = (err as BusinessError).code; 1194 console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`); 1195} 1196``` 1197 1198### pushNamedRoute 1199 1200pushNamedRoute(options: router.NamedRouterOptions, callback: AsyncCallback<void>): void 1201 1202Navigates to a page using the named route. This API uses a promise to return the result. 1203 1204**System capability**: SystemCapability.ArkUI.ArkUI.Full 1205 1206**Parameters** 1207 1208| Name | Type | Mandatory | Description | 1209| -------- | ---------------------------------------- | ---- | --------- | 1210| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters.| 1211| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 1212 1213**Error codes** 1214 1215For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1216 1217| ID | Error Message | 1218| ------ | ---------------------------------- | 1219| 100001 | if UI execution context not found. | 1220| 100003 | if the pages are pushed too much. | 1221| 100004 | if the named route is not exist. | 1222 1223**Example** 1224 1225```ts 1226import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1227import { BusinessError } from '@ohos.base'; 1228let router:Router = uiContext.getRouter(); 1229router.pushNamedRoute({ 1230 name: 'myPage', 1231 params: { 1232 data1: 'message', 1233 data2: { 1234 data3: [123, 456, 789] 1235 } 1236 } 1237}, (err: Error) => { 1238 if (err) { 1239 let message = (err as BusinessError).message; 1240 let code = (err as BusinessError).code; 1241 console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`); 1242 return; 1243 } 1244 console.info('pushNamedRoute success'); 1245}) 1246``` 1247### pushNamedRoute 1248 1249pushNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode): Promise<void> 1250 1251Navigates to a page using the named route. This API uses a promise to return the result. 1252 1253**System capability**: SystemCapability.ArkUI.ArkUI.Full 1254 1255**Parameters** 1256 1257| Name | Type | Mandatory | Description | 1258| ------- | ---------------------------------------- | ---- | ---------- | 1259| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters. | 1260| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 1261 1262**Return value** 1263 1264| Type | Description | 1265| ------------------- | ------- | 1266| Promise<void> | Promise used to return the result.| 1267 1268**Error codes** 1269 1270For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1271 1272| ID | Error Message | 1273| ------ | ---------------------------------- | 1274| 100001 | if UI execution context not found. | 1275| 100003 | if the pages are pushed too much. | 1276| 100004 | if the named route is not exist. | 1277 1278**Example** 1279 1280```ts 1281import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1282import { BusinessError } from '@ohos.base'; 1283import router from '@ohos.router'; 1284let routerF:Router = uiContext.getRouter(); 1285class routerTmp{ 1286 Standard:router.RouterMode = router.RouterMode.Standard 1287} 1288let rtm:routerTmp = new routerTmp() 1289try { 1290 routerF.pushNamedRoute({ 1291 name: 'myPage', 1292 params: { 1293 data1: 'message', 1294 data2: { 1295 data3: [123, 456, 789] 1296 } 1297 } 1298 }, rtm.Standard) 1299} catch (err) { 1300 let message = (err as BusinessError).message; 1301 let code = (err as BusinessError).code; 1302 console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`); 1303} 1304``` 1305 1306### pushNamedRoute 1307 1308pushNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 1309 1310Navigates to a page using the named route. This API uses a promise to return the result. 1311 1312**System capability**: SystemCapability.ArkUI.ArkUI.Full 1313 1314**Parameters** 1315 1316| Name | Type | Mandatory | Description | 1317| -------- | ---------------------------------------- | ---- | ---------- | 1318| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Page routing parameters. | 1319| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 1320| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 1321 1322**Error codes** 1323 1324For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1325 1326| ID | Error Message | 1327| ------ | ---------------------------------- | 1328| 100001 | if UI execution context not found. | 1329| 100003 | if the pages are pushed too much. | 1330| 100004 | if the named route is not exist. | 1331 1332**Example** 1333 1334```ts 1335import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1336import { BusinessError } from '@ohos.base'; 1337import router from '@ohos.router'; 1338let routerF:Router = uiContext.getRouter(); 1339class routerTmp{ 1340 Standard:router.RouterMode = router.RouterMode.Standard 1341} 1342let rtm:routerTmp = new routerTmp() 1343routerF.pushNamedRoute({ 1344 name: 'myPage', 1345 params: { 1346 data1: 'message', 1347 data2: { 1348 data3: [123, 456, 789] 1349 } 1350 } 1351}, rtm.Standard, (err: Error) => { 1352 if (err) { 1353 let message = (err as BusinessError).message; 1354 let code = (err as BusinessError).code; 1355 console.error(`pushNamedRoute failed, code is ${code}, message is ${message}`); 1356 return; 1357 } 1358 console.info('pushNamedRoute success'); 1359}) 1360``` 1361 1362### replaceNamedRoute 1363 1364replaceNamedRoute(options: router.NamedRouterOptions): Promise<void> 1365 1366Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. 1367 1368**System capability**: SystemCapability.ArkUI.ArkUI.Full 1369 1370**Parameters** 1371 1372| Name | Type | Mandatory | Description | 1373| ------- | ---------------------------------------- | ---- | --------- | 1374| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page.| 1375 1376**Return value** 1377 1378| Type | Description | 1379| ------------------- | ------- | 1380| Promise<void> | Promise used to return the result.| 1381 1382**Error codes** 1383 1384For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1385 1386| ID | Error Message | 1387| ------ | ---------------------------------------- | 1388| 100001 | if UI execution context not found, only throw in standard system. | 1389| 100004 | if the named route is not exist. | 1390 1391**Example** 1392 1393```ts 1394import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1395import { BusinessError } from '@ohos.base'; 1396let router:Router = uiContext.getRouter(); 1397try { 1398 router.replaceNamedRoute({ 1399 name: 'myPage', 1400 params: { 1401 data1: 'message' 1402 } 1403 }) 1404} catch (err) { 1405 let message = (err as BusinessError).message; 1406 let code = (err as BusinessError).code; 1407 console.error(`replaceNamedRoute failed, code is ${code}, message is ${message}`); 1408} 1409``` 1410 1411### replaceNamedRoute 1412 1413replaceNamedRoute(options: router.NamedRouterOptions, callback: AsyncCallback<void>): void 1414 1415Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. 1416 1417**System capability**: SystemCapability.ArkUI.ArkUI.Full 1418 1419**Parameters** 1420 1421| Name | Type | Mandatory | Description | 1422| -------- | ---------------------------------------- | ---- | --------- | 1423| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page.| 1424| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 1425 1426**Error codes** 1427 1428For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1429 1430| ID | Error Message | 1431| ------ | ---------------------------------------- | 1432| 100001 | if UI execution context not found, only throw in standard system. | 1433| 100004 | if the named route is not exist. | 1434 1435**Example** 1436 1437```ts 1438import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1439import { BusinessError } from '@ohos.base'; 1440let router:Router = uiContext.getRouter(); 1441router.replaceNamedRoute({ 1442 name: 'myPage', 1443 params: { 1444 data1: 'message' 1445 } 1446}, (err: Error) => { 1447 if (err) { 1448 let message = (err as BusinessError).message; 1449 let code = (err as BusinessError).code; 1450 console.error(`replaceNamedRoute failed, code is ${code}, message is ${message}`); 1451 return; 1452 } 1453 console.info('replaceNamedRoute success'); 1454}) 1455``` 1456 1457### replaceNamedRoute 1458 1459replaceNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode): Promise<void> 1460 1461Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. 1462 1463**System capability**: SystemCapability.ArkUI.ArkUI.Full 1464 1465**Parameters** 1466 1467| Name | Type | Mandatory | Description | 1468| ------- | ---------------------------------------- | ---- | ---------- | 1469| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page. | 1470| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 1471 1472 1473**Return value** 1474 1475| Type | Description | 1476| ------------------- | ------- | 1477| Promise<void> | Promise used to return the result.| 1478 1479**Error codes** 1480 1481For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1482 1483| ID | Error Message | 1484| ------ | ---------------------------------------- | 1485| 100001 | if can not get the delegate, only throw in standard system. | 1486| 100004 | if the named route is not exist. | 1487 1488**Example** 1489 1490```ts 1491import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1492import { BusinessError } from '@ohos.base'; 1493import router from '@ohos.router'; 1494let routerF:Router = uiContext.getRouter(); 1495class routerTmp{ 1496 Standard:router.RouterMode = router.RouterMode.Standard 1497} 1498let rtm:routerTmp = new routerTmp() 1499try { 1500 routerF.replaceNamedRoute({ 1501 name: 'myPage', 1502 params: { 1503 data1: 'message' 1504 } 1505 }, rtm.Standard) 1506} catch (err) { 1507 let message = (err as BusinessError).message; 1508 let code = (err as BusinessError).code; 1509 console.error(`replaceNamedRoute failed, code is ${code}, message is ${message}`); 1510} 1511``` 1512 1513### replaceNamedRoute 1514 1515replaceNamedRoute(options: router.NamedRouterOptions, mode: router.RouterMode, callback: AsyncCallback<void>): void 1516 1517Replaces the current page with another one using the named route and destroys the current page. This API uses a promise to return the result. 1518 1519**System capability**: SystemCapability.ArkUI.ArkUI.Full 1520 1521**Parameters** 1522 1523| Name | Type | Mandatory | Description | 1524| -------- | ---------------------------------------- | ---- | ---------- | 1525| options | [router.NamedRouterOptions](js-apis-router.md#namedrouteroptions10) | Yes | Description of the new page. | 1526| mode | [router.RouterMode](js-apis-router.md#routermode9) | Yes | Routing mode.| 1527| callback | AsyncCallback<void> | Yes | Callback used to return the result. | 1528 1529**Error codes** 1530 1531For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1532 1533| ID | Error Message | 1534| ------ | ---------------------------------------- | 1535| 100001 | if UI execution context not found, only throw in standard system. | 1536| 100004 | if the named route is not exist. | 1537 1538**Example** 1539 1540```ts 1541import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1542import { BusinessError } from '@ohos.base'; 1543import router from '@ohos.router'; 1544let routerF:Router = uiContext.getRouter(); 1545class routerTmp{ 1546 Standard:router.RouterMode = router.RouterMode.Standard 1547} 1548let rtm:routerTmp = new routerTmp() 1549routerF.replaceNamedRoute({ 1550 name: 'myPage', 1551 params: { 1552 data1: 'message' 1553 } 1554}, rtm.Standard, (err: Error) => { 1555 if (err) { 1556 let message = (err as BusinessError).message; 1557 let code = (err as BusinessError).code; 1558 console.error(`replaceNamedRoute failed, code is ${code}, message is ${message}`); 1559 return; 1560 } 1561 console.info('replaceNamedRoute success'); 1562}); 1563``` 1564 1565### back 1566 1567back(options?: router.RouterOptions ): void 1568 1569Returns to the previous page or a specified page. 1570 1571**System capability**: SystemCapability.ArkUI.ArkUI.Full 1572 1573**Parameters** 1574 1575| Name | Type | Mandatory | Description | 1576| ------- | ---------------------------------------- | ---- | ---------------------------------------- | 1577| options | [router.RouterOptions](js-apis-router.md#routeroptions) | No | Description of the page. The **url** parameter indicates the URL of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If no URL is set, the application returns to the previous page, and the page is not rebuilt. The page in the page stack is not reclaimed. It will be reclaimed after being popped up.| 1578 1579**Example** 1580 1581```ts 1582import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1583import { BusinessError } from '@ohos.base'; 1584let router: Router = uiContext.getRouter(); 1585router.back({url:'pages/detail'}); 1586``` 1587 1588### clear 1589 1590clear(): void 1591 1592Clears all historical pages in the stack and retains only the current page at the top of the stack. 1593 1594**System capability**: SystemCapability.ArkUI.ArkUI.Full 1595 1596**Example** 1597 1598```ts 1599import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1600import { BusinessError } from '@ohos.base'; 1601let router: Router = uiContext.getRouter(); 1602router.clear(); 1603``` 1604 1605### getLength 1606 1607getLength(): string 1608 1609Obtains the number of pages in the current stack. 1610 1611**System capability**: SystemCapability.ArkUI.ArkUI.Full 1612 1613**Return value** 1614 1615| Type | Description | 1616| ------ | ------------------ | 1617| string | Number of pages in the stack. The maximum value is **32**.| 1618 1619**Example** 1620 1621```ts 1622import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1623import { BusinessError } from '@ohos.base'; 1624let router: Router = uiContext.getRouter(); 1625let size = router.getLength(); 1626console.log('pages stack size = ' + size); 1627``` 1628 1629### getState 1630 1631getState(): router.RouterState 1632 1633Obtains state information about the current page. 1634 1635**System capability**: SystemCapability.ArkUI.ArkUI.Full 1636 1637**Return value** 1638 1639| Type | Description | 1640| ---------------------------------------- | ------- | 1641| [RouterState](js-apis-router.md#routerstate) | Page routing state.| 1642 1643**Example** 1644 1645```ts 1646import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1647import { BusinessError } from '@ohos.base'; 1648let router: Router = uiContext.getRouter(); 1649let page = router.getState(); 1650console.log('current index = ' + page.index); 1651console.log('current name = ' + page.name); 1652console.log('current path = ' + page.path); 1653``` 1654 1655### showAlertBeforeBackPage 1656 1657showAlertBeforeBackPage(options: router.EnableAlertOptions): void 1658 1659Enables the display of a confirm dialog box before returning to the previous page. 1660 1661**System capability**: SystemCapability.ArkUI.ArkUI.Full 1662 1663**Parameters** 1664 1665| Name | Type | Mandatory | Description | 1666| ------- | ---------------------------------------- | ---- | --------- | 1667| options | [router.EnableAlertOptions](js-apis-router.md#enablealertoptions) | Yes | Description of the dialog box.| 1668 1669**Error codes** 1670 1671For details about the error codes, see [Router Error Codes](../errorcodes/errorcode-router.md). 1672 1673| ID | Error Message | 1674| ------ | ---------------------------------- | 1675| 100001 | if UI execution context not found. | 1676 1677**Example** 1678 1679```ts 1680import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1681import { BusinessError } from '@ohos.base'; 1682let router: Router = uiContext.getRouter(); 1683try { 1684 router.showAlertBeforeBackPage({ 1685 message: 'Message Info' 1686 }); 1687} catch(error) { 1688 let message = (error as BusinessError).message; 1689 let code = (error as BusinessError).code; 1690 console.error(`showAlertBeforeBackPage failed, code is ${code}, message is ${message}`); 1691} 1692``` 1693 1694### hideAlertBeforeBackPage 1695 1696hideAlertBeforeBackPage(): void 1697 1698Disables the display of a confirm dialog box before returning to the previous page. 1699 1700**System capability**: SystemCapability.ArkUI.ArkUI.Full 1701 1702**Example** 1703 1704```ts 1705import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1706import { BusinessError } from '@ohos.base'; 1707let router: Router = uiContext.getRouter(); 1708router.hideAlertBeforeBackPage(); 1709``` 1710 1711### getParams 1712 1713getParams(): Object 1714 1715Obtains the parameters passed from the page that initiates redirection to the current page. 1716 1717**System capability**: SystemCapability.ArkUI.ArkUI.Full 1718 1719**Return value** 1720 1721| Type | Description | 1722| ------ | ----------------- | 1723| object | Parameters passed from the page that initiates redirection to the current page.| 1724 1725**Example** 1726 1727```ts 1728import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1729import { BusinessError } from '@ohos.base'; 1730let router: Router = uiContext.getRouter(); 1731router.getParams(); 1732``` 1733 1734## PromptAction 1735 1736In the following API examples, you must first use [getPromptAction()](#getpromptaction) in **UIContext** to obtain a **PromptAction** instance, and then call the APIs using the obtained instance. 1737 1738### showToast 1739 1740showToast(options: promptAction.ShowToastOptions): void 1741 1742Shows a toast. 1743 1744**System capability**: SystemCapability.ArkUI.ArkUI.Full 1745 1746**Parameters** 1747 1748| Name | Type | Mandatory | Description | 1749| ------- | ---------------------------------------- | ---- | ------- | 1750| options | [promptAction.ShowToastOptions](js-apis-promptAction.md#showtoastoptions) | Yes | Toast options.| 1751 1752**Error codes** 1753 1754For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md). 1755 1756| ID | Error Message | 1757| ------ | ---------------------------------- | 1758| 100001 | if UI execution context not found. | 1759 1760**Example** 1761 1762```ts 1763import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1764import { BusinessError } from '@ohos.base'; 1765let promptAction: PromptAction = uiContext.getPromptAction(); 1766try { 1767 promptAction.showToast({ 1768 message: 'Message Info', 1769 duration: 2000 1770 }); 1771} catch (error) { 1772 let message = (error as BusinessError).message; 1773 let code = (error as BusinessError).code; 1774 console.error(`showToast args error code is ${code}, message is ${message}`); 1775}; 1776``` 1777 1778### showDialog 1779 1780showDialog(options: promptAction.ShowDialogOptions, callback: AsyncCallback<promptAction.ShowDialogSuccessResponse>): void 1781 1782Shows a dialog box. This API uses an asynchronous callback to return the result. 1783 1784**System capability**: SystemCapability.ArkUI.ArkUI.Full 1785 1786**Parameters** 1787 1788| Name | Type | Mandatory | Description | 1789| -------- | ---------------------------------------- | ---- | ------------ | 1790| options | [promptAction.ShowDialogOptions](js-apis-promptAction.md#showdialogoptions) | Yes | Dialog box options.| 1791| callback | AsyncCallback<[promptAction.ShowDialogSuccessResponse](js-apis-promptAction.md#showdialogsuccessresponse)> | Yes | Callback used to return the dialog box response result. | 1792 1793**Error codes** 1794 1795For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md). 1796 1797| ID | Error Message | 1798| ------ | ---------------------------------- | 1799| 100001 | if UI execution context not found. | 1800 1801**Example** 1802 1803```ts 1804import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1805import { BusinessError } from '@ohos.base'; 1806class buttonsMoabl { 1807 text: string = "" 1808 color: string = "" 1809} 1810let promptAction: PromptAction = uiContext.getPromptAction(); 1811try { 1812 promptAction.showDialog({ 1813 title: 'showDialog Title Info', 1814 message: 'Message Info', 1815 buttons: [ 1816 { 1817 text: 'button1', 1818 color: '#000000' 1819 } as buttonsMoabl, 1820 { 1821 text: 'button2', 1822 color: '#000000' 1823 } as buttonsMoabl 1824 ] 1825 }, (err, data) => { 1826 if (err) { 1827 console.info('showDialog err: ' + err); 1828 return; 1829 } 1830 console.info('showDialog success callback, click button: ' + data.index); 1831 }); 1832} catch (error) { 1833 let message = (error as BusinessError).message; 1834 let code = (error as BusinessError).code; 1835 console.error(`showDialog args error code is ${code}, message is ${message}`); 1836}; 1837``` 1838 1839### showDialog 1840 1841showDialog(options: promptAction.ShowDialogOptions): Promise<promptAction.ShowDialogSuccessResponse> 1842 1843Shows a dialog box. This API uses a promise to return the result synchronously. 1844 1845**System capability**: SystemCapability.ArkUI.ArkUI.Full 1846 1847**Parameters** 1848 1849| Name | Type | Mandatory | Description | 1850| ------- | ---------------------------------------- | ---- | ------ | 1851| options | [promptAction.ShowDialogOptions](js-apis-promptAction.md#showdialogoptions) | Yes | Dialog box options.| 1852 1853**Return value** 1854 1855| Type | Description | 1856| ---------------------------------------- | -------- | 1857| Promise<[promptAction.ShowDialogSuccessResponse](js-apis-promptAction.md#showdialogsuccessresponse)> | Promise used to return the dialog box response result.| 1858 1859**Error codes** 1860 1861For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md). 1862 1863| ID | Error Message | 1864| ------ | ---------------------------------- | 1865| 100001 | if UI execution context not found. | 1866 1867**Example** 1868 1869```ts 1870import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1871import { BusinessError } from '@ohos.base'; 1872let promptAction: PromptAction = uiContext.getPromptAction(); 1873try { 1874 promptAction.showDialog({ 1875 title: 'Title Info', 1876 message: 'Message Info', 1877 buttons: [ 1878 { 1879 text: 'button1', 1880 color: '#000000' 1881 }, 1882 { 1883 text: 'button2', 1884 color: '#000000' 1885 } 1886 ], 1887 }) 1888 .then(data => { 1889 console.info('showDialog success, click button: ' + data.index); 1890 }) 1891 .catch((err:Error) => { 1892 console.info('showDialog error: ' + err); 1893 }) 1894} catch (error) { 1895 let message = (error as BusinessError).message; 1896 let code = (error as BusinessError).code; 1897 console.error(`showDialog args error code is ${code}, message is ${message}`); 1898}; 1899``` 1900 1901### showActionMenu 1902 1903showActionMenu(options: promptAction.ActionMenuOptions, callback:promptAction.ActionMenuSuccessResponse):void 1904 1905Shows an action menu. This API uses an asynchronous callback to return the result. 1906 1907**System capability**: SystemCapability.ArkUI.ArkUI.Full 1908 1909**Parameters** 1910 1911| Name | Type | Mandatory | Description | 1912| -------- | ---------------------------------------- | ---- | --------- | 1913| options | [promptAction.ActionMenuOptions](js-apis-promptAction.md#actionmenuoptions) | Yes | Action menu options. | 1914| callback | [promptAction.ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse) | Yes | Callback used to return the action menu response result.| 1915 1916**Error codes** 1917 1918For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md). 1919 1920| ID | Error Message | 1921| ------ | ---------------------------------- | 1922| 100001 | if UI execution context not found. | 1923 1924**Example** 1925 1926```ts 1927import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 1928import promptAction from '@ohos.promptAction'; 1929import { BusinessError } from '@ohos.base'; 1930class buttonsMoabl { 1931 text: string = "" 1932 color: string = "" 1933} 1934class dataR{ 1935 err:Error = new Error; 1936 data:promptAction.ActionMenuSuccessResponse | undefined = undefined; 1937} 1938let dataAMSR:dataR = new dataR() 1939let promptActionF: PromptAction = uiContext.getPromptAction(); 1940try { 1941 if(dataAMSR.data){ 1942 promptActionF.showActionMenu({ 1943 title: 'Title Info', 1944 buttons: [ 1945 { 1946 text: 'item1', 1947 color: '#666666' 1948 } as buttonsMoabl, 1949 { 1950 text: 'item2', 1951 color: '#000000' 1952 } as buttonsMoabl 1953 ] 1954 }, (dataAMSR.data)) 1955 if (dataAMSR.err) { 1956 console.info('showActionMenu err: ' + dataAMSR.err); 1957 }else{ 1958 console.info('showActionMenu success callback, click button: ' + dataAMSR.data.index); 1959 } 1960 } 1961} catch (error) { 1962 let message = (error as BusinessError).message; 1963 let code = (error as BusinessError).code; 1964 console.error(`showActionMenu args error code is ${code}, message is ${message}`); 1965}; 1966``` 1967 1968### showActionMenu 1969 1970showActionMenu(options: promptAction.ActionMenuOptions): Promise<promptAction.ActionMenuSuccessResponse> 1971 1972Shows an action menu. This API uses a promise to return the result synchronously. 1973 1974**System capability**: SystemCapability.ArkUI.ArkUI.Full 1975 1976**Parameters** 1977 1978| Name | Type | Mandatory | Description | 1979| ------- | ---------------------------------------- | ---- | ------- | 1980| options | [promptAction.ActionMenuOptions](js-apis-promptAction.md#actionmenuoptions) | Yes | Action menu options.| 1981 1982**Return value** 1983 1984| Type | Description | 1985| ---------------------------------------- | ------- | 1986| Promise<[promptAction.ActionMenuSuccessResponse](js-apis-promptAction.md#actionmenusuccessresponse)> | Promise used to return the action menu response result.| 1987 1988**Error codes** 1989 1990For details about the error codes, see [promptAction Error Codes](../errorcodes/errorcode-promptAction.md). 1991 1992| ID | Error Message | 1993| ------ | ---------------------------------- | 1994| 100001 | if UI execution context not found. | 1995 1996**Example** 1997 1998```ts 1999import { ComponentUtils, Font, PromptAction, Router, UIInspector, MediaQuery } from '@ohos.arkui.UIContext'; 2000import { BusinessError } from '@ohos.base'; 2001let promptAction: PromptAction = uiContext.getPromptAction(); 2002try { 2003 promptAction.showActionMenu({ 2004 title: 'showActionMenu Title Info', 2005 buttons: [ 2006 { 2007 text: 'item1', 2008 color: '#666666' 2009 }, 2010 { 2011 text: 'item2', 2012 color: '#000000' 2013 }, 2014 ] 2015 }) 2016 .then(data => { 2017 console.info('showActionMenu success, click button: ' + data.index); 2018 }) 2019 .catch((err:Error) => { 2020 console.info('showActionMenu error: ' + err); 2021 }) 2022} catch (error) { 2023 let message = (error as BusinessError).message; 2024 let code = (error as BusinessError).code; 2025 console.error(`showActionMenu args error code is ${code}, message is ${message}`); 2026}; 2027``` 2028