unicolet.org

The release of Sproutcore 1.10  marks an important step in the life of this very popular framework. Lots of new features make developing applications on the Sproutcore framework even easier and fun. One improvement that I am sure will catch your eye (pun intended) is  view animations . Coding view animations was rather easy also on previous versions, but with 1.10 animations are now first class citizens bolted into the core rendering subsystem. For an example of what is available out of the box see this  demo . So how would you use this goodness in an actual Sproutcore application? And how much code would it take? As an example I have put together a very basic Sproutcore app ( source , demo ) which has two states: an authentication form and a main screen. Logging in transitions the app from the login form to the main screen and logging out returns the app to the login screen. Pretty simple.

Whenever in a Sproutcore app a controller or a state needs to reference a view which is deeply nested in the ui tree there is a good case to use SC.outlet . The outlet creates a layer of indirection between the view and the other layers leaving to the view the responsibility to provide shortcuts to its inner objects, decoupling the layout from the application logic. An example of SC.outlet usage is shown in the todos application described in the Getting Started guides. Without outlet: ... TodosThree.mainPage = SC.Page.design({ // conventional design // https://github.com/sproutcore/getting-started/blob/master/apps/todos_three/resources/main_page.js#L4 ... TodosThree.SHOWING_APP = SC.State.design({ enterState: function() { TodosThree.mainPage.get('mainPane').append(); TodosThree.mainPage.mainPane.newTodoField.field.becomeFirstResponder(); }, Notice how the view design trickles down to the state layer (a part of the controller layer, which should be pre...