Harmonyos Cangjie Language Development Practical Tutorial: Implementing Product Category Pages

Today, we continue to bring you a practical tutorial on developing a mall application using the Cangjie language. Today's content is about implementing a product category page.

Category page

Some dynamic effects should be added on the basis of the basic layout, such as the switching of click states and the linkage of the two list containers. Here is a detailed introduction for everyone.
Classification list
First, let's take a look at the category List on the left. It's obvious that it's a List container. The style is relatively simple, with only one text. However, it has a click status switching effect.
Before adding components, we need to request the classification data first. The network request for the Cangjie language has been shared in the previous article. Now, I will post the specific code for the network request of the classification list. It should be noted that the modification of nested data needs to be modified with ObservedArrayList to change in real time on the page:

@State var classList:ObservedArrayList<ClassItem> = ObservedArrayList<ClassItem>()
let url = CJTools.url + "/api/class.php"
let httpRequest = createHttp()
 let option = HttpRequestOptions(
    method: RequestMethod.GET,
    expectDataType: HttpDataType.STRING,
    header: HashMap<String, String>([("content-type", "application/json")])
)
this.loading = true
httpRequest.request(url, {err, resp =>
    if (let Some(e) <- err) {
         CJTools.log('error:' + e.message)
    }
    if (let Some(r) <- resp) {
            let str = r.result.toString()
            let jValue = JsonValue.fromStr(str)
            let jArray = jValue.asArray()
            for (i in 0..jArray.size()) {
                var model = DataModel.fromJson(jArray.get(i).getOrThrow().asObject())
                var modelData = match (model) {
                case data: DataModelStruct => data
                    case _ => throw Exception("this data is not DataModelStruct")
                 }
                let item = ClassItem(String.deserialize(modelData.get('id')), String.deserialize(modelData.get('classname')), String.deserialize(modelData.get('cover')))
                this.classList.append(item)
            }
        }
        this.loading = false
        httpRequest.destroy()
    },options:option)

After the request, the final classList is the data we need. Then, in the List component, traverse the classList to add the component. The loop traversal in Cangjie is quite different from ArkTs:

List{
    ForEach(
    this.classList,
    itemGeneratorFunc: {
        item: ClassItem, index: Int64 => ListItem {
                if(this.classIndex == index){
                    Row(){
                    Text(item.getClassname())
                    .fontSize(15)
                    .fontColor(0x4a4a4a)
            }
                .width(100.percent)
                .height(60)
                .backgroundColor(Color.WHITE)
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.Center)
                }else {
                    Row(){
                    Text(item.getClassname())
                    .fontSize(15)
                    .fontColor(Color.WHITE)
            }
                .width(100.percent)
                .height(60)
                .backgroundColor(Color.GRAY)
                .alignItems(VerticalAlign.Center)
                .justifyContent(FlexAlign.Center)
                }
        }
      }
    )
}
.width(30.percent).height(100.percent)

Product list

The product list needs to obtain data by selecting categories. The request method is similar to the network request above. Here, we only talk about the page layout. The product list can be easily implemented using the Grid container. Pay attention to how to set the number of columns and spacing of the grid:

Grid{
     ForEach(
    goodsList,
    itemGeneratorFunc: {
        item: GoodsItem, index: Int64 => GridItem {
            Column() {
                        Image( item.getCover()).width(100.percent).height(120).margin(bottom: 4)
                        Text(item.getName())
                            .fontSize(14)
                            .textAlign(TextAlign.Start)
                            .fontWeight(FontWeight.W400)
                    }.alignItems(HorizontalAlign.Start).onClick({evet => })
        }
      }
    )
}
.width(70.percent).columnsTemplate('1fr 1fr')
        .columnsGap(5)
        .rowsGap(5)
        .backgroundColor(0xFFFFFF)
        .padding(right: 5, left: 5)

The above is the content introduction of the product classification page. #HarmonyOS Language ## Cangjie ## Shopping #