Reputation: 9006
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
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:
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:
Upvotes: 1