# Imitation Box Horse - Diamond District (3)

Technical Stack  
Appgallery Connect

Development Preparation In the previous article, we implemented the new-user exclusive coupon module with successful cloud data retrieval. This section focuses on implementing the navigation bar (Golden Section) module, transitioning from local static data to cloud-based data fetching while linking scrolling to the navigation bar for real-time position indication. Functional Analysis The navigation bar implementation was previously completed with local static data. Now we need to:

Fetch data from the cloud database. Display cloud data dynamically. Associate scrolling with the navigation bar to show the current position.

Code Implementation

1. Database Table, Data, Entity, and DB Class Creation Table Structure (split\_layout) json { "objectTypeName": "split\_layout", "fields": \[ {"fieldName": "split\_id", "fieldType": "Integer", "notNull": true, "belongPrimaryKey": true}, {"fieldName": "txt", "fieldType": "String"}, {"fieldName": "url", "fieldType": "String"}, {"fieldName": "router", "fieldType": "String"}, {"fieldName": "is\_login", "fieldType": "Boolean"}, {"fieldName": "bt\_state", "fieldType": "Integer"} \], "indexes": \[ {"indexName": "splitId\_Index", "indexList": \[{"fieldName":"split\_id","sortType":"ASC"}\]} \], "permissions": \[ {"role": "World", "rights": \["Read"\]}, {"role": "Authenticated", "rights": \["Read", "Upsert"\]}, {"role": "Creator", "rights": \["Read", "Upsert", "Delete"\]}, {"role": "Administrator", "rights": \["Read", "Upsert", "Delete"\]} \] } Sample Data json { "cloudDBZoneName": "default", "objectTypeName": "split\_layout", "objects": \[ { "split\_id": 10, "txt": "Fruits & Meat", "url": "Online image link", "router": "string1", "is\_login": false, "bt\_state": 0 }, { "split\_id": 20, "txt": "Frozen Seafood", "url": "Online image link", "router": "string2", "is\_login": false, "bt\_state": 0 }, // ... (remaining objects omitted for brevity) { "split\_id": 201, "txt": "Cross-border Duty-free", "url": "Online image link", "router": "string2", "is\_login": false, "bt\_state": 0 } \] } DB Class (split\_layout.db.ets) typescript import { cloudDatabase } from '@kit.CloudFoundationKit';
    

class split\_layout extends cloudDatabase.DatabaseObject { public split\_id: number; public txt: string; public url: string; public router: string; public is\_login: boolean; public bt\_state: number;

public naturalbase\_ClassName(): string { return 'split\_layout'; } }

export { split\_layout }; Entity Class (SplitLayoutModel.ets) typescript /\*

* Copyright (c) Huawei Technologies Co., Ltd. 2020-2023. All rights reserved.
    
* Generated by the CloudDB ObjectType compiler. DO NOT EDIT! \*/
    

export class SplitLayoutModel { split\_id: number; txt: string; url: string; router: string; is\_login: boolean; bt\_state: number;

constructor() { }

getFieldTypeMap(): Map<string, string> { let fieldTypeMap = new Map<string, string>(); fieldTypeMap.set('split\_id', 'Integer'); fieldTypeMap.set('txt', 'String'); fieldTypeMap.set('url', 'String'); fieldTypeMap.set('router', 'String'); fieldTypeMap.set('is\_login', 'Boolean'); fieldTypeMap.set('bt\_state', 'Integer'); return fieldTypeMap; }

// ... (getter/setter methods and parsing logic)

static parseFrom(inputObject: any): SplitLayoutModel { let result = new SplitLayoutModel(); if (!inputObject) { return result; } if (inputObject.split\_id) { result.split\_id = inputObject.split\_id; } // ... (remaining field assignments) return result; } } 2. Synchronize the above content to the cloud database. 3. Page Logic Modification Navigation Bar Component (SplitLayout.ets) typescript import { SplitLayoutModel } from "../entity/SplitLayoutModel"

@Preview @Component export struct SplitLayout { @Link listData: SplitLayoutModel\[\] private scroller: Scroller = new Scroller() build() { Column() { Grid(this.scroller){ ForEach(this.listData, (item:SplitLayoutModel) => { GridItem(){ Column() { Image(item.url) .width(45) .height(45) .borderRadius(24) .margin({ top: 5 }) Text(item.txt) .padding(2) .fontSize(16) .fontColor([Color.Black](http://Color.Black)) .textAlign([TextAlign.Center](http://TextAlign.Center)) } } }) } .scrollBar(BarState.Off) .rowsTemplate('1fr 1fr') .rowsGap(15) .columnsGap(10) .height(150)

ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Horizontal,state: [BarState.Auto](http://BarState.Auto) }) { Text() .width(40) .height(10) .borderRadius(10) .backgroundColor('#ff34a8e5') } .borderRadius(5) .margin({top:10}) .width(100) .backgroundColor('#ededed') } .alignItems([HorizontalAlign.Center](http://HorizontalAlign.Center)) .height(190) .width('95%') .margin({top:20}) .backgroundColor('#ffeedeb8') .padding(16) .borderRadius(20) } } Home Page Integration typescript // In the home page component: @State splitList: SplitLayoutModel\[\] = \[\];

// Data query and assignment:  
let databaseZone = [cloudDatabase.zone](http://cloudDatabase.zone)('default');  
let listData2 = await databaseZone.query(condition2); let json2 = JSON.stringify(listData2); let data2: SplitLayoutModel\[\] = JSON.parse(json2); this.splitList = data2;

// Component usage: SplitLayout({ listData: this.splitList });

Implementation Result The navigation bar now:

Fetches data from the cloud database using split\_layout table. Displays dynamic content with images and text from cloud data. Includes a scroll bar linked to the scroller for real-time position indication.

This completes the implementation of the navigation bar module with cloud data integration.