controllers.js

UserAdmin.menuListDelegate = SC.Controller.create(SC.CollectionViewDelegate, {
  // we need to be aware of changes of the selection, in order to let the
  // statechart follow correctly

  // approach from the SC community: always return the current, but do a send event to see wether we can change
  // and let the statechart do the changing
  collectionViewSelectionForProposedSelection: function (view, sel) {
    SC.info('collectionViewSelectionForProposedSelection');
    UserAdmin.statechart.sendEvent("proposedStateChange", sel);
    //return sel;
    return view.get('selection');
  }
});

UserAdmin.menuListController = SC.TreeController.create({
  collectionViewSelectionForProposedSelection: function (view, sel) {
    SC.info('collectionViewSelectionForProposedSelection');
    UserAdmin.statechart.sendEvent("proposedStateChange", sel);
    return view.get('selection');
  }
});

UserAdmin.selectedMenuItemController = SC.ObjectController.create({
  contentBinding: 'UserAdmin.menuListController.selection'
});

core.js

// root file of the application
// ==========================================================================
// Project:   UserAdmin
// Copyright: ©2014 Maurits Lamers
// ==========================================================================
/*globals UserAdmin */

/** @namespace

  @extends SC.Object

*/

UserAdmin = SC.Application.create(
  /** @scope UserAdmin.prototype */ {

  NAMESPACE: 'UserAdmin',
  VERSION: '0.1.0',
  store: SC.Store.create().from('UserAdmin.DataSource')

});

UserAdmin.menuOptions = SC.Object.create(SC.CollectionContent, SC.TreeItemContent, {

  treeItemIsExpanded: true,

  treeItemIsGrouped: true,

  treeItemChildren: [
    // example of the menu options, add more of these kind of groups to have more options.
    SC.Object.create(SC.TreeItemContent, {
      treeItemIsExpanded: true,
      group: true,
      name: "Users",
      subpath: 'users',
      treeItemChildren: [
        SC.Object.create({
          name: "Create User",
          view: 'UserAdmin.mainPage.createUser',
          state: 'CREATEUSER'
        }),
        SC.Object.create({
          name: "Create Students",
          view: 'UserAdmin.mainPage.createUsers',
          state: 'CREATEUSERS'
        }),
        SC.Object.create({
          name: "Edit User",
          view: 'UserAdmin.mainPage.editUser',
          state: 'EDITUSER'
        }),

        // SC.Object.create({
        //   name: "Edit Users",
        //   view: 'UserAdmin.mainPage.editUsers',
        //   state: 'editUsers'
        // }),
        // SC.Object.create({
        //   name: "Delete Users",
        //   view: 'UserAdmin.mainPage.deleteUsers',
        //   state: 'deleteUsers'
        // })
      ]
    }),

    

    
  ]
});

main_page.js

/*globals UserAdmin, CoreMeetme*/
UserAdmin.mainPage = SC.Page.design({

  // The main pane is made visible on screen as soon as your app is loaded.
  // Add childViews to this pane for views to display immediately on page
  // load.
  menuListView: SC.outlet("mainPane.masterDetail.masterView.contentView"),

  mainPane: SC.MainPane.design({
    childViews: ['header', 'masterDetail'],

    header: SC.View.design({
      layout: { borderBottom: 1, height: 50, zIndex: 999 },
      tagName: 'header',
      // render: function(context, firstTime) {
      //   context.setAttr('role', 'banner');
      //   context.push('<div class="container"><h1 id="logo"><a href="http://www.sproutcore.com"><img src="' + sc_static('images/logo.png') + '" alt="SproutCore"></a></h1><nav role="navigation"><ul><li><a href="http://www.sproutcore.com/about/">About</a></li><li class="active"><a href="/">Showcase</a></li><li><a href="http://guides.sproutcore.com">Guides</a></li><li><a href="http://docs.sproutcore.com">Docs</a></li><li><a href="http://www.sproutcore.com/community/">Community</a></li><li><a href="http://blog.sproutcore.com">Blog</a></li></ul></nav></div>');
      // }
      render: function (context, firstTime) {
        context.setAttr('role', 'banner');
        context.push('<div class="container"><h1>UserAdmin</h1></div>');
      }
    }),

    masterDetail: SC.MasterDetailView.design({
      layout: { top: 51 },
      masterWidth: 300,

      masterView: SC.ScrollView.design({

        contentView: SC.SourceListView.design({
          classNames: ['main-source-list'],
          contentBinding: 'UserAdmin.menuListController.arrangedObjects',
          contentValueKey: 'name',
          delegate: UserAdmin.menuListDelegate,
          // Show all the items for best performance since the list is short.
          contentIndexesInRect: function () { return null; }.property().cacheable(),
          selectionBinding: 'UserAdmin.menuListController.selection'
        })
      }),

      detailView: SC.ContainerView.design({
        nowShowing: 'UserAdmin.mainPage.welcomeView',
        nowShowingBinding: SC.Binding.notEmpty('UserAdmin.selectedMenuItemController.view', 'UserAdmin.mainPage.welcomeView')
      })
    })
  }),

  welcomeView: SC.StaticContentView.design({
    classNames: ['welcome-view'],
    content: "<h1> User Admin</h1>" +
          "<p>This application allows you to create and manage users, as well as other data in the system. <br/>" +
          " Click on one of the items on the left to get started.</p>"
  }),

  createUser: UserAdmin.CreateUserView,

  createUsers: UserAdmin.EditUsersView,

  editUser: UserAdmin.EditUserView,

  confirmUserCreate: UserAdmin.ConfirmUserCreatePane,

  confirmStudentsCreate: UserAdmin.ConfirmStudentsCreatePane,

  progressPane: UserAdmin.ProgressPane,

  okPane: UserAdmin.OKPane,

  migrations: UserAdmin.MigrationsView,

  // demoView: SC.WebView.design({
  //   valueBinding: SC.Binding.oneWay('UserAdmin.sourceController.appPath')
  // })
});

statechart_createuser.js

UserAdmin.CREATEUSER = SC.State.design({

  initialSubstate: 'CREATEUSEREDIT',

  CREATEUSEREDIT: SC.State.design(), // empty state, it allows going to other substates from here, such as confirmations

  proposedStateChange: function (sel) { // event sent by the menu list controller
    SC.debug('proposedStateChange in create_user');
    if (sel) {
      UserAdmin.menuListController.set('selection', sel);
      this.gotoState(sel.getPath('firstObject.state'));
    }
  },
  
})

statechart_main.js

UserAdmin.MAINSTATE = SC.State.design({
  initialSubstate: 'STARTUP',

  STARTUP: SC.State.design({
    authenticated: function () {
      UserAdmin.getPath('mainPage.mainPane').append();
    }
  }),

  proposedStateChange: function (sel) { // event sent by the menu list controller
    SC.Logger.debug('proposedStateChange in main_State');
    if (this.stateIsCurrentSubstate(this.STARTUP)) {
      // setting selection as well as state
      UserAdmin.menuListController.set('selection', sel); // change the selection in the controller
      this.gotoState(sel.getPath('firstObject.state'));  //set the state belonging to the different view
    }
  },
  
  CREATEUSER: SC.State.plugin('UserAdmin.CREATEUSER'),

  CREATEUSERS: SC.State.plugin('UserAdmin.CREATEUSERS'),

  EDITUSER: SC.State.plugin('UserAdmin.EDITUSER'),
  
});