Пользовательские экраны¶
Список ** партнеров **, ** экран оплаты ** и ** экран экрана ** являются примерами `` экранов``.
Мы рассмотрим * пример создания пользовательского интерфейса *.
Для создания нового `` custom screen`` мы подключаем `` screen`` и `` gui``:
var screens = require('point_of_sale.screens');
var gui = require('point_of_sale.gui');
Затем мы объявляем новую переменную и наследуем `` ScreenWidget``:
var CustomScreenWidget = screens.ScreenWidget.extend({
});
Теперь `` CustomScreenWidget`` состоит из всех методов из `` ScreenWidget``. Затем нам нужно определить шаблон, где структура экрана описывается с помощью `` Qweb``:
template: 'CustomScreenWidget'
В `` Qweb`` мы определяем шаблон следующим образом:
<t t-name="CustomScreenWidget">
<div class="custom-screen screen">
<div class="screen-content">
<section class="top-content">
<span class="button back">
<i class="fa fa-angle-double-left" />
Cancel
</span>
<span class="button next oe_hidden highlight">
Apply
<i class="fa fa-angle-double-right" />
</span>
</section>
<section class="full-content">
<div class="window">
<section class="subwindow collapsed">
<div class="subwindow-container collapsed">
<div class="subwindow-container-fix custom-details-contents" />
</div>
</section>
</div>
</section>
</div>
</t>
Определите стили в файле `` css``, который вам нужен для экрана.
Этот `` Qweb`` будет отображаться каждый раз, когда запускается метод `` renderElement`` (до загрузки POS все экраны уже прорисованы и скрыты). Этот метод можно переопределить и, например, использовать для действий кнопок `` назад`` и `` next``:
renderElement: function () {
this._super();
this.$('.back').click(function () {
self.gui.back();
});
this.$('.next').click(function () {
// some actions
});
},
Все экраны по умолчанию скрыты (кроме тех, которые вызываются после загрузки POS). Для того, чтобы открыть пользовательские экраны, необходимо определить их в списке экранов:
gui.define_screen({name:'custom_screen', widget: CustomScreenWidget});
Чтобы открыть пользовательский экран, необходимо вызвать следующую функцию (например, после нажатия кнопки «Действие»):
this.gui.show_screen('custom_screen');
where this
is a pointer to PosModel
.
Для конкретного примера проверьте модуль ** POS Orders History ** ` <https://github.com/it-projects-llc/pos-addons/blob/12.0/pos_orders_history/static/src/js/screens.js#L311>`__, где` orders_history_screen` определено.