Пользовательские экраны

Список ** партнеров **, ** экран оплаты ** и ** экран экрана ** являются примерами `` экранов``.

Мы рассмотрим * пример создания пользовательского интерфейса *.

Для создания нового `` 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` определено.