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