nowShowing.js

// apps/test/controllers/display.js
Test.displayController = SC.ObjectController.extend({
  
  nowShowing: 'Test.mainPage.displayView',
  
  showDisplayView: function() {
    this.set('nowShowing', 'Test.mainPage.displayView');
  },
  
  showCodeView: function() {
    this.set('nowShowing', 'Test.mainPage.codeView');
  }
  
});

// apps/test/resources/main_page.js
Test.mainPage = SC.Page.design({
  
  mainPane: SC.MainPane.design({
    childViews: 'container buttons'.w(),
    
    containerView: SC.ContainerView.design({
      layout: {top:30},
      nowShowingBinding: 'Test.displayController.nowShowing'
    }),
    
    buttons: SC.View.design({
      layout: {centerX:0, width:410},
      childViews: 'displayButton codeButton'.w(),
      
      displayButton: SC.ButtonView.design({
        layout: {height:24, width:200},
        action: 'Test.displayController.showDisplayView',
        title: "Display View"
      }),

      codeButton: SC.ButtonView.design({
        layout: {height:24, left: 210, width:200},
        action: 'Test.displayController.showCodeView',
        title: "Code View"
      })
    })
  }),
  
  displayView: SC.View.design({
    childViews: 'label'.w(),
    
    label: SC.LabelView.design({
      value: "Display"
    })
  }),
  
  codeView: SC.View.design({
    childViews: 'label'.w(),
    
    label: SC.LabelView.design({
      value: "Code"
    })
  })

})