Setting up Buckshot app for full browser

gistfile1.dart

// In CSS: body{margin:0px;padding:0px}

// given this main template (would be in your HTML file typically)
String t = 
'''
<dockpanel halign='stretch' valign='stretch'>
   <!-- menu strips (in other templates) will bind to this border -->
   <border dockpanel.dock='top' content='{data menuStripContent}'></border>

   <!-- controls will bind to this border -->
   <border dockpanel.dock='left' content='{data controlsContent}'></border>

   <!-- the wysiwyg, preview, whatever will go here -->
   <border content='{data displayContent}'></border>
</dockpanel>
''';

main(){
  setView(new View.fromTemplate(t))
     .then((rootElement){
        // now set the rootElement's parent to the window width/height
        // this works because the root element is placed in an implicit
        // border before being rendered to the DOM
        bind(buckshot.windowWidthProperty, rootElement.parent.widthProperty);
        bind(buckshot.widnowHeightProperty, rootElement.parent.heightProperty);

        // Now your main template will be stretchy with the browser window dimensions.

        // next set the view model to the datacontext of the rootElement so the data bindings work
        rootElement.dataContext = new MainViewModel();
     });
}

class MainViewModel extends ViewModelBase
{
   FrameworkProperty menuStripContentProperty;
   FrameworkProperty controlsContentProperty;
   FrameworkProperty displayContentProperty;

   MainViewModel(){
     menuStripContentProperty = new FrameworkProperty(this, 'menuStripContent');
     controlsContentProperty = new FrameworkProperty(this, 'controlsContent');
     displayContentProperty = new FrameworkProperty(this, 'displayContent');
   }
}