Explore DialogV3 in HarmonyOS
An overview of the DialogV3 library in HarmonyOS and deep dive on various available DialogV3 formats.
Introduction
Have you ever created dialogs and found them boring or not visually appealing, and always looked on customizing these dialogs, then we have got you covered in this article.
One-Stop solution to display the various style, themes of dialogs, with styles ranging from iOS, Material, MIUI, and the dialog types like Dialog Box, Tips, Bottom Menu.
Also, we have Kongzue themes Dialog V3 which provides a fully customizable dialog box style for the quick and easy realization of special effects.
Background
First, let’s understand Kongzue’s Dialog and how this led to the creation of DialogV3 in HarmonyOS. Kongzue’s Dialog has pop-up styles that provide the simplest way to invoke a message box, a selection box, an input box, await prompt, a warning prompt, a completion prompt, an error prompt, and so on.
You can find more info on the Konguzue dialog here.
Below are some of the listed available themes and their view in HarmonyOS.
iOS theme
iOS theme dialog box in light and dark modes.
Material theme
The material Theme dialog box in light and dark modes
MIUI theme
MIUI theme dialog box in light and dark modes.
Let’s dive deep into how to implement this in HarmonyOS.
Step by Step Implementation
Step 1: Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven’t installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available here.
Step 2: Once you have the DevEco Studio up running you can create a select a “File” -> New -> New Project Option, then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.
While setting up the project ensure to select the language as Java and API version 5.
• Language as Java and
- API version to 5
Step 4: After the initial setup you are ready to start working on the application.
Step 5: Next add the DialogV3 Dependency, in order to use the library in your HarmonyOS mobile app, you need to first install it by adding the below dependency in your entry/build.gradle file.
dependencies {implementation fileTree(dir: 'libs', include: ['*.har'])
implementation 'io.openharmony.tpc.thirdlib:DialogV3:1.0.0'
testCompile 'junit:junit:4.12'}
Now we will try some use-cases
- Input Dialog Box — The input dialog box can be used to get input from users or can be used to validate passwords.
// set the theme IOS,Material,kongzue or MIUI
DialogSettings.style = DialogSettings.STYLE.STYLE_IOS;
// set the mode light or dark
DialogSettings.theme = DialogSettings.THEME.LIGHT;// Onclick display the messege
InputDialog.build(getContext())
//set the prompt messege
.setTitle("prompt").setMessage("Please
enter the password(123456)")
//set input text to show in prompt messge
.setInputText("111111")
.setOkButton("ok", newOnInputDialogButtonClickListener(){
@Override public boolean onClick(String inputStr)
{
// check validation of input string
if (inputStr.equals("123456")) {
TipDialog.show(getContext(), "success!",
TipDialog.TYPE.SUCCESS);
return false;
}
else {
TipDialog.show(getContext(), "Incorrect
password", TipDialog.TYPE.ERROR);
return true;
}
}
})
.setCancelButton("cancel")
//Hint for helping user
.setHintText("Please enter the password")
.setInputInfo(new InputInfo()
//maximum length of the input string
.setMAX_LENGTH(6)
)
.setCancelable(true)
.show(getContext());
Below is the output for the Input Dialog Box.
2. Crash DialogBox Display — The crash dialog box can be used to display when your app is not responding.
// set the theme IOS,Material,kongzue or MIUI
DialogSettings.style = DialogSettings.STYLE.STYLE_IOS;
// set the mode light or dark
DialogSettings.theme = DialogSettings.THEME.LIGHT;// Onclick Wait Dialog crash will apper with messege
MessageDialog.show(getContext(), "Tips", "Crash Messege", "cancel")
.setMessageTextInfo(new TextInfo().setGravity(TextAlignment.LEFT))
.setOnOkButtonClickListener(new OnDialogButtonClickListener() {
@Override public boolean onClick()
{
WaitDialog.show(getContext(),
"Preparing to crash...");
WaitDialog.show(getContext(), "Please wait...");
EventHandler handler = new EventHandler(
EventRunner.getMainEventRunner());
handler.postTask(new Runnable() {
@Override public void run()
{
getUITaskDispatcher().asyncDispatch(() -> {
TipDialog.show(getContext(), "success", TipDialog.TYPE.SUCCESS)
.setOnDismissListener(new OnDismissListener() {
@Override public void onDismiss()
{
// jump(MainActivity.class);
3. Share DialogBox Display — The Share dialog box can be used to share information to the platform available on the user’s device.
// set the theme IOS,Material,kongzue or MIUI
DialogSettings.style = DialogSettings.STYLE.STYLE_IOS;// set the mode light or dark
DialogSettings.theme = DialogSettings.THEME.LIGHT;// set the the items to be presesnt in share dialog
itemList.add(new ShareDialog.Item(
getContext(), ResourceTable.Media_img_email_ios,
"email"));
itemList.add(new ShareDialog.Item(
getContext(), ResourceTable.Media_img_qq_ios, "QQ"));// Show the shared content
ShareDialog.show(getContext(), itemList, (shareDialog,
index, item) -> {
toast("Clicked：" + item.getText());
return false;
There are some more uses cases that could be added to this list like
1. Fully Customize Dialog Display
2. Content customized Dialog Display
3. Bottom Menu Dialog Display
4. Notification Dialog Display
5. Serialization of Dialog Display
More of these implementations can be found here in the “entry” folder which is the application module.
List of public APIs for app developers
The public methods are accessible for developers to use the DialogV3 library.
Conclusion
Until now you have seen multiple uses cases, API details, and the implementation, also got the essence of the powerful library DialogV3 with its implementation in HarmonyOS.
If you are interested to try dialog functionality in HarmonyOS using the DialogV3 then you should definitely try the above use cases.
More Information on the library can be found here.
