Popular JavaScript Framework Libraries: qooxdoo and SproutCore

Developing for the Web can entail a lot of workarounds, browser hacks and inefficient coding. When you think about it, why would you want to test your scripts for every grade A browser when you can use a JavaScript Framework to do the tedious work instead? Another reason to use a JavaScript Framework is to give your site a clean and professional look that would take you months to achieve on your own, if at all! This week we continue our overview of the top dozen Frameworks, with qooxdoo and SproutCore. If you've just encountered this series, you may want to go back to the beginning, where we looked at the Prototype, script.aculo.us and MooTools Frameworks. In the second installment, we turned our attention to three strong contenders for the title of Framework supremacy: JQuery, the Yahoo! UI Library (YUI) and MochiKit. In part three, we continued our overview of the twelve most popular JavaScript Frameworks in use today with Dojo, Rialto and the Spry Frameworks. This week's Frameworks are relative newcomers on the scene, but have already created quite a sensation.

qooxdoo

• URL: https://qooxdoo.org/
• Docs: https://qooxdoo.org/documentation
• Demos: https://qooxdoo.org/demo
• Community: https://qooxdoo.org/community

The last Framework we looked at was Adobe Lab's Spry Framework. It relied on heavy use of HTML, CSS, with minimal JavaScript code. By designing their Framework that way, they targeted Web designers over Web developers. The makers of qooxdoo went the other way and built their Framework around object-oriented JavaScript, while minimizing HTML, CSS and the DOM. The qooxdoo library classes are fully based on namespaces and don't extend native JavaScript types, thus cutting down on global variables. It offers a full set of widgets that are close approximations to those found in desktop applications. qooxdoo implements advanced client-server communications via Ajax, using an event-based model to handle asynchronous calls. For creating mature Web applications, qooxdoo offers several solutions to choose from, including the qooxdoo Web Toolkit (QWT), the Rich Ajax Platform (RAP), and Pustefix.

Widgets

Although several of the other Frameworks that we've seen contain an extensive library of custom widgets, qooxdoo also includes several familiar HTML controls, including labels, images, buttons, text fields, popups, tooltips and something you might not have seen before, called an atom, which is a combination of an image with a label. The advantages to using their controls over the standard HTML ones are twofold: first, qooxdoo allows you to create and manage them exclusively in JavaScript; second, they have implemented all the cross-browser abstraction for you while providing a highly efficient foundation on which to build. For instance, labels can be configured to show an ellipsis (...) when there's not enough space to display the text or line wrap. qooxdoo Images are precached automatically and allow for PNG transparency. Our first example demonstrates how to create some Labels and TextFields, and a TextArea control and append them to the page. The qooxdoo namespace convention is to include the full package and class name, just like in the Java Language (e.g.: qx.ui.basic.Label):

var labels = ["First Name", "Last Name", "City", "Country", "Notes"]; for (var i=0; i<labels.length; i++) { page.add(new qx.ui.basic.Label(labels[i]).set( { allowShrinkX: false, paddingTop: 3 }) ,{row: i, column : 0}); } var inputs = ["John", "Smith", "New York", "USA"]; for (var i=0; i<inputs.length; i++) { page.add( new qx.ui.form.TextField(inputs[i]), {row:i, column:1} ); } // text area page.add(new qx.ui.form.TextArea().set({height: 250}), {row:4, column:1, colSpan: 3});

Element Positioning

qooxdoo also borrows heavily from the Java language in its use of Layout Managers to to position elements in their parent container and on the page. Layouts include Canvas, Grid, HBox (Horizontal Box) and VBox (Vertical Box). Layouts can either be set in the container's constructor or via the setLayoutProperties() method, which all containers implement. The optional second parameter of the qx.ui.container's add() method also accepts a map containing layout properties to configure. Looking at our example above, although the code that sets the Layout isn't included, the inclusion of row and columns points to the Grid Layout. Here's an example using the Canvas Layout to position a widget relative to the right or bottom edge of the available space. The Canvas Layout also supports stretching between left and right or top and bottom:

var canvas = new qx.ui.container.Composite(new qx.ui.layout.Canvas); canvas.add(new qx.ui.form.Button("Say Hello") , { left : 20, top: 20 });

Controlling the Appearance of Page Elements

Page elements' appearance can be configured using global templates called meta themes (also referred to as skins in some Frameworks), and those that affect individual elements.

qooxdoo includes two themes:

• Modern: a graphically rich theme, showcasing many of qooxdoo's UI capabilities
• Classic: a more lightweight, MS Windows oriented theme

Each meta theme is comprised of five key parts:

• appearance
• color
• decoration
• font
• icon

Custom themes can be created by extending existing ones or from scratch.

The following code creates a custom theme and sets three color properties using a hex value, an rgb array and a named color:

qx.Theme.define("myApplication.theme.sample.Color", { colors : { // color as hex value "background-application" : "#DFDFDF", // color as rgb array "background-pane" : [ 128, 128, 128 ], // color as named color "background-light" : "grey", } });

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both