DEV Community: 程序员一鸣

HarmonyOS Development: Realizing Key-Value Database Storage

程序员一鸣 — Mon, 30 Jun 2025 05:03:54 +0000

Foreword

this article is based on Api12

the persistent storage of data in Hongmeng provides us with a variety of implementations, such as user preferences, relational databases, key-value database mode, file storage mode, etc., for relatively small data volume, we can directly choose lightweight user preference mode, while for relatively large data volume, we can directly use the database, while for relatively large data, we can use key-value database mode, which is a data storage mode between user preference and relational database.

The Key-Value database is very simple to use. From the literal meaning, it can be known that it stores and acquires data in the form of Key-Value pairs, which is similar to user preferences. However, the Key-Value database has its own restrictive factors. The first is that for each record, the length of Key ≤ 896 Byte, and the length of Value <4MB, for a single-version database, the length of each record is less than or equal to 1KB, and the length of Value is less than 4MB. Each application supports opening up to 16 Key-Value distributed databases at the same time. The last one is that blocking operations are not allowed in the Key-Value database event callback method, such as modifying UI components.

Common objects in key-value databases are as follows:

KVManager: A distributed key value database management instance used to retrieve relevant information from the database.
KVStoreResultSet: Provides methods for obtaining database result sets, including querying and moving data read locations.
Query: Use predicates to represent database queries, providing methods for creating Query instances, querying data in the database, and adding predicates.
SingleKVStore: A single version distributed key value database that does not distinguish the devices to which the data belongs, providing methods for querying and synchronizing data.
DeviceKVStore: Device collaborative database, inherited from SingleKVStore, distinguishes data based on device dimensions, and provides methods for querying and synchronizing data.

the specific data storage is not introduced here, you can directly view the official documents, here is to introduce the specific usage of the key-value database after encapsulation.

Rapid dependence

method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5.

Suggestion: Execute the command under the module path used.

ohpm install @abner/datastore

Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:

"dependencies": { "@abner/datastore": "^1.0.3"}

code call

1. Initialization

it is recommended to initialize in the AbilityStage. If you want to use multiple file instances for storage, you can pass the second parameter.

DataKvUtil.getInstance().init(this.context, "com.abner.tool")

Related Property Introduction

property	type	overview
context	Context	context
bundleName	string	caller's package name
option	distributedKVStore.Options	(Optional) Database configuration information

option related parameters

property	type	required	description
createIfMissing	boolean	no	whether to create a database when the database file does not exist. The default value is true.
encrypt	boolean	no	set whether the database file is encrypted. Encapsulation defaults to true, that is, it is not encrypted.
backup	boolean	no	set whether the database file is backed up. Encapsulation defaults to true, that is, backup.
autoSync	boolean	no	sets whether the database files are automatically synchronized. Encapsulation defaults to true, that is, Manual synchronization.
kvStoreType	KVStoreType	no	set the type of the database to be created. The default value is DEVICE_COLLABORATION, which is a multi-device collaboration database.
securityLevel	SecurityLevel	yes	set the database security level.
schema	Schema	no	sets the value of the definition stored in the database. The default value is undefined, that is, no Schema is used.

KVStoreType

KVStoreType Distributed Key Value Database Type Enumeration.

DEVICE_COLLABORATION

Represents a multi device collaborative database.

Database features: Data is managed in the dimension of devices, without conflicts; Support querying data based on device dimensions.

SINGLE_VERSION

Represents a single version database.

Database characteristics: Data is not device specific, and modifying the same key between devices will overwrite it.

SecurityLevel

Enumeration of database security levels.

S1

The security level of the database is low, and data leakage, tampering, destruction, and destruction may have limited adverse effects on individuals or organizations.

For example, gender, nationality, user application records, etc.

S2

The security level of the database is considered medium, and data leakage, tampering, destruction, and destruction may cause serious adverse effects on individuals or organizations.

For example, personal detailed mailing address, name nickname, etc.

S3

The security level of the database is high, and data leakage, tampering, destruction, and destruction may have serious adverse effects on individuals or organizations.

For example, personal real-time precise positioning information, motion trajectories, etc.

S4

The security level of the database is considered critical, which is a special type of data defined in industry laws and regulations. It involves information in the most private areas of individuals or data that may cause significant adverse effects to individuals or organizations if leaked, tampered with, destroyed, or destroyed.

For example, political views, religious and philosophical beliefs, union membership, genetic data, biological information, health and sexual status, sexual orientation, or device authentication, personal credit card and other financial information.

2. Data storage

DataKvUtil.getInstance().put("key", "value")

whether listening is successfully stored

DataKvUtil.getInstance().put("key", "value", (isSuccess:boolean) => {

})

listens for storage success and failure

DataKvUtil.getInstance().put("key", "value", (isSuccess:boolean, err:BusinessError) => {
  //When isSuccess is false, err is the error message
})

using Promise asynchronous callbacks

let pPromise = DataKvUtil.getInstance().putPromise("key", "value")

3 Obtaining data

DataKvUtil.getInstance().get("key", (data) => {

})

monitoring failed

DataKvUtil.getInstance().get("key", (data) => {

}, (err:BusinessError) => {

})

using Promise asynchronous callbacks

let pPromise = DataKvUtil.getInstance().getPromise("key")

4. Delete data

DataKvUtil.getInstance().delete("key")

whether the listener is deleted successfully

DataKvUtil.getInstance().delete("key", (isSuccess: boolean) => {

})

whether the monitor fails to be deleted

DataKvUtil.getInstance().delete("key", (isSuccess: boolean, err?: BusinessError) => {

})

using Promise asynchronous callbacks

let pPromise = DataKvUtil.getInstance().deletePromise("key")

5. Modify data

the modification is consistent with the addition, and the data will overwrite the original key.

6. Get the default StoreId

DataKvUtil.getInstance().getStoreId()

7. Delete the specified distributed key-value database

DataKvUtil.getInstance().deleteKVStore("storeId")

whether the listener is deleted successfully

DataKvUtil.getInstance().deleteKVStore("storeId", (isSuccess: boolean) => {

})

whether the monitor fails to be deleted

DataKvUtil.getInstance().deleteKVStore("storeId", (isSuccess: boolean, err?: BusinessError) => {

})

8. Create a new and get the distributed key-value database.

There will be one by default, if you plan to create a new one, you can call this method!

DataKvUtil.getInstance().createKVStore("storeId")

9. The new database is added, deleted, changed and checked

first set up your own database, that is, storeId in section 7.

DataKvUtil.getInstance().setKVStore("storeId")

HarmonyOS Development: Customize an English Keyboard

程序员一鸣 — Mon, 30 Jun 2025 05:03:16 +0000

Foreword

this article is based on Api12

the series of custom keyboards has been completed one after another. The license plate provinces are referred to as keyboards, the license plate letter selection keyboard and the stock code keyboard are all common keyboards in some special industries. In this article, we will customize an English keyboard for the general public. Like other keyboard definitions, the implementation methods are different due to the different spacing between each line.

Code implementation

in order to better realize the UI effect, a multi-component implementation is also adopted here. After all, the margins of each Row are different. It is divided into four rows for implementation. You can use grid layout or List components for implementation. The Row component I use here uses ForEach to traverse subcomponents in the Row component. Of course, after all, the amount of data is small, which method to use depends on everyone's choice.

Let's just say that one line of code is implemented, because they are all repeated, except that the data sources and margins displayed are different, and the important thing for each sub-element is its weight.

Row() {
        ForEach(["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], (item: string) => {
          Text(item)
            .layoutWeight(1)
            .height(this.rectHeight)
            .fontSize(this.rectTextSize)
            .fontColor(this.rectTextColor)
            .backgroundColor(this.englishBgColor)
            .textAlign(TextAlign.Center)
            .margin({ left: 5, right: 5 })
            .borderRadius(this.rectBorderRadius)
            .onClick(() => {
              if (this.onItemClick != undefined) {
                this.onItemClick(item)
              }
            })
        })
      }

All codes

the code is very simple to implement, just look at it yourself.

@Component
export struct EnglishKeyboardView {
BgColor: ResourceColor="# f5f5f5"//Background color
English BgColor: ResourceColor="# ffffff"//English background color
OtherBgColor: ResourceColor="# e8e8e8"//Non English background color
RectBorderWidth: Length=1//Grid border width
RectBorderRadius: Length=2//Grid border rounded corners
RectTextCize: Length=16//The text size of the grid
RectTextColor: ResourceColor="# 333333"//Default color for grid text
DeleteIconWidth: Length=30//Delete image width
deleteIconSrc: PixelMap | ResourceStr | DrawableDescriptor = $r("app.media.view_ic_key_delete")
RectHeight: Length=60//Each grid height
MarginTop: Length=10//Distance wise
MarginBottom: Length=10//Below distance
onItemClick? : (item: string)=>void//Click on the item
onDelete? : ()=>void//Click to delete
onComplete? : ()=>void//Click to complete
onChinese? : ()=>void//Chinese
onSpace? : ()=>void//Space
onNumber? : ()=>void//number

build() {
Column() {
Row() {
ForEach(["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], (item: string) => {
Text(item)
.layoutWeight(1)
.height(this.rectHeight)
.fontSize(this.rectTextSize)
.fontColor(this.rectTextColor)
.backgroundColor(this.englishBgColor)
.textAlign(TextAlign.Center)
.margin({ left: 5, right: 5 })
.borderRadius(this.rectBorderRadius)
.onClick(() => {
if (this.onItemClick != undefined) {
this.onItemClick(item)
}
})
})
}

Row() {
ForEach(["A", "S", "D", "F", "G", "H", "J", "K", "L"], (item: string) => {
Text(item)
.layoutWeight(1)
.height(this.rectHeight)
.fontSize(this.rectTextSize)
.fontColor(this.rectTextColor)
.backgroundColor(this.englishBgColor)
.textAlign(TextAlign.Center)
.margin({ left: 5, right: 5 })
.borderRadius(this.rectBorderRadius)
.onClick(() => {
if (this.onItemClick != undefined) {
this.onItemClick(item)
}
})
})
}.margin({ top: 10, left: 20, right: 20 })

Row() {
ForEach (["middle", "Z", "X", "C", "V", "B", "N", "M", "delete"], (item: string, index: number)=>{
if (index == 8) {
Column() {
Image(this.deleteIconSrc)
.width(this.deleteIconWidth)
}
.layoutWeight(1.5)
.justifyContent(FlexAlign.Center)
.backgroundColor(this.otherBgColor)
.height(this.rectHeight)
.onClick(() => {
//Delete
if (this.onDelete != undefined) {
this.onDelete()
}
})
} else {
Text(item)
.layoutWeight(index == 0 ? 1.5 : 1)
.height(this.rectHeight)
.fontSize(this.rectTextSize)
.fontColor(this.rectTextColor)
.backgroundColor((index == 0) ?  this.otherBgColor : this.englishBgColor)
.textAlign(TextAlign.Center)
.margin({ left: 5, right: 5 })
.borderRadius(this.rectBorderRadius)
.onClick(() => {
if (index == 0) {
Chinese
if (this.onChinese != undefined) {
this.onChinese()
}

} else {
if (this.onItemClick != undefined) {
this.onItemClick(item)
}
}
})
}

})
}.margin({ top: 10 })

Row() {
ForEach (["123", "space", "OK"], (item: string, index: number)=>{
Text(item)
.layoutWeight((index == 1) ?  2 : 1)
.height(60)
.backgroundColor(this.otherBgColor)
.textAlign(TextAlign.Center)
.margin({ left: 5, right: 5 })
.borderRadius(this.rectBorderRadius)
.onClick(() => {
if (index == 0) {
//Number
if (this.onNumber != undefined) {
this.onNumber()
}
} else if (index == 1) {
//Space
if (this.onSpace != undefined) {
this.onSpace()
}
} else if (index == 2) {
//Confirm
if (this.onComplete != undefined) {
this.onComplete()
}
}
})
})
}.margin({ top: 10 })
}.backgroundColor(this.bgColor)
.padding({ top: this.marginTop, bottom: this.marginBottom })
}
}

Encapsulation Use

like the abbreviation of the license plate province, the license plate letters are also packaged for everyone to use.

Method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5.

Suggestion: Execute the command under the module path used.

ohpm install @abner/keyboard

Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:

"dependencies": { "@abner/keyboard": "^1.0.0"}

Code call

EnglishKeyboardView({
onItemClick: (item: string) => {
//Click on the event
Console.log ("====Click on content:"+item)
},
onDelete: () => {
//Click to delete
Console.log ("====Click to delete")
},
onComplete: () => {
//Click OK
Console.log ("====Click OK")
},
onChinese: () => {
//Click on Chinese to switch
Console.log ("====Click on Chinese to switch")
},
onSpace: () => {
//Click on the space
Console.log ("====Click on Space")
},
onNumber: () => {
//Click on the number
Console.log ("====Click on number")
}
})

property Introduction

property	type	overview
onItemClick	(item: string) => void	click entry callback
onDelete	() => void	click Delete Callback
onComplete	() => void	click Finish Callback
onChinese	() => void	click Chinese callback
onSpace	() => void	click Space Callback
onNumber	() => void	click Digital Callback
bgColor	ResourceColor	background Color
englishBgColor	ResourceColor	english background color
otherBgColor	ResourceColor	non-English background color
rectBorderWidth	Length	grid Border Width
rectBorderRadius	Length	check Border Fillet
rectTextSize	Length	text size of grid
rectTextColor	ResourceColor	default color for check text
deleteIconWidth	Length	delete icon width
deleteIconSrc	PixelMap /ResourceStr /DrawableDescriptor	delete icon resources
rectHeight	Length	height of each grid
marginTop	Length	distance from top
marginBottom	Length	distance from below

related Summary

there are many ways to implement it. At present, a relatively simple one is adopted. If you adopt the Grid Grid component implementation method, it is also possible, but you need to consider the margin and data of each row, as well as the Grid Occupancy problem of the last two rows.

HarmonyOS Development: Customize a Stock Code Selection Keyboard

程序员一鸣 — Mon, 30 Jun 2025 05:02:20 +0000

Foreword

this article is based on Api12

financial software, especially stock fund applications, will have a keyboard that is different from the normal keyboard when searching for stocks, that is, the stock code keyboard. The difference from the ordinary keyboard is that in addition to common numbers, there are also some common stock code prefix buttons, which are more convenient to search when searching for stocks.

For such a keyboard, it can be said that it is very easy to implement. We can handle a Grid component. Only the background color setting other than the array should be noted. Of course, you can set it in the form of data source or according to the index position.

Code implementation

defining Data Sources

data source definition can be defined by single data, that is, only the required string is defined, but the background switching needs to be set according to the index, or it can be defined directly in the form of object array. The required content and background color can be defined in the object. Both methods can be implemented. Currently, the first method is adopted.

private mCodeList = ["600", "1", "2", "3", "", "601", "4", "5", "6", "隐藏",
    "000", "7", "8", "9", "empty", "300", "002", "603", "0", "确定"]

Set Components

since the data is set in the form of a string array, when setting the background color, it is necessary to set it dynamically according to the index position.

Grid() {
ForEach(this.mCodeList, (item: string, index: number) => {
GridItem() {
Column() {
if (index == 4) {
Image(this.deleteIconSrc)
.width(this.deleteIconWidth)
} else {
Text(item)
.fontSize(this.rectTextSize)
.fontColor(this.rectTextColor)
}
}
.width("100%")
.height(this.rectHeight)
.border({ radius: this.rectBorderRadius })
.backgroundColor((index == 1 || index == 2 || index == 3 ||
index == 6 || index == 7 || index == 8 ||
index == 11 || index == 12 || index == 13 || index == 18) ?  this.numberColor : this.notNumberColor)
.justifyContent(FlexAlign.Center)
.onClick(() => {
//Click on the event
if (index == 4) {
//Delete
if (this.onDelete != undefined) {
this.onDelete()
}
} else if (index == 9) {
//Hide
if (this.onHide != undefined) {
this.onHide()
}
} else if (index == 14) {
//Clear out
if (this.onClear != undefined) {
this.onClear()
}
} else if (index == this.mCodeList.length - 1) {
//Confirm
if (this.onConfirm != undefined) {
this.onConfirm()
}
} else {
if (this.onItemClick != undefined) {
this.onItemClick(item, index)
}
}
})
}
})
}
.columnsTemplate("1fr ".repeat(this.columnSize).trimEnd())
.columnsGap(this.columnsGap)
.rowsGap(this.rowsGap)

All codes:

the code is very simple, just a pure Grid component is implemented, so I won't repeat it here.

@Component
export struct StockCodeView {
Private mCodeList=["600", "1", "2", "3", "", "601", "4", "5", "6", "hidden",
000 "," 7 "," 8 "," 9 "," Clear "," 300 "," 002 "," 603 "," 0 "," OK "]
BgColor: ResourceColor="# e8e8e8"//Background color
CodeBgColor: ResourceColor="# e8e8e8"//code background color
Number Color: ResourceColor=Color. White//Number background color
NotNumberColor: ResourceColor="# 999999"//Not a numerical background color
RootHeight: number=0//The overall height of the keyboard
RectHeight: Length=60//Each grid height
RowsGap: Length=10//Line spacing
ColumnsMap: Length=10//Column spacing
GridMarkinTop: Length=10//Grid distance from top
GridMarkinBottom: Length=10//Grid distance from bottom
RectBorderRadius: Length=2//Grid border rounded corners
onItemClick? : (item: string, index: number)=>void//Click on the item
onDelete? : ()=>void//Click to delete
onHide? : ()=>void//Click to hide
onClear? : ()=>void//Click to clear
onConfirm? : ()=>void//Click confirm
ColumnSize: number=5//Display how many columns, default is 5 columns
MarginLeft: Length=10//Distance to the left
MarginRight: Length=10//Distance to the right
DeleteIconWidth: Length=30//Delete image width
deleteIconSrc: PixelMap | ResourceStr | DrawableDescriptor = $r("app.media.view_ic_key_delete")
RectTextCize: Length=16//The text size of the grid
RectTextColor: ResourceColor="# 333333"//Default color for grid text

aboutToAppear(): void {
this.rootHeight = (Number(this.rectHeight) * 4) + Number(this.rowsGap) * 3
+ Number(this.gridMarginTop) + Number(this.gridMarginBottom)
}

build() {
Grid() {
ForEach(this.mCodeList, (item: string, index: number) => {
GridItem() {
Column() {
if (index == 4) {
Image(this.deleteIconSrc)
.width(this.deleteIconWidth)
} else {
Text(item)
.fontSize(this.rectTextSize)
.fontColor(this.rectTextColor)
}
}
.width("100%")
.height(this.rectHeight)
.border({ radius: this.rectBorderRadius })
.backgroundColor((index == 1 || index == 2 || index == 3 ||
index == 6 || index == 7 || index == 8 ||
index == 11 || index == 12 || index == 13 || index == 18) ?  this.numberColor : this.notNumberColor)
.justifyContent(FlexAlign.Center)
.onClick(() => {
//Click on the event
if (index == 4) {
//Delete
if (this.onDelete != undefined) {
this.onDelete()
}
} else if (index == 9) {
//Hide
if (this.onHide != undefined) {
this.onHide()
}
} else if (index == 14) {
//Clear out
if (this.onClear != undefined) {
this.onClear()
}
} else if (index == this.mCodeList.length - 1) {
//Confirm
if (this.onConfirm != undefined) {
this.onConfirm()
}
} else {
if (this.onItemClick != undefined) {
this.onItemClick(item, index)
}
}
})
}
})
}
.columnsTemplate("1fr ".repeat(this.columnSize).trimEnd())
.columnsGap(this.columnsGap)
.rowsGap(this.rowsGap)
.padding({ left: this.marginLeft, right: this.marginRight, top: this.gridMarginTop })
.backgroundColor(this.bgColor)
.height(this.rootHeight)
}
}

Encapsulation Use

like the abbreviation of the license plate province, the license plate letters are also packaged for everyone to use.

Method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5.

Suggestion: Execute the command under the module path used.

ohpm install @abner/keyboard

Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:

"dependencies": { "@abner/keyboard": "^1.0.0"}

code call

StockCodeView({
onItemClick: (item: string, index: number) => {
//Click on the event
Console.log ("===Click on content:"+item+"==Click on index:"+index)
},
onDelete: () => {
//Click to delete
Console.log ("====Click to delete")
},
onHide: () => {
//Click to hide
Console.log ("====Click to hide")
},
onClear: () => {
//Click to clear
Console.log ("====Click to clear")
},
onConfirm: () => {
//Click confirm
Console.log ("====Click to confirm")
}
})

property Introduction

property	type	overview
onItemClick	(item: string, index: number) => void	click entry callback
onDelete	() => void	click Delete Callback
onHide	() => void	click to hide the callback
onClear	() => void	click Clear Callback
onConfirm	() => void	click to confirm callback
bgColor	ResourceColor	Background Color
codeBgColor	ResourceColor	code Background Color
numberColor	ResourceColor	digital background color
notNumberColor	ResourceColor	not a digital background color
rootHeight	number	overall height of the keyboard
rectHeight	Length	height of each grid
rowsGap	Length	line Spacing
columnsGap	Length	column Spacing
gridMarginTop	Length	grid Distance Top
gridMarginBottom	Length	grid Distance Bottom
rectBorderRadius	Length	check Border Fillet
marginLeft	Length	distance to the left
marginRight	Length	distance to the right
deleteIconWidth	Length	delete icon width
deleteIconSrc	PixelMap / ResourceStr / DrawableDescriptor	delete icon resources
rectTextSize	Length	checker text size
rectTextColor	ResourceColor	default color for check text

HarmonyOS Development: Customize a License Plate Letter Keyboard

程序员一鸣 — Mon, 30 Jun 2025 05:01:28 +0000

Foreword

this article is based on Api12

before, I customized the keyboard for the short name of a license plate province. In fact, it is not enough to have the short name of a province. After all, a normal license plate is composed of the short name of a province + letters + numbers. Just customize a license plate letter selection keyboard, which can be used in combination with the short name keyboard of the previous province.

Let's look at the final effect.

Analysis of implementation

for such a letter and number keyboard, it can be said that there are many ways to implement it. We can roughly divide it into three parts. The top part is the finish button, the bottom part is a row of number buttons, and the bottom part is the letter area. The reason why numbers and letters are separated is that the margins of the main two parts are different and it is easier to separate them. When drawing letters, one thing needs attention, that is, the final delete button is going to occupy two squares.

Number Button

there is nothing to say about a row of numbers. Grid is used here to implement it. 10 columns are set. Of course, you can also use other methods to implement it.

Defining Data Sources

mNumberList = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]

code implementation

Grid() {
        ForEach(this.mNumberList, (item: string, index: number) => {
          GridItem() {
            Text(item)
              .fontSize(this.rectTextSize)
              .fontColor(this.numProhibit ? this.numProhibitColor :
                (this.itemSelectedArray[index] ? this.rectSelectTextColor : this.rectTextColor))
          }.GridItemAttribute(this, index, item)
        })
      }
      .height(this.rectHeight)
      .columnsTemplate("1fr ".repeat(10).trimEnd())
      .columnsGap(this.columnsGap)
      .rowsGap(this.rowsGap)
      .margin({ top: this.gridMarginTop })
      .scrollBar(BarState.Off)

letter button

the letter button is similar to the number implementation and is also a Grid component. One difference is that the final delete button needs to occupy two squares. How to occupy two squares? The second parameter layoutOptions of the Grid component is mainly used. We use it to implement the final delete button placement.

 (scroller?: Scroller, layoutOptions?: GridLayoutOptions): GridAttribute;

Set the last delete button to occupy two spaces.

 layoutOptions: GridLayoutOptions = {
    regularSize: [1, 1],
    irregularIndexes: [this.mEnglishList.length - 1],
    onGetIrregularSizeByIndex: (_: number) => {
      return [1, 2]
    }
  }

Data Source

mEnglishList = [
    "Q", "W", "E", "R", "T", "Y", "U", "O", "P",
    "A", "S", "D", "F", "G", "H", "J", "K", "L",
    "Z", "X", "C", "V", "B", "N", "M", ""]

code implementation

Grid(undefined, this.layoutOptions) {
        ForEach(this.mEnglishList, (item: string, index: number) => {
          GridItem() {
            if (index == this.mEnglishList.length - 1) {
              Row() {
                Column() {
                  Image(this.deleteIconSrc)
                    .width(this.deleteIconWidth)
                }
                .width("100%")
                .height("100%")
                .backgroundColor(Color.White)
                .borderRadius(2)
                .justifyContent(FlexAlign.Center)
              }
              .width("100%")
              .height("100%")
              .justifyContent(FlexAlign.End)
            } else {
              Text(item)
                .fontSize(this.rectTextSize)
                .fontColor(this.itemSelectedArray[index+this.mNumberList.length] ? this.rectSelectTextColor :
                this.rectTextColor)
            }
          }.GridItemAttribute(this, index + this.mNumberList.length, item)

        }, (item: string, index: number) => JSON.stringify(item) + "_" + index)
      }
      .columnsTemplate("1fr ".repeat(this.columnSize).trimEnd())
      .columnsGap(this.columnsGap)
      .rowsGap(this.rowsGap)
      .margin({ top: Number(this.gridMarginTop) + 10, left: 15, right: 15 })
      .scrollBar(BarState.Off)

encapsulation Use

Like the abbreviation of the license plate province, the license plate letters are also packaged for everyone to use.

Method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5.

Suggestion: Execute the command under the module path used.

ohpm install @abner/keyboard

Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:

"dependencies": { "@abner/keyboard": "^1.0.0"}

code call

LicensePlateLetterView({
onItemClick: (item: string, index: number) => {
//Click on the event
Console.log ("===Click on content:"+item+"==Click on index:"+index)
},
onDelete: () => {
//Click to delete
Console.log ("====Click to delete")
}
})

related Properties

property	type	overview
onItemClick	(item: string, index: number) => void	click entry callback
onDelete	() => void	click Delete Callback
onComplete	(item: string) => void	click Finish Callback
rowsGap	Length	line Spacing
columnsGap	Length	column Spacing
columnSize	number	show several columns, the default is 10 columns
bgColor	ResourceColor	background Color
marginLeft	Length	distance to the left
marginRight	Length	distance to the right
rectHeight	Length	height of each grid
titleHeight	Length	title Bar Height
rootHeight	Length	overall height of the keyboard
gridMarginTop	Length	grid Distance Top
gridMarginBottom	Length	grid Distance Bottom
completeTextColor	ResourceColor	The color of the finish button
completeFontSize	number/string/ Resource	finish text size
isShowComplete	boolean	show Finish button
rectBgColor	ResourceColor	lattice Background
rectSelectBgColor	ResourceColor	check background
rectBorderWidth	Length	grid Border Width
rectBorderRadius	Length	check Fillet
rectBorderColor	ResourceColor	check Border Color
rectBorderSelectColor	ResourceColor	check Border Color
rectTextSize	Length	text size of grid
rectTextColor	Length	default color for check text
rectSelectTextColor	ResourceColor	checked color for check text
numProhibit	boolean	whether to ban numbers
numProhibitColor	ResourceColor	prohibit Text Color
deleteIconWidth	Length	delete image width
deleteIconSrc	PixelMap/ResourceStr/ DrawableDescriptor	delete icon resources

related Summary

there is a big difference between the license plate letter keyboard and the general keyboard. You can find that there is one letter missing on the keyboard. Because the I letter is confusing, this letter is not in the license plate keyboard.

HarmonyOS Yuan service project actual combat: the end of the memo search function to achieve.

程序员一鸣 — Mon, 30 Jun 2025 05:00:31 +0000

Foreword

this article is based on Api12

in fact, in the first three articles, we have already realized all the functions to be realized. Whether it is list display, data editing, style modification, skin changing, etc., we have reached a deliverable state. Of course, the current small project has also been put on the application store of Hongmeng System. The name is "Follow Your Heart". Everyone can experience it while doing the project. This article, I will realize the search function of the last point, and summarize the knowledge points used in this small project.

We can simply look at the results that have been completed so far.

On the first page of the memo, the color of the item is linked with the skin.

Content editing page, you can set the style and skin.

Search function implementation

at present, the search function is bound to the list page. First, it shares components to reduce pages and codes. Second, its function is not complicated and it is more intuitive to merge into one page.

Click the search box, enter the content to search, filter out the data matching the search content for display, click the cross on the right side of the search box, and restore all the data.

For the previous list data loading, we only need to modify it, add key search terms, pass them during search, and do not pass them during other calls, and use the filter function to filter and search for matching data.

doData(keyWord?: string) {
    try {
      this.doContentEmpty()
      this.mListContentBean = []
      DataPreferences.getInstance().getAllSync().allKeys?.forEach((key) => {
        let content = DataPreferences.getInstance().getSync<string>(key)
        let bean = JSON.parse(content) as ListContentBean
        this.mListContentBean.push(bean)
        if (DataPreferences.getInstance().getAllSync().allKeys?.length == this.mListContentBean.length) {

          this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)

          if (keyWord != undefined) {
            this.mListContentBean = this.mListContentBean.filter(item => item.title?.indexOf(keyWord) != -1);
          }
        }
      })
    } catch (e) {
    }
  }

UI components

Search({ placeholder: "search……" })
        .margin({ left: 10, right: 10, top: 10 })
        .onSubmit((value) => {
          //search
          this.doData(value)
        })
        .onChange((value: string, _?: PreviewText) => {
          if (value == "") {
            //clear
            this.doData()
          }
        })

memorandum of Knowledge

This memo project does not contain many knowledge points. There are two aspects of knowledge points that can be practiced. The first aspect is UI component-related, such as the use of List component, Search component, and rich text component RichEditor. In addition to these typical components, there are also many basic components.

The second aspect is the function. We can practice the addition, deletion, modification and check of user preference DataPreferences data, the avoidance between input box and soft keyboard, and the saving of page data and the echo of page data.

Related Summary

there are many restrictive factors in the development of meta-services, such as package size restrictions and related API restrictions. Therefore, when we actually develop, we still need to check whether the specific Api can be used in official website. At present, we have summarized several minor problems for the current small project, which can be used as a reference in the development process.

How to realize the bottom button, after the soft keyboard pops up, it is displayed on the soft keyboard?

Answer: Get the height of the soft keyboard, and dynamically set the components that need to be changed according to the pop-up and hiding of the soft keyboard.

Meta-service, using user preferences DataPreferences for data storage, how to store in the form of a list?

Answer: You only need to set different keys. When obtaining, you can traverse all keys and obtain the corresponding data with keys.

How should RichEditor echo data correctly?

A: After RichEditor initialization is complete , for example, in the onReady method.

HarmonyOS Yuan Service Project Actual Combat: Memorandum Implementation List Display

程序员一鸣 — Mon, 30 Jun 2025 04:59:25 +0000

Foreword

this article is based on Api12

in the first two chapters, we have already realized all the logic of UI and editing pages. In this article, we will focus on the following list Display. After all, there are data. How to disaggregate and display them in a friendly way is the most important. After all, each memo needs a designated entrance.

Display list, one is to display by default, and the other is to update list data after editing the editing page. Both situations need to be considered in actual development. Since the database is not used to store data at present, paging is slightly complicated to implement, and general memos will not have a large amount of data, except for special circumstances, of course, here we will discard paging first and directly obtain all of it, in actual APP projects or networking operations, for the sake of performance, try to make paging loading.

Another point to note is that the edited or modified memo content, the user preference DataPreferences used when saving, is not sorted by time, so when we display the list, we need to sort according to the timestamp of the content, so that the latest edited content is displayed at the front.

 this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)

Data presentation

at present, all the data is taken from the user's preferences, that is, the data saved in the editing page. Here, all the keys are directly traversed, all the data are obtained, and then converted into the objects we need, which is convenient for us to render the data. One thing needs to be noted, that is, the sorting mentioned above is currently carried out according to the timestamp.

doData() {
    try {
      this.doContentEmpty()
      this.mListContentBean = []
      DataPreferences.getInstance().getAllSync().allKeys?.forEach((key) => {
        let content = DataPreferences.getInstance().getSync<string>(key)
        let bean = JSON.parse(content) as ListContentBean
        this.mListContentBean.push(bean)
        if (DataPreferences.getInstance().getAllSync().allKeys?.length == this.mListContentBean.length) {
          //sort
          this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)
        }
      })
    } catch (e) {
    }
  }

Data Echo

with the data, when we click on the entry to view, there are many ways to deal with it, one is to view it directly, and the other is to echo it to the edit page, that is, to view and modify it together. Here we choose the second one. After clicking on the entry, it will echo to the edit page.

Click, data transfer.

router.pushUrl({
              url: "pages/EditPage", params: {
                "data": JSON.stringify(item)
              }
            })

To edit the page, we need to wait for RichEditor initialization before rendering data. We can set it in the onReady method.

RichEditor(this.options)
          .onReady(() => {
            if (router.getParams() != undefined) {
              let params = JSON.stringify(router.getParams())
              let bean = JSON.parse(JSON.parse(params)["data"]) as ListContentBean
              this.title = bean.title!
              this.nowTime = bean.time!
              this.clickSkinColorValue = bean.bgColor!
              this.tempContentItemId = bean.id!

              if (bean.content != undefined) {
                let array = JSON.parse(bean.content) as Array<RichEditorTextSpanResult>
                array.forEach((item) => {
                  this.controller.addTextSpan(item.value, {
                    style: {
                      fontColor: item.textStyle.fontColor,
                      fontSize: item.textStyle.fontSize,
                      fontStyle: item.textStyle.fontStyle,
                      fontFamily: item.textStyle.fontFamily,
                      fontFeature: item.textStyle.fontFeature,
                      fontWeight: item.textStyle.fontWeight > 10 ? FontWeight.Bold : FontWeight.Normal
                    }
                  })
                })
              }

            } else {
              //time
              this.nowTime = this.getDateTime()
              this.nowInterval = setInterval(() => {
                this.nowTime = this.getDateTime()
              }, 1000)
            }

          })

Data deletion

for data deletion, the sideslip method we use here can directly use the swipeAction attribute in the List component.

Delete, delete list array data, delete data in user preferences, and determine the default page display if there is no data currently.

DataPreferences.getInstance().delete("abner" + id, (isSuccess: boolean) => {
          if (isSuccess) {
            _this.mListContentBean.splice(index, 1)
            this.doContentEmpty()
          }
        })

Related Summary

counting this article, the memo project has already output 90%, basically covering the editing, display, Echo, storage and so on of the data. A small note-taking project has been completed. Of course, there is still one search to go. We put it in the last article.

At present, it is only the storage of text. In the actual memo, there are many functions, such as pictures, such as drawing, such as tables, etc. Of course, we need to implement them step by step.

HarmonyOS Yuan Service Project Actual Combat: Memorandum Content Editing and Development

程序员一鸣 — Mon, 30 Jun 2025 04:58:14 +0000

Foreword

this article is based on Api12

in the previous article, we have completed the main UI. In this article, we have completed the main function editing page. The so-called memo is to record the content. Of course, the content is not limited to text, pictures, styles, etc. The first version can only realize the text, and then continue to expand.

There are three key points to realize the development of editing pages. The first is to write rich text content, the second is to modify the style of content, and the third is to store content.

By the way, the current article corresponds remember meta-service items have been put on the shelves and can be searched in the application store. Remember can experience.

Rich Text Content Writing

Rich text content editing we can directly use the RichEditor component, the most important is the parameter, value: RichEditorOptions, through which we can set the style, and get the final rich text content, this is very important.

Defining Initialization Parameters

controller: RichEditorController = new RichEditorController();
options: RichEditorOptions = { controller: this.controller };

set Initialization Parameters

RichEditor(this.options)
          .onReady(() => {
            //time
            this.nowTime = this.getDateTime()
            this.nowInterval = setInterval(() => {
              this.nowTime = this.getDateTime()
            }, 1000)

          })
          .placeholder("Take notes at will, record every little bit", {
            fontColor: "#666666"
          })
          .caretColor(Color.Red)
          .padding(10)
          .margin({ top: 10 })
          .onSelect((value: RichEditorSelection) => {
            this.start = value.selection[0];
            this.end = value.selection[1];
          })
      }
      .alignRules({
        top: { anchor: "bar", align: VerticalAlign.Bottom },
        bottom: { anchor: "bottom_bar", align: VerticalAlign.Top }
      }).margin({ bottom: 80 })

content Style Modification

all content style modifications are made using the initialization parameters of there are two situations for the rich text controller to set, the first is to directly click on the style and then write the content, and the other is to set the style after long pressing on the original content.

For example, if I click the bold style first and then enter the text, then the entered text is bold and will return to normal only after the bold is canceled.

The second is to adjust the style after long-pressing the selected text in the original text. The following bold style requires attention, because the specified text style needs to be set and the starting position of the current long-pressed text needs to be obtained, that is, the onSelect method in the above code.

Of course, it's not just bolding, any style is basically these two situations. In addition, it's also very important to keep the previous style before modifying the style, for example, if the text becomes larger, bolding, and changing the color, then you modify the current style, only the current style, and cannot overwrite or discard the previous style.

As shown below, change the font size and color of the selected content, then the original bold is still retained.

Bold Text

private setBold() {
    if (this.start != -1 && this.end != -1) {
      this.controller.updateSpanStyle({
        start: this.start,
        end: this.end,
        textStyle: {
          fontWeight: FontWeight.Bolder
        }
      })
    }
  }

text skew

private setStyle() {
    if (this.start != -1 && this.end != -1) {
      this.controller.updateSpanStyle({
        start: this.start,
        end: this.end,
        textStyle: {
          fontStyle: FontStyle.Italic
        }
      })
    }
  }

text color

private setFontColor() {
    if (this.start != -1 && this.end != -1) {
      this.controller.updateSpanStyle({
        start: this.start,
        end: this.end,
        textStyle: {
          fontColor: this.clickStyleColorValue
        }
      })
    }
  }

before changing the specified style, we need to set the previously set style so that each style can be consistent.

  private changeStyle() {
    this.controller.setTypingStyle({
      fontWeight: this.isClickStyleB ? FontWeight.Bold : FontWeight.Normal,
      fontStyle: this.isClickStyleI ? FontStyle.Italic : FontStyle.Normal,
      fontColor: this.clickStyleColorValue,
      fontSize: this.clickStyleSizeValue
    })
  }

Content Storage

after editing the content, what we need to do is to store the content. After all, we are a stand-alone application and do not involve the network, so we can only choose the local storage method.

There are many ways to store data, such as databases, files, memory storage, etc. In the development of meta-services, it is not to use whichever you want, but to use whichever you support. At present, check official website and find that ohos.data.preferences (user preferences) are supported. We can use it to simply store our data. Of course, there is no support for meta-services on the official website of the database. There is no verification at present. If it is supported in the future, try to use the database.

UseFor user preferences, it should be noted that the dynamic setting of key can use the current timestamp as the key, while the corresponding value value is a json string, which contains attributes such as title, time, content, background color, etc.

User preferences currently encapsulate the tool class, you can go to the source code to view it.

            let title = this.title //标题
            let rootBgColorValue = this.clickSkinColorValue //背景颜色
            let id = this.tempContentItemId != undefined ? this.tempContentItemId : new Date().getTime() //id
            let span = JSON.stringify(this.controller.getSpans())
            let bean = new ListContentBean()
            if (title != undefined && title != "" && span != undefined && span != "") {
              bean.title = title
              bean.time = this.getDateTime()
              bean.timeValue = new Date().getTime()
              bean.id = id
              bean.bgColor = rootBgColorValue
              bean.content = span

              let spans = this.controller.getSpans() as Array<RichEditorTextSpanResult>
              let desc = ""
              spans.forEach((span) => {
                if (desc.length < 30) {
                  desc = desc + span.value.trim()
                }
              })
              bean.desc = desc
              let json = JSON.stringify(bean)
              DataPreferences.getInstance().putSync("abner" + id, json)
            }

Related Summary

regarding the time that should change in real time, it is impossible for me to enter the editing page 10:10, edit for 30 minutes, or 10:10, which is obviously unreasonable, so the time here must be real-time, this must be paid attention.

There are some other matters needing attention in editing the page, such as skin changing function, style setting at the bottom, etc., which are relatively simple and will not be repeated.

HarmonyOS Yuan Service Project Actual Combat: Memorandum UI Page Development

程序员一鸣 — Mon, 30 Jun 2025 04:56:55 +0000

Foreword

this article is based on Api12

before, I wrote an article about the shelf process of meta-service projects. In order to better understand and develop meta-service, I am going to develop a small project from 0 to 1. I also hope to help students who have just stepped into Hongmeng's development. The specific project is also very simple. It is a small memo project that can edit the content and display the edited content list. The development is very fast, usually half a day to a day can be done.

The biggest reason for choosing such a project is that there is no need for networking operations, and the data is stored locally, which is convenient for individual developers to develop and subsequently put on shelves.

Right, at present remember meta-service items have been put on the shelves and can be searched in the application store. Remember can experience.

Let's look at the final effect:

home page, no data status

home page, with data status

edit Page

since it is the first article before the project is developed, this article will take everyone to draw the basic UI.

Home page UI

the UI on the first page is very simple. The structure from top to bottom is the title bar, search box and Memo List. In page UI layout, we can select the Column component as the root layout, and then arrange it from top to bottom, because there are edit buttons and the default page when there is empty data. It is recommended to use the RelativeContainer component directly here. Of course, this is not the only layout method.

Title bar, you can use the Text component settings, Search using the Search component, List, directly use the List component, as for the default component, need to be dynamically displayed according to whether there is memo data.

The complete code is as follows:

RelativeContainer() {
  Column() {
    ActionBar({ title: "suixinji" })

    Search({ placeholder: "search……" })
      .margin({ left: 10, right: 10, top: 10 })

    List({ space: 10 }) {
      ForEach(this.mListContentBean, (item: ListContentBean, index: number) => {
        ListItem() {
          Column() {
            Text(item.time)
              .width("100%")
              .textAlign(TextAlign.End)
              .margin({ top: 5, right: 5 })

            Text(item.title)
              .fontWeight(FontWeight.Bold)
              .width("100%")

            Text(item.desc)
              .width("100%")
              .margin({ top: 10, bottom: 10 })
          }
          .width("100%")
            .height(100)
            .padding({
              top: 5,
              bottom: 5,
              left: 10,
              right: 10
            })
            .backgroundColor(item.bgColor == undefined ? "#e8e8e8" : item.bgColor)
            .borderRadius(10)
        }.swipeAction({
        end: {
          builder: () => {
            this.swipeDelete(this, item.bgColor == undefined ? "#e8e8e8" : item.bgColor,
                             item.id?.toString(), index)
          },
          actionAreaDistance: 80,
        }
      })
              .onClick(() => {

              })
              })
    }
    .width("100%")
      .layoutWeight(1)
      .padding({ left: 10, right: 10 })
      .margin({ top: 10 })
  }


  Text("＋")
    .width(60)
    .height(60)
    .backgroundColor("#FB553C")
    .borderRadius(50)
    .fontColor(Color.White)
    .fontSize(45)
    .textAlign(TextAlign.Center)
    .margin({ right: 20, bottom: 20 })
    .alignRules({
      bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
      right: { anchor: "__container__", align: HorizontalAlign.End }
    })
    .onClick(() => {


    })


  Text("NORMAL")
    .fontWeight(FontWeight.Bold)
    .visibility(this.isContentEmpty ? Visibility.Visible : Visibility.None)
    .alignRules({
      center: { anchor: "__container__", align: VerticalAlign.Center },
      middle: { anchor: "__container__", align: HorizontalAlign.Center }
    })


}.height('100%')
  .width('100%')

edit Page UI

the editing page is relatively more complicated. In addition to the content editing component, a skin change at the top and a row of style settings at the bottom are added. The same root layout is also the RelativeContainer component.

There are two points to pay attention to when drawing the editing page UI. One is a row of style buttons at the bottom, which need to be dynamically set according to the height of the soft keyboard. Of course, this article is only UI drawing, and we will talk about it in the following chapters. The other is the style list, such as text color, text size, skin list, etc., which needs to be hidden by dynamic display boxes.

How to dynamically display the style effect? It's very simple. You can write the style effect first, then hide it first. When you click on it, you can display it. For example, the skin change at the top. You can write the skin change UI first.

Column() {
        List() {
          ForEach(this.skinColors, (item: string, index: number) => {
            ListItem() {
              Column() {
                Image($r("app.media.complete"))
                  .width(20)
                  .height(20)
                  .visibility(this.clickSkinPosition == index ? Visibility.Visible : Visibility.None)
                  .border({ width: 1, color: "#666666", radius: 20 })
                  .margin({ bottom: 20 })
              }
              .width(100)
              .height(160)
              .backgroundColor(item)
              .justifyContent(FlexAlign.End)
              .borderRadius(5)
              .margin({ left: 10 })
              .onClick(() => {
                this.clickSkinPosition = index
                this.clickSkinColorValue = item
                this.isClickSkin = !this.isClickSkin
              })
            }
          })
        }
        .width("100%")
        .height(180)
        .backgroundColor("#e8e8e8")
        .listDirection(Axis.Horizontal)
        .padding({ top: 10 })
        .scrollBar(BarState.Off)
      }
      .backgroundColor(Color.Transparent)
      .width("100%")
      .height("100%")
      .onClick(() => {
        this.isClickSkin = !this.isClickSkin
      })
      .visibility(this.isClickSkin ? Visibility.Visible : Visibility.None)
      .alignRules({
        top: { anchor: "bar", align: VerticalAlign.Bottom },
      })

When you click the Skin Resurfacing button, a skin resurfacing list is displayed.


 this.isClickSkin = !this.isClickSkin

Basic effect

edit all UI codes on the page

RelativeContainer() {
      ActionBar({
        title: "EDIT",
        leftIcon: $r("app.media.complete"),
        left2Icon: $r("app.media.skin"),
        leftMenuAttribute: {
          imageWidth: 22,
          imageHeight: 22
        },
        leftMenu2Attribute: {
          imageWidth: 22,
          imageHeight: 22,
          imageMargin: { left: 20 }
        },
        onLeftImageClick: (position) => {
          if (position == 0) {

            router.back()
          } else {

            this.isClickSkin = !this.isClickSkin
          }
        }
      }).id("bar")

      Column() {
        TextInput({ placeholder: "Please enter a note title", text: $$this.title })
          .backgroundColor(Color.Transparent)
          .placeholderFont({ weight: FontWeight.Bold, size: 15 })
          .placeholderColor("#666666")
          .fontSize(18)
          .maxLength(50)
          .fontColor("#222222")
          .fontWeight(FontWeight.Bold)
          .caretColor(Color.Red)//光标的颜色
          .padding(10)
          .borderRadius(0)
          .margin({ top: 10 })

        Text() {
          Span(this.nowTime)
        }
        .width("100%")
        .fontSize(13)
        .fontColor("#666666")
        .padding({ left: 10 })
        .margin({ top: 10 })

        RichEditor(this.options)
          .onReady(() => {

            //获取当前的时间
            this.nowTime = this.getDateTime()
            this.nowInterval = setInterval(() => {
              this.nowTime = this.getDateTime()
            }, 1000)

          })
          .placeholder("Take notes at will, record every little bit", {
            fontColor: "#666666"
          })
          .caretColor(Color.Red)
          .padding(10)
          .margin({ top: 10 })
          .onSelect((value: RichEditorSelection) => {
            this.start = value.selection[0];
            this.end = value.selection[1];
          })
      }
      .alignRules({
        top: { anchor: "bar", align: VerticalAlign.Bottom },
        bottom: { anchor: "bottom_bar", align: VerticalAlign.Top }
      }).margin({ bottom: 80 })

      Column() {
        List({ space: 10 }) {
          ForEach(this.fontColors, (item: ResourceColor) => {
            ListItem() {
              Text()
                .width(20)
                .height(20)
                .backgroundColor(item)
                .borderRadius(20)
                .border({ width: 1, color: "#e8e8e8" })
                .onClick(() => {
                  this.clickStyleColorValue = item
                  this.changeStyle()
                  this.setFontColor()
                })
            }
          })
        }
        .width("100%")
        .height(30)
        .listDirection(Axis.Horizontal)
        .padding({ left: 10, right: 10 })
        .scrollBar(BarState.Off)
        .visibility(this.isClickStyleColor ? Visibility.Visible : Visibility.None)

        List({ space: 10 }) {
          ForEach(this.fontSizes, (item: string, index: number) => {
            ListItem() {
              Text(item)
                .height(20)
                .borderRadius(20)
                .fontColor(Color.Black)
                .fontWeight(FontWeight.Bold)
                .onClick(() => {
                  let fontSize = 15
                  if (index == 0) {
                    fontSize = 21
                  } else if (index == 1) {
                    fontSize = 20
                  } else if (index == 2) {
                    fontSize = 19
                  } else if (index == 3) {
                    fontSize = 18
                  } else if (index == 4) {
                    fontSize = 17
                  } else if (index == 5) {
                    fontSize = 16
                  } else if (index == 6) {
                    fontSize = 15
                  } else {
                    fontSize = Number(item)
                  }
                  this.clickStyleSizeValue = fontSize

                  this.changeStyle()
                  //设置文字大小
                  this.setFontSize()
                })
            }
          })
        }
        .width("100%")
        .height(30)
        .listDirection(Axis.Horizontal)
        .padding({ left: 10, right: 10 })
        .scrollBar(BarState.Off)
        .visibility(this.isClickStyleSize ? Visibility.Visible : Visibility.None)

        Row() {
          Image($r("app.media.font_size"))
            .onClick(() => {
              this.isClickStyleSize = !this.isClickStyleSize
              this.setBold()
            })
            .backgroundColor(this.isClickStyleSize ? "#e8e8e8" : Color.Transparent)
            .width(20)
            .height(20)

          Text("B")
            .onClick(() => {
              this.isClickStyleB = !this.isClickStyleB
              this.changeStyle()
              this.setBold()
            })
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .backgroundColor(this.isClickStyleB ? "#e8e8e8" : Color.Transparent)
            .width(30)
            .height(30)
            .textAlign(TextAlign.Center)
            .margin({ left: 20 })
          Text("I")
            .onClick(() => {
              this.isClickStyleI = !this.isClickStyleI
              this.changeStyle()
              this.setStyle()
            })
            .fontWeight(FontWeight.Bold)
            .fontStyle(FontStyle.Italic)
            .backgroundColor(this.isClickStyleI ? "#e8e8e8" : Color.Transparent)
            .fontSize(20)
            .margin({ left: 20 })
            .width(30)
            .height(30)
            .textAlign(TextAlign.Center)

          Image($r("app.media.color_bg"))
            .onClick(() => {
              this.isClickStyleColor = !this.isClickStyleColor
            })
            .backgroundColor(this.isClickStyleColor ? "#e8e8e8" : Color.Transparent)
            .margin({ left: 20 })
            .width(20)
            .height(20)
        }
        .width("100%")
        .height(50)
        .backgroundColor(this.clickSkinColorValue)
        .border({ width: { top: 1 }, color: "#e8e8e8" })
        .padding({ left: 20, right: 20 })

      }.id("bottom_bar")
      .alignRules({
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
      })


      Column() {
        List() {
          ForEach(this.skinColors, (item: string, index: number) => {
            ListItem() {
              Column() {
                Image($r("app.media.complete"))
                  .width(20)
                  .height(20)
                  .visibility(this.clickSkinPosition == index ? Visibility.Visible : Visibility.None)
                  .border({ width: 1, color: "#666666", radius: 20 })
                  .margin({ bottom: 20 })
              }
              .width(100)
              .height(160)
              .backgroundColor(item)
              .justifyContent(FlexAlign.End)
              .borderRadius(5)
              .margin({ left: 10 })
              .onClick(() => {
                this.clickSkinPosition = index
                this.clickSkinColorValue = item
                this.isClickSkin = !this.isClickSkin
              })
            }
          })
        }
        .width("100%")
        .height(180)
        .backgroundColor("#e8e8e8")
        .listDirection(Axis.Horizontal)
        .padding({ top: 10 })
        .scrollBar(BarState.Off)
      }
      .backgroundColor(Color.Transparent)
      .width("100%")
      .height("100%")
      .onClick(() => {
        this.isClickSkin = !this.isClickSkin
      })
      .visibility(this.isClickSkin ? Visibility.Visible : Visibility.None)
      .alignRules({
        top: { anchor: "bar", align: VerticalAlign.Bottom },
      })
    }
    .height('100%')
    .width('100%')
    .height(this.screenHeight) 
    .backgroundColor(this.clickSkinColorValue)
    .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

related Summary

there is nothing to say about UI page drawing, that is, the placement of components and the display logic of components. There are many attributes that are not recorded in the article. You can check them in the warehouse. One of my title bar components is used in the article. If you don't want to use them, you can use what you wrote.

HarmonyOS Development: Encryption Algorithm Encapsulation

程序员一鸣 — Mon, 30 Jun 2025 04:55:21 +0000

Foreword

this article is based on Api12

encryption algorithm is a common business in development. For the sake of security, the client and the server transmit data through encryption, which can ensure the confidentiality of data and prevent sensitive data leakage. In Hongmeng system, encryption algorithm is relatively easy to implement. After all, ArkTs is based on TypeScript, so some algorithms are basically common.

There are many encryption methods, such as symmetric encryption, asymmetric encryption, and Common message digest algorithm MD5,SHA and so on, this article mainly outlines several common algorithms, and simple package after use.

Message Digest Algorithm

message digest algorithm, that is, hash algorithm or one-way hash algorithm, through any length of message, Operation to generate fixed-length summary algorithm, Hongmeng is mainly through. Cryptoframe.createmd method to implement each algorithm.

Currently, the supported algorithms and specifications are as follows:

summary algorithm	types of Support	API version
HASH	SHA1	9 +
HASH	SHA224	9 +
HASH	SHA256	9 +
HASH	SHA384	9 +
HASH	SHA512	9 +
HASH	MD5	9 +
HASH	SM3	10 +

take a very simple SHA256 algorithm, other specifications, only need to change the type.

let md = cryptoFramework.createMd("SHA256")
Await md. update ({data: new Uint8Array (buffer. rom, 'utf-8'. buffer)})
let mdResult = await md.digest()
Console.info ('===encrypted result: '+mdResult.data)
let sha256Result = this.uint8ArrayToString(mdResult.data)
Console.info ('===converted to string result:'+sha256Result)
let mdLen = md.getMdLength()
Console.info ("===encrypted length:"+mdLen)

For example, MD5:

let md = cryptoFramework.createMd("MD5")
Await md. update ({data: new Uint8Array (buffer. rom, 'utf-8'. buffer)})
let mdResult = await md.digest()
Console.info ('===encrypted result: '+mdResult.data)
let sha256Result = this.uint8ArrayToString(mdResult.data)
Console.info ('===converted to string result:'+sha256Result)
let mdLen = md.getMdLength()
Console.info ("===encrypted length:"+mdLen)

as can be seen from the above code, the Api provided by the system is basically concise enough.

Base64

in fact, strictly speaking, base64 is not an encryption algorithm, but the corresponding the encoding format is used to represent binary data in the text protocol. By using Base64 encoding, binary data can be converted into printable ACSII characters, that is, Base64 encoding is the process from binary to character, so as to ensure that data is not lost during transmission.

The encoding and decryption of Base64 are also provided in Hongmeng, which is also very simple to use.


  // Base64
  public base64Encode(str: string): string {
    let blob: cryptoFramework.DataBlob = { data: new Uint8Array(buffer.from(str, 'utf-8').buffer) }
    let base64Helper = new util.Base64Helper()
    return base64Helper.encodeToStringSync(blob.data)
  }

  // Base64
  public base64Decode(input: string): string {
    let base64Helper = new util.Base64Helper()
    let uint8Array = base64Helper.decodeSync(input)
    return buffer.from(uint8Array).toString("utf-8")
  }

AES symmetric encryption

symmetric encryption has a remarkable feature, that is, the encryptor and The Decryptor use the same key. This method has a faster encryption and decryption speed and is suitable for long-term use of data. However, the process of key transmission is not safe and easy to crack. Key management is also troublesome. Common symmetric encryption includes AES,DES, and AES is the most commonly used.

Symmetric encryption AES provides seven encryption modes: ECB, CBC, OFB, CFB, CTR, GCM, and CCM. Different encryption modes apply different encryption and decryption parameters.

Grouping Mode	key length (bit)	fill mode	API version
ECB	[128	192	256]
CBC	[128	192	256]
CTR	[128	192	256]
OFB	[128	192	256]
CFB	[128	192	256]
GCM	[128	192	256]
CCM	[128	192	256]

A simple example of several modes of actual code execution, no matter which way, is to need the secret key and encryption and decryption content, generally we AES development, first to determine the secret key, and then determine the encrypted content and decryption content.

ECB mode, encryption and decryption


  async encryptMessagePromise(symKey: cryptoFramework.SymKey, plainText: cryptoFramework.DataBlob) {
    let cipher = cryptoFramework.createCipher('AES128|ECB|PKCS7');
    await cipher.init(cryptoFramework.CryptoMode.ENCRYPT_MODE, symKey, null);
    let cipherData = await cipher.doFinal(plainText);
    return cipherData;
  }


  async decryptMessagePromise(symKey: cryptoFramework.SymKey, cipherText: cryptoFramework.DataBlob) {
    let decoder = cryptoFramework.createCipher('AES128|ECB|PKCS7');
    await decoder.init(cryptoFramework.CryptoMode.DECRYPT_MODE, symKey, null);
    let decryptData = await decoder.doFinal(cipherText);
    re

GCM mode, encryption and decryption

genGcmParamsSpec() {
let ivBlob = this.generateRandom(12);
let arr = [1, 2, 3, 4, 5, 6, 7, 8];  // 8 bytes
let dataAad = new Uint8Array(arr);
let aadBlob: cryptoFramework.DataBlob = { data: dataAad };
arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];  // 16 bytes
let dataTag = new Uint8Array(arr);
let tagBlob: cryptoFramework.DataBlob = {
data: dataTag
};
//The authTag of GCM is obtained from the doFinal result during encryption and filled into the params parameter of the init function during decryption
let gcmParamsSpec: cryptoFramework.GcmParamsSpec = {
iv: ivBlob,
aad: aadBlob,
authTag: tagBlob,
algName: "GcmParamsSpec"
};
return gcmParamsSpec;
}

gcmParams = this.genGcmParamsSpec();

//Encrypt messages
async encryptMessagePromise(symKey: cryptoFramework.SymKey, plainText: cryptoFramework.DataBlob) {
let cipher = cryptoFramework.createCipher('AES128|GCM|PKCS7');
await cipher.init(cryptoFramework.CryptoMode.ENCRYPT_MODE, symKey, this.gcmParams);
let encryptUpdate = await cipher.update(plainText);
//When encrypting doFinal in gcm mode, pass in empty space, obtain tag data, and update it to the gcmParams object.
this.gcmParams.authTag = await cipher.doFinal(null);
return encryptUpdate;
}

//Decrypt message
async decryptMessagePromise(symKey: cryptoFramework.SymKey, cipherText: cryptoFramework.DataBlob) {
let decoder = cryptoFramework.createCipher('AES128|GCM|PKCS7');
await decoder.init(cryptoFramework.CryptoMode.DECRYPT_MODE, symKey, this.gcmParams);
let decryptUpdate = await decoder.update(cipherText);
//When decrypting doFinal in gcm mode, empty data is passed in. When verifying init, tag data is passed in. If verification fails, an exception will be thrown.
let decryptData = await decoder.doFinal(null);
if (decryptData == null) {
console.info('GCM decrypt success, decryptData is null');
}
return decryptUpdate;
}

CCM mode, encryption and decryption

genCcmParamsSpec() {
let rand: cryptoFramework.Random = cryptoFramework.createRandom();
let ivBlob: cryptoFramework.DataBlob = rand.generateRandomSync(7);
let aadBlob: cryptoFramework.DataBlob = rand.generateRandomSync(8);
let arr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];  // 12 bytes
let dataTag = new Uint8Array(arr);
let tagBlob: cryptoFramework.DataBlob = {
data: dataTag
};
//CCM's authTag is obtained from the doFinal result during encryption and filled into the params parameter of the init function during decryption
let ccmParamsSpec: cryptoFramework.CcmParamsSpec = {
iv: ivBlob,
aad: aadBlob,
authTag: tagBlob,
algName: "CcmParamsSpec"
};
return ccmParamsSpec;
}

ccmParams = this.genCcmParamsSpec();

//Encrypt messages
async encryptMessagePromise(symKey: cryptoFramework.SymKey, plainText: cryptoFramework.DataBlob) {
let cipher = cryptoFramework.createCipher('AES128|CCM');
await cipher.init(cryptoFramework.CryptoMode.ENCRYPT_MODE, symKey, this.ccmParams);
let encryptUpdate = await cipher.update(plainText);
//When encrypting doFinal in CCM mode, pass in empty space, obtain tag data, and update it to the ccmParams object.
this.ccmParams.authTag = await cipher.doFinal(null);
return encryptUpdate;
}

//Decrypt message
async decryptMessagePromise(symKey: cryptoFramework.SymKey, cipherText: cryptoFramework.DataBlob) {
let decoder = cryptoFramework.createCipher('AES128|CCM');
await decoder.init(cryptoFramework.CryptoMode.DECRYPT_MODE, symKey, this.ccmParams);
let decryptUpdate = await decoder.doFinal(cipherText);
return decryptUpdate;
}

in actual development, we can generate our secret key according to the provided string or other specific characters, generally in the form of a string key after Base64 encoding, and then decode it when encrypting and decrypting.

RSA asymmetric encryption

the difference between asymmetric encryption and symmetric encryption is that it has two secret keys, a public key and a private key. The public key is used for encryption and the private key is used for decryption. Compared with symmetric encryption, the security factor is on a higher level, but there is also the risk of man-in-the-middle attack. Common asymmetric encryption includes RSA,DSA,ECC, etc. Generally, the most commonly used is RSA.

RSA also provides a variety of encryption methods, such as PKCS1 mode PKCS1_OAEP mode, and NoPadding.

PKCS1 mode


  async encryptMessagePromise(publicKey: cryptoFramework.PubKey, plainText: cryptoFramework.DataBlob) {
    let cipher = cryptoFramework.createCipher('RSA1024|PKCS1');
    await cipher.init(cryptoFramework.CryptoMode.ENCRYPT_MODE, publicKey, null);
    let encryptData = await cipher.doFinal(plainText);
    return encryptData;
  }


  async decryptMessagePromise(privateKey: cryptoFramework.PriKey, cipherText: cryptoFramework.DataBlob) {
    let decoder = cryptoFramework.createCipher('RSA1024|PKCS1');
    await decoder.init(cryptoFramework.CryptoMode.DECRYPT_MODE, privateKey, null);
    let decryptData = await decoder.doFinal(cipherText);
    return decryptData;
  }

Other modes, no longer examples, you can go to the official website to check.

Encapsulation Use

you can use the above methods to encrypt and decrypt the data. Of course, you can also package it yourself or use someone else's package. For the above, I also simply packaged it, and friends who need it can use it.

Simple Feature List

quick Use

method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5.

Suggestion: Execute the command under the module path used.

ohpm install @abner/security

Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:

"dependencies": { "@abner/security": "^1.0.0"}

code Use

1, MD5

synchronization

Let encryptContent=md5EncryptSync ("encrypted data")
Console.log ("===encrypted:"+encryptContent)

asynchronous

Md5Encrypt ("encrypted data"). then ((content)=>{
Console.log ("===encrypted:"+content)
})

2, BASE64

code synchronization

Let encryptContent=base64EncodeSync ("I am test data")
this.mBase64EncodeString = encryptContent
Console.log ("===encoded:"+encryptContent)

coding asynchronous

Base64Encode ("I am test data"). then ((encryptContent)=>{
this.mBase64EncodeString = encryptContent
Console.log ("===encoded:"+encryptContent)
})

decode synchronization

base64Decode(this.mBase64EncodeString).then((decode) => {
Console.log ("===decoded:"+decode)
})

3, SHA

the default sha is SHA256, which can be modified as needed. Just pass in the second parameter.

Synchronization

let encryptContent = shaEncryptSync("1")

asynchronous

shaEncrypt("1").then((content) => {

})

modify the algName

let encryptContent = shaEncryptSync("1","SHA256")

4. SM3

synchronization

Let encryptContent=sM3EncryptSync ("encrypted data")
Console.log ("===encrypted:"+encryptContent)

asynchronous

SM3Encrypt ("encrypted data"). then ((content)=>{
Console.log ("===encrypted:"+content)
})

5, AES

randomly generate SymKey [asynchronous]]

aesGenerateSymKey().then((symKey) => {
this.mSymKey = symKey
Console.log (===Key:+symKey)
})

randomly generate SymKey key [synchronization]]

let symKey = aesGenerateSymKeySync()
this.mSymKey = symKey
Console.log (===Key:+symKey)

string Generation Key [Asynchronous]]

aesGenerateSymKey("1234").then((symKey) => {
  this.mSymKey = symKey

})

string Generation Key [Sync]]

let symKeyString = aesGenerateSymKeySync("1234")
this.mSymKey = symKeyString

encrypted data [asynchronous] [ECB mode]]

aesEncryptString("123", this.mSymKey).then((result) => {
  this.encryptString = result

})

decryption data [asynchronous] [ECB mode]]

aesDecryptString(this.encryptString, this.mSymKey).then((result) => {

})

encrypted data [synchronization] [ECB mode]]

let result = aesEncryptStringSync("123", this.mSymKey)
this.encryptString = result

decryption data [synchronization] [ECB mode]]

let decryptString = aesDecryptStringSync(this.encryptString!, this.mSymKey!)

6. RSA

randomly generate KeyPair [asynchronous]]

rsaGenerateAsyKey().then((keyPair) => {
  let pubKey = keyPair.pubKey 
  let priKey = keyPair.priKey 
  this.priKey = priKey
  this.pubKey = pubKey
})

randomly generate KeyPair [synchronization]]

let keyPair = rsaGenerateAsyKeySync()
let pubKey1 = keyPair.pubKey 
let priKey1 = keyPair.priKey 
this.priKey = priKey1
this.pubKey = pubKey1

randomly Generate String Key Pair [Asynchronous]]

rsaGenerateAsyKeyPem().then((keyPairPem) => {
  let pubKey = keyPairPem.pubKey 
  let priKey = keyPairPem.priKey 
})

randomly Generate String Key Pair [Synchronization]]

let keyPairPem = generateAsyKeyPemSync()
let pubKeyPem = keyPairPem.pubKey 
let priKeyPem = keyPairPem.priKey

randomly generated key pair binary [asynchronous]]

rsaGenerateAsyKeyDataBlob().then((dataBlobArray) => {
  let pubKey: cryptoFramework.DataBlob = dataBlobArray[0]
  let priKey: cryptoFramework.DataBlob = dataBlobArray[1]

})

randomly Generated Binary Key Pair [Synchronization]]

let dataBlobArray = rsaGenerateAsyKeyDataBlobSync()
let pubKey: cryptoFramework.DataBlob = dataBlobArray[0]
let priKey: cryptoFramework.DataBlob = dataBlobArray[1]

generate KeyPair key pair by specifying binary data [asynchronous]]

rsaGenKeyPairByData(this.pkData, this.skData).then((keyPair) => {
  let pubKey = keyPair.pubKey 
  let priKey = keyPair.priKey 
  this.priKey = priKey
  this.pubKey = pubKey
})

generate KeyPair key pair by specifying binary data [synchronization]]

let keyPairByDataSync = rsaGenKeyPairByDataSync(this.pkData, this.skData)
let pubKeyPairByData = keyPairByDataSync.pubKey 
let priKeyPairByData = keyPairByDataSync.priKey 
this.priKey = priKeyPairByData
this.pubKey = pubKeyPairByData

generating String Key Pairs from Binary Data [Asynchronous]]

rsaGenKeyPairByDataPem(this.pkData, this.skData).then((keyPairPem) => {
  let pubKeyPem = keyPairPem.pubKey 
  let priKeyPem = keyPairPem.priKey 
})

generate String Key Pair from Binary Data [Synchronization]]

let keyPairByDataPemSync = rsaGenKeyPairByDataPemSync(this.pkData, this.skData)
let pubKeyPairByDataPem = keyPairByDataPemSync.pubKey 
let priKeyPairByDataPem = keyPairByDataPemSync.priKey

string data generation KeyPair [asynchronous]]

rsaGenKeyPairString(this.appRsaPublicKey, this.appRsaPrivateKey).then((keyPair) => {
  let pubKey = keyPair.pubKey
  let priKey = keyPair.priKey
  this.priKey = priKey
  this.pubKey = pubKey
})

string data generation KeyPair [synchronization]]

let keyPair2 = rsaGenKeyPairStringSync(this.publicPkcs1Str1024, this.priKeyPkcs1Str1024)
let pubKey3 = keyPair2.pubKey
let priKey3 = keyPair2.priKey
this.priKey = priKey3
this.pubKey = pubKey3

string data generation string key pair [asynchronous]]

rsaGenKeyPairStringPem(this.appRsaPublicKey, this.appRsaPrivateKey).then((keyPair) => {
          let pubKeyPem = keyPair.pubKey
          let priKeyPem = keyPair.priKey 
        })

String data generation string key pair [synchronization]]

let keyPairStringPemSync = rsaGenKeyPairStringPemSync(this.publicPkcs1Str1024, this.priKeyPkcs1Str1024)
        let pubKeyPairStringPemSync = keyPairStringPemSync.pubKey 
        let priKeyPairStringPemSync = keyPairStringPemSync.priKey

string key encryption [asynchronous]]

Let message="I am a piece of data that needs to be encrypted"
Console.log ("===Data before encryption:"+message)
rsaEncryptString(message, this.publicKey).then((data) => {
this.encryptString = data
Console.log ("===encrypted data:"+data)
}).catch((e: BusinessError) => {
Console.log ("===Encryption Error:"+JSON. stringify (e.message))
})

string Key Mode Decryption [Asynchronous]]

//There must be a private key and the data to be decrypted
rsaDecryptString(this.encryptString, this.privateKey).then((data) => {
Console.log ("==decrypted data:"+data)
})

string key encryption [synchronization]]

Let message1="I am a piece of data that needs to be encrypted"
Console.log ("===Data before encryption:"+message1)
this.encryptString = rsaEncryptStringSync(message1, this.publicKey)
Console.log ("===encrypted data:"+this. encryptString)

string Key Mode Decryption [Synchronization]]

//There must be a private key and the data to be decrypted
let data = rsaDecryptStringSync(this.encryptString, this.privateKey)
Console.log ("==decrypted data:"+data)

encryption KeyPair key method [asynchronous] requires cryptoFramework.PubKey

if (this.pubKey != undefined) {
Let message="I am a piece of data that needs to be encrypted"
Console.log ("===Data before encryption:"+message)
rsaEncryptDataBlob(message, this.pubKey!).then((data) => {
this.encryptDataBlob = data
Console.log ("===encrypted data:"+JSON. stringify (data))
}).catch((e: BusinessError) => {
Console.log ("===Encryption Error:"+JSON. stringify (e.message))
})
}

decrypt KeyPair key method [asynchronous]]

if (this.priKey != undefined && this.encryptDataBlob != undefined) {
//There must be a private key and the data to be decrypted
rsaDecryptDataBlob(this.encryptDataBlob, this.priKey).then((data) => {
Console.log ("==decrypted data:"+data)
})
}

encryption KeyPair key mode [synchronization]]

if (this.pubKey != undefined) {
Let message1="I am a piece of data that needs to be encrypted"
Console.log ("===Data before encryption:"+message1)
this.encryptDataBlob = rsaEncryptDataBlobSync(message1, this.pubKey!)
Console.log ("===encrypted data:"+JSON. stringify (this. encryptDataBlob))
}

decrypt KeyPair key mode [synchronization]]

if (this.priKey != undefined && this.encryptDataBlob != undefined) {
//There must be a private key and the data to be decrypted
let data = rsaDecryptDataBlobSync(this.encryptDataBlob, this.priKey)
Console.log ("==decrypted data:"+data)
}

private key signature synchronization

let sign = rsaEncryptPriKeyContentSync("123", this.privateKey)
Console.log ("======Signature:"+sign)

public Key Signature Verification Synchronization

//This. signData is the signature content
let signResult = rsaDecryptPubKeyContentSync("123",this.signData, this.publicKey)
Console.log ("=====signature verification:"+signResult)

private key signing asynchronous

rsaEncryptPriKeyContent("123", this.privateKey).then((sign) => {
Console.log ("======Signature:"+sign)
})

public Key Signature Verification Asynchronous

rsaEncryptPriKeyContent("123", this.privateKey).then((sign) => {
Console.log ("======Signature:"+sign)
})

HarmonyOS Development: Customize a Dialog that pops up anywhere

程序员一鸣 — Mon, 30 Jun 2025 04:54:03 +0000

Foreword

this article is based on Api12

in the development of Hongmeng, there has always been a problem bothering him, and presumably most developers, that is, the dialog custom pop-up window provided by the system cannot be popped up at any position, which is limited the member variables of @ CustomDialog and @ Component struct, which leads to, I want to pop up in the encapsulated tool class or ViewModel, or other places, can only be executed by triggering the UI layer through events or callbacks, which is very inconvenient. In addition, although we can share UI, CustomDialogController needs to be defined everywhere, which is also very redundant. Of course, the dialog itself should pop up at the UI layer. There is no problem with Hongmeng's design, but in order to take into account the ease of use, it should pop up at any position, which is probably very necessary for many people.

System custom pop-up window

dialogController = new CustomDialogController({
builder: this.customDialog,
autoCancel: true,
})

/*
* Author:AbnerMing
*Description: Custom Dialog
*/
@Builder
customDialog() {
Text ("I am a custom dialog")
.width("100%")
.height(100)
}


This. dialogController. open()//Pop up
This. dialogController. close()//Close

at present, there are two ways to get rid of UI restrictions and pop up at any position. The first is to use window to create a window. This form requires initialization. Whether it depends on window.WindowStage or an ordinary page, it is a front dependency. Of course, there is another point, that is, the pop-up method is slightly stiff, but it can meet the normal needs. The second is through openCustomDialog in promptAction however, this method needs to be in Api11 and above. For the current use requirements, if you want to pop up at any position, it is still recommended to use it. The openCustomDialog method.

openCustomDialog simple to use

The pop-up window is popped up by openCustomDialog and closed by closeCustomDialog.

private customDialogComponentId: number = 0

build() {
Column() {
Button ("Simple Demo")
.onClick(() => {
promptAction.openCustomDialog({
builder: () => {
this.customDialogComponent()
}
}).then((dialogId: number) => {
this.customDialogComponentId = dialogId
})
})
}
.width("100%")
.height("100%")
.justifyContent(FlexAlign.Center)
}

@Builder
customDialogComponent() {
Column() {
Text ('spop up '). fontSize (30)
Row({ space: 50 }) {
Button ("Confirm"). onClick()=>{
promptAction.closeCustomDialog(this.customDialogComponentId)
})
Button ("Cancel"). onClick()=>{
promptAction.closeCustomDialog(this.customDialogComponentId)
})
}
}.height(200).padding(5).justifyContent(FlexAlign.SpaceBetween)
}

At present, based on the openCustomDialog method, it has also encapsulated a layer and has supported most common functions in the market, such as information pop-up window, confirmation cancellation form pop-up window, bottom pop-up window, time, city and other styles. Of course, it also supports custom component forms, covering almost all scenarios and can be directly used by friends who need them.

Central Warehouse Address:

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

at present, various functions are also listed so that everyone can use them in a targeted way.

Quick Use

method 1: in the Terminal window, run the following command to install the third-party package. DevEco Studio automatically adds the third-party package dependency to the project oh-package.json5.

Suggestion: Execute the command under the module path used.

ohpm install @abner/dialog

Method 2: Set the three-party package dependency in the project oh-package.json5. The configuration example is as follows:

"dependencies": { "@abner/dialog": "^1.1.1"}

initialization

initialization can change the unified configuration, such as width and height, such as size, such as background, etc., of course, if necessary, if the default style meets the requirements, global initialization can be omitted , you can also modify the style when you call it separately.

initDialog(attribute)

Property Introduction

property	Type	overview
attribute	FusionAttribute	optional parameter, dialog attribute global configuration, used to modify the pop-up window style, can be configured here according to UI

FusionAttribute attribute

FusionAttribute is a global dialog attribute configuration. If the default dialog style is different from the style in your project, you can use this parameter to set it. If you configure the global dialog attribute once, it will take effect in all places on the page, which is convenient for you to use later.

Property	type	overview
infoOrConfirmAttribute	ContentAttribute	optional parameters, information or confirmation form pop-up window attribute configuration
bottomListAttribute	BottomListAttribute	optional parameters, the bottom list pop-up window attribute configuration
bottomGridAttribute	BottomGridAttribute	optional parameters, bottom grid list pop-up window attribute configuration
bottomListScrollAttribute	BottomListScrollAttribute	optional parameters, sliding list properties at the bottom
toastAttribute	ToastAttribute	optional parameter, Toast attribute configuration
loadingAttribute	LoadingAttribute	optional parameters, loading hint
isUseMainWindow	boolean	whether to use the main window or the child window, the default is the child window.

ContentAttribute attribute

ContentAttribute is a pop-up attribute configuration in the form of information or confirmation.

Property	type	overview
title	string / Resource	optional parameters, headers, no configuration required in global initialization
message	string / Resource	optional parameter, description information, no configuration required in global initialization
cancelText	string / Resource	Optional parameters, canceling text
confirmText	string / Resource	optional parameters, confirmation text
clickCancelHide	boolean	optional parameters, click to unhide by default
isHideTitle	boolean	optional parameter, whether to hide the title, default not to hide
clickCancel	callback	optional parameter, click to cancel callback event
clickConfirm	callback	optional parameters, click to confirm the callback event
bottomMenuHeight	Length	optional parameter, bottom button height
backgroundColor	ResourceColor	optional parameters, background color
radius	BorderRadiuses / Length	optional parameter, angle
titleAttribute	TitleAttribute	optional Parameters, Title Style Properties
messageAttribute	MessageAttribute	optional parameters, describing style properties
dividerHAttribute	DividerHAttribute	optional parameter, Horizontal Split Line Style attribute
dividerVAttribute	DividerVAttribute	optional Parameter, Vertical Split Line Style Property
confirmAttribute	ConfirmAttribute	optional Parameters, Confirm Style Properties
cancelAttribute	CancelAttribute	optional parameters, canceling style attributes
dialogAttribute	DialogAttribute	optional parameters, popup overall properties

BottomListAttribute attribute attribute

BottomListAttribute is the bottom list popup attribute configuration.

Property	Type	overview
backgroundColor	ResourceColor	background Color
items	string[]	list Entry
itemClick	(position: number)	entry Click Callback
cancelClick	()	cancel Click Callback
isHideCancel	boolean	whether to hide the cancel button
isTransparent	boolean	transparent display
itemRadius	Length / BorderRadiuses	the overall angle of the entry after transparency
cancelRadius	Length / BorderRadiuses	transparent Post Cancel Button Angle
topLeftRadius	Length	dialog左上角角度
topRightRadius	Length	dialog右上角角度
itemAttr	BottomListItem	条目属性
itemDivider	ListItemDivider	分割线属性
cancelAttr	BottomListCancel	底部取消属性
dialogAttribute	DialogAttribute	弹窗总体属性

BottomGridAttribute

属性	类型	概述
items	BottomGridModel[]	条目数据，用于网格
itemLineArray	Array	条目数据，用户每行展示几个，每行几个就几个数据
columnSize	number	number of columns, 2 columns by default
barTitleAttr	BarTitleGridAttribute	titlebar property of the edge on the grid
barHeight	number	the height of the titleBar on the upper edge of the grid
barCancelTextAttr	BarCancelTextGridAttribute	cancel attribute in titleBar
barCancelImageAttr	BarCancelImageGridAttribute	cancel the picture attribute in titleBar, and choose one from the text.
isBarCancelImage	boolean	whether the cancellation in titleBar is the image method, the default is false.
itemMarginTop	number	item Each row from top
backgroundColor	ResourceColor	background Color
topLeftRadius	Length	dialog Top Left Angle
topRightRadius	Length	dialog upper right corner angle
isHideBar	boolean	whether to hide titlebar
dialogAttribute	DialogAttribute	global dialog attribute
isItemAttrGlobal	boolean	whether the entry property is global, the default is
itemAttr	ItemGridAttribute	item Properties
itemClick	(position: number)	entry Click Callback
cancelClick	()	cancel Click Callback
dividerColor	ResourceColor	split line color
dividerHeight	number	split line height
isLastDividerShow	boolean	whether to display the last one. Default display
dividerMarginTop	Margin / Length	height of dividing line from upper edge
isShowBottomCancel	boolean	whether to display the bottom cancel button. By default, it is not displayed.
bottomCancelTextAttr	CancelTextGridAttribute	cancel button properties at the bottom

ToastAttribute attribute

property	type	overview
msg	string / Resource	prompt information, no need for initialization
duration	number	pop-up time, default 2000
backgroundColor	ResourceColor	背景颜色
fontColor	ResourceColor	字体颜色，默认ffffff
fontWeight	number / FontWeight / string	字体粗细设置，默认400
fontSize	number / string / Resource	字体大小，默认16
fontFamily	string / Resource	字体样式
borderRadius	Length / BorderRadiuses	角度
padding	Padding / Length	内边距
flexAlign	FlexAlign	位置方向
leftSrc	PixelMap / ResourceStr/ DrawableDescriptor	Picture on the left
rightSrc	PixelMap / ResourceStr/ DrawableDescriptor	picture on the right
topSrc	PixelMap / ResourceStr/ DrawableDescriptor	picture above
bottomSrc	PixelMap / ResourceStr/ DrawableDescriptor	picture below
imageMargin	Length	picture Distance Text Distance
imageWidth	Length	picture Width
imageHeight	Length	picture height
imageAlt	string /Resource	the percentage bitmap displayed when loading

DialogAttribute attribute

each pop-up window has a dialogAttribute attribute to control the overall pop-up window style.

Property	Type	overview
windowAlignment	DialogAlignment	pop-up window position
dialogDismiss	(action? :DismissDialogAction) => void	dialog hidden state callback
dialogAppear	() => void	dialog display callback
windowBottomAnimation	boolean	whether to turn on bottom animation
isPrivacyMode	boolean	whether to prevent screenshots, the default is not
isSystemAnimation	boolean	whether the system is animated or not, the default is both

code Case

1. Information pop-up window

showDialogInfo({
Title: "I am the title",
Message: "I am a description",
clickConfirm: () => {
//Confirm
Console.log (===Confirm)
//Hide()//Hide
}
})

2. Confirm/cancel pop-up window

showDialogConfirm({
Title: "I am a title",
Message: "I am a description",
clickCancel: () => {
//Cancel
Console.log ("===Cancel")
//Hide()//Hide
},
clickConfirm: () => {
//Confirm
Console.log (===Confirm)
//Hide()//Hide
}
})

3. Bottom List

showDialogBottomList({
Items: ["I am item one", "I am item two"],
itemClick: (position: number) => {
console.log("==========:" + position)
}
})

4. Confirm the prompt information pop-up window

showDialogConfirm({
Title: "I am a title",
Message: "I am a description",
isShowInformation: true, //Display Information
informationAttribute: {
checkboxSelect: true, //Is it selected by default
iconAttribute: {
srcSelect: $r("app.media.startIcon"), //Select
srcUnselected: $r("app.media.loading001"), //Not selected
},
onChange: (isChange) => {
//Clicking changed the status
console.log("===" + isChange)
}
},
clickCancel: () => {
//Cancel
//hide()
Console.log ("===Cancel")
},
clickConfirm: () => {
//Confirm
Console.log (===Confirm)
}
})

5. Bottom List

showDialogBottomList({
Items: ["I am item one", "I am item two"],
itemClick: (position: number) => {
console.log("==========:" + position)
}
})

6. The bottom list is transparent

showDialogBottomList({
Items: ["I am item one", "I am item two"],
itemClick: (position: number) => {
console.log("==========:" + position)
},
isTransparent: true,
dialogAttribute: {
dialogMarginLeft: 20,
dialogMarginRight: 20
}
})

7. Bottom List Multi-style

showDialogBottomList({
ItemModels: [new BottomListModel ("Item 1", {fontColor: Color. Red}), new BottomListModel ("Item 2")],
itemClick: (position: number) => {
hide()
}
})

8. Bottom Grid List

showDialogBottomGrid({
columnSize: 4,
Items: [new BottomGridModel ("WeChat", $r ("app. media. app_icon")),
New BottomGridModel ("Moments", $r ("app. media. app_icon"),
new BottomGridModel("QQ", $r("app.media.app_icon")),
New BottomGridModel ("QQ Space", $r ("app. media. app_icon"),
New BottomGridModel (Weibo, $r (app. media. app_icon)),
New BottomGridModel (Weibo, $r (app. media. app_icon)),
New BottomGridModel (Weibo, $r (app. media. app_icon)),
New BottomGridModel ("Weibo", $r ("app. media. app_icon")
],
itemClick: (position) => {
console.log("==============:" + position)
}
})

9. The bottom grid is distinguished by rows

showDialogBottomGrid({
columnSize: 4,
isShowBottomCancel: true,
isHideBar: true,
itemLineArray: [
[new BottomGridModel ("Test", $r ("app. media. app_icon")),
New BottomGridModel ("Test", $r ("app. media. app_icon")),
[new BottomGridModel ("Test", $r ("app. media. app_icon")),
New BottomGridModel ("Test", $r ("app. media. app_icon"),
New BottomGridModel ("Test", $r ("app. media. app_icon"))
],
itemClick: (position) => {
console.log("==============" + position)
}
})

10. Custom Component Pop-up Window

the first thing to do is to customize a global Components , you can pass in custom components, or write the layout directly.

/*
* Author:AbnerMing
*Description: Custom pop ups, self defined layout
*/
@Builder
function BuilderDialog() {
Column() {
Text ("I am a custom pop-up")
.margin({ top: 30 })
Row() {
Button ("Cancel"). onClick()=>{
//Hide dialog
hide()
})
Button ("OK")
.margin({ left: 30 })
}.margin({ top: 20 })
.margin({ top: 30 })
}.backgroundColor(Color.White)
.width("60%")
}

Code call

showDialog(wrapBuilder(BuilderDialog))

11. Custom Component Pop-up Parameters

the first thing to do is to customize a global Components , you can pass in custom components, or write the layout directly.

class DialogParams {
title? : string
}

@Builder
function BuilderDialogParams(params: DialogParams) {
Column() {
Text(params.title)
.margin({ top: 30 })
Row() {
Button ("Cancel"). onClick()=>{
//Hide dialog
hide()
})
Button ("OK")
.margin({ left: 30 })
}.margin({ top: 20 })
.margin({ top: 30 })
}.backgroundColor(Color.White)
.width("60%")
}

Code call

let params = new DialogParams()
Params. title="I am the passed parameter"
showDialogParams(wrapBuilder(BuilderDialogParams), params)

12. toast Tips

Toast ("I am an ordinary toast")

13. toast changes the background

Toast ("I am a background changing Toast", {backgroundColor: Color. Red})

14. toast changes position

Toast ("I am a relocated Toast", {alignment: DialogAlignment. Center})

15. toast picture setting

Toast ("Toast Set Icon", {leftSrc: $r ("app. media. app_icon")})

16. Bottom List

showDialogBottomListScroll({
Items: ["Male", "Female"],
titleBarAttribute: {
Title Text: "Choose Gender"
},
confirmClick: (value, index) => {
console.log(value + "=========" + index)
}
})

17. The bottom double list is not linked

showDialogBottomListScroll({
selected: [1, 2],
Items: [["First Column 1", "First Column 2"], ["Second Column 1", "Second Column 2", "Second Column 3"],
titleBarAttribute: {
Title Text: "Bottom dual list not linked"
},
confirmClick: (value, index) => {
console.log(value + "=========" + index)
}
})

18. Bottom double list linkage

showDialogBottomListScroll({
items: this.doubleList,
titleBarAttribute: {
Title Text: "Bottom Double List Linkage"
},
confirmClick: (value, index) => {
console.log(value + "=========" + index)
}
})

19, the bottom three list linkage

showDialogBottomListScroll({
items: this.thirdList,
titleBarAttribute: {
Title Text: "Bottom Three List Linkage",
},
confirmClick: (value, index) => {
console.log(value + "=========" + index)
}
})

20, year, month, day, hour, minute and second time pop-up window

showDialogTime({
titleBarAttribute: {
Title Text: "Year Month Day Hour Minute Second Pop up",
},
timeAttribute: {
timeType: TimeDialogType.YMDHMS,
},
timeConfirmClick: (date) => {
//Time callback
Console.log (===time result:+date)
},
confirmClick: (value, index) => {
//Content and index callbacks
Console.log ("===Content result:"+value+"===Index result:"+index)
}
})

21, year, month, day, pop-up window

showDialogTime({
titleBarAttribute: {
Title Text: "Month Day Hour Time Pop up",
},
timeAttribute: {
timeType: TimeDialogType.YMDHM
},
timeConfirmClick: (date) => {
//Time callback
Console.log (===time result:+date)
},
confirmClick: (value, index) => {
//Content and index callbacks
Console.log ("===Content result:"+value+"===Index result:"+index)
}
})

22, year, month, pop-up window

showDialogTime({
titleBarAttribute: {
Title Text: "Year Month Day Pop up",
},
timeAttribute: {
startTime: "2022-6-12",
endTime: "2025-8-20",
},
timeConfirmClick: (date) => {
//Time callback
},
confirmClick: (value, index) => {
//Content and index callbacks
}
})

23, month and day pop-up window

showDialogTime({
titleBarAttribute: {
Title Text: "Month Day Pop up",
},
timeAttribute: {
timeType: TimeDialogType.MD
},
timeConfirmClick: (date) => {
//Time callback
},
confirmClick: (value, index) => {
//Content and index callbacks
}
})

24, minutes and seconds pop-up window

showDialogTime({
titleBarAttribute: {
Title Text: "Hours, minutes, seconds - Pop up",
},
timeAttribute: {
timeType: TimeDialogType.HMS,
},
timeConfirmClick: (date) => {
//Time callback
},
confirmClick: (value, index) => {
//Content and index callbacks
}
})

25, city address pop-up window

showDialogAddress({
titleBarAttribute: {
Title Text: "City Address Pop up",
},
confirmClick: (value, index) => {
}
})

26. PopupWindow pops up

First of all, to define the pop-up components, custom can be, support custom component form, pass in can be

/**
* AUTHOR:AbnerMing
*INTRODUCE: Popup pop-up box, customizable, any component
* */
@Builder
function BuilderWindowView() {
Text ("I am any component")
.backgroundColor(Color.Pink)
}

arbitrary position

showPopupWindow({
  view: wrapBuilder(BuilderWindowView),
  x: 60,
  y: 300
})

top

showPopupWindow({
  id: "popupTop",
  view: wrapBuilder(BuilderWindowView)
})

down

showPopupWindow({
  id: "popupBottom",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM
})

left

showPopupWindow({
  id: "popupLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.LEFT
})

right

showPopupWindow({
  id: "popupRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.RIGHT
})

top Left

showPopupWindow({
  id: "popupTopLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.TOP_LEFT
})

top Right

showPopupWindow({
  id: "popupTopRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.TOP_RIGHT
})

lower left

showPopupWindow({
  id: "popupBottomLeft",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM_LEFT
})

lower right

showPopupWindow({
  id: "popupBottomRight",
  view: wrapBuilder(BuilderWindowView),
  direction: PopupDirection.BOTTOM_RIGHT
})

carry parameters

class WindowParams {
  title?: string
}

@Builder
  function BuilderWindowParams(params: WindowParams) {
    Text(params.title)
      .backgroundColor(Color.Pink)
  }


let params = new WindowParams()
params.title = "params"
showPopupWindow({
  id: "popupParams",
  params: params,
  viewParams: wrapBuilder(BuilderWindowParams),
  direction: PopupDirection.BOTTOM
})

use summary

each pop-up window has a unified hiding, just call the hide method directly. If you want the animation effect of the bottom pop-up window, there are currently two ways, one is the system's own, the other is custom, the system's own, animation is, the whole background slides together, the custom is that the background does not move, only the pop-up components move, the specific effect to use, mainly depends on your own needs, in addition, the pop-up animation at the bottom also encapsulates an animation component. BottomAnimationView can easily realize animation. You can also use it if you need it. There are also cases in related Demo.

It should be noted that if there is a floating window in your project, it may appear that the pop-up pop-up window is in the window of the floating window. In order to solve this problem, you can choose whether to pop up the main window or the sub-window.

initDialog({
      isUseMainWindow:true
    })

HarmonyOS Development: How components implement dynamic setting of properties

程序员一鸣 — Mon, 30 Jun 2025 04:52:23 +0000

Foreword

this article is based on Api12

in many scenes, we need to dynamically choose whether to use the attributes of components, such as the display and hiding of components, such as the setting of background color change, the setting of height change, the setting of font size change, etc. In many scenes, we need different states to render our UI view. In non-declarative UI language, we can make logical judgment, that is if/else syntax to control the property settings of components, for example, in Android, to control the display and hiding of a component, we can do the following, pseudo-code is as follows:

If (condition){
display
}else{
hide
}

for declarative languages, how can we dynamically control the setting of certain properties in ArkUI?

For the setting of dynamic attributes, three usage methods are summarized, which can meet different business scenarios and hope to help you.

Way one, ternary operator, direct dynamic setting properties.

For example, if we want to dynamically display and hide a certain component according to the judgment of a state, we can do the following.

.visibility(this.isVisibility ? Visibility.Visible : Visibility.None)

In the above code, we only need to control the variable isVisibility. For other attribute settings, such as color, size, background, etc. All attributes are basically used in the same way, not for example.

Method two, dynamic attribute attributeModifier control

For Mode 1, there is a drawback. Although we theoretically control the state switching of the attribute, no matter what state it is, we must set this attribute, but the value is different. Is there any way to really control the setting of a certain attribute? After searching for official documents, there is indeed, that is, to use it the attribute modifier attribute is used to dynamically set an attribute.

Of course, if it is only a simple attribute switch, such as background, color, text size, etc., the first method can be used, and the second method is more inclined to whether this attribute needs to be set instead of changing the value of its attribute, which we need to pay attention.

For example, in a certain state, the height needs to be set to a fixed value, otherwise it is adaptive. For example, in a certain state, the side slip attribute is required, and in other states, it is not required. For example, in a certain state, the border attribute is required, and in other states, it is not required. Wait, there are many application scenarios, whenever a property needs to be set dynamically, we can use it. attributeModifier let's take a simple case.

The first step is to declare the required dynamic attributes, and the custom class implements the AttributeModifier interface to support most component attributes.

At present, there are many methods to meet different business scenarios:

ApplyNormalAttribute (instance: T): void//The style of the component in its normal state.
Apply Pressed Attribute (instance: T): void//The style of the component's pressing state.
ApplyFocusedAttribute (instance: T): void//The style of the focused state of the component.
ApplyDisabled Attribute (instance: T): The style of the void//component's disabled state.
ApplySelectedAttribute (instance: T): void//Style of the selected state of the component

class MyTextModifier implements AttributeModifier<TextAttribute> {
  textHeight?: Length


  applyNormalAttribute(instance: TextAttribute): void {
    if (this.textHeight != undefined) {

      instance.height(this.textHeight)
    }
  }
}

the second step, can be used directly:


@State modifier: MyTextModifier = new MyTextModifier()


Text("text")
  .attributeModifier(this.modifier)

the above is just a very simple case. The actual business scenario can be implemented by everyone according to their needs.

Way three, multi-component form

Declarative UI supports Conditional rendering. For Mode 3, it can satisfy Mode 1 and Mode 2 at the same time. However, it is not recommended because the code is too redundant. For example, we need to implement the color setting of a component:

if(this.isColor){
  Text("text").fontColor(Color.Red)
}else {
  Text("text").fontColor(Color.Black)
}

method 3 is not the switching of attributes or values, but the overall replacement of components. Although we can achieve the desired effect, dynamic control of attributes is not advocated. However, Method 3 is more friendly in dynamic switching of components, such as multi-item display.

Summary

if it is dynamic switching of attribute values, use mode one can meet the requirements, if it is dynamic setting of attributes, use mode two can be.

HarmonyOS development: addition, deletion, modification and inspection of relational database encapsulation

程序员一鸣 — Mon, 30 Jun 2025 04:51:16 +0000

Foreword

this article is based on Api12

for persistent storage with less amount of data, we can choose user preferences or distributed key-value databases to operate. If the first two cannot be met, Hongmeng also provides us relational database similar to Android, relational database is based on SQLite component and provides a complete mechanism for managing local database. It also provides a series of interfaces for adding, deleting, modifying and checking data. It is very convenient. In order to operate data more conveniently, a simple package is currently provided for the Api of the system.

The content of this article is roughly as follows:

1. Remote address dependency

2. Database creation and table creation

3. Add, delete, change and check the database

4. Use summary

i. Remote Address Dependency

set the three-party package dependency in the oh-package.json5 of the project. The configuration example is as follows:

"dependencies": { "@abner/datastore": "^1.0.0"}

OpenHarmony Tripartite Library Central Warehouse Address:

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

second, database creation and table creation.

1. Database creation

when the database is created, it will be created by default during initialization and can be initialized in the AbilityStage.

DbUtil.getInstance().init(this.context)

Property Introduction

Property	type	overview
context	Context	context
storeConfig	relationalStore.StoreConfig	database-related configuration, which can be not transmitted by default, will create a default abner_data.db database, securityLevel is S3,encrypt is true.

storeConfig

property	type	overview
name	string	the database file name, which is also the database unique identifier.
securityLevel	SecurityLevel	set the database security level.
encrypt	boolean	specifies whether the database is encrypted. By default, the database is not encrypted. true: Encryption. false: Not encrypted.
dataGroupId	string	The application Group ID, which needs to be obtained from the application market. Model Constraint: This property is only available under the Stage model. Starting with API version 10, this optional parameter is supported. Specifies to create an RdbStore instance in the sandbox path corresponding to this dataGroupId. If this parameter is not specified, the RdbStore instance is created in the application Sandbox Directory by default.
customDir	string	the database custom path. Usage constraint: The database path size is limited to 128 bytes. If it exceeds this size, the library will fail to open and an error will be returned.
autoCleanDirtyData	boolean	specifies whether to automatically clean up the data that is synchronized to the local after being deleted from the cloud. true indicates that the data is automatically cleaned up. false indicates that the data is manually cleaned up. By default, the data is automatically cleaned up.

2. Data table creation

there are two ways to create data tables, one is to execute SQL statements and the other is to execute objects.

SQL statement execution

DbUtil.getInstance()
  .executeSql("CREATE TABLE table_name(id INTEGER PRIMARY KEY AUTOINCREMENT,name VARCHAR(50),age INT)")

object Form Execution [recommend]]

the object form weakens the SQL statement, but it still creates the data table in the form of SQL. It is only the operation of the business layer. Without SQL operation, the execution is very simple and intuitive. The first parameter is the name of the data table, that is, table_name, and the second parameter is an object, that is, the field of the data table. For each field, necessary parameters such as primary key, self-increment, length, etc.

DbUtil.getInstance().createTable("table_name", {
  "id": { type: DbTableFieldType.INTEGER, isPrimaryKey: true, isAutoIncrement: true },
  "name": { type: DbTableFieldType.VARCHAR, length: 120 },
  "age": { type: DbTableFieldType.INT, length: 30 }
})

Three, database addition, deletion, modification and inspection

1, increase

normal storage

You need to define a ValuesBucket object to pass.

const valueBucket1: ValuesBucket = {
  'name': "AbnerMing",
  'age': 18,
}
DbUtil.getInstance().insert("table_name", valueBucket1)

Object Storage

let bean = new DbDataBean()
bean.name = "AbnerMing"
bean.age = 18
DbUtil.getInstance().insertBean("table_name", bean)

2, delete

normal Delete

you need to use the RdbPredicates object to set filtering conditions. You can directly view the official website Api.

let deleteRdbPredicates = new relationalStore.RdbPredicates("table_name");
deleteRdbPredicates.equalTo("id", 1);

DbUtil.getInstance().delete(deleteRdbPredicates)

Object Delete

this is similar to normal deletion, except that the RdbPredicates object is simply encapsulated and you need to call the filterRdbPredicates method to set the filter conditions.

DbUtil.getInstance()
  .filterRdbPredicates({ equalTo: { "id": 2 } })
  .deleteBean("table_name")

3, change.

Ordinary Modification

const valueBucket: ValuesBucket = {
  'name': "ming",
  'age': 28,
}

let upDataRdbPredicates = new relationalStore.RdbPredicates("table_name");
upDataRdbPredicates.equalTo("id", 1)

DbUtil.getInstance().update(upDataRdbPredicates, valueBucket)

object Modification

the filterRdbPredicates method is the filter condition, that is, which piece of data you want to change.

let uBean = new DbDataBean()
uBean.name = "Ming"
uBean.age = 20
DbUtil.getInstance()
  .filterRdbPredicates({ equalTo: { "id": 2 } })
  .updateBean("table_name", uBean)

4, check

common Query

let predicates = new relationalStore.RdbPredicates("table_name");

DbUtil.getInstance().query(predicates, (resultSet: relationalStore.ResultSet) => {
 while (resultSet.goToNextRow()) {
    const id = resultSet.getLong(resultSet.getColumnIndex("id"));
    const name = resultSet.getString(resultSet.getColumnIndex("name"));
    const age = resultSet.getLong(resultSet.getColumnIndex("age"));
  }
})

object Query

get All

DbUtil.getInstance()
  .queryAllBean<DbDataBean>("table_name", (data) => {

  })

get single

DbUtil.getInstance()
  .filterRdbPredicates({ equalTo: { "id": 1 } })
  .queryBean<DbDataBean>("table_name", (data) => {

  })

5. filterRdbPredicates

in the addition, deletion, modification and inspection of object operations, this method cannot be ignored, and the executable attributes are as follows:

property	type	overview
orderByDesc	string	configures the predicate to match the values in the field column of the data table to the column sorted in descending order.
orderByAsc	string	configure the predicate to match the values in the field column of the data table in ascending order.
limitAs	number	predicate to set the maximum number of data records
offsetAs	number	configure the predicate to specify the starting position of the returned result
equalTo	{}	configure the predicate to match the field in the field column of the data table with the value value value.
notEqualTo	{}	configure the predicate to match a field whose value is not value in the field column of the data table
contains	{}	configure the predicate to match a field with value in the field column of the data table
between	{}	configure the predicate to match the fields in the field column of the data table with values in the given range (including range boundaries), for example: low = high, with the equal sign.

IV. Use Summary

Each method is reserved for multiple calling methods, such as using callback asynchronous callback or Promise asynchronous callback, or synchronous execution. In the process of using, you can selectively call according to your own business needs, and also expose the successful and failed methods respectively, which can be targeted to determine whether the execution is successful in the process of execution.

The following cases:

DbUtil.getInstance().delete(deleteRdbPredicates,
                            (rows: number)=>{

                            },
                            (err: BusinessError)=>{

                            })