Creating a multiscreen application with DreemGL

Question

How do I create a multiscreen application with DreemGL? If I have a multiple screens in my application, through which URL can I access those screens?

Answer 1

Just add a second screen to the composition inside the compositioin's render() function. Different screens in DreemGL applications are identified through their name attribute. The following composition contains two screens. The first screen has a name value of 'screen1', the second screen 'screen2'. Each screen shows a view with margins and a centered text.

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
  ];
};

});

When you run the composition in your browser, by default DreemGL will deliver the first screen element as child of a composition. You should see the following UI:

To access the second screen, just add the screen name directly to the query string, directly following the questionmark, e.g.: http://localhost:2000/examples/multiscreendemo?screen2

Now you should see the following UI: