application_menu.js

TestApp.applicationMenu = SC.Object.create({
  
  statechart: Ki.Statechart.create({
  
    rootState: Ki.State.design({
    
      initialSubstate: 'applicationMenuNotShowing',
  
      applicationMenuNotShowing: Ki.State.design({

        /** Actions */

        showSwitcher: function() {
          this.gotoState('applicationMenuShowing');
        }
        
      }),

      applicationMenuShowing: Ki.State.design({

        enterState: function() {
          TestApp.applicationMenu.getPath('page.menuPane').append();
        },
  
        exitState: function() {
          TestApp.applicationMenu.getPath('page.menuPane').remove();
        },
  
        /** Actions */
  
        showFirstModule: function() {
          TestApp.statechart.sendEvent('activateFirstModule');
          this.gotoState('applicationMenuNotShowing');
        },
  
        showSecondModule: function() {
          TestApp.statechart.sendEvent('activateSecondModule');
          this.gotoState('applicationMenuNotShowing');
        },
  
        showThirdModule: function() {
          TestApp.statechart.sendEvent('activateThirdModule');
          this.gotoState('applicationMenuNotShowing');
        }
      })
    
    })
  
  }),  // statechart


  page: SC.Page.design({
  
    menuPane: SC.PanelPane.design({
    
      defaultResponder: 'TestApp.applicationMenu.statechart',
    
      layout: { centerX: 0, centerY: 0, height: 100, width: 400 },
      contentView: SC.View.extend({
        childViews: "first second third".w(),
      
        first: SC.ButtonView.design({
          layout: { centerX: -110, centerY: 0, height: 25, width: 100 },
          title: "First Module",
          action: "showFirstModule"
        }),
    
        second: SC.ButtonView.design({
          layout: { centerX: 0, centerY: 0, height: 25, width: 100 },
          title: "Second Module",
          action: "showSecondModule"
        }),
    
        third: SC.ButtonView.design({
          layout: { centerX: 110, centerY: 0, height: 25, width: 100 },
          title: "Third Module",
          action: "showThirdModule"
        })
      })
    })
    
  })  // page 
  
});