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

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

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;
}

}

Synchronize the above content to the cloud database.
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)
.textAlign(TextAlign.Center)
}
}
})
}
.scrollBar(BarState.Off)
.rowsTemplate('1fr 1fr')
.rowsGap(15)
.columnsGap(10)
.height(150)

    ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Horizontal,state: BarState.Auto }) {
      Text()
        .width(40)
        .height(10)
        .borderRadius(10)
        .backgroundColor('#ff34a8e5')
    }
    .borderRadius(5)
    .margin({top:10})
    .width(100)
    .backgroundColor('#ededed')
}
.alignItems(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('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.

DEV Community

Imitation Box Horse - Diamond District (3)

Top comments (0)