A dialog window is used to temporarily display critical information or guide users to complete specific actions (such as saving information). It interrupts the user's current operation flow and requires a response before other operations can continue. It is typically used in scenarios where important information needs to be conveyed to the user.
Create a dialog window.
Create a dialog window (TYPE_DIALOG) through the window.createWindow() API.
let dialogWindowClass: window.Window | undefined = undefined;
// ...
// 1. Create a dialog window.
let context1: common.UIAbilityContext | undefined = AppStorage.get<common.UIAbilityContext>('context');
let config: window.Configuration = {
name: 'dialogWindow', windowType: window.WindowType.TYPE_DIALOG, ctx: context1 as common.BaseContext
};
window.createWindow(config, (err, data) => {
if (err?.code) {
console.error(`Failed to create the dialogWindow. Cause code: ${err.code}, message: ${err.message}`);
return;
}
console.info('Succeeded in creating the dialogWindow. Data: ' + JSON.stringify(data));
dialogWindowClass = data;
// ...
}); Set dialog window attributes.
After the dialog window is created, you can change its size, position, and other attributes, as well as set properties such as window background color and brightness based on app requirements.
Before calling showWindow(), it is recommended to set the size and position of the dialog window.
// 2. After the modal window is created, set its position, size, and related attributes.
dialogWindowClass.moveWindowTo(100, 100, (err) => {
if (err?.code) {
console.error(`Failed to move the window. Cause code: ${err.code}, message: ${err.message}`);
return;
}
console.info('Succeeded in moving the window.');
if (!dialogWindowClass) {
console.error('dialog_windowClass is null');
return;
}
dialogWindowClass.resize(500, 500, (err) => {
if (err?.code) {
console.error(`Failed to change the window size. Cause code: ${err.code}, message: ${err.message}`);
return;
}
console.info('Succeeded in changing the window size.');
});
}); Load and display the specific content of the window.
Use the setUIContent() and showWindow() APIs to load and display the specific content of the dialog window.
// 3. Load the corresponding target page for the modal window.
dialogWindowClass.setUIContent('pages/DialogWindow', (err) => {
if (err?.code) {
console.error(`Failed to load the content. Cause code: ${err.code}, message: ${err.message}`);
return;
}
console.info('Succeeded in loading the content.');
// Display the modal window.
(dialogWindowClass as window.Window).showWindow((err) => {
if (err?.code) {
console.error(`Failed to show the window. Cause code: ${err.code}, message: ${err.message}`);
return;
}
console.info('Succeeded in showing the window.');
});
}); Destroy the window.
When the dialog window is no longer needed, you can use the destroyWindow() API to destroy it based on your specific implementation logic.
// 4. Destroy the modal window. When the modal window is no longer needed, destroy it by calling destroy based on the specific implementation logic.
dialogWindowClass.destroyWindow((err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
console.error(`Failed to destroy the window. Cause code: ${err.code}, message: ${err.message}`);
return;
}
console.info('Succeeded in destroying the window.');
});