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

Question

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

Answer 1

Просто добавьте второй экран в композицию внутри функции рендеринга() 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 ​​будет доставлять первый элемент экрана как дочерний элемент композиции. Вы должны увидеть следующий интерфейс:

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

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