Создание многоэкранного приложения с помощью DreemGL

Question

Как мне создать многоэкранное приложение с DreemGL? Если в моем приложении несколько экранов, через какой URL я могу получить доступ к этим экранам?

Answer 1

Просто добавьте второй экран к композиции внутри функции render() compositioin. Различные экраны в приложениях DreemGL ​​идентифицируются по их атрибуту name. Следующая композиция содержит два экрана. Первый экран имеет имя "screen1", второй экран "screen2". Каждый экран показывает вид с полями и центрированный текст.

define.class("$server/composition", function ($ui$, screen, view, label) {
this.render = function () {
  return [
    screen({
        name: 'screen1',
        clearcolor: 'coolgrey'
      },
      view({
          flex: 1,
          bgcolor: 'amber',
          h: 480,
          flexdirection: 'column',
          justifycontent: 'center',
          margin: vec4(30)
        },
        label({
          text: 'Screen #1',
          fontsize: 50,
          bold: true,
          fgcolor: 'black',
          bgcolor: null,
          alignself: 'center'
        })
      )
    ), // end of 1st screen
    screen({
        name: 'screen2',
        clearcolor: 'asparagus'
      },
      view({
          flex: 1,
          bgcolor: 'charcoal',
          h: 480,
          flexdirection: 'column',
          justifycontent: 'center',
          margin: vec4(30)
        },
        label({
          text: 'Screen #2',
          fontsize: 50,
          bold: true,
          fgcolor: 'white',
          bgcolor: null,
          alignself: 'center'
        })
      )
    ), // end of 2nd screen
  ];
};

});

Когда вы запускаете композицию в своем браузере, по умолчанию DreemGL ​​доставит первый элемент экрана как дочерний элемент композиции. Вы должны увидеть следующий интерфейс:

Чтобы получить доступ ко второму экрану, просто добавьте отображаемое имя непосредственно в строку запроса, сразу после вопросительного знака, например: http://localhost:2000/examples/multiscreendemo?screen2

Теперь вы должны увидеть следующий интерфейс: