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.
By default the transition is immediate: the HTML elements are removed from the DOM and those representing the next state are appended in their place. Instead we want the transition to be animated with the elements of each screen sliding in and out with an effect similar to those on OS X and iOS.
Thanks to the scaffolding introduced in 1.10 it just so happens that very little coding is required.
First we specify the animations that we want on each view with 4 lines of code like the following:
At this point views are animated on append, but not on removal (except for the toolbar since it has a high zIndex). The animation on remove is not visible simply because the new view is appended over the one being animated and therefore hiding it.
We need to delay the append step for the time necessary to the animation to complete, which we do with the following code:
In total: 4 lines of code for each view we want to animate plus 3 for each state, grandtotal: 16+6=22 lines of code! (without indentation for readability it would have been just 18).
Not bad, huh?
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.
By default the transition is immediate: the HTML elements are removed from the DOM and those representing the next state are appended in their place. Instead we want the transition to be animated with the elements of each screen sliding in and out with an effect similar to those on OS X and iOS.
Thanks to the scaffolding introduced in 1.10 it just so happens that very little coding is required.
First we specify the animations that we want on each view with 4 lines of code like the following:
At this point views are animated on append, but not on removal (except for the toolbar since it has a high zIndex). The animation on remove is not visible simply because the new view is appended over the one being animated and therefore hiding it.
We need to delay the append step for the time necessary to the animation to complete, which we do with the following code:
In total: 4 lines of code for each view we want to animate plus 3 for each state, grandtotal: 16+6=22 lines of code! (without indentation for readability it would have been just 18).
Not bad, huh?
Comments