Build powerful Web interfaces with a free JavaScript framework

Scriptaculous allows you to easily add powerful AJAX-based user interface features to Web 2.0 applications. Web developer Tony Patton explains why you should use it and describes how to use it.

Scriptaculous is a framework for building dynamic Web 2.0 interfaces. It utilizes another freely available framework called prototype. Scriptaculous simplifies the ins and outs of implementing an AJAX-based Web interface. It allows you to easily add animation and custom data controls, as well as utilities for working with the DOM and JavaScript testing.

Why use it?
AJAX is a great marriage of technologies, but it can be confusing and time-consuming to build AJAX-powered applications from scratch. The scriptaculous framework makes it easy to include AJAX-based features in your applications, plus all of the development and testing has been done, so you can devote your time to more important tasks.

Getting started

The first step in utilizing the scriptaculous framework is downloading and installation. The download is basically a zip file with JavaScript files along with various HTML files for testing and demonstration. The JavaScript source files are the most important. The following list contains an overview:

Keep your developer skills sharp by signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

• lib\prototype.js: The source for the prototype JavaScript framework.
• scr\bulder.js: Allows you to easily create DOM elements dynamically.
• src\controls.js; Includes the core components for working with the custom data controls.
• src\dragdrop.js: Provides the code for utilizing the custom data controls for drag-and-drop related functions.
• src\effects.js: The Visual Effects library includes all you need to add advanced JavaScript animation to your Web application.
• src\scriptaculous.js: The base code library for utilizing the scriptaculous framework.
• src\slider.js: Provides the code for utilizing the slider data control.

The previous list includes the default directory where each file is installed. You can place these JavaScript files anywhere on the Web server, but using the default directories makes it easier to work with the examples.

You may be wondering about the overhead of including these files in a Web page. The complete library (all files in the list) consumes approximately 150KB. The two core files—prototype.js and scriptaculous.js—add up to 50KB. So, all other combinations will be between 50 and 150KB depending on the files used.

By default, scriptaculous.js loads all of the other JavaScript files necessary for effects, drag-and-drop, sliders, and all of the other scriptaculous features. You can limit the additional scripts that get loaded by specifying them in a comma-separated list (via the load command) when loading the scriptaculous JavaScript file.

Once you have downloaded and installed the framework, it is easy to use it within a Web page. The first step is linking to the JavaScript source files within the head portion of the Web page. See Listing A.

The various functions available are accessed via HTML script tags. You can gain a better understanding by examining one of the test files installed with the framework (or an online example). As an example, I loaded the slider_test.html file located in the test\functional directory of a default installation. The complete contents of the file are too much to list here, but I can examine one portion that loads the first slider control on the page—a standard horizontal slider:

<script type=”text/javascript”>
// <![CDATA[
new Control.Slider(’handle1′,’track1′,{
sliderValue:0.5,

onSlide:function(v){$(’debug1′).innerHTML=’slide: ‘+v},

onChange:function(v){$(’debug1′).innerHTML=’changed! ‘+v}});

// ]]>

</script>

Using the CDATA section sidesteps issues encountered when using characters like < and > in your JavaScript. The code creates a new Slider control (via the Control class) and sets its initial position to the middle of the control (0.5) and adds handlers for the slide and change events. Also, framework functionality is easily used via onClick events.

A drawback of many freely available (and some commercial) tools is a lack of documentation and examples. The scriptaculous framework includes extensive example code and basic documentation via its Wiki. In addition, a quick Google search yields more help. A good example is the various cheat sheets available that provide a quick reference sheet for using the framework.

The framework includes an extensive set of examples that are included in the functional subdirectory of the test directory. You can dive into the test files to get a good idea of how to use framework functions within your application. In addition, the demos section of the scriptaculous Web site provides great examples.

Ant - an introduction

Ant is a Java based build tool developed as part of the Apache Jakarta project. You can get it from the Ant home site: ant.apache.org. At first the usefulness of Ant may not be readily apparent, but after using it for awhile on even small projects you may be surprised at how much you come to rely on it. For example, the ability to build files into specific directories, generate JavaDoc and package classes into JAR files for deployment all in one keystroke is extremely powerful. Here is a non-exhaustive list of what Ant can do:

• Extract source from a version control system
• Create directories
• Delete directories
• Compile code
• Generate JavaDoc
• Jar files
• Copy files
• Generate e-mail
• FTP files
• Execute SQL statements
• Run unit tests

After downloading and unzipping the download contents, copy the Ant directory to the root of your C:\ drive, so the path is “C:\Ant”. You can install it anywhere you want, but this is most convenient. We also have to set up some environment variables so that the system can find Ant when we need it. You need to add System Variable called ANT_HOME, set this to the directory where you put Ant, in this case “C: \Ant”. Make sure there is also a System Variable called JAVA_HOME that point to your Java SDK directory.

We’re almost done. Now all you have to do is add the above variables to your path. Look for the “PATH” environment variable under System Variables and click “Edit”. Add this to the end of the path:

;%JAVA_HOME%\bin;%ANT_HOME%\bin

Notice that entries in the path on Windows are delimited by “;”. Now restart your machine to make sure the environment variables stick. We’re almost ready to test our installation. Open up a command window and type: ant. If the above steps went well, then you should see your first Ant error message:

D:\>ant

Buildfile: build.xml does not exist!
Build failed

This means that the installation worked. If you got anything other than this, then more than likely one of the above installation steps weren’t performed.

Ant requires a couple of things to run: Java source files (obviously), and a build file. First we’re going to create a really simple Java program for Ant to build.

public class AntTest{
public AntTest(){
System.out.println(”Isn’t Ant cool?”);
}

public static void main(String[] args){
new AntTest();
}
}

Don’t try to compile it yet, we’re gonna let Ant do that. The next thing we need is the build file.

<project name=”AntExamplel” default=”dist” basedir=”.”>
<!– set global properties for this build –>
<property name=”src” value=”.”/>
<property name=”build” value=”build”/>
<property name=”dist” value=”dist”/>

<target name=”init”>
<!– Create the time stamp –>
<tstamp/>

<!– Create the build directory structure used by compile –>
<mkdir dir=”${build}”/>
</target>

<target name=”compile” depends=”init”>
<!– Compile the java code from ${src} into ${build} –>
<javac srcdir=”${src}” destdir=”${build}”/>
</target>

<target name=”dist” depends=”compile”>
<!– Create the ${dist}/lib directory –>
<mkdir dir=”${dist}/lib”/>

<!– Put everything in ${build} into the AntTutorial-${DSTAMP}.jar file –>
<jar jarfile=”${dist}/lib/AntExample-${DSTAMP}.jar” basedir=”${build}”/>
</target>

<target name=”clean”>
<!– Delete the ${build} and ${dist} directory trees –>
<delete dir=”${build}”/>

<delete dir=”${dist}”/>
</target>
</project>

Make sure that you saved the build.xml file in the same directory as the Java source file. We’re not going to get into what the build file is actually doing yet, so just trust me…

Now, in your command window, cd to the directory where the Java source and the build file are saved (a lot of tutorials leave this step out, strangely enough) and type “ant“. Hopefully you will see the BUILD SUCCESSFUL message at the bottom. Now check out the directory. You’ll notice that there are two new directories: “build“, and “dist“. These directories were built by Ant. The “build” directory will include the compiled Java class file(s) and the “dist” directory will contain a .jar file with our project name and a timestamp.

Reference: http://ant.apache.org/manual/index.html

Tags: ant, build,

The Singleton Pattern

A design pattern is a general solution for a common problem in software design. The idea is that the solution gets translated into code and applied in different situations where the problem occurs.

One of the commonly used creational patterns is the Singleton pattern. It describes a technique for ensuring that only a single instance of a class is ever created. The technique takes the following approach: don’t let anyone outside the class create the instance of the class. Typically, singletons are created to reduce the memory requirements. You can implement this approach in many different ways.

One of the ways is to make the constructor of the class private or protected and providing a static method which returns an object of the class. By this you can guarantee that only one instance is shared among all. Also, if you know the one instance being created will be the subclass, make the parent class abstract and provide a method to get the current instance. Similar ways of restricting class creation can be found throughout the J2SE standard libraries.

At this point you might think that restricting access to a constructor automatically makes it a Singleton. It doesn’t. An example for that is the Calendar class. The Calendar class constructor is protected, and the class offers a getInstance () method to get an instance of the class. However, each call to getInstance () method gets a new instance of the class. So that is not singleton.

When you create your own Singleton class, make sure that only one instance is ever created:


public class MySingleton{
    private static final MySingleton INSTANCE = new MySingleton ();
    private MySingleton () { }
    public static final MySingleton getInstance() {
        return INSTANCE;
    }
}


The static method, getInstance (), returns the single instance of the class. Note that even if the single instance needs to be a subclass, you don’t have to change the API.

Theoretically, you don’t need the getInstance () method because the INSTANCE variable could be public. However, the getInstance () method provides the flexibility in case of future system changes.

The Singleton pattern is useful if you know you only have a single resource, and need to share access to the state information of that single instance. Identifying the need for the Singleton pattern at design time can simplify development. However, some times you are not aware of the need until a performance problem leads you to refactor code and use the pattern at a later time. For example, you might discover that system performance is degrading because your program is creating instances of the same class to pass the state information. By changing to the Singleton pattern, you avoid recreating the same object. This frees up time the system uses to recreate the object, and saves the time the garbage collector needs to free those instances.

In short, use the Singleton pattern when you want to ensure that one, and only one, instance of the class is ever created. If your constructor doesn’t require any operations, provide an empty private constructor (or a protected constructor if you need to subclass). Otherwise, by default, the system will provide a public constructor, something you don’t want when working with a Singleton pattern.