Documentation

[karneaud]

Hi,

Where can I find the documentation for this?

[Allan-Nava]

Is possible to implement the async call ajax for json api?

[l1bbcsg]

Is possible to implement the async call ajax for json api?

Not sure I understand the question, but yes, I guess it should be.

AbstractTransport is a base ZombieBox utility class typically used for communication with the server. You could use that or have any other kind of communication layer.

[Allan-Nava]

Because I implement inside a constructor but for every scenes the ajax is called

[Allan-Nava]

AbstractTransport is a base ZombieBox utility class typically used for communication with the server. You could use that or have any other kind of communication layer.

Have u any example for a specific scene call the ajax call?

[Fryngies]

AbstractTransport is a base ZombieBox utility class typically used for communication with the server. You could use that or have any other kind of communication layer.

Have u any example for a specific scene call the ajax call?

Basically you don't need anything extraordinary to make http requests from zombiebox application. You can use fetch or xmlhttprequest (in my opinion the second option is better because it's supported natively by all current zombiebox platforms, some helpers to make it less verbose are here) and handle your async call like in any other web application (like displaying throbber or doing some other cool stuff).

AbstractTransport is only needed to provide common interface between different zombiebox core modules or extensions which may require transport to work, and it also contains basis for your request error handling logic (you can read the source code here, there's not a lot).

Scene instances should be created only once when your app is initialised, like in demo application. You may consider to create some public method which will be called every time you're willing to open a scene. It may be async, handling is up to you.

[Allan-Nava]

Scene instances should be created only once when your app is initialised, like in demo application. You may consider to create some public method which will be called every time you're willing to open a scene. It may be async, handling is up to you.

Yes i need it! I don't understand how can I implement here:

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');


	}

	/**
	 * @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);
	}
}

[Fryngies]

First of all, I would create SceneManager service which will be responsible for scene transitions. At method open is going something like:

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
}

When you want to make a transition, use it like:

this._sceneManager.open('list-home');

You can create abstract method called load in AbstractBase which will return Promise and implement it in ListHome:

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

[Allan-Nava]

I have used this demo to understand how it works: https://github.com/interfaced/zombiebox-demo

So maybe the SceneManager is applications.js

I don't understand how can I implement the load method, that u have suggest me

[Fryngies]

So maybe the SceneManager is applications.js

Well, yes, I just suggested a separate class (service) for this. You can simply implement open method at application.

I don't understand how can I implement the load method, that u have suggest me

It's a simple public method which returns Promise and is being called for every scene at open method. The transition will not happen until Promise is resolved. send returns Promise, so the magic happens.

The code I provided above is for handling scene transitioning with asynchronous operations that scene may require to work. Maybe you want something different.

If you still got questions, I suggest to open a new issue.