Joe Lennon

Rants, Raves & Recommendations

What’s new in Lift 2.0?

without comments

Lift is a web application development framework that enables the building of web applications in the Scala programming language. Because it is powered by Scala, Lift can be deployed to any Java™ Servlet container such as Tomcat or Jetty, and can make use of both Java and Scala libraries and APIs. In June 2010, Lift 2.0 became available, and it boasts an impressive array of new features and highlights. This article describes many of these features and explains how they can benefit you in the development of your own web applications.

Lift is a free, open source web application development framework for building powerful, interactive, and dynamic applications using the Scala programming language. Scala is purely object-oriented, but, uniquely, it also has support for functional programming, giving you access to features such as anonymous functions, nested functions, curry functions, and higher-order functions. Scala runs in a Java Virtual Machine (JVM), making it compatible with Java applications and libraries. These traits mean that web applications powered by Lift can use both Scala and Java class libraries. In addition, Lift applications are packaged as Web Application Archive (WAR) files and can be deployed to any web application server that supports the Servlet 2.4 specification, including Apache Tomcat 5.5 and later.

Read the full article on IBM developerWorks at http://www.ibm.com/developerworks/web/library/wa-lift20/

Written by Joe Lennon

March 19th, 2011 at 3:38 pm

Build an Ajax application with the Dojo Toolkit

with 4 comments

The Dojo toolkit is a JavaScript library that makes the process of building large JavaScript-based Rich Internet Applications (RIAs) much simpler. With a wide range of features—from DOM querying and manipulation, Asynchronous JavaScript and XML (Ajax) request handling, excellent object-orientation support, and a full user interface widget library (Dijit)—Dojo is an excellent library to use to build a dynamic and interactive web application. In this tutorial, learn about many of the concepts of Dojo and the Dijit widget library through the development of a fully featured sample application, a contact manager system. This application lets a user browse, create, edit, and remove contacts (and contact groups) from a MySQL database. PHP is used on the server side to communicate with the database, with Dojo and the Dijit component library providing a rich, Ajax-powered user interface. The final result is a powerful web application that you can use as a foundation for your own RIAs.

Read the full tutorial on IBM developerWorks at http://www.ibm.com/developerworks/web/tutorials/wa-dojotoolkit/index.html.

Written by Joe Lennon

March 1st, 2011 at 6:45 pm

Dojo from the ground up, Part 3

without comments

The third and final part of my IBM developerWorks article series on the Dojo Toolkit was published today. It covers the Dijit component framework that allows you to build rich user interfaces in a declarative or programmatic way. This article introduces you to the various UI widgets available, and shows you the different ways of using them in your applications. It also introduces you to using Dijit to layout your application, and the DojoX extension library.

The Dojo toolkit lets Web application developers create Rich Internet Applications by offering a wide variety of features that save development time and effort. From DOM helpers and Ajax to a full-blown widget library and object-orientation features, Dojo includes virtually everything you need to build large-scale Asynchronous JavaScript and XML (Ajax)-powered Web applications. If the functions you are looking for are not included in Dojo itself, it’s highly likely that you can find it in DojoX, a repository of extensions and experimental features that are not included in the Base or Core modules of the toolkit. In Part 3 of this three-part series on developing rich web-based applications using the Dojo toolkit, learn about the Dijit rich user interface component framework, which lets you build powerful interfaces with minimal effort.

Dijit is the Dojo Toolkit’s user interface library of rich components. These components are fully theme-able, and can be declared either declaratively using HTML-style tags or programmatically using JavaScript. This section provides a brief explanation of Dijit, explains the components it has to offer, and describes the various themes that are available out of the box.

Read the article in full on IBM developerWorks at http://www.ibm.com/developerworks/web/library/wa-ground3/

Written by Joe Lennon

February 15th, 2011 at 10:18 pm

Basics of HTML5 Local Storage

with 9 comments

This post is designed to be a no-frills introduction to using HTML5 local storage. It assumes that you are using the latest version of Mozilla Firefox and the Firebug plug-in.

1. Checking for browser support

Open the Firebug console and enter the following command:

'localStorage' in window;

You should see the following output:

>>> 'localStorage' in window;
true

2. Storing data

HTML5 local storage stores data in named key/value pairs. The key must be a String, and the value can be any JavaScript data type, although it will be stored as a String. To store data, you use localStorage.setItem:

localStorage.setItem("name", "Joe");

Alternatively, you can use the square bracket syntax to store data:

localStorage["age"] = 25;

Or, you can use dot notation if you prefer:

localStorage.location = "Ireland";

If the key you use already exists, the existing key/value pair will be overwritten without warning.

3. Retrieving data

To retrieve data you can use getItem:

localStorage.getItem("name");

Output:

>>> localStorage.getItem("name");
"Joe"

Alternatively, you can also use square bracket syntax:

localStorage["age"];

Output:

>>> localStorage["age"];
"25"

Or, you can use dot notation:

localStorage.location;

Output:
>>> localStorage.location;
"Ireland"

4. Removing data

There are two ways to remove data in local storage. Firstly, you can delete a single key:

localStorage.removeItem("age");

Alternatively, you can clear all local storage data as follows:

localStorage.clear();

5. Finding data

You can get the number of key/value pairs stored in local storage using the length property:

localStorage.length;

To get the name of a key at a particular index, you can use the key method:

localStorage.key(0);

You can combine the two to iterate over the local storage data as follows:

for(var i=0, len=localStorage.length; i<len; i++) {
    var key = localStorage.key(i);
    var value = localStorage[key];
    console.log(key + " => " + value);
}

6. Events

You can keep track of changes to local storage using event handling. The “storage” event is fired any time data changes in local storage. This event is fired by the window object. For example (Note: this won’t work in IE):

window.addEventListener("storage", function(e) {
    console.log("Local storage was modified");
}, false);

The above will log a message to the Firebug console any time that the local storage data is modified (when adding, removing or replacing keys, clearing a non-empty storage, etc). At the time of writing, Firefox 3.6 did not include support for the storage event object properties key, oldValue, newValue and url.

7. Summary

So there you have it, a quick introduction to using HTML local storage. If you have any questions, leave a comment.

Written by Joe Lennon

February 11th, 2011 at 12:37 pm

Dojo from the ground up, Part 2

without comments

The second part of my IBM developerWorks series on getting started with Dojo development was published yesterday. This part focuses on Dojo’s class-based object-orientation features, which help make JavaScript OO a little more bearable for traditional class-based OO developers with backgrounds in the likes of Java and C++.

The Dojo toolkit enables web application developers to create Rich Internet Applications by offering a wide variety of features that save development time and effort. From DOM helpers and Asynchronous JavaScript and XML (Ajax) to a full-blown widget library and object-orientation features, Dojo includes virtually everything you need to build large-scale Ajax-powered web applications. If the functions you are looking for are not included in Dojo itself, it’s likely that you can find them in DojoX, a repository of extensions and experimental features that are not included in the Base or Core modules of the toolkit. In Part 2 of this three-part series on developing rich web-based applications using the Dojo toolkit, you will learn about JavaScript’s object-orientation features, and how they differ from a traditional class-based object-oriented programming language. You will then see how Dojo bridges this gap by offering a class-based system of its own.

Object-oriented programming (OOP) is a software development paradigm that is based on the definition of data structures called objects, which consist of data properties and functions. These properties (member variables) and functions (or methods) define the potential interaction that a piece of software can perform with that object. The primary benefit of OOP is that it helps with code re-use and maintenance by making it easier to organize your code.

Read the full article on IBM developerWorks: http://www.ibm.com/developerworks/library/wa-ground2/

Written by Joe Lennon

February 2nd, 2011 at 11:19 am