Harmonyos Development (XI) : Implementation of the Page for Posting Job Information

Developing a Job Posting Page with ArkTS

Here's a complete implementation of a job posting page using ArkTS for HarmonyOS apps. This page allows enterprise users to publish new job positions.

Code Explanation

1. Import Modules

import { CompanyDetailModel, CompanyDetailModelData } from '../model/CompanyDetailModel';
import Logger from '../Utils/Logger';
import { httpRequestGet, httpRequestPost } from '../Utils/HttpUtils';
import { router } from '@kit.ArkUI';
import prompt from '@ohos.promptAction';
import { AddpositionModel } from '../model/AddpositionModel';
import uri from '@ohos.uri';

We've imported several modules for company details, logging, HTTP requests, routing, prompts, and job position models.

2. Define Style Extensions

@Extend(TextInput) function inputStyle() {
  .placeholderColor("#99182431")
  .height(45)
  .fontSize(18)
  .backgroundColor("#F1F3F5")
  .width('100%')
  .padding({ left: 0 })
  .margin({ top: 12 })
}

@Extend(Line) function lineStyle() {
  .width('100%')
  .height(1)
  .backgroundColor("#FF131416")
}

@Extend(Text) function textStyle() {
  .fontColor("#FF0C0C0C")
  .fontSize(18)
  .fontWeight(FontWeight.Medium)
}

Defined three style extension functions: inputStyle for TextInput, lineStyle for Line, and textStyle for Text components.

3. Define Job Posting Component

@Entry
@Component
struct PostaPosition {
  @State name: string = "";
  @State cname: string = "";
  @State positionsize: string = "";
  @State salary: string = "";
  @State username: string = "";
  @State title: string = "";

  private addPosition: string = "********";

  async addposition() {
    if (this.name === '' || this.cname === '' || this.positionsize === '' || this.salary === '' || this.username === '' || this.title === '') {
      prompt.showToast({
        message: "Input cannot be empty"
      });
    } else {
      const neturl = new uri.URI(this.addPosition)
        .addQueryValue("name", this.name)
        .addQueryValue("cname", this.cname)
        .addQueryValue("size", this.positionsize)
        .addQueryValue("salary", this.salary)
        .addQueryValue("username", this.username)
        .addQueryValue("title", this.title)
        .toString();

      Logger.error("Request neturl - > " + neturl);

      await httpRequestGet(neturl).then((data) => {
        console.log("data ---> " + data);
        let addpositionModel: AddpositionModel = JSON.parse(data.toString());
        let msg = addpositionModel.msg;
        if (addpositionModel.code == 200) {
          prompt.showToast({
            message: msg
          });
          // router.pushUrl({
          //   url: "pages/Home"
          // });
        } else {
          prompt.showToast({
            message: msg
          });
        }
      });
    }
  }
}

• Created a PostaPosition component for publishing job positions
• Used @State to define multiple state variables for storing user input job information
• Defined addPosition for the API endpoint
• In the addposition method, checked if user input is empty, displayed a message if it is; otherwise, constructed the API URL, called httpRequestGet to submit job information, and prompted the user based on the response

4. Page Layout

build() {
  Column() {
    RelativeContainer() {
      Image($r('app.media.bossback')).width(20).height(20)
        .onClick(() => {
          router.back();
        }).alignRules({
          'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
          'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
        }).margin({ left: 5, top: 7 });

      Text("Add Position Information")
        .fontSize(25)
        .fontWeight(FontWeight.Medium)
        .fontColor(Color.White)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        });
    }.height(40)
    .width("100%")
    .backgroundColor(Color.Green);

    Row() {
      Row() {
        Text("Position Information").textStyle();
      }.width(100).height("100%")
      .justifyContent(FlexAlign.Center);

      TextInput({ placeholder: "Please enter position information" })
        .maxLength(20)
        .type(InputType.Normal)
        .inputStyle()
        .onChange((value: string) => {
          this.name = value;
        }).margin({ left: 20 });
    }.width("100%").height(50)
    .justifyContent(FlexAlign.Start)
    Line().lineStyle();

    // Other input fields and line styles are similar, omitted...

    Button("Submit")
      .width("90%")
      .height(40)
      .fontSize(16)
      .fontWeight(FontWeight.Medium)
      .backgroundColor("#007DFF")
      .margin({ top: 47, bottom: 12 })
      .onClick(() => {
        this.addposition();
      });
  }.backgroundColor("#F1F3F5")
  .height('100%')
  .width('100%');
}

• Used Column and RelativeContainer to build the UI
• Created a header showing "Add Position Information" with a back button
• Used Row and TextInput for each job information field (e.g., position info, company name, size, salary range, contact person, title)
• Implemented a Button for submission, which calls the addposition method when clicked

5. PositionListModel: Provides Type Safety and Structured Data Handling

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

export class PositionListModelData {
  id?: number = 0;
  name?: string = "";
  cname?: string = "";
  size?: string = "";
  salary?: string = "";
  username?: string = "";
  title?: string = "";
}

Picture display