Popular JavaScript Framework Libraries: qooxdoo and SproutCore [con't]
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)
QWT is similar to Google Web Toolkit, but with all of qooxdoo's high-quality widgets. You write your qooxdoo application in Java, and QWT translates the client part to JavaScript for you.
Pustefix
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.
SproutCore
- URL: https://www.sproutcore.com/
- Docs: https://www.sproutcore.com/documentation
- Demos: https://www.sproutcore.com/demos
- Community: https://www.sproutcore.com/community
- Blog: https://www.sproutcore.com/blog
The SproutCore Application Framework provides pre-built standard desktop application features such as:
- drag-and-drop
- undo/redo
- keyboard shortcuts
- sophisticated user interfaces
- localization of both text and images
- a rich internal data model
SproutCore also comes with a complete set of command line build tools that automatically assemble and optimize your HTML, CSS and JavaScript. During development, SproutCore is hosted inside the Merb server in order to deliver JavaScript, CSS, HTML, images and other resources. When you're ready to deploy your SproutCore application, sc-build is used to generate a static directory of files you can upload and serve from any Web server.
The SproutCore download contains development tools, testing harness and lightweight HTTP server all bundled into the RubyGems packaging and distribution system. Ruby must be installed in order to use the development tools but the final product is one or more JavaScript files, so Ruby isn't a requirement for production use of SproutCore.
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 https://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 tool:
sc-gen model <app name>/<model name>
would create the following JavaScript file:
clients/<app name>/models/<class name>.js
View Helpers
Views are JavaScript classes that manage part of the Web page for you. They
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
both the HTML and JavaScript view components for you. All HTML, CSS, images
and other static resources for a client are stored inside a folder called english.lproj.
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 .rhtml because
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.
Controllers
The role of the controller in MVC architecture is to receive and translate input to requests on the model or view and is typically responsible for calling the model's getter and setter methods. Sproutcore uses JavaScript objects to perform these functions. Use the sc-gen tool to build a controller:
sc-gen controller <app name>/app
This would create a controller in the clients/<app name>/controllers/app.js
named <app name>.appController.
Unlike most object-oriented systems, which create classes using overloaded
constructors, in SproutCore you create new objects by calling create() and setting
the properties you want directly on the new object. This is much faster in JavaScript
and considered by many to be more convenient for building JavaScript applications.
In a newly created controller, we would append the following code beneath the
TODO line to add a property and a method:
SproutCore defines YES and NO constants to represent the true and false boolean values;
they can be used throughout the Framework because it makes code more readable.
If you prefer true and 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:
The hasGreetingChangedObserver() function will observe the hasGreetingChanged
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 hasGreetingChanged property.
This means that whenever the checkbox is clicked, the hasGreetingChanged property
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.
The resulting files will consist of Javascript, XHTML, and graphic files in
a relatively compact, localization-friendly package.
We've looked at some excellent Frameworks so far, but don't make any decisions just yet, because next week, we'll be completing our overview of the top dozen JavaScript Frameworks with Microsoft's ASP.NET Ajax Framework.
Original: December 2, 2008
Find a programming school near you