raju-bitter
raju-bitter

Reputation: 9006

Creating a multiscreen application with DreemGL

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?

Upvotes: 1

Views: 179

Answers (1)

raju-bitter
raju-bitter

Reputation: 9006

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:

enter image description here

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:

enter image description here

Upvotes: 1

Related Questions