Author: Xing Lu

In the last chapter, we explained how to use related controls in OpenAtom OpenHarmony layout and how to play music in OpenHarmony through distributed music player, distributed bomb and distributed shopping cart. Display animation, transfer animation (transfer between pages) and other functions. This chapter is the third article of OpenHarmony standard device application development. It will explain distributed data management between multiple devices based on the previous two chapters. When data changes, data can be synchronized between multiple devices by subscribing. To better understand, we developed a tic-tac-toe game using eTS, as shown in the following GIF, to explain the application of distributed data management. Demo introduction: Demo is based on OpenHarmony system using eTS language, the Demo mainly through device authentication, distributed pull up, distributed data management and other functions to achieve.

Project creation and page layout are not discussed here. This chapter focuses on custom pop-ups and distributed data management.

Custom pop-ups

Through the explanation of custom popovers, I hope to let you learn how to implement their own custom popovers in the project.

1.1 Use @customDialog decorator to create a custom popover.

Official reference link:

Gitee.com/openharmony…

1.2 The layout is composed of Text, List and Button from top to bottom, and the sub-elements in List are composed of Text and Radio. The ellipsis of the following code indicates the non-UI-related logic code, and the specific implementation is based on the source code:

@CustomDialogstruct gameStart { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FontColor (color.black).fontsize (30)}.width('100%').height('20%') Flex({FlexAlign.Center}); direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: List() {ForEach(this.devicename, (item) => {ListItem() {Row() {//Text component display deviceName Text(item.devicename).width('80%').fontsize (30).fontcolor (color.black) Radio({value: }).checked(this.check[item.id]).onchange (() => {for (let I = 0; i < this.check.length; i++) { this.check[i] = false } this.check[item.id] = true }) } } }, item => item.id) } .height('80%') Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign. Center} {) Button (' sure '). The width (200). The height (50) fontSize (30). The onClick () = > {/ /... this.controller.close() }) }.height('30%') }.width('100%').height('80%') }.height('100%').width('100%') }}Copy the code

In this way, we can complete our custom popovers, and you can also try to complete your own custom popovers in your own projects.

Distributed data Management

Distributed data management enables multiple devices to synchronize and update data when data changes through subscription. When we need to synchronize data updates between multiple devices, we can use distributed data management to achieve this. Tic-tac-toe through three games, through distributed data management, to achieve the synchronization of game interface updates between multiple devices, to achieve the function of multiple devices to play a game.

Official website reference link:

Gitee.com/openharmony…

The schematic diagram of data distributed operation is shown below.

Implementation steps:

Distributed data management rely on @ ohos. Data. DistributedData module implementation, project detailed reference source of RemoteDataManager. Ets implementation steps.

2.1 Importing the Module

import factory from '@ohos.data.distributedData';
Copy the code

2.2 Creating a KVManager instance to manage database objects

 registerDataListCallback(callback) {    let that = this    if (this.kvManager == null) {      try {        const config = {          userInfo: {            userId: '0',            userType: 0          },          bundleName: 'com.example.tictactoegame'        }        factory.createKVManager(config).then((manager) => {          that.kvManager = manager          that.registerDataListCallback_(callback)        }).catch((err) => {        })      } catch (e) {      }    } else {      this.registerDataListCallback_(callback)    }  }
Copy the code

Note: Change bundleName to the corresponding content

2.3 Creating and Obtaining the KVStore Database

registerDataListCallback_(callback) { let that = this if (that.kvManager == null) { callback() return } if (that.kvStore  == null) { try { let options = { createIfMissing: true, encrypt: false, backup: false, autoSync: true, kvStoreType: 1, securityLevel: 3 } this.kvManager.getKVStore(this.STORE_ID, options).then((store) => { that.kvStore = store that._registerDataListCallback_(callback) }).catch((err) => { }) } catch  (e) { } } else { this._registerDataListCallback_(callback) } }Copy the code

Note: Change STORE_ID to the corresponding value

2.4 Subscribe to data change notifications of specified types

 _registerDataListCallback_(callback) {    let that = this    if (that.kvManager == null) {      callback()      return    }    this.kvStore.on('dataChange', 1, function(data) {      if (data) {         that.arr = data.updateEntries        callback()      }    })  }
Copy the code

Note: 1 in the kvstore. on method corresponds to the subscription type. For details, see the reference on the official website.

2.5 Adding key/value pairs of the specified type to the database

dataChange(key, value) { let that = this try { that.kvStore.put(JSON.stringify(key), JSON.stringify(value)).then((data) => { }).catch((err) => { prompt.showToast({message:'put err:'+JSON.stringify(value)})  }) } catch (e) { } }Copy the code

Project download link:

Gitee.com/openharmony…

Related issues:

Distributed data management During data transmission, garbled characters may occur if the data contains Chinese characters. Therefore, do not use Chinese characters in data storage.

Through the explanation of the three chapters, we know how to run the simplest OpenHarmony program on standard devices from scratch, and on this basis, we know how to perform music playback, display animation, transition animation and other related advanced skills in OpenHarmony. And how to realize data synchronization update among multiple devices through distributed data management. Stay tuned for more new features, more development boards, and more samples in the latest release of OpenHarmony.