Other Relevant Projects
Rich Ajax Platform (RAP)
The RAP project is used to build rich, Ajax-enabled Web applications in the Eclipse IDE, using JFace, Eclipse's Standard Widget Toolkit (SWT) API, and qooxdoo for the client-side presentation.
qooxdoo Web Toolkit(QWT)
Pustefix is a Web application framework that features an XML/XSLT-based view generation and a MVC back-end architecture. The front-end is built with the help of XSLT templates and can include parts containing HTML or XML code transformed into the final HTML output. The back-end allows for the creation of reusable handler classes, which can be combined into complete pages.
- URL: http://www.sproutcore.com/
- Docs: http://www.sproutcore.com/documentation
- Demos: http://www.sproutcore.com/demos
- Community: http://www.sproutcore.com/community
- Blog: http://www.sproutcore.com/blog
The SproutCore Application Framework provides pre-built standard desktop application features such as:
- keyboard shortcuts
- sophisticated user interfaces
- localization of both text and images
- a rich internal data model
Creating a SproutCore Project
To create a new SproutCore project, just switch to the directory that you want to work in and type the following:
This will create a new project with all of the basic development files you'll
need. The folder with the project name you specified will be created in
a directory called "clients". The clients folder is where all the SproutCore
apps for a site are stored. In Sproutcore, an application consists of all the components
that make up a Sproutcore Web page. You can view your Web page on your local
server by typing
http://localhost:4020/<project folder name> in your browser's
address bar. At this point it would contain a SproutCore welcome page to show
that it was created.
The Model-View-Controller Architecture
SproutCore applications use the model-view-controller (MVC) architectural pattern to separate the domain objects (called models), from the user interface objects (called views).
Modern Model Layer
A Model object is an ordinary class meant primarily to store data (usually persistent data), computed properties, relationships to other objects, along with various transformations that are valid on that data.
In SproutCore, you define new models using the
sc-gen model <app name>/<model name>
clients/<app name>/models/<class name>.js
perform such tasks as the creation of DOM elements, event handling and animations.
SproutCore comes with a useful set of view helpers that can automatically generate
and other static resources for a client are stored inside a folder called
Different language files can be generated to support localization. It's in this
folder that you'll find the
body.rhtml template. The extension is
SproutCore uses a templating language called Erubis that is based on Ruby. Don't worry. You don't need to know Ruby to use SproutCore templates. Here's what a typical view helper might look like:
Advantages of Key-Value Coding (KVC)
In typical object-oriented languages, public object attributes are accessed
using a "dot accessor" such as
thing.title or via an accessor method, such as
thing.getTitle(). In a key-value coding compliant system, access happens indirectly,
via a key (e.g.:
thing.get('title')). Key-value coding (KVC) allows for the
notification of observers and delegates that a value is going to change or that
a value has changed.
Key-Value Observing (KVO) and Bindings
In a KVO-compliant system, an object can be notified about another object's pending or processed property changes. With respect to an MVC system, the need is usually to link UI controls to properties of domain (data) objects so that consistency is maintained between the presentation layer and domain objects. The binding between the two layers acts as a kind of 'glue.' Here's our label again with binding attached:
Binding is great because SproutCore keeps the model and GUI elements in sync at all times.
sc-gen controller <app name>/app
This would create a controller in the
Unlike most object-oriented systems, which create classes using overloaded
constructors, in SproutCore you create new objects by calling
create() and setting
In a newly created controller, we would append the following code beneath the
TODO line to add a property and a method:
NO constants to represent the
false boolean values;
they can be used throughout the Framework because it makes code more readable.
If you prefer
false you can use those instead. Here's
a simple observer that updates the value of the greeting. Add the following
code in the Controller:
hasGreetingChangedObserver() function will observe the
property on the receiver (the label). You can use observers to observe practically
any object you like just by naming the path. For instance, we could create a
checkbox to use it:
The checkbox's value property is now bound to the
This means that whenever the checkbox is clicked, the
would update causing its observer to fire, which would in turn change the greeting
property and update the label.
Distributing Your Applications
When the time comes to release your Sproutcore application, you can 'compile'
it into a set of static, cacheable files using the SproutCore build tool, sc-build.
a relatively compact, localization-friendly package.
Original: December 2, 2008