Hướng dẫn (Example)

Tạo mới một X9 Component

Cách sử dụng đơn giản của một X9 Component là kế thừa X9Com class, hoặc tạo một X9 Command thì kế thừa từ X9Cmd. overide 2 method : allowCommandTypes() và onUpdateView()

Gắn X9component vừa tạo vào node như với cách dùng với cc.Component trong cocos creator editor.

Lưu ý: Cứ kế thừa X9 Command hoặc X9 Component là đã hỗ trợ phân loại trong menu của Add Component.

const X9Component = require('X9Com');

cc.Class({
    extends: X9Component,

    properties:{
        content: cc.Label,
    }, 

    allowCommandTypes(){
        // Liệt kê các thể loại command vào đây
        // Mảng các string này chính là 'type' của command gửi đi khi gọi this.cmd(dataObject, type)
        return [HomeCommand.SHOW_POPUP];
    },

    onUpdateView(done){
        cc.log( '<Update View> ' + this.constructor.name + '::' + this.getState().msg);
        this.content.string = this.getState().msg;
        if(done){
            done();
        }
    }

});

Trong đó:

allowCommandTypes():
Trả về một mảng String các nhãn của dữ liệu được gửi đi qua this.cmd(data, lable). Chỉ cs dữ liệu có gán nhãn được liệt kê trong mảng mới đi tiếp để xử lý sang onUpdateView.

onUpdateView() Cập nhật trạng thái các giao diện. Thường là lấy dữ liệu từ State Data qua hàm this.getState() cập nhật tương ứng vào từng field vào hiển thị trên view. Hoặc có thể dùng this.getStateType() trả về nhãn hiện thời của data vừa nhận được để cập nhật từng phần trong giao diện thay vì cập nhật toàn bộ.

Tham chiếu tới các X9 Components

Để tham chiếu tới các X9 Component, sử dụng hàm use(...) hỗ trợ sẵn cho các X9 component. Vị trí sử dụng chuẩn xác nhất là khi override hàm onLoad (mặc định của Cocos Creator) hoặc sử dụng trong hàm start().

Hàm use sử dụng cùng lúc cho các tình huống:

• Sử dụng để tạo ra các X9 Command hoặc X9 Component
• Sử dụng để tham chiếu các Command hoặc Component có sẵn trên cocos creator editor hoặc đã tạo từ trước.
• Hàm use đảm bảo chỉ có 01 loại Command Class duy nhất được tạo trên cùng một node chứa logic.
• Các X9 component được tham chiếu qua this.use luôn được ưu tiên cập nhật state trước.
• Các componet được 'use' trong code sẽ được ưu tiên dispatch trước component được gán trên creator.
• Tên của x9 component là duy nhất khi sử dụng. Mỗi Class name chỉ tương ứng với một component.
• Các lần sử dụng use(...) sau sẽ nhanh hơn vì được cached.
• Hàm use chỉ tìm kiếm các component trong cùng node. Riêng với node được tạo từ prefab sẽ tìm kiếm toàn bộ node trong prefab.

    properties:{
        popup:{
            type: cc.Prefab,
            default: null,
        }
    },

    onLoad () {
        this._super();
        
        this.use("Comp3");
        this.use("Comp1");
        this.comp2 = this.use("Comp2");
        // Có thể đặt tham chiếu, xong nhớ set this.comp2 = null khi destroy hoặc onDestroy

        // Lấy component bên trong một prefab được tham chiếu trong cocos creator.
        this.popupNode = cc.instantiate(this.popup);
        this.popupComp = this.use("PopupComp", this.popupNode);

    },    

    onUpdateState(){        
        cc.log( '[Update State Data] ' + this.constructor.name);        
    },

Khi chạy, các x9 component sẽ nhận data theo thứ tự sử dụng của hàm use(...);

console log:

[Update State Data] Comp3
[Update State Data] Comp1
[Update State Data] Comp2
[Update State Data] PopupComp

Cập nhật view (onUpdateView) lần lượt.

Mỗi khi nhận được command gửi data về, mỗi X9 component đều sẽ thực hiện việc update state data trước khi update view. Do đó các view sẽ cập nhật đúng theo thứ tự cập nhật state data phần trên. Để có thể xử lý tình huống khi muốn chờ lần lượt các x9 component thực hiện hiệu ứng xong mới tới các x9 component khác, framewwork có hỗ trợ hàm squence. Cú pháp: sequence(type, ...x9CompNames). Tròn đó, type là nhãn dữ liệu gửi tới hay còn gọi là tên command gửi tới. từ tham số thứ 2 trở đi là liệt kê theo thứ tự các x9 components. ví dụ:

x9Comopent.sequence(HomeCommand.CLICK_BUTTON, 'Comp2', 'Comp1', 'Comp3');

Chi tiết hơn

    onLoad () {
        this._super();
        
        this.use("Comp3");
        this.use("Comp1");
        // Có thể đặt tham chiếu, xong nhớ set this.comp2 = null khi destroy hoặc onDestroy
        this.comp2 = this.use("Comp2");
        
        // Sap xep thu tu update view. Luu y: data luon cap nhat xong het moi den view.
        // Trong trường hợp này onUpdateView của HomeScene sẽ gọi trước sau đó đến onUpdateView của Comp2 -> Comp1 -> Comp3
        this.sequence(HomeCommand.CLICK_BUTTON, 'Comp2', 'Comp1', 'Comp3');
        
        // Lấy component bên trong một prefab được tham chiếu trong cocos creator.
        this.popupNode = cc.instantiate(this.popup);
        this.popupComp = this.use("PopupComp", this.popupNode);

    },   


    onUpdateState(){        
        cc.log( '[Update State Data] ' + this.constructor.name + '::' + this.getState().msg);
        
    },

    onUpdateView(done){
        switch(this.getStateType()){
            case HomeCommand.CLICK_BUTTON:
                cc.log( '<Update View> ' + this.constructor.name + '::' + this.getState().msg);
                if(done){
                    cc.log('wait 2 seconds...')
                    this.scheduleOnce(done,2);
                }
                break;
        
            default:
                // luôn gọi done để tiếp tục các task khác trong trường hợp sử dụng squence
                if(done){
                    done();
                }
                break;
        }
        
    }