I recently received a comment in one of my tutorials that essentially asked just why does SproutCore use absolute positioning to layout views, and why not just use the HTML that SproutCore based apps are built upon and let the browser do the work? Those are two really good questions and I often see them popping up for anyone who is new to the SproutCore framework.

I admit that when I first started using SproutCore, the idea of having to explicitly layout views was mystifying. After using the framework for a bit it eventually all made sense.

So what gives? You can find my reply to the comment, but I decided that the question comes up enough that the response deserve its own post. So here’s the answer I gave (slightly modified)…

Absolute positioning of views in SproutCore is done for a few reasons. While, yes, HTML is at the core, you have to look at SproutCore applications differently then traditional web pages.

SproutCore takes control of event handling and propagation for performance reasons and event normalization as well as to do things like drag and drop and scrolling. By knowing the exact position and dimensions of the views, SC can skip using a browser’s DOM object, which is slow, and quickly access a specific view based on an event.

In the case of list views (SC.ListView), by knowing the exact dimensions of the given example view, the list view can optimize what list item views to create and display to the user. This is why you can supply a list view with, say, 10,000 objects, but it will only make a few list item views at a time for those object deemed visible.

The scroll view (SC.ScrollView) uses exact positioning to great effect to help support its contained viewed. If you were to use a standard DIV with CSS overflow as ’scroll’ to contain a list view, then it would not be possible, or very difficult, to calculate how far up, down, left, and right someone has scrolled in order to only render what is absolutely essential.

There are other examples for SproutCore to have the need for absolute positioning, but those examples provide the nutshell.

The absolute positioning of views themselves is really no different then if you were to design a standard desktop application. The only difference is that when you typically build a desktop app in, say, Windows or the Mac, you have developer tools that make it easy to just draw the UI components on a screen and let the tools take care of auto-generating the layout code for you. Of course, good dev tools will also provide you the ability to manually code the layout yourself if you so wish.

There is an open source project in the works that will help aid in designing your app’s interfaces by simply drawing views on to the screen. It’s called Greenhouse:

http://wiki.sproutcore.com/Greenhouse-Introduction

Again, it’s best to look at SproutCore as a framework to build desktop-like applications that load in a web browser and not look at it like a traditional web page.

… So that’s the general idea. Of course, I’m pretty sure there are others out there who could provide a better detailed answer :-).

-FC

Advertisements