Harmonyos Development (IX) : Implementation of the Message List Page

#harmonyosnext

Developing a Message List Page with ArkTS

Here's a complete implementation of a message list page using ArkTS for HarmonyOS apps. This page displays messages and allows users to navigate through them.

Code Explanation

1. Import Modules

import { httpRequestGet } from '../Utils/HttpUtils';
import prompt from '@ohos.promptAction';
import { MessageListModel, MessageListModelData } from '../model/MessageListModel';

We've imported several modules for HTTP requests, prompt actions, and message models.

2. Define Message List Component

@Entry
@Component
export struct MessageList {
  @State messagelist: Array<MessageListModelData> = [];
  private messageurl: string = "http://42.192.45.45:8080/boss/message/getmessageinfo";

  async aboutToAppear() {
    httpRequestGet(this.messageurl).then((data) => {
      let messageModel: MessageListModel = JSON.parse(data.toString());
      let msg = messageModel.msg;
      if (messageModel.code == 200) {
        this.messagelist = messageModel.data;
      } else {
        prompt.showToast({
          message: msg
        });
      }
    });
  }
}

Created a MessageList component
Used @State to define messagelist for storing message data
Defined messageurl for the API endpoint
In the aboutToAppear lifecycle method, fetch message data using httpRequestGet and update messagelist or show error messages

3. Page Layout

build() {
  Column() {
    Row() {
      Text("Messages")
        .fontSize(22).fontColor(Color.White)
    }.backgroundColor(Color.Green)
      .width("100%").height(40)
      .justifyContent(FlexAlign.Center)

    List({ space: 15 }) {
      ForEach(this.messagelist, (item: MessageListModelData) => {
        ListItem() {
          Row() {
            Image(item.headportraiturl)
              .width(100).height(100)
              .layoutWeight(3)
              .borderRadius(10)
              .objectFit(ImageFit.Cover)
            Column({ space: 10 }) {
              Text(item.nickname)
                .fontSize(24)
              Text(item.companyname)
                .fontSize(14)
              Text(item.msg)
                .fontSize(16)
            }.width("70%")
              .layoutWeight(7)
              .height("100%")
              .justifyContent(FlexAlign.Start)
              .alignItems(HorizontalAlign.Start)
              .margin({ left: 5 })
          }.width("100%").height(100)
          .justifyContent(FlexAlign.Start)
        }
      })
    }
  }.width("100%").height("100%")
}

Used Column and Row to build the UI
Created a header showing "Messages"
Implemented List and ForEach components to iterate over messagelist and generate list items
Each list item displays sender's avatar, nickname, company name, and message content

4. MessageListModel: Provides Type Safety and Structured Data Handling

export class MessageListModel {
  msg: string = "";
  data?: Array<MessageListModelData> = [];
  code: number = 0;
}

export class MessageListModelData {
  id: string = "";
  msg: string = "";
  jobname: string = "";
  companyname: string = "";
  nickname: string = "";
  headportraiturl: string = "";
}

This structured data model helps maintain type safety and organized data processing in the application.

API Response Example:

{
  "msg": "Data retrieved successfully",
  "code": 200,
  "data": [
    {
      "id": 1,
      "msg": "Hello",
      "jobname": "HR",
      "companyname": "Baidu",
      "nickname": "Little Cutie",
      "headportraiturl": "https://www.itying.com/images/flutter/1.png"
    },
    {
      "id": 2,
      "msg": "Are you there",
      "jobname": "Personnel Officer",
      "companyname": "Tencent",
      "nickname": "Naruto Uzumaki",
      "headportraiturl": "https://www.itying.com/images/flutter/2.png"
    },
    {
      "id": 3,
      "msg": "Are you currently job hunting",
      "jobname": "Personnel Manager",
      "companyname": "ByteDance",
      "nickname": "After the Rain",
      "headportraiturl": "https://www.itying.com/images/flutter/3.png"
    },
    {
      "id": 4,
      "msg": "Hello Are you there?",
      "jobname": "Personnel Assistant",
      "companyname": "37互娱",
      "nickname": "Ma Xiaoling",
      "headportraiturl": "https://www.itying.com/images/flutter/4.png"
    }
  ]
}