Implement the async ajax method

[Allan-Nava]

I'm trying to implement the methods open but doesn't work. I used the demo https://github.com/interfaced/zombiebox-demo and trying to customize and understanding how zombie works!

I created:

/**
 *      list-home.js
 *      Created : Allan Nava
 *      Date    : 30/10/2019
 *      Update  : 30/10/2019
 */
import {Value}                          from 'zb/geometry/direction';
import {text, updateClassName}          from 'zb/html';
import {Out, render}                    from 'generated/cutejs/demo/scenes/list-matrix/list-matrix.jst';
import Keys                             from 'zb/device/input/keys';
import BaseList                         from 'ui/widgets/base-list/base-list';
import {red, green, yellow, blue, back} from '../../widgets/help-bar-item-factory/help-bar-item-factory';
import {DataSourceGenerator, DataType}  from '../../widgets/data-source-generator/data-source-generator';
import {AbstractBase}                   from '../abstract-base/abstract-base';
import BaseListItem                     from '../../widgets/base-list-item/base-list-item';
//
//
/**
 */
export default class ListHome extends AbstractBase {
    /**
     */
    constructor() {
        super();

        this._addContainerClass('s-list-home');

        /**
         * @type {Out}
         * @protected
         */
        this._exported;

        /**
         * @type {number}
         * @private
         */
        this._columnsCount = 5;

        /**
         * @type {number}
         * @private
         */
        this._rowsCount = 8;

        /**
         * @type {DataSourceGenerator}
         * @private
         */
        this._sourceGenerator = new DataSourceGenerator({
            dataType: DataType.IMMEDIATELY,
            timeout: 3000
        });

        /**
         * @type {BaseList}
         * @private
         */
        this._baseList = this._createBaseList(this._columnsCount, this._rowsCount, 0);

        /**
         * @const {number}
         */
        this.ITEM_WIDTH = 161;

        /**
         * @const {number}
         */
        this.MAX_COLUMNS_COUNT = 5;

        /**
         * @const {number}
         */
        this.MAX_ROWS_COUNT = 8;

        text(this._exported.title, 'Home static base-list');

        // 1. Create a new XMLHttpRequest object
        /*let xhr = new XMLHttpRequest();
        xhr.responseType = 'json';
        // 2. Configure it: GET-request for the URL /article/.../load
        xhr.open('GET', 'https://api.elevensports.it/apitv/general/get_videos.json?id=36');
        // 3. Send the request over the network
        xhr.send();
        // 4. This will be called after the response is received
        xhr.onload = function() {
            if (xhr.status != 200) { // analyze HTTP status of the response
                alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
            } else { // show the result
                console.log(xhr.response);
                var jsonData = xhr.response;
                alert(JSON.stringify(jsonData));
                alert(`Done, got ${xhr.response.length} bytes`); // responseText is the server
            }
        };
        xhr.onprogress = function(event) {
            if (event.lengthComputable) {
                alert(`Received ${event.loaded} of ${event.total} bytes`);
            } else {
                alert(`Received ${event.loaded} bytes`); // no Content-Length
            }
        };
        xhr.onerror = function() {
            alert("Request failed");
        };*/

    }

    /**
    * @override
    */
    load() {
        console.log("load method list-home.js");
        const SOME_ENDPOINT="https://api.example.it/apitv/general/get_videos.json?id=36";
        return send(SOME_ENDPOINT).then(

        );
        //return send(SOME_ENDPOINT).then(/* process it how you want */);
    }

    /**
     * @override
     */
    _renderTemplate() {
        return render(this._getTemplateData(), this._getTemplateOptions());
    }

    /**
     * @override
     */
    _processKey(zbKey, e) {
        switch (zbKey) {
            case Keys.RED:
                this._removeRow();
                return true;
            case Keys.GREEN:
                this._addRow();
                return true;
            case Keys.YELLOW:
                this._removeColumn();
                return true;
            case Keys.BLUE:
                this._addColumn();
                return true;
        }

        return super._processKey(zbKey, e);
    }

    /**
     * @override
     */
    _getHelpBarItems() {
        const redButton = red('');
        const greenButton = green('Remove/add row');
        const yellowButton = yellow('');
        const blueButton = blue('Remove/add column');

        redButton.disable();
        greenButton.disable();
        yellowButton.disable();
        blueButton.disable();

        updateClassName(redButton.getContainer(), '_remove', true);
        updateClassName(greenButton.getContainer(), '_add', true);
        updateClassName(yellowButton.getContainer(), '_remove', true);
        updateClassName(blueButton.getContainer(), '_add', true);

        return [
            redButton,
            greenButton,
            yellowButton,
            blueButton,
            back()
        ];
    }

    /**
     * @private
     */
    _addRow() {
        const rowsCount = Math.min(this._rowsCount + 1, this.MAX_ROWS_COUNT);

        if (rowsCount !== this._rowsCount) {
            this._rowsCount = rowsCount;
            this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
        }
    }

    /**
     * @private
     */
    _removeRow() {
        const rowsCount = Math.max(this._rowsCount - 1, 1);

        if (rowsCount !== this._rowsCount) {
            this._rowsCount = rowsCount;
            this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
        }
    }

    /**
     * @private
     */
    _addColumn() {
        const columnsCount = Math.min(this._columnsCount + 1, this.MAX_COLUMNS_COUNT);

        if (columnsCount !== this._columnsCount) {
            this._columnsCount = columnsCount;
            this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
        }
    }

    /**
     * @private
     */
    _removeColumn() {
        const columnsCount = Math.max(this._columnsCount - 1, 1);

        if (columnsCount !== this._columnsCount) {
            this._columnsCount = columnsCount;
            this._baseList = this._updateBaseList(this._baseList, this._columnsCount, this._rowsCount);
        }
    }

    /**
     * @param {BaseList} oldBaseList
     * @param {number} columnsCount
     * @param {number} rowsCount
     * @return {BaseList}
     * @private
     */
    _updateBaseList(oldBaseList, columnsCount, rowsCount) {
        const isBaseListInFocus = this.getActiveWidget() instanceof BaseList;

        const source = oldBaseList.getSource();
        const index = source ? source.currentIndex() : 0;

        this._removeBaseList(oldBaseList);

        const newBaseList = this._createBaseList(columnsCount, rowsCount, index);

        if (isBaseListInFocus) {
            this.activateWidget(newBaseList);
        }

        return newBaseList;
    }

    /**
     * @param {number} columnsCount
     * @param {number} rowsCount
     * @param {number} index
     * @return {BaseList}
     * @private
     */
    _createBaseList(columnsCount, rowsCount, index) {
        const itemsCount = columnsCount * rowsCount;

        const baseList = new BaseList({
            itemClass: BaseListItem,
            options: {
                lineSize: columnsCount,
                padding: itemsCount
            },
            isVertical: true
        });

        this._exported.sliderWrapper.appendChild(baseList.getContainer());
        this._exported.sliderWrapper.style.width = columnsCount * this.ITEM_WIDTH + 'px';

        this.appendWidget(baseList);

        this.setNavigationRule(baseList, Value.RIGHT, null);
        this.setNavigationRule(baseList, Value.LEFT, this._menu);

        const source = this._sourceGenerator.getStaticSource(1, itemsCount);
        source.selectAt(index);
        baseList.setSource(source);

        text(this._exported.rows, String(rowsCount));
        text(this._exported.columns, String(columnsCount));

        return baseList;
    }

    /**
     * @param {BaseList} baseList
     * @private
     */
    _removeBaseList(baseList) {
        this.removeNavigationRule(baseList, Value.RIGHT);
        this.removeNavigationRule(baseList, Value.LEFT);

        this._exported.sliderWrapper.removeChild(baseList.getContainer());
        this.removeWidget(baseList);
    }

}

applications.js

/**
 *      application.js
 *      Created : Allan Nava
 *      Date    : 30/10/2019
 *      Update  : 30/10/2019
 */
import {hide, show, div}                from 'zb/html';
import {setLevel, Level}                from 'zb/console/console';
import {Resolution, ResolutionInfo}     from 'zb/device/resolutions';
import BaseApplication                  from 'generated/base-application';
import About                            from 'about/about';
import BaseServiceContainer             from 'generated/dependency-injection/base-service-container';
import Throbber                         from './widgets/throbber/throbber';

/**
 */
export default class Application extends BaseApplication {
    /**
     */
    constructor() {
        setLevel(Level.ALL);
        super();

        /**
         * @type {BaseServiceContainer}
         */
        this.sc;

        /**
         * @type {?Throbber}
         * @private
         */
        this._throbber = null;

        /**
         * Fired with: {{
         *     id: number,
         *     status: boolean
         * }}
         * @const {string}
         */
        this.EVENT_MENU_TOGGLE = 'menu-toggle';
    }

    /**
     * @override
     */
    processKey(zbKey, e) {
        About.processKey(zbKey);

        return super.processKey(zbKey, e);
    }

    /**
     * @override
     */
    onReady() {
        super.onReady();

        this.sc = new BaseServiceContainer(this);
        this.sc.bootstrap();

        if (this.isDevicePc()) {
            this._body.appendChild(div('zb-body__pc-help'));
        }
    }

    /**
     * @override
     */
    onStart() {
        // login, splashscreen, timeout, etc.
        this.home();
    }

    /**
     * @override
     */
    home() {
        return this.getSceneOpener()
            .open(this.sc.scenesVideoPlayer, () => {
                this.sc.scenesVideoPlayer.setActiveSceneId({
                    id: 0,
                    subItem: null
                });
            });
    }

    /**
     * @param {Promise} job
     */
    addTrobberJob(job) {
        if (this._throbber) {
            this._throbber.wait(job);
        }
    }

    /**
     * @override
     */
    _backOnEmptyHistory() {
        this.device.exit();
    }

    /**
     * @override
     */
    _onDeviceReady(eventName, device) {
        super._onDeviceReady(eventName, device);
        this._createThrobber();
    }

    /**
     * @override
     */
    _appendScreenSizeClass() {
        // No super necessary
        const resolutionInfo = ResolutionInfo[Resolution.HD];
        this._appendViewportSize(resolutionInfo);
        this._body.classList.add('zb-hd');
    }

    /**
     * @private
     */
    _createThrobber() {
        const throbberWrap = div('a-throbber zb-fullscreen');

        this._throbber = new Throbber();
        throbberWrap.appendChild(this._throbber.getContainer());
        this._body.appendChild(throbberWrap);

        this._throbber.on(this._throbber.EVENT_START, () => {
            show(throbberWrap);
        });

        this._throbber.on(this._throbber.EVENT_STOP, () => {
            hide(throbberWrap);
        });
    }

    /**
     *
     */
    open(name) {
        const scene = this._layerManager.getLayer(name);

        const sceneLoadingPromise = scene.load()
          .then(() => {
            this._layerManager.hide();

            this._layerManager.open(scene);
          });

        this._throbberService.add(sceneLoadingPromise); // Or other async logic handling
    }
}

[Allan-Nava]

Any newss? Is still alive the project=

[pedrosilvabos]

Hi Allan well first I need to understand if you want to create another scene, and then navigate into that scene