How to call the package of custom pop-up window?

Read the original article：How to call the package of custom pop-up window?

Context

If a page needs to pop up a custom pop-up window, then the page needs to define CustomDialogController.

1. There will be multiple duplicate CustomDialogController codes on multiple pages.
2. When a page needs to define multiple custom pop-up windows, multiple duplicate CustomDialogController definition codes will appear.
3. The same custom pop-up window is used on multiple pages, and each page needs to define a CustomDialogController, resulting in a lot of code duplication.

In summary, repeatedly defining the CustomDialogController code will affect the developer's development efficiency and code neatness.

Description

Use the CustomDialogController class to display custom pop-ups. When using pop-up components, prioritize custom pop-ups to facilitate customization of pop-up style and content. For more information, see Custom Pop-ups (CustomDialog) .

Solution / Approach

By encapsulating the custom pop-up module, you don't need to define a CustomDialogController on each page. Simply pass the following two parameters and call the method to obtain a custom pop-up:

• Pass in the pop-up window name;
• Pass in custom content for the pop-up window, such as text content and image content.

The code example is as follows, which calls the testPromptDialog method:

export function testPromptDialog(pageName: string, text: string) {
  const that = GlobalContext.getContext().getObject(pageName) as UIContext;
  if (that) {
    promptAction.openCustomDialog({
      builder: customDialogBuilder.bind(that, text)
    }).then((dialogId: number) => {
      customDialogId = dialogId;
    })
  }
}

The development steps are as follows:

1.Create a new GlobalContext.ets tool class to save and obtain the page Context.

   export class GlobalContext {
     private constructor() {
     }

     private static instance: GlobalContext;
     private _objects = new Map<string, Object>();

     public static getContext(): GlobalContext {
       if (!GlobalContext.instance) {
         GlobalContext.instance = new GlobalContext();
       }
       return GlobalContext.instance;
     }

     getObject(value: string): Object | undefined {
       return this._objects.get(value);
     }

     setObject(key: string, objectClass: Object): void {
       this._objects.set(key, objectClass);
     }
   }

2.Create a new DialogUtils.ets utility class. This class encapsulates the custom pop-up window and the method for displaying it. Opening the pop-up window is done through promptAction.openCustomDialog.

   import { promptAction } from '@kit.ArkUI'
   import { GlobalContext } from './GlobalContext'

   let customDialogId: number = 0

   @Builder
   export function failDialogBuilder(content: String) {
     Column() {
       Text(content as string)
         .fontSize(20).height("30%")
       Text('Reason for failure：' + content).fontSize(16).height("30%")
       Row() {
         Button("confirm").onClick(() => {
           promptAction.closeCustomDialog(customDialogId)
         })
         Blank().width(50)
         Button("Cancel").onClick(() => {
           promptAction.closeCustomDialog(customDialogId)
         })
       }
       .margin({ top: 30 })
     }.height(200).padding(5)
   }

   @Builder
   export function successDialogBuilder(content: String) {
     Column() {
       Text(content as string)
         .fontSize(20).height("30%")
       Text('Reasons for success：' + content).fontSize(16).height("30%")
       Row() {
         Button("Confirm").onClick(() => {
           promptAction.closeCustomDialog(customDialogId)
         })
         Blank().width(50)
         Button("Cancel").onClick(() => {
           promptAction.closeCustomDialog(customDialogId)
         })
       }
       .margin({ top: 30 })
     }.height(200).padding(5)
   }


   export function testPromptDialog(pageName: string, text: string, controller: Function) {
     const that = GlobalContext.getContext().getObject(pageName) as UIContext;
     if (that) {
       promptAction.openCustomDialog({
         builder: controller.bind(that, text)
       }).then((dialogId: number) => {
         customDialogId = dialogId;
       })
     }
   }

3.When the page is initialized, the Context is stored and then the custom pop-up encapsulation method is called at the entrance.

   import { GlobalContext } from '../utils/GlobalContext'
   import { failDialogBuilder, successDialogBuilder, testPromptDialog } from '../utils/DialogUtils'

   @Entry
   @Component
   struct Index {
     aboutToAppear(): void {
       GlobalContext.getContext().setObject('pageName', this)
     }

     build() {
       Row() {
         Column() {
           Button(promptAction failed pop-up window")
             .onClick(() => {
               testPromptDialog("pageName", "this is  dialog1", failDialogBuilder)
             })
           Button("promptAction successful pop-up window")
             .onClick(() => {
               testPromptDialog("pageName", "this is dialog2", successDialogBuilder)
             })
         }
         .width('100%')
       }
       .height('100%')
     }
   }

Key Takeaways

During development, if you encounter tool class code that needs to be redefined, you can encapsulate the tool class and use GlobalContext to record the page context. By encapsulating the method and passing in parameters, you can get the desired pop-up window and other functions.

Written by Emincan Ozcan