DEV Community

Cover image for HarmonyOS Development: dialog Library has made some optimizations
程序员一鸣
程序员一鸣

Posted on

HarmonyOS Development: dialog Library has made some optimizations

#harmonyos

Foreword 

this article is based on Api13 

dialog Library is the last May convenient pop-up window Library I developed. The main feature is simple to use. Once launched, the download volume in dialog field is firmly in the forefront, which can be said to be very popular. However, the previous version still has room for optimization. For example, the content of the pop-up window does not support dynamic update, the time pop-up window data is cyclically traversed, resulting in slow data loading, and the pop-up window cannot be hidden according to logo, the existence of these problems leads to situations that cannot be met in specific scenarios, and we have to push ourselves to optimize and update. 

In addition to code optimization, functions and documents have also been updated synchronously. Currently, dialog is split into eight functional modules, covering almost all business requirements, namely: 1, custom form, 2, time pop-up window, 3, City selection, 4, confirmation & Information, 5, bottom list & grid, 6, toast,7, popup form, 8, loading form . 

The address of the central warehouse is as follows. The current version is 1.2.0. This article will not repeat the usage method, but only introduce the optimization items. If you want to see the usage method, you can directly view the address of the central warehouse: 

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fdialog 

there are many supported functions, and it is impossible to take screenshots one by one. The main functional effects are as follows. One thing to say is that all pop-up window styles can be set uniformly through global initialization or individually when calling. 

The first is the common form of information confirmation, which supports single and double buttons and supports message custom component form. The latest version also supports dynamic data update.

Image description

The bottom list form supports common single list, grid, list scrolling selection and other forms, and supports animation pop-up from the bottom by default, which is suitable for scenes such as gender selection, sharing, and conditional selection. 

Image description

The time selector, this version, has a relatively large optimization, abandoning the previous data traversal and replacing it with single-component acquisition, thus greatly improving the data loading speed. 

Image description

Built-in city address selection, if you do not meet the needs, you can through the bottom list style, to achieve their own. 

Image description

toast is different from the system in that it can set its own rounded corners and background, as well as set its own icon. 

Image description

The specific use has been written before, and there are also documents in the central warehouse and Gihub. I won't repeat them here. I'll briefly talk about some problems in this optimization. 

Optimization I. Content Support Update 

in the previous version, the content of the pop-up window is what it is delivered by default, and it cannot be dynamically updated after the pop-up window pops up. Although it does not need to be updated in most scenarios, this effect also exists in some special scenarios. In order to meet this part of the requirements, 1.2.0 has made a unified treatment for this problem. 

Information pop-up window format update 

the parameter is ContentAttribute, which supports updating all attributes such as title, description, button, and related style.

 

updateDialogInfo()
Enter fullscreen mode Exit fullscreen mode

For example, after the information pop-up window pops up, I need to update the title and description information, which can be operated with the following code:

 

updateDialogInfo({
              title:"我更新了标题",
              message:"我更新了描述"
            })
Enter fullscreen mode Exit fullscreen mode

confirm pop-up format update 

the parameters are the same as the information pop-up window except that the update method is different.

updateDialogConfirm()
Enter fullscreen mode Exit fullscreen mode

For example, after the pop-up window pops up, I need to update the title and description information, which can be operated with the following code. Of course, you can also update other attributes, such as the content of the button, the style of the pop-up window, etc.

 

updateDialogConfirm({
              title:"我更新了标题",
              message:"我更新了描述"
            })
Enter fullscreen mode Exit fullscreen mode

Custom pop-up form update 

the parameter is Object, which is the same as the data type passed in the pop-up custom pop-up window.

 

updateDialogParams()
Enter fullscreen mode Exit fullscreen mode

popup data update 

the parameter is Object, the same as the data type passed.

 

updatePopupData()
Enter fullscreen mode Exit fullscreen mode

Optimization II. Time Pop-up Window Data Optimization 

because the components of the system cannot meet the UI style, a layer of encapsulation is made for the time pop-up window. Although the system provides an optional scrolling component TextPicker, all the data needs to be set by itself. Because of the different time formats, such as the time of the month, day, hour, minute and second, the time of the month, day, year, etc., the columns displayed are also different. In the previous edition, due to the need for linkage mechanism, data loop traversal was adopted, it is very time-consuming, for example, it is very inconvenient to traverse the starting year and then traverse the month for each year, going down layer by layer. 

This version does not perform nested traversal, but performs traversal separately. The year is the year, the month is the month, the day is the day, the hour is the hour, the minute is the minute, and the second is the second. Only when scrolling a separate column, the data and execution linkage mechanism are initialized, thus greatly shortening the data loading time. 

The usage method remains the same as before, and the time display type is distinguished by the timeType field.

 

showDialogTime({
          titleBarAttribute: {
            titleText: "年月日-弹窗",
          },
          timeAttribute: {
            timeType: TimeDialogType.YMD,
            startTime: "2024-10-24",
            selectTime: "2024-12-24",
            endTime: "2029-12-10",
          },
          timeConfirmClick: (date) => {
            //时间回调
            console.log("===时间结果：" + date)
          },
          confirmClick: (value, index) => {
            //内容和索引回调
            console.log("===内容结果：" + value + "====" + index)
          }
        })
Enter fullscreen mode Exit fullscreen mode

Optimization three, support a variety of hidden mode

The previous version only supported a single top-level hiding mode, that is, hiding one by one from top to bottom. However, in some special scenes, dialog pops up in different order and hiding order is also different. For example, I popped up three pop-up windows. I want to hide the second one first, then hide the third and the first one. The previous version cannot be realized. In order to solve this problem, this version, adds modes that can be hidden in index order and hidden by specified id. 

Hide by Position Index 

for multiple pop-up windows, only the index needs to be passed. For example, if three pop-up windows are popped up and the second one is hidden, index 1 can be passed.

 

hidePosition(1)
Enter fullscreen mode Exit fullscreen mode

Hide by specified id 

it is also only applicable to the case of multiple pop-up windows. Unlike the position index, you do not need to consider the pop-up sequence of the pop-up windows, you only need to mark the id of the pop-up windows and directly transfer the id when hiding. 

To use id to hide, you need to set the id when the pop-up window is popped up. You can set the id by using the dialogId attribute in the dialogAttribute:

 

dialogAttribute:{
 dialogId:"dialogInfo1",
}
Enter fullscreen mode Exit fullscreen mode

when hiding, hide the corresponding id directly.

 

hideDialogId("dialogInfo1")
Enter fullscreen mode Exit fullscreen mode

Optimization IV, toast and loading separate packaging 

before, toast and loading were bound together with ordinary pop-up windows. Due to the high frequency of use of toast and loading, they were simply extracted and packaged separately to prevent unnecessary problems during use. 

Optimization 5. message content supports custom components 

the previous message content is in the form of strings. In order to take into account various requirements, this version supports the transfer of custom component forms, as well as the transfer of dynamic data, and supports the confirmation cancellation form and the information pop-up form.

showDialogConfirm({
            title: "我是标题",
            messageView: wrapBuilder(MessageView), //传递自定义视图
            messageData: new TextBean("我是自定义的message视图", true), //传递自定义数据，可以是任意的类型
            clickConfirm: () => {
              //确认
              hide() //隐藏dialog
            }
          })
Enter fullscreen mode Exit fullscreen mode

Related Summary 

of course, there are still many items that can be optimized, such as step selection in the time pop-up window, cross-month date, etc. In the subsequent time arrangement, we will also focus on solving this problem. We also hope that friends can actively find and raise problems in the process of using it. Thank you.

Top comments (0)