My attempt here is to show how I used TDD in an Django application. We’ll create a basic project with a single application and use unit testing to figure out an algorithm an implement it in the application’s class.

Why Test at All?

I’ve spoken to many groups about Test Driven Development (TDD). Many experienced engineers don’t do it because they haven’t been indoctrinated into the practice early, and they are established in an organization where they maintain and extend code that they might have been writing for months or even years. The code has been fully tested and it is solid. Why write unit tests?

Newer developers don’t know how to start with tests. They write code, then write tests, then get frustrated because they are continuously writing code twice. Corners get cut, and at best you get the “bare minimum” of coverage, which is basically what the boss sees and reviews.

Both of these scenarios are unfortunate, because there are a few things that TDD gives gives all engineers and the organizations that they work for:

• More efficient QA. QA engineers and testers don’t have to test for functionality, and they get better quality code.?What does this mean? It means that they get to do the part of their job that is more meaningful to the company as a whole. If the basic code and functionality are automatically tested, QA can then find the border conditions and those evil underlying non-obvious bugs that can kill an application, and if large enough, kill a company’s profits.
• Better and more cohesive organizations. Test Driven Development builds confidence throughout the entire organization. Engineers working often in geographically dispersed groups need to “trust” each other, their skills and abilities. If everyone in the organization is using TDD, these groups will know that the quality coming from others will work. This not only creates trust amongst engineers, but throughout the organization, from Marketing and Business resources all the way through QA.
• Professionalism. Being a “Pro” doesn’t mean generating thousands of lines of code.?It means generating efficient, simple to maintain, easily configurable code that “just works” every time. It not only has to work, it has to be tested and documented.
• Peer pressure to “do the right thing”. If the senior members and thought leaders of an engineering group are all using TDD, documenting their code and communicating effectively, this will spread throughout the organization and foment a best practices environment.

Test Driven Development with high unit test coverage creates efficient, spirited and profitable software. The balance of this post will explain just how I use TDD to implement a complex Bank Routing Number (ABN) validation class. I am assuming that the reader is familiar with Django, and has a comfortable understanding with basic Django and Python development principles:

Create the Project and Application

My application’s name is

valid_lib

It is destined to be a Service Platform that allows all kinds of complex financial form data to be validated through a ReSTful interface. At the moment I’m not worried about the Service, the Interfaces or even the Business Model. Currently, I want to get all the validation algorithms and calculations in place. The rest of the stuff is pretty easy. At the command line, in my Django development directory, I type:

django-admin.py startproject valid_lib

To start my project. I cd into the valid_lib directory and then type:

django-admin.py startapp finvs

To create my application and it’s directory. At this point I add the valid_lib.finvs to my INSTALLED_APPS in the the settings.py file, and while I’m there I add my database information, even though I really won’t be using it yet. I also add another folder in the finvs directory that I name util. Run a manage.py syncdb against the application’s root and you should be good to go. Everything should now look like fig 1:

fig 1: Initial TDD validation app structure

(I’m writing this on my MacBook Pro and using Textmate, but you should be getting similar results however you’re doing it)

Notice that there is a test.py file in the finvs directory. This is where we’re going to start. Django’s default unit testing fixture looks for this file and will execute tests within it. We’ll open that file up and begin writing our code there.

ABN Validation

ABA (American Banker’s Association) routing numbers (ABNs) are used to identify financial institutions when making transactions. This number is usually required when setting up a bank account for direct deposits, automated payments, etc. Or when making payments by “paperless” check over the phone or online.

These routing numbers include a checksum digit which can be used to help verify if a given number is valid or not.

The algorithm checks the first second and third number and adds them together, then iterates through every three numbers (total of 9) to return a value. If the resulting sum is an even multiple (think modulus here…) of ten (but not zero), the ABA routing number is good. ?We’ll now write a test with a valid ABN to see if we can get things to work correctly. In the tests.py file, write:

"""
This file tests the finvs application
"""
import unittest
from django.test import TestCase

#Here are some bank numbers that we can run tests against...
SHORT_BAD_ABN_NUM = 1000012
LONG_BAD_ABN_NUM = 255073345999
BAD_ABN_NUM = 255073545
GOOD_ABN_NUM = 255073345

class ValidatorsTestCase(unittest.TestCase):

    def setUp(self):
        self.value = CITY_CODE_FRAUD

    def testAbnAlgorythm(self):
        """Tests the algorythm with a known good bank number.
           This test is here to create the algorythm to be used
             in the validator implementation.  When it's right,
             cut and paste it into the validator class.

           The algorithm checks the first second and third number
            and adds them together, then iterates through every
            three numbers (total of 9) to return a value.

           If the resulting sum is an even multiple of ten
            (but not zero), the ABA routing number is good.
           """
        n=0
        bank_str = str(GOOD_ABN_NUM)
        num_length = len(bank_str)
        if (num_length ==9):
            for j in range(0,num_length,3):
                t = int(bank_str[j]) #this is the first digit
                ti = int(bank_str[j + 1]) #this is the second digit
                tii = int(bank_str[j + 2]) #this is the third digit
                n += (t * 3)+ (ti * 7)+ tii #add them up
            #check for zero and modulus of 10
            print((n != 0) & ((n % 10) == 0))  #we'll take this line out when we get it right.
            self.assertTrue((n != 0) & ((n % 10) == 0))

Now, at the application root, run:

python manage.py test finvs.ValidatorsTestCase

You should get something very similar to this:

$ python manage.py test finvs.ValidatorsTestCase
Creating test database...
Creating table auth_permission
Creating table auth_group
Creating table auth_user
Creating table auth_message
Creating table django_content_type
Creating table django_session
Creating table django_site
Installing index for auth.Permission model
Installing index for auth.Message model
True
.
----------------------------------------------------------------------
Ran 1 test in 0.000s

OK
Destroying test database...

The True that you see in the output is your print statement. Notice that the system also creates and destroys a test database. This is extremely cool functionality that can be used with Django’s Fixtures, but we’re not going to use it here for this code set. We haven’t written a line of production code, but our test passes, and if you look at the test, it is the basis for the actual implementation!

Implement It!

We’re really close, but we’ll need to make a few changes before we implement it in our “production” code. Seriously, we’re really close!

In the utils directory, create the file validation_formulas.py This is where we’ll add our ABN validation class. In my test code I created a check to ensure that the number sent in had exactly 9 digits. I did this because I didn’t want to have a try / except block, and to keep it clean. Feel free to add this if needed. The other change is that we actually need to return something — True or False in this case. The test code’s def doesn’t return anything, it just makes an assertion. To validate something, we need to insert a parameter into the method and then return a true/false. We also need to give it a name. In the validation_formulas.py file, you can now insert:

class ValidationFormulas:

    def isBankRoutingNumber(self,bankNumber):
        """Parses the bank routing number for purposes of finding a fraudulent entry.
            the algorithm check the first second and third number and adds them together,
            then iterates through every three numbers (total of 9) to return a value.

           If the resulting sum is an even multiple of ten (but not zero), the ABA
            routing number is good.

           param -- bankNumber the 9 digit bank number;

           return boolean true if number is valid, false if not. false is the default
           """
        n=0
        retbool=False
        bank_str = str(bankNumber)
        num_length = len(bank_str)
        if (num_length ==9):
            for j in range(0,num_length,3):
                t = int(bank_str[j])
                ti = int(bank_str[j + 1])
                tii = int(bank_str[j + 2])
                n += (t * 3)+ (ti * 7)+ tii
            retbool = (n != 0) & ((n % 10) == 0)
        #return the value
        return retbool

Notice the added documentation. Some of it is cut and paste from the Test, the rest is information that you’ll want to convey to anyone that is using this code in the future, because hopefully at some point the company you work for will realize just how brilliant you are and promote you to CTO, where you won’t get to write code anymore. You sure as heck don’t want to leave the poor schlep that is hired to take your place in the dark!

Also notice that I have a default return of False some applications may need a different default return, or this return may be handled in a manager class that registers the default returns in some kind of persistence layer that is more dynamic. Your mileage may vary.

Wrapping it Up

There it is. You’ve written a test first. You’ve used the implementation of the test and created a sensible implementation. If there are other ways of refining your code or cleaning things up, you can always go back and make more changes. But your’e not done. You need to write more tests to actually verify that this algorithm works, that it shows false for bad routing numbers, and that it an spot when the length of the number is incorrect without throwing any index out of bounds exceptions or the like. you can then add more test methods to your ValidatorsTestCase class. I’ve also leveraged the setUp method that is provided with the framework to generate my constants for me. The code will then look like this:

"""
This file tests the finvs application
"""
import unittest
from django.test import TestCase
from valid_lib.finvs.utils.validation_formulas import ValidationFormulas

class ValidatorsTestCase(unittest.TestCase):

    def setUp(self):
        self.SHORT_BAD_ABN_NUM = 1000012
        self.LONG_BAD_ABN_NUM = 255073345999
        self.BAD_ABN_NUM = 255073545
        self.GOOD_ABN_NUM = 255073345

    def testAbnAlgorythm(self):
        """Tests the algorythm with a known good bank number.
           This test is here to create the algorythm to be used
             in the validator implementation.  When it's right,
             cut and paste it into the validator class.

           The algorithm checks the first second and third number
            and adds them together, then iterates through every
            three numbers (total of 9) to return a value.

           If the resulting sum is an even multiple of ten
            (but not zero), the ABA routing number is good.
           """
        n=0
        bank_str = str(self.GOOD_ABN_NUM)
        num_length = len(bank_str)
        if (num_length ==9):
            for j in range(0,num_length,3):
                t = int(bank_str[j])
                ti = int(bank_str[j + 1])
                tii = int(bank_str[j + 2])
                n += (t * 3)+ (ti * 7)+ tii
            self.assertTrue((n != 0) & ((n % 10) == 0))

    def testBankRouter(self):
        """Tests the algorythm in the validator against
              known good and bad bank numbers.
           """
        bank_num = self.SHORT_BAD_ABN_NUM
        formt = ValidationFormulas()
        bool = formt.isBankRoutingNumber(bank_num)
        self.assertFalse(bool)

        bank_num = self.LONG_BAD_ABN_NUM
        formt = ValidationFormulas()
        bool = formt.isBankRoutingNumber(bank_num)
        self.assertFalse(bool)

        bank_num = self.BAD_ABN_NUM
        formt = ValidationFormulas()
        bool = formt.isBankRoutingNumber(bank_num)
        self.assertFalse(bool)

        bank_num = self.GOOD_ABN_NUM
        formt = ValidationFormulas()
        bool = formt.isBankRoutingNumber(bank_num)
        self.assertTrue(bool)

I’ve added an import for the “production” class that i’m testing (ValidationFormulas). Finally, I’ve added a new method that implements new tests against the actual methods in this class to check my work. Running the tests now reveal:

Creating test database...
Creating table auth_permission
Creating table auth_group
Creating table auth_user
Creating table auth_message
Creating table django_content_type
Creating table django_session
Creating table django_site
Installing index for auth.Permission model
Installing index for auth.Message model
..
----------------------------------------------------------------------
Ran 2 tests in 0.000s

OK
Destroying test database...

If someone in the future messes with the “production” code implementation and things get out of whack, It will break here instead of in front of the user. By combining this with a continuous-build environments, a lot of mistakes can be caught extremely fast, sometimes within seconds of a source control check in!

Enjoy.

I’ve been dancing around Pinax for a few months.  Their philosophy that “there are a few different categories of web applications and they share similar basic functionality – which shouldn’t have to be written from scratch every time something needs to get done,” is congruent with my beliefs. While writing greenfield applications is a source of delight for competent engineers, it is preferable to build on a solid foundation of “super-libraries” and add the functionality that is needed for your particular requirements.Pinax offers this and so much more.  The developers of Pinax have created a set of “standard” platforms that may be used as an extendable base for anyone’s further development. The applications that they have created are:

• sample_group_project: This project demonstrates group functionality with a barebones group?containing no extra content apps as well as two additional group types,?tribes and projects, which show different membership approaches and?content apps.

• intranet_project: This project demonstrates a closed site requiring an invitation to join and?not exposing any information publicly. It provides a top-level task tracking?system, wiki and bookmarks. It is intended to be the starting point of sites?like intranets.

• social_project: This project demonstrates a social networking site. It provides profiles,?friends, photos, blogs, tribes, wikis, tweets, bookmarks, swaps,?locations and user-to-user messaging.?In 0.5 this was called “complete_project”.

• cms_project_holidayhouse: A very simple CMS that lets you set up templates and then edit content, including images, right in the frontend of the site.?The sample media, templates and content including in the project demonstrate?a basic site for holiday house rentals.

• code_project: This project demonstrates group functionality and the tasks, wiki and topics?apps. It is intended to be the starting point for things like code project?management where each code project gets its own wiki, task tracking system?and threaded discussions.

• private_beta_project: This project demonstrates the use of a waiting list and signup codes for?sites in private beta. Otherwise it is the same as basic_project.

• cms_project_company: A very simple CMS that lets you set up templates and then edit content,?including images, right in the frontend of the site. The sample media, templates and content including in the project demonstrate?a basic company website.

• basic_project: This project comes with the bare minimum set of applications and templates?to get you started. It includes no extra tabs, only the profile and notices?tabs are included by default. From here you can add any extra functionality?and applications that you would like.

source – Pinax documentation

These projects are all quite well developed even if they are not at a “1.0″ release.  They all contain registration, email confirmation functionality, profile functionality and other basic “member” web application attributes.  I spent yesterday looking through the documentation and various on-line tutorials and deployed the sample_group_project on my Ubuntu 9.1-powered laptop.

I found that I had to jump between a couple of tutorials and once needed to completely wipe and rebuild to get it right, but the results were quite spectacular once I got it right.  Out of the box, user profiles, photo sharing, blogs, tweets, groups, Yahoo map locations, bookmarks and a “merchandise swapping and trading” application appear with no additional coding.  This application also enjoys Django’s dynamite Admin modules.

In a future post I’ll follow through and show what worked for me and endeavor to explain how easy it can be once you have everything in place.  As I develop the application, I’ll further post what I did to develop, deploy and extend the application for further use.

Is it Ready for the Enterprise?

I’m not sure if I can completely answer this question.  From an engineering/architecture point of view, it’s spot on.  For application maturity and production, that’s another matter.  Are there products using Pinax already?  What size are they?  Have they found, fixed and published bugs?

Quality Assurance in open-source projects can be in-bred amongst the developers and engineers on a project.  While they “know” the product the best and work to ensure functionality and eventual viability, they also make decisions on what needs to be fixed and “what can wait”.  In a strong enterprise environment, QA stands alone as a benevolent antagonist against development; business requirements will expose different issues and eventually make the product stronger.  If, as a technology leader, you are considering the use of Pinax, it would be prudent to add extra Quality Assurance time to the planned schedule to ensure future stability and a great customer experience.

The Restlet API is a Java framework for the REST architectural style. The Noelios Restlet Engine (NRE) is available as the reference implementation, as well as several extensions to the API and to NRE.

Why is it cool?

To Quote Jérôme Louvel, founder and lead developer of Restlet:

It’s cool because it delivers on this statement.  I love that fact that you can send a request to a Restlet engine, and it will return back this amazing variety of Representations based upon it.  The first exposure to Restlet for me came when I put forth a design for a beacon tracking system that could be triggered via HTML pages, server-side calls, log-file digestion and anything else I could think of.  The lead developer turned me on to Restlet.

I later found ways to hook it up to a JBoss-Rules system, a Low-Latency Data Store for delivering customer demographic information, and a Affiliate Network lead quality validation system.  Each application had completely different requirements except that they needed to be a service.  I decided on REST instead of  SOAP, and the “rest” is in the implementations.  It subscribes to all my basic requirements for an application:

Once you work with Restlet a bit, get an application running, manipulate what you’ve built into other things, and get real expertise around it, you’ll find, like I have, that it just works.

The Jars you need for this application.

To run this application, you’ll need the following jar files:

• com.noelios.restlet.ext.servlet_2.5.jar
• com.noelios.restlet.jar
• org.restlet.jar
• xalan-2.7.0.jar
• xrcesImpl.jar

Running Restlet from Tomcat — Configure the web.xml file.

You’ll want to run Restlet from a WAR file in most production cases, but you really don’t have to.  I like to use it because it creates homogeneous environments for my ITOPs people to work with; nice, similar stacks for maintenance purposes, so we’ll do it this way here. It is my belief that productizing applications with little or no Network Configurations is key to long-term viability. The following is the web.xml file used in the web application that we’re deploying our service through:

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
                 http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
    <display-name>first steps servlet</display-name>
    <!-- Application class name -->
    <context-param>
        <param-name>org.restlet.application</param-name>
        <param-value>
            com.dg.demo.restlet.application.DemoApplication
        </param-value>
    </context-param>

    <!-- Restlet adapter -->
    <servlet>
        <servlet-name>ServerServlet</servlet-name>
        <servlet-class>
            com.noelios.restlet.ext.servlet.ServerServlet
        </servlet-class>
    </servlet>

    <!-- Catch all requests -->
    <servlet-mapping>
        <servlet-name>ServerServlet</servlet-name>
        <url-pattern>/demo/*</url-pattern>
    </servlet-mapping>
</web-app>

Note that com.dg.demo.restlet.application.DemoApplication will be the Application class file that you will write.  ServerServlet comes with the libraries.  Note that the “servlet-mapping” that I’m using here is “/demo/*”.  This means that all URLs directed to the Restlet must have “/demo/” as their root, (i.e. http://localhost:8080/demo/…).

The Application Class

The Application Class is the “manager” for the Restlet Application. This class will find the proper resource with respect to the URL that is presented to it.  In the case of this application, we’ll be mapping incoming URLs to:

• a “System up” Resource that shows that the Restlet is actually running and mapping correctly.
• a “Mapping” Resource that will allow for a list of cities and states to be shown based upon given inputs.
• an “XML” Resource that shows mappings of Cities and States as an XML Representation.

Here is the application Class:

package com.dg.demo.restlet.application;

import com.dg.demo.restlet.resource.CityXMLResource;
import com.dg.demo.restlet.resource.MapResource;
import com.dg.demo.restlet.resource.SystemResource;
import org.restlet.Application;
import org.restlet.Context;
import org.restlet.Restlet;
import org.restlet.Router;
import org.restlet.data.MediaType;
import org.restlet.data.Request;
import org.restlet.data.Response;
import org.restlet.resource.StringRepresentation;

/**
 * The Application Root Class.  Maps all of the resources.
 */
public class DemoApplication extends Application {

    /**
     * Creates a new DemoApplication object.
     */
    public DemoApplication() {
        //empty
    }

    /**
     * Public Constructor to create an instance of DemoApplication.
     *
     * @param parentContext - the org.restlet.Context instance
     */
    public DemoApplication(Context parentContext) {
        super(parentContext);
    }

    /**
     * The Restlet instance that will call the correct resource
     * depending up on URL mapped to it.
     *
     * @return -- The resource Restlet mapped to the URL.
     */
    @Override
    public Restlet createRoot() {
        Router router = new Router(getContext());

        router.attach("/sys", SystemResource.class);
        router.attach("/{key}/maps", MapResource.class);
        router.attach("/xml", CityXMLResource.class);

        Restlet mainpage = new Restlet() {
            @Override
            public void handle(Request request, Response response) {
                StringBuilder stringBuilder = new StringBuilder();

                stringBuilder.append("<html>");
                stringBuilder.append("<head><title>Sample Application " +
                        "Servlet Page</title></head>");
                stringBuilder.append("<body bgcolor=white>");
                stringBuilder.append("<table border=\"0\">");
                stringBuilder.append("<tr>");
                stringBuilder.append("<td>");
                stringBuilder.append("<h3>available REST calls</h3>");
                stringBuilder.append("<ol><li>/sys --> returns system " +
                        "up and date string</li>");
                stringBuilder.append("<li>/all/maps --> returns a list" +
                        " of all the cities and states</li>");
                stringBuilder.append("<li>/{key}/maps --> returns a list " +
                        "of cities for a particular state (CA,IL,TX)<br/>");
                stringBuilder.append("using one of the keys from the \"all\" " +
                        "call<br/> pasted in place as the {key}.</li>");
                stringBuilder.append("<li>/xml --> POST or GET URL or web " +
                        "form elements as XML to this</li>");
                stringBuilder.append("</ol>");
                stringBuilder.append("</td>");
                stringBuilder.append("</tr>");
                stringBuilder.append("</table>");
                stringBuilder.append("</body>");
                stringBuilder.append("</html>");

                response.setEntity(new StringRepresentation(
                        stringBuilder.toString(),
                        MediaType.TEXT_HTML));
            }
        };
        router.attach("", mainpage);
        return router;
    }
}

With this Application I tried to show a “default”, “servlet-like” page returned by a Restlet created as an anonymous inner class — you can do that with all your URL requests if you like, but creating different Resource implementations is much easier to manage and write tests for. It is also very important to set the Context of the application in the Constructor (calling the superclass).  I forgot to do this and lost about an hour before I finally found it.

Once the Resources are mapped, You’re ready to rock and roll.  We’ll create a simple Model, and then get into the Resource Classes.

A Simple Model to Work From:

We need something to do with our application, so I decided to create a simple “persistence layer” that has a map of cities and states.  I could have done more and it could have been more complex, but I just wanted something that you can bang against and get an idea about how it all works.  I created an implementation class that contains a map of cities and states extending java.util.AbstractMap.  I then exposed various structures of this mapping through an interface class that the application will use to return information by implementing an Interface against it, obfuscating anything that I didn’t want to expose:

package com.dg.demo.model;

import java.util.List;
import java.util.Map;
import java.util.Set;

/**
 * A simple interface to return a map of
 * values for the demonstration.
 */
public interface MappedPersistence {

    // returns a formatted string of the cities
    // mapped to a particular state.
    String getCommonValues(String state);

    // returns a set of cities, which are
    // the map keys.
    Set<String> keys();

    // returns a map of cities <K> with states<V>
    // as the value.
    Map<String, String> proxy();

    // returns a set of states available.
    Set<String> valueSet();

    //returns a List of cities.
    List<String> mappedKeys(String s);

}

The implementation of the Interface above is MappedCityPersistence:

package com.dg.demo.model.impl;

import com.dg.demo.model.MappedPersistence;

import java.util.AbstractMap;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.HashSet;
import java.util.List;
import java.util.Map;
import java.util.Set;

/**
 * Implementation of MappedPersistence Interface.
 * Extends Abstract Map, but obfuscates the
 * mappings via the MappedPersistence Interface.
 */
public class MappedCityPersistence
        extends AbstractMap<String, String>
        implements MappedPersistence {

    private Map<String, String> proxyMap;

    public MappedCityPersistence() {
        proxyMap = new HashMap<String, String>();
        loadProxy();
    }
    // this class must be implemented...
    public Set<Entry<String, String>> entrySet() {
        return proxyMap.entrySet();
    }
    //the values for persistence.
    private void loadProxy() {
        proxyMap.put("Los Angeles", "CA");
        proxyMap.put("Santa Barbara", "CA");
        proxyMap.put("San Francisco", "CA");
        proxyMap.put("San Diego", "CA");
        proxyMap.put("Dallas", "TX");
        proxyMap.put("Houston", "TX");
        proxyMap.put("Austin", "TX");
        proxyMap.put("El Paso", "TX");
        proxyMap.put("Chicago", "IL");
        proxyMap.put("Joliet", "IL");
        proxyMap.put("Naperville", "IL");
        proxyMap.put("Oak Park", "IL");
    }

    @Override
    public String toString() {
        StringBuilder builder =
                new StringBuilder("City/State values:\n");
        for (String s : proxyMap.keySet()) {
            builder.append(s).append(" => ")
                    .append(proxyMap.get(s)).append("\n");
        }
        return builder.toString();
    }

    public String getCommonValues(String value) {
        StringBuilder builder =
                new StringBuilder("Cities located in "
                        + value + ":\n");
        for (String s : proxyMap.keySet()) {
            if (proxyMap.get(s).equals(value)) {
                builder.append(s).append("\n");
            }
        }
        return builder.toString();
    }

    public Set<String> keys() {
        return proxyMap.keySet();
    }

    public Map<String, String> proxy() {
        return this.proxyMap;
    }

    public Set<String> valueSet() {
        Set<String> quickAndDirtySet = new HashSet<String>();
        for (String s : proxyMap.values()) {
            quickAndDirtySet.add(s);
        }
        return quickAndDirtySet;
    }

    public List<String> mappedKeys(String s) {
        List<String> quickAndDirtyList = new ArrayList<String>();
        for (String key : proxyMap.keySet()) {
            if (proxyMap.get(key).equals(s)) {
                quickAndDirtyList.add(key);
            }
        }
        return quickAndDirtyList;
    }

    public static void main(String[] args) {
        MappedCityPersistence p = new MappedCityPersistence();
        System.out.println(p.getCommonValues("TX"));
    }
}

Note the extra methods that are now obfuscated by the Mapped Persistence Interface.

Building the Resources that are Mapped to URLs

The first, and easiest to implement of the Resources is the SystemResource that I created to show whether or not I got the mappings right and if the system is running or not.  It returns a basic “text” string that says the system is running and what time the JVM says it is:

SystemResource.java

package com.dg.demo.restlet.resource;
import org.restlet.Context;
import org.restlet.data.MediaType;
import org.restlet.data.Request;
import org.restlet.data.Response;
import org.restlet.resource.Representation;
import org.restlet.resource.Resource;
import org.restlet.resource.StringRepresentation;
import org.restlet.resource.Variant;

import java.util.Calendar;

/**
 * Simple String retrieval to determine whether the system is up
 * and running.  it adds a timestamp for varification that the
 * message isn't cached and allows for identification of
 * the time zone.
 */
public class SystemResource extends Resource {

    /**
     * Creates a new MapResource object.
     *
     * @param context  -- Restlet Context Instance.
     * @param request  -- Restlet Request Instance.
     * @param response -- Restlet Response Instance.
     */
    public SystemResource(Context context,
                          Request request,
                          Response response) {
        super(context, request, response);
        // Here we add the representation variants exposed
        getVariants().add(new Variant(MediaType.TEXT_PLAIN));
    }

    /**
     * Do not allow post to this resource.
     *
     * @return -- always false for this resource.
     */
    public boolean allowPost() {
        return false;
    }

    /**
     * default method for "get" from Client Application.
     *  Returns wheter or not the system is available,
     * and the current time.
     *
     * @param variant -- Available variants.
     *
     * @return -- A String representing whether or
     *            not the demo system is available, etc.
     */
    public Representation represent(Variant variant) {
        //LQSCache.getInstance();
        String message = "hello!, the Demo " +
                "Service is available." +
                " Time of request is:"
                + Calendar.getInstance()
                .getTime().toString();

        return new StringRepresentation(message,
                MediaType.TEXT_PLAIN);
    }
}

The mapping resource shows all of the cities and states mapped, and also shows the cities mapped to a particular state when that state is input within the url (i.e. http://localhost:8080/demo/all/maps — to show all cities and their city mappings, ./demo/TX/maps to get all cities mapped to Texas):

MapResource.java

package com.dg.demo.restlet.resource;

import com.dg.demo.model.MappedPersistence;
import com.dg.demo.model.impl.MappedCityPersistence;
import org.restlet.Context;
import org.restlet.data.MediaType;
import org.restlet.data.Request;
import org.restlet.data.Response;
import org.restlet.resource.Representation;
import org.restlet.resource.Resource;
import org.restlet.resource.StringRepresentation;
import org.restlet.resource.Variant;

/**
 * Utility Resource to view the various strings
 * mapped in the Persistence.
 */
public class MapResource extends Resource {

    /**
     * The map requested by the client application
     */
    String mapName;

    /**
     * Creates a new MapResource object.
     *
     * @param context  -- The restlet Context instance.
     * @param request  -- The restlet REquest instance.
     * @param response -- The restlet Response instance.
     */
    public MapResource(Context context,
                       Request request,
                       Response response) {
        super(context, request, response);
        this.mapName = (String) request.getAttributes().get("key");

        // Here we add the representation variants exposed
        getVariants().add(new Variant(MediaType.TEXT_PLAIN));
    }

    /**
     * Do not allow post to this resource.
     *
     * @return -- always false for this resource.
     */
    @Override
    public boolean allowPost() {
        return false;
    }

    /**
     * Collect the values for a particular mapping and return
     * a formatted string.  By inputting "all" into the request,
     * it returns a list of the mappings available. When this
     * service returns, substituting "all" for one of the
     * returned values will return the values for that mapping key
     *
     * @param variant -- The variant describing the return mappings.
     *
     * @return -- a formatted string with the map values as a list.
     */
    @Override
    public Representation represent(Variant variant) {
        //UDCAPICache.getInstance();
        MappedPersistence persistence = new MappedCityPersistence();

        //LQSCache.getInstance();
        String message;
        //String mapName = (String) getRequest().getAttributes().get("key");

        if (mapName.equals("all")) {
            message = persistence.toString();
        } else if (persistence.valueSet().contains(mapName)) {
            message = persistence.getCommonValues(mapName);
        } else {
            message = "NO VALUES FOUND FOR: " + mapName;
        }
        return new StringRepresentation(message, MediaType.TEXT_PLAIN);
    }
}

The XML resource returns a list of cities that are mapped to each state as an xml representation.  It allows a post or get, via the “acceptRepresentation()” (POST) and “represent()” (GET) methods.  I’ve put both of these in bold, along with other things that seemed important to me.  Each calls the same private method that creates the XML representation:

package com.dg.demo.restlet.resource;

import com.dg.demo.model.MappedPersistence;
import com.dg.demo.model.impl.MappedCityPersistence;
import org.restlet.Context;
import org.restlet.data.MediaType;
import org.restlet.data.Request;
import org.restlet.data.Response;
import org.restlet.resource.DomRepresentation;
import org.restlet.resource.Representation;
import org.restlet.resource.Resource;
import org.restlet.resource.Variant;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

import java.io.IOException;

public class CityXMLResource extends Resource {

    /**
     * @param context  -- Restlet Context Instance.
     * @param request  -- Restlet Request Instance.
     * @param response -- Restlet Response Instance.
     */
    public CityXMLResource(Context context,
                           Request request,
                           Response response) {
        super(context, request, response);
        getVariants().add(
                new Variant(MediaType.TEXT_PLAIN));
        getVariants().add(
                new Variant(MediaType.APPLICATION_XML));
        //handle(request,response);
    }

    /**
     * Flag to allow POST via web form.
     *
     * @return true if POST is allowed, false if not.
     */
    public boolean allowPost() {
        return true;
    }

    /**
     * Represent the requested object in the requested format.
     *
     * @param variant -- the requested variant or default.
     *
     * @return an XML representation or an error string.
     */
    public Representation represent(Variant variant) {
        DomRepresentation representation = null;
        try {
            representation = getFraudXMLRepresentation();
        } catch (IOException e) {
            e.printStackTrace();
            getResponse().setEntity("ERROR " + e.getMessage(),
                    MediaType.TEXT_PLAIN);
        }
        return representation;
    }

    /**
     * Handle a POST Http request.
     *
     * @param entity -- the declared entity
     */
    public void acceptRepresentation(Representation entity) {
        System.out.println("USING POST");

        try {
            if (entity.getMediaType()
                    .equals(MediaType.APPLICATION_WWW_FORM, true)) {
                DomRepresentation representation =
                        getFraudXMLRepresentation();
                // Returns the XML representation of this document.
                getResponse().setEntity(representation);
            }
        } catch (IOException e) {
            e.printStackTrace();
            getResponse().setEntity("ERROR " + e.getMessage(),
                    MediaType.TEXT_PLAIN);
        }
    }

    /**
     * Creates the XML that will be returned to the requesting client.
     *
     * @return - The formatted XML Document
     */
    private DomRepresentation getFraudXMLRepresentation() throws IOException {

        DomRepresentation representation =
                new DomRepresentation(MediaType.TEXT_XML);

        MappedPersistence persistence =
                new MappedCityPersistence();

        // Generate a DOM document representing the list of frauds generated..
        Document d = representation.getDocument();

        //The Root Element, with it's corresponding attribute for the total score.
        Element root = d.createElement("citystatemappings");
        root.setAttribute("numberofstates",
                String.valueOf(persistence.valueSet().size()));
        d.appendChild(root);

        //If there are no frauds, then we skip this and just return the root.
        for (String state : persistence.valueSet()) {
            Element stateElement = d.createElement("state");
            stateElement.setAttribute("name", state);

            for (String city : persistence.mappedKeys(state)) {
                Element cityElement = d.createElement("city");
                cityElement.appendChild(d.createTextNode(city));

                stateElement.appendChild(cityElement);
            }
            //tie the frauds to the root.
            root.appendChild(stateElement);
        }
        d.normalizeDocument();
        return representation;
    }
}

Compile these classes into your web application with your lib jars, and make sure the “web.xml” file is configured as shown earlier in this text.  Create a .war file or run from your IDE.  You should be able to use the URLS that have been configured into the DemoApplication class file to view data in different formats.  If your application is configured to run on http://localhost:8080…

• http://localhost:8080/demo — returns the Representation defined in the “anonymous inner class” of the DemoApplication.

• http://localhost:8080/demo/sys   — returns the “system up” resource and it’s information, something like:

hello!, the Demo Service is available. Time of request is:Tue Sep 23 17:53:42 PDT 2008

• http://localhost:8080/demo/all/maps — returns a list of all the states mapped into the persistence layer:

City/State values:
Austin => TX
Chicago => IL
El Paso => TX
Los Angeles => CA
Naperville => IL
Houston => TX
San Diego => CA
Santa Barbara => CA
Dallas => TX
Oak Park => IL
Joliet => IL
San Francisco => CA

• http://localhost:8080/TX/maps — returns a list of cities mapped to TX:

Cities located in TX:
Austin
El Paso
Houston
Dallas

http://localhost:8080/demo/xml — Finally, you want to get an xml representation of all this (view source):

<?xml version="1.0" encoding="UTF-8"?>
<citystatemappings numberofstates="3">
    <state name="CA">
        <city>Los Angeles</city>
        <city>San Diego</city>
        <city>Santa Barbara</city>
        <city>San Francisco</city>
    </state>
    <state name="TX">
        <city>Austin</city>
        <city>El Paso</city>
        <city>Houston</city>
        <city>Dallas</city>
    </state>
    <state name="IL">
        <city>Chicago</city>
        <city>Naperville</city>
        <city>Oak Park</city>
        <city>Joliet</city>
    </state>
</citystatemappings>

From here you’re on your own. You should be able to extrapolate the tasks that you might need for your projects; there are other representations that you can work with, including some very interesting uses of the java.util.nio libraries that allow for blazing fast file retrieval and delivery. You can even send Java Objects around. It’s worth looking through the Restlet API Docs at this point.

As I migrated from basic HTML to JSPs and finally complex Server-Side Java, I became less and less respectful of client-side languages, and most of my colleagues were pretty much in lockstep with me. While working in the view layer, adding JavaScript was a tedious necessity, and most programmers I worked with built well-made, but structural, scripts to handle the needs of the page.  They knew what they wanted it to accomplish and they just wrote it to “do that thing”.  It “wasn’t worth” digging deep into it, because it is just “throw away” code that the view used; not really worthy of Server-Side Programmers’ attention.

A new interest in JavaScript came onto my radar screen when, as a Principal Engineer at E*******k, I was presented with a problem that involved portal pages and their downloaded page weights. there were also many problems with any changes to the page breaking the very large (600 lines at one point) JavaScript that controlled much of the view layer. 

So I looked into it.

What I found was a gigantic script that controlled all sorts of things, looping through the Document Object Model, backwards and forwards; doing some innerHTML calls, and lots of “if this is happening– do this, disable this, and if anything ends in this, make it appear” kind of things.  It worked quite well, but nobody would dare change it, make changes to the basic UI or even allow it to be touched, because it was so complex and undocumented.  Resources were unavailble to keep up with it.

Being a Principal Engineer gave me the chance to take time and solve problems instead of doing hard core, heads-down coding every day.  I decided to take some time and crack this nut.  I started digging into a few articles about Object Oriented JavaScript and did a few exercises to really try and understand how it could work for me.  I discovered that with the page I was looking at, Tabs controlled a lot about what happened on it.  Depending upon which tab was clicked, different values would appear in the box underneath it — form fields would change, be disabled, etc.

Each Tab triggered a different “Mode” on the page.  So the Page has Modes… Well that would make a nice Object. The Mode has various attributes?  Now we’re getting somewhere!  Eventually this 600 line behemoth, tipping the scales at 86K, become a 64 line midget that, condensed, popped through the pipe at 16k.  Nice win.

What I’m demonstrating here isn’t this particular code. It is the basis for it, and not only that, I think its better than what I first wrote.  I’ve tested it on Mac Safari/Firefox — it should work on IE but I wasn’t able to test, so you might need to tweak.  So much for the disclaimer.

Creating a JavaScript Model to Manipulate Tabs on a Page

code reference - version_1_tabs.zip

Let’s start with the Initial Requirement.  Let’s say you have a requirement that orders 5 tabs that change back and forth with the least amount of scripting possible, and at some later date you might have to do more with it, such as add more tabs or add functionality to each tab.  To make it more complex, the Tab has images as background, so you need to manipulate these as well.

All the images will be manipulated through CSS, so we’re not going to clutter up our beautiful HTML markup with it.  Further, we’re going to not bother with “document.write“, because it can get kinda cluttered in the JavaScript code, I’m still not sure about performance hits using it, and you don’t get any Search Engine love with that, either.  Here below is the original HTML mark-up for the initial requirement (tabpage.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Object Oriented Tabs</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @import url( "tabMode.css" );
    </style>

</head>
<body>
<table class="tabToggle" cellspacing="0">
    <tr>
        <td><span class="selectstring">Select Category</span></td>
        <td id="dramaTab">
            <div>
               <a class="tab_0" href="#"
                           onclick="changeMode(DRAMA_MODE);return false;">
                <span>Drama</span></a></div>
        </td>
        <td id="comedyTab">
            <div>
               <a class="tab_1" href="#"
                           onclick="changeMode(COMEDY_MODE);return false;">
                <span>Comedy</span></a></div>
        </td>
        <td id="thrillerTab">
            <div>
               <a class="tab_2" href="#"
                           onclick="changeMode(THRILLER_MODE);return false;">
                <span>Thriller</span></a></div>
        </td>
        <td id="mysteryTab">
            <div>
               <a class="tab_3" href="#"
                           onclick="changeMode(MYSTERY_MODE);return false;">
                <span>Mystery</span></a></div>
        </td>
        <td id="fantasyTab">
            <div>
               <a class="tab_4" href="#"
                           onclick="changeMode(FANTASY_MODE);return false;">
                <span>Fantasy</span></a></div>
        </td>
    </tr>
</table>
    <script type="text/javascript" src="tabtoggle.js"></script>
</body>
</html>

You will notice that for each href, there is an “onclick” value that is mapped to a const value (shown in the JavaScript file) in JavaScript.  For those of you that only code in IE, which doesn’t recognize const, it is exactly what you think.  an immutable value that is set and may not be changed.  Why is it cool?  because the browser maps it into memory, and it becomes a reference instead of a variable — faster, like a static final value in Java.  The other cool thing about it is that you can put any strings behind it, and if you’ve written your code properly, you only make a change in one place and can easily adapt your code to various conditions.  Easy to change, faster, and you’re not doing cut and paste everywhere.  Here is the JavaScript that manipulates the page (tabtoggle.js), with the constant values:

/*------------- CONSTANTS -----------------------*/
//Mode names and values
const DRAMA_MODE = "drama";
const COMEDY_MODE = "comedy";
const THRILLER_MODE = "thriller";
const MYSTERY_MODE = "mystery";
const FANTASY_MODE = "fantasy";
//initial modes
const INIT_MODE = DRAMA_MODE;
// The array of Tabs -- establishes the order
// and values used. Pretty much the whole enchilada right here.
var TAB_ARRAY = [DRAMA_MODE,COMEDY_MODE,THRILLER_MODE,MYSTERY_MODE, FANTASY_MODE];

/*-------------MODEL--------------------------*/
/* This section could be separated from the
above as a "standard" library and used against
any set of tabs or arrays with an identical
structure.*/

//Local constants specific to the model.
const TAB_ID_SUFFIX = "Tab";
const EMPTY_STR = "";
// private Tab class values for CSS
const LAST_TAB_CLASS_VALUE = "last ";
const NON_SLCT_TAB_CLASS_VALUE = "engine";
const SLCT_TAB_CLASS_VALUE = " selected";

/**
 * The Class defining the Mode of the Object
 * @param name - The name of the Tab to that
 * will receive the selected state.
 */
function TabMode(name) {
    //public accessors
    this.name = tabModes(name);
    this.modeId = name + TAB_ID_SUFFIX;

    //change all the tabs, privately.
    function tabModes(name) {
        for (var i = 0; i < TAB_ARRAY.length; i++) {
            var tid = TAB_ARRAY[i];
            var tab = new Tab(tid, (name == tid), (i == (TAB_ARRAY.length - 1)));
            document.getElementById(tab.tabId).className = tab.classVal;
        }
        return name;
    }
}

/**
 * A Tab object with needed attributes.
 * @param id -- mapped to the "id" attribute of the HTML.
 * @param selected -- boolean as to whether or not it
 * is in a "selected" state.
 * @param isLast -- boolean as to whether or not it
 * is the last tab of the series.
 */
function Tab(id, selected, isLast) {
    //accessors
    this.tabId = id + TAB_ID_SUFFIX;
    this.classVal = selectCheck();

    function selectCheck() {
        var cval = NON_SLCT_TAB_CLASS_VALUE;
        if (selected) {
            cval += SLCT_TAB_CLASS_VALUE;
        }
        if (isLast) {
            cval = LAST_TAB_CLASS_VALUE + cval;
        }
        return cval;
    }
}

/*------------- page-accessible methods -----------------------*/

//initialize mode object
var mode;

/**
 * "Public" function to change the name of the tab.
 * Accepts any tabname value mapped to the above constants.
 * @param tabname - a legal value within the TAB_ARRAY.
 */
function changeMode(tabname) {
    mode = new TabMode(tabname);
}

/**
 * Load up the initial mode.  Initializes what is
 * Shown on the page first.
 */
changeMode(INIT_MODE);

Ok, it’s more than 64 lines.  Production versions of this might have the comments stripped and some compression. It currently weighs in at 4k. The constants at the top of the file are:

//Mode names and values
const DRAMA_MODE = "drama";
const COMEDY_MODE = "comedy";
const THRILLER_MODE = "thriller";
const MYSTERY_MODE = "mystery";
const FANTASY_MODE = "fantasy";

These are mapped to the tabs, but the tabs all have a “Tab” string-value appended to it in the “id” attribute.  We’ll use this to manipulate the view elements (usually in CSS) by the “getElementByID” method.  There are two objects that are created in the JavaScript file; one is Tab, and the other is TabMode. 

What I’m doing here — the basics of declaring Objects in JavaScript

To declare an Object in JavaScript, create a function, and for best practices-sake, use an initial capital letter, similar to a Java Class Declaration.  Since we’re not dealing with a pure object-oriented language, we’ll need to declare our Object as a function:

function Tab(id, selected, isLast) {

and

function TabMode(name) {

There’s no constructor method in the class.  The function declaration contains the attributes needed to construct the Object.  Tab take three attributes — the id, a boolean for “selected”, and a boolean for “isLast” to delinieate whether or not it is the last Tab in the sequence.  You can use an Object quite easily, so let’s create some basic FooObject and demonstrate a few things.  Here’s an Object assigned to a variable:

var foo = new FooObject("funky","fruity");

This object instance can now be accessed by using foo.  What are “funky” and “fruity”?  How do we associate these to FooObject?

They have been used in the “constructor” to the Object.  The inner methods of the Object will use this information to populate accessors and can even be injected into private functions.  Let’s take a look at the actual FooObject declaration, and create some basic accessors for it:

function FooObject(smell, taste){
          this.smell = smell;
          this.taste = taste;
}

So, using the foo variable from the earlier listing, foo.smell would return “funky”, and foo.taste returns “fruity”.  Go ahead and try it, it’s just that easy. 

The Tab Object

Now back to the tabtoggle.js code. Besides accessors, I added some private functions to return some values.  The reason I made them private as I didn’t want some hackmeister coming in behind me and using these functions outside of the Object, creeping everything out on my page.  Here is the “Tab” Object code snip for discussion purposes:

function Tab(id, selected, isLast) {
    //accessors
    this.tabId = id + TAB_ID_SUFFIX;
    this.classVal = selectCheck();

    function selectCheck() {
        var cval = NON_SLCT_TAB_CLASS_VALUE;
        if (selected) {
            cval += SLCT_TAB_CLASS_VALUE;
        }
        if (isLast) {
            cval = LAST_TAB_CLASS_VALUE + cval;
        }
        return cval;
    }
}

There are two accessors in the Tab Object, created from the three parameters and some of the “constants” that were declared outside of the class and available to the entire Document. The first accessor is the “id” used for the tab, and the second is used to build a CSS class value to alter the corresponding Tab’s view.  

This second accessor, “classVal”, is interesting because it is mapped to an inner function that determines its actual value.  This function could be mapped externally to the Tab, and I’ve done this before, but after some deliberation, I decided to keep it private because I didn’t want to make it available outside of the Object.

The TabMode Object

The TabMode Object defines the Mode of the each tab.  It takes a “name” parameter that iterates through the TAB_ARRAY (Ordered Array of all Tabs) and creates Tab Objects and sets their class value through the document.getElementById() method.  I “cheated” a little here by calling this method while I set the Tab instances-  mainly to ensure that the iteration was complete (it would throw errors at this point if there is a failure).  I highlighted in red the real work that’s getting done.

/**
 * The Class defining the Mode of he Object
 * @param name - The name of the Tab to that
 * will receive the selected state.
 */
function TabMode(name) {
    //public accessors
    this.name = tabModes(name);
    this.modeId = name + TAB_ID_SUFFIX;

    //change all the tabs, privately.
    function tabModes(name) {
        for (var i = 0; i < TAB_ARRAY.length; i++) {
            var tid = TAB_ARRAY[i];
            var tab = new Tab(tid, (name == tid), (i == (TAB_ARRAY.length - 1)));
            document.getElementById(tab.tabId).className = tab.classVal;
        }
        return name;
    }
}

Everything will work now. Go ahead and open up the HTML page and click on the tabs.  We have a very nice and snappy set of tabs with only a little bit of code.  We can change the code in different ways to make it more useful.  In the next two sections, I’ll demonstrate how to use the basic JavaScript file that we’ve already defined against a completely different set of tabs with minimal code change, and then in the last section I’ll add more functionality to show/hide different information boxes when a particular tab is clicked.

Using the Same Basic Code to Populate Different Tabbed Pages

code reference – version_2_tabs.zip

We’re now going to take the code that we just wrote, create another HTML page with the same functionality but completely different tabs using the same structure, only changing the “name” constants and the “array” that they are located in.

The only big change is to separate “Page Attributes” that define a particular page for the “Model” part of the JavaScript Code.  There is no real dependency between them, and as long as there are “names” and an “array” to traverse, the tabs will pretty much work as designed against anything you want.  This allows for any number of different tabs or tab names to be used — you just attach a new file with the constants you want to use for the page, and plug in the same JavaScript Toggle Model.  For this particular exercise, we created a file that only holds the constants that we want to use for the first “tabpage1.html”.

const DRAMA_MODE = "drama";
const COMEDY_MODE = "comedy";
const THRILLER_MODE = "thriller";
const MYSTERY_MODE = "mystery";
const FANTASY_MODE = "fantasy";
//initial modes
const INIT_MODE = DRAMA_MODE;
// The array of Tabs -- establishes the order
// and values used. Pretty much the whole enchilada right here.
var TAB_ARRAY = [DRAMA_MODE,COMEDY_MODE,THRILLER_MODE,
                 MYSTERY_MODE, FANTASY_MODE];

// private Tab class values for CSS
const LAST_TAB_CLASS_VALUE = "last ";
const NON_SLCT_TAB_CLASS_VALUE = "engine";
const SLCT_TAB_CLASS_VALUE = " selected";

No structural code changes were made. I just “cut” the script from the first section in two, putting the constants that are mutable away from all of the code that doesn’t need to change.  If we want to create a different page, we’ll be able to use the exact same “model” code and only change the code in the listing above to suit our needs.  The Model part of the code is still located in the “tabtoggle.js” file. 

Since there’s no change, I’ve truncated the listing below only to provide clarity as to where the “split” occurs.  refer to the version_2_tabs.zip for more granularity.

/*-------------MODEL--------------------------*/

//Local constants specific to the model.
const TAB_ID_SUFFIX = "Tab";
const EMPTY_STR = "";

function TabMode(name) {
  ... (no changes to code -- see details in zipped download)
}

function Tab(id, selected, isLast) {

... (no changes to code -- see details in zipped download)}

/*-------- page-accessible methods -----------*/

//initialize mode object
var mode;

function changeMode(tabname) {
    mode = new TabMode(tabname);
}

changeMode(INIT_MODE);

Again, no changes. We’ve left the “model” part of the code at the bottom of the page to load just before the </body> tag, and the “Page Attributes” are coded to load in the <head> of the document.  Other than that, the HTML is unchanged in the “tabpage1.html”.  The tabs will work and fire identically as they did before.

But now, we get to do something cool.  We create a new HTML file, “tabpage2.html”, and put completely different tab names in them.  Not only are they different names, they are even more of them!  The underlying model code will handle them perfectly, as all it cares about is the array mapped to the constant names.  The array provides the order and a looping mechanism, and the constants provide a way to change things without making changes all over the place.

The new HTML code contains different cartoon shows or characters mapped to the same html pattern as “tabpage1.html”.  Here is the new table with the tabs.  Changes are in red:

</head>
<body>
<table class="tabToggle" cellspacing="0">
    <tr>
        <td><span class="selectstring">Select Category</span></td>
        <td id="bullwinkleTab">
            <div><a class="tab_0" href="#" onclick="changeMode(BULLWINKLE_MODE);return false;">
                <span>Bullwinkle</span></a></div>
        </td>
        <td id="tomandjerryTab">
            <div><a class="tab_1" href="#" onclick="changeMode(TOM_AND_JERRY_MODE);return false;">
                <span>Tom and Jerry</span></a></div>
        </td>
        <td id="simpsonsTab">
            <div><a class="tab_2" href="#" onclick="changeMode(SIMPSONS_MODE);return false;">
                <span>Simpsons</span></a></div>
        </td>
        <td id="futuramaTab">
            <div><a class="tab_3" href="#" onclick="changeMode(FUTURAMA_MODE);return false;">
                <span>Futurama</span></a></div>
        </td>
        <td id="bugsbunnyTab">
            <div><a class="tab_4" href="#" onclick="changeMode(BUGSBUNNY_MODE);return false;">
                <span>Bugs Bunny</span></a></div>
        </td>
        <td id="mickeymouseTab">
            <div><a class="tab_5" href="#" onclick="changeMode(MICKEYMOUSE_MODE);return false;">
                <span>Mickey Mouse</span></a></div>
        </td>
        <td id="barneybearTab">
            <div><a class="tab_6" href="#" onclick="changeMode(BARNEYBEAR_MODE);return false;">
                <span>Barney Bear</span></a></div>
        </td>
        <td id="ScoobyDooTab">
            <div><a class="tab_7" href="#" onclick="changeMode(SCOOBYDOO_MODE);return false;">
                <span>Scooby Doo</span></a></div>
        </td>
    </tr>
</table>
<script type="text/javascript" src="tabtoggle.js"></script>
</body>
</html>

Note the script reference at the bottom of the page.  It only contains the “Model” code.  The new “Page Attributes” are shown below, contained in the file tabpage2.js.  New code is in red.  Although there is some “cut and paste” code in here, it’s because we might want to change the class names of the tabs to vary the view, and this would be the best place to keep it.:

/*
 * Copyright (c) 2008, Your Corporation. All Rights Reserved.
 */
/*------------- CONSTANTS -----------------------*/
//Mode names and values
const BULLWINKLE_MODE = "bullwinkle";
const TOM_AND_JERRY_MODE = "tomandjerry";
const SIMPSONS_MODE = "simpsons";
const FUTURAMA_MODE = "futurama";
const BUGSBUNNY_MODE = "bugsbunny";
const MICKEYMOUSE_MODE = "mickeymouse";
const BARNEYBEAR_MODE = "barneybear";
const SCOOBYDOO_MODE = "ScoobyDoo";
//initial modes
const INIT_MODE = BULLWINKLE_MODE;
// The array of Tabs -- establishes the order
// and values used. Pretty much the whole enchilada right here.
var TAB_ARRAY = [BULLWINKLE_MODE,
    TOM_AND_JERRY_MODE,SIMPSONS_MODE,FUTURAMA_MODE,
    BUGSBUNNY_MODE,MICKEYMOUSE_MODE,BARNEYBEAR_MODE,
    SCOOBYDOO_MODE];

// private Tab class values for CSS
const LAST_TAB_CLASS_VALUE = "last ";
const NON_SLCT_TAB_CLASS_VALUE = "engine";
const SLCT_TAB_CLASS_VALUE = " selected";

When you load the the “tabpage2.html” in the browser, the new tabs will appear, with new names, more of them, but with exactly the same functionality. The underlying model works just as it did with the tabs on the other page, with only the inputs changed. You could put the inputs on the page or load it into a file that is picked up by the page as we did here  I believe either is fine – your decision where to put them is based upon your requirements and judgement.  No wrong answers!

Adding A Content Box Below the Tabs

code reference — version_3_tabs.zip

Finally, we get a requirement to load a different but corresponding content box to the tabs we have created.  Let’s also say that our requirement states that only some of the tabs will have variable content boxes, other functionality may be required elsewhere.  We want to add a content show-hide feature to the boxes, yet make sure that any tabbed page using our code doesn’t throw errors, as we just hate that.   The style attribute we will chose is “visiblity“, and we’ll use the “none” and “inline” values — since “none” will take the object out of formatting and not affect the flow of the page. “inline” will put the box in the flow. To change the style attribute trigger, we’ll use:

document.getElementById("foo").style.display = ...

It is necessary to loop through all of the tabs whenever the page mode is changed to make sure that the right one is “turned on” and the others are invisible.  Arriving at this functionality is actually quite easy.  We’ll just add this to the existing private function in the TabMode Object.

A new HTML page is similar to the others we’ve created, with the changes added in the listing below (changes in red, surrounded by existing code for reference).  The “outer” div for each box is what controls the visibility, the “inner” div with the class attribute “underbox” is for decorating the view, and has the class value mapped into the css file to control it.  Each “id” attribute in the “outer” box maps to a tab “name” attribute, the “Box” is the suffix for this id and is used within the JavaScript code, e.g. dramaBox, comedyBox, etc.

       <td id="fantasyTab">
            <div><a class="tab_4" href="#" onclick="changeMode(FANTASY_MODE);return false;">
                <span>Fantasy</span></a></div>
        </td>
    </tr>
</table>
<!-- Add a Box! -->
<div id="dramaBox">
    <div class="underbox">
        <h2>Drama</h2>
        Lorem ipsum dolor sit amet,...
        zzril delenit augue duis dolore te feugait
        nulla facilisi.
    </div>
</div>
<div id="comedyBox">
    <div class="underbox">
        <h2>Comedy</h2>
        Darkness washed over the Dude, darker than a steer's
        tukus on a moonless night.
    </div>
</div>
<div id="thrillerBox">
    <div class="underbox">
        <h2>Thriller</h2>
        ... So I made a decision, and it
        was... wrong. It was a bad call, Ripley. It was a bad call..
    </div>
</div>
<div id="mysteryBox">
    <div class="underbox">
        <h2>Mystery</h2>
        Some text here
    </div>
</div>
<div id="fantasyBox">
    <div class="underbox">
        <h2>Fantasy</h2>
        Some text here...
    </div>
</div>
<script type="text/javascript" src="tabtoggle.js"></script>
</body>
</html>

Here is the code for the enhanced tabs in the file tabtoggle.js. The only change needed is to add a few constants and a small conditional routine in the TabMode Object.  It will actually detect if the boxes are present to toggle their visibility, otherwise this functionality is ignored. The changed code is in red.

const BOX_ID_SUFFIX = "Box";
//Display box values
const YES_DISPLAY = "inline";
const NO_DISPLAY = "none";

/**
 * The Class defining the Mode of he Object. Alters the tab Selected,
 * and also changes which box should be displayed under it, IF a box exists.
 * @param name - The name of the Tab to that
 * will receive the selected state.
 */
function TabMode(name) {
    //public accessors
    this.name = tabModes(name);
    this.modeId = name + TAB_ID_SUFFIX;

    //change all the tabs, privately.
    function tabModes(name) {
        for (var i = 0; i < TAB_ARRAY.length; i++) {
            var tid = TAB_ARRAY[i];
            var tab = new Tab(tid, (name == tid), (i == (TAB_ARRAY.length - 1)));
            document.getElementById(tab.tabId).className = tab.classVal;
        }
        //This changes out the boxes, if they exist...
        if (document.getElementById(name + BOX_ID_SUFFIX) != null) {
            for (var i = 0; i < TAB_ARRAY.length; i++) {
                var tid = TAB_ARRAY[i];
                if (tid == name) {
      document.getElementById(tid+ BOX_ID_SUFFIX).style.display = YES_DISPLAY;
                } else {
      document.getElementById(tid+ BOX_ID_SUFFIX).style.display = NO_DISPLAY;
                }
            }
        }
        return name;
    }
}

The code above will now allow the choosing of each tab and the display of different boxes below. Not only that, but when applied to our second, “cartoon tabs”, page, no errors will be thrown since there is a “check” as to whether the boxes exist first.  If you want to add boxes to the other page, you just map them to their tab names and use the “Box” instead of “Tab” suffix!

Conclusions:

Using the JavaScript Prototype element can extend the above code in even more directions.  Want to have a form connected to each tab?  Do they have different elements?  You can enable and disable them by extending the above classes to do even more.  A “TabbedForm” class could contain the form elements and keep track of what to enable and disable, different submission urls or even more.  You don’t have to alter the base class, you just extend it using the Prototype Element.

One of the truly wonderful things about JavaScript is the fact that there are many ways to the same result.  What I find interesting is how people can come up with ideas to make their scripts smaller, more re-usable and extendable.  Creating Objects in JavaScript allow for power that many mark-up engineers don’t know about to this day;  a lot of server-side programmers, myself included, begin to take this client side language seriously and realize the power, and fun, of writing this type of code.

Now you have a new method “changeStyleDisplay(‘value’)” available to you on the Element object only. It can be used thus:

Which changes the “display” attribute value to “none”. This Doc containing HTML file with JavaScript prototype implementation, contains a test that I created to toggle different visibility modes with two different method extensions of the Element Object. Feel free to copy, hack, change, use, and enjoy.

(note that is probably doesn’t work in IE — Will be testing to find out if newer versions will work.  As Usual, MS just goes their own way….)

I recently had an issue where I wanted to create a select box populated from an array of continuous years. I wanted to use thecollection_select method so it would have a minimal “code footprint” and play nice with the form that I had built. The application that I’m working on is in Rails2 and I didn’t want to divert heavily or make to many changes, and after some fiddling I came up with a nice solution: In the environment.rb file I created an Array constant to contain the year range that I wanted to use:

This code is a shortcut to create an array of values between 1920 and 2008 (88 years). It creates a new array with a size of 88, and then uses the i value to populate each year incrementally. I was pleased to find a method like this!

The form declaration contained the object that I wanted to populate with the form values using the Rails2 syntax:

*note the newer Rails2 syntax for the form…

I will populate my select box with an Array of Objects. I need to create my Object first to populate my Labels and Values, and I used an “old trick” from Struts by creating a Ruby LabelValue object that mimics Struts LabelValueBean utility POJO. The object has a label and value accessor, which works extremely well for any set of arrays since any kind of mapping scheme would consume duplicate keys and often select boxes, radio buttons, etc may need some duplication. Here is my label_value.rb class, located in my model directory:

Now that I have a model to work with and an Array Constant to use, I created the “helper” to use with the form tag in the application_helper.rb file, so I might use it throughout the application’s forms. There are two methods, one public, and one private. Note the “Select year” prompt:

Finally, we need to call the _helper method from the form:

The resulting code renders a select box:

The nice thing is reusability of the LabelValue class, the YEAR Constant and the collection_select itelf. Everything can be accessed as it is needed, whether you want to use the Constant Array for something else, the LabelValue object for a different array or tuple, or the actual rendered select box in different views.

UPDATE, 1/15:

See the comments below for a nice alternative and discussion!

Step forward to today. Struts 1 is ubiquitous; nearly every Java Web Application Programmer has had some experience with Struts, building upon the base and working to create other Frameworks as well extend Struts1 into Struts2. Lately, I’ve been working with projects that consume a great deal of XML services and need to be available to many different viewing platforms in a coherent manner. Not only that, but there is a tremendous amount of conditional logic that must be matched depending upon input. Cocoon handles these things very well — it’s dispatch system allows for various URL matching which gives it’s configurations a very similar feel to a lightweight Business Rule engine. I decided to give it another shot and go through the tutorials and documentation — trying to evaluate whether or not it could fit into the way that my company does business.

I proceeded to find tutorials on the Cocoon Site, DeveloperWorks and other places. What I found was at best adequate, but at worst quite disappointing. The Cocoon Community insists that you download their source code and use their scripts tobuild it. Further, they don’t publish ANYWHERE what or how a file structure should be, and the various examples I found showed them to have no “best practices” within the community, let alone publish what these are. Further, all of the examples I found used Eclipse as the IDE and gave no information as to what to do in case you happen to use another favorite platform, say, IntelliJ. The best example I found used Maven/Jetty/Eclipse. It incorporated Spring and the latest build of Cocoon extremely well. Unfortunately if you’re not a Maven/Jetty/Eclipse house, it leaves no idea as to how to build your own system (YES, I DID use mvn idea:idea, still didn’t get what I wanted, in fact the mvn war:exploded didn’t help either).

I looked around for examples of how to build Cocoon from a root folder. I want to build it from the ground up, placing files, etc where they should be “in my opinion” so that I can integrate them with the way we do things around here (we still use Ant, for instance, and have our own way of creating projects for Idea that works for integrating builds with our platforms). Nothing exists, nowhere. The Cocoon mailing list goes so far as to say that they specifically WONT do this because they want people to get a deep dive into the entire project and all the available blocks. You can build a basic app from source at the Cocoon Site, but the war tasks to me were inadequate and I didn’t see the cool Spring Integration that the one really useful example offered. 10 days go by and still I’ve really never had a good debugger going in my IntelliJ with Cocoon, and the real, under-the-hood stuff that I seek just isn’t forthcoming.

I’ve even seen talk on the Cocoon Mailing lists that they plan to abandon Java and build the whole thing in Perl. Super, although I don’t know if this is real or just a few persons blowing off some steam.

Contrast this with Struts and Struts2. There are very clear road maps for both. Although I don’t agree with a lot of the integrations (especially JSF!!), Struts is, and continues to be, very easy to pick up, understand, extend and integrate with existing processes, software and builds. Although the Struts2 tutorials at this point are limited, and the number of books on Struts2 can be counted by a five-year-old, everything looks to be good going forward. I admire the WebWork integration and the way that the configurations have been cleaned up. I will definitely keep it in my Toolkit.

What do I think is better? Well, for it’s ability to match URLS, pass parameters, allow for non-reboot redeployments and presentation-agnostic capabilities, I would really feel that Cocoon, in a purist sense, is a superior platform. I can easily see complex integrations with A/B testing, Rule Engines and various view platforms working much easier in the Cocoon environment over Struts. I also believe that Cocoon offers some superior capabilities in the consumption of Web Services and other XML sources. I believe that REST is a better proposition with Cocoon. But I can’t recommend it for use in an ongoing Enterprise Environment because:

• There is too little documentation, and this documentation shrinks with newer releases.
• The Cocoon community is too fragmented and insulated.
• The Documentation is all over the place.
• There are no published “Best Practices”.
• It doesn’t easily integrate with disparate IDEs
• Nobody seems to want to share information to outsiders.

The Struts Community seems to be the opposite; Books are in several languages, plugins for the framework ship with most IDEs out of the box, and the community shares lovingly with anyone that wants to learn it. There is great documentation and many, many different answers for the same questions, allowing development organizations to pick and choose what’s right for them.

Cocoon is insular. There are many different plug-in “blocks” with solutions for problems, but the basics just aren’t covered well, and the “you must do it this way with these tools” attitude doesn’t play nice with organizations looking at their framework for long-term use. Resourcing is a big deal, and when I saw that my book had been published in India, I knew that Struts had won hands down over Cocoon, which really is, in my opinion, a better, but less organization-friendly, platform.

If I can finally figure out how to build Cocoon with Spring from a basic root folder without all the baggage that the Cocoon Developers’ Group insists on everyone using, I’ll share it because it might be worthwhile. If you don’t see it here after awhile, you know that I’ve moved on and found further investigation a waste of my time.

My requirements are normally simple, and rarely have a strong need to be COMPLETELY perfect; i.e. the actual calls to and from the timer can cause a slight time loss in the actual application, but frankly I’m willing to put up with this in most circumstances. The “TesterTimer” class featured below is pretty damned efficient, especially if you never call the “elapsed(id)” method, since the start and stop happen pretty much outside the application being tested. Here is the fully commented code with a demonstration “main” class:

import java.util.Hashtable;

/**
* TestTimer Class, with methods to calculate the time to run
* particular tests. Multiple events can be mapped at once
* to a hashtable. Each event is retrieved by the id passed in
* to each available static method.
*
* @author dan@gurovich.com
* @version 1.0
* @since Sep 6, 2007
*/
public class TesterTimer {

//~ Static fields/initializers ***********************************

/**
* Hashtable holding various timer events, mapped to ids.
*/
private static final Hashtable startTime = new Hashtable()

//~ Methods ******************************************************

/**
* Stops the Timer, and removes the time.
* Returns the elapsed time.
*
* @param id — The id of the timer.
*
* @return long value of the elapsed time in milliseconds.
*/
public static long elapsed(String id) {|
return System.currentTimeMillis()
- ((Long) startTime.get(id)).longValue();
}
/**
* Returns a formatted Elapsed time string.
*
* @param time — long value passed in,
* presumed to be milliseconds.
*
* @return String formatted similar to ” 2h :1m :53s :443ms “.
*/
public static String returnFormattedTime(long time) {

//the seconds
long seconds = time / 1000;

//the hours
long hours = seconds / 3600;

//seconds adjusted after hours
seconds = seconds % 3600;

//the minutes
long minutes = seconds / 60;

//seconds adjusted after minutes
seconds = seconds % 60;

//milliseconds left over.
long millis = time % 1000;

// Print out the results
return new StringBuffer().append(hours).append(“h :”)
.append(minutes).append(“m :”).append(
seconds).append(“s :”).append(millis).append(“ms”)
.toString();
}

/**
* Starts the timer for a particular id, adds it to a Hashtable.
*
* @param id — the id of the timer for the Hashtable.
*/
public static void start(String id) {
startTime.put(id, new Long(System.currentTimeMillis()));
}
/**
* Stops the Timer, and removes the time. Returns the elapsed time.
*
* @param id — The id of the timer.
*
* @return long value of the elapsed time in milliseconds.
*/
public static long stop(String id) {
return System.currentTimeMillis()
- ((Long) startTime.remove(id)).longValue();
}
/**
* Main method to do some math and take up some time.
*
* @param args — no args digested.
*/
public static void main(String[] args) {
TesterTimer.start(“hello”);

for (int h = 0; h < 20; h++) {
for (int i = 0; i < 32000000; i++) {
int j = i / 25;
}

if ((h % 4) == 0) {
System.out.println(
TesterTimer.returnFormattedTime(
TesterTimer.elapsed(“hello”)));
}
h++;
}

long t = TesterTimer.stop(“hello”);
System.out.println(“Timer: ” + t);
System.out.println(“FMT Timer: ” + TesterTimer.returnFormattedTime(t))
}
}

* TestTimer Class, with methods to calculate the time to run
* particular tests. Multiple events can be mapped at once
* to a hashtable. Each event is retrieved by the id passed in
* to each available static method.
*
* @author dan@gurovich.com
* @version 1.0
* @since Sep 6, 2007
*/
public class TesterTimer {
//~ Static fields/initializers ***********************************

/**
* Hashtable holding various timer events, mapped to ids.
*/
private static final Hashtable startTime = new Hashtable();

//~ Methods ******************************************************

/**
* Stops the Timer, and removes the time.
* Returns the elapsed time.
*
* @param id — The id of the timer.
*
* @return long value of the elapsed time in milliseconds.
*/
public static long elapsed(String id) {
return System.currentTimeMillis()
- ((Long) startTime.get(id)).longValue();
}

/**
* Returns a formatted Elapsed time string.
*
* @param time — long value passed in,
* presumed to be milliseconds.
*
* @return String formatted similar to ” 2h :1m :53s :443ms “.
*/
public static String returnFormattedTime(long time) {
//the seconds
long seconds = time / 1000;
//the hours
long hours = seconds / 3600;
//seconds adjusted after hours
seconds = seconds % 3600;
//the minutes
long minutes = seconds / 60;
//seconds adjusted after minutes
seconds = seconds % 60;
//milliseconds left over.
long millis = time % 1000;

// Print out the results
return new StringBuffer().append(hours).append(“h :”)
.append(minutes).append(“m :”).append(
seconds).append(“s :”).append(millis).append(“ms”)
.toString();
}

/**
* Starts the timer for a particular id, adds it to a Hashtable.
*
* @param id — the id of the timer for the Hashtable.
*/
public static void start(String id) {
startTime.put(id, new Long(System.currentTimeMillis()));
}

/**
* Stops the Timer, and removes the time.
* Returns the elapsed time.
*
* @param id — The id of the timer.
*
* @return long value of the elapsed time in milliseconds.
*/
public static long stop(String id) {
return System.currentTimeMillis()
- ((Long) startTime.remove(id)).longValue();
}

/**
* Main method to do some math and take up some time.
*
* @param args — no args digested.
*/
public static void main(String[] args) {
TesterTimer.start(“hello”);

for (int h = 0; h < 20; h++) {
for (int i = 0; i < 32000000; i++) {
int j = i / 25;
}
int foo = h % 4;
if (foo == 0) {
System.out.println(
TesterTimer.returnFormattedTime(
TesterTimer.elapsed(“hello”)));
}
h++;
}
long t = TesterTimer.stop(“hello”);
System.out.println(“Timer: ” + t);
System.out.println(
“FMT Timer: ” + TesterTimer.returnFormattedTime(t));
}
}

The timer has three static working methods – start(id), elapsed(id), and stop(id). The start(id) method is void and starts the timer for a particular event mapped to an id. The id is a key within a Hashtable that records a starting time. When elapsed(id) is called, the value returned is a long primitive which is the start time subtracted from the current time, returning a milliseconds value. With elapsed(id) the key isn’t removed so one may keep the timer running. stop() returns the same value as elapsed(id), but stop(id) removes the key value mapped to the id, thereby “stopping” the timer completely.

No.

But it will probably get you home. Here’s what you do. Create a new filetype and make sure that it includes ?*.drl files. Once that is created, it makes a filetype with the name you gave it in the

%User%/Library/Preferences/IntellijIDEA%your-release-version-here%/filetypes/%name_of_file.xml%

directory (at least that’s what it looks like on my Mac – I haven’t touched a windows box in years, but it should have some parallels.

Open the XML file and replace anything between the <filetype> nodes with:

<highlighting>
<options>
<option name=”LINE_COMMENT” value=”#” />
<option name=”COMMENT_START” value=”/*” />
<option name=”COMMENT_END” value=”*/” />
<option name=”HEX_PREFIX” value=”" />
<option name=”NUM_POSTFIXES” value=”" />
<option name=”HAS_BRACES” value=”true” />
<option name=”HAS_BRACKETS” value=”true” />
<option name=”HAS_PARENS” value=”true” />
</options>
<keywords ignore_case=”false”>
<keyword name=”agenda-group” />
<keyword name=”assert” />
<keyword name=”auto-focus” />
<keyword name=”duration” />
<keyword name=”eval” />
<keyword name=”function” />
<keyword name=”import” />
<keyword name=”modify” />
<keyword name=”new” />
<keyword name=”no-loop” />
<keyword name=”package” />
<keyword name=”query” />
<keyword name=”retract” />
<keyword name=”return” />
<keyword name=”rule” />
<keyword name=”salience” />
</keywords>
<keywords2>
<keyword name=”end” />
<keyword name=”exists” />
<keyword name=”false” />
<keyword name=”not” />
<keyword name=”or” />
<keyword name=”then” />
<keyword name=”true” />
<keyword name=”when” />
</keywords2>
<keywords3>
<keyword name=”!=” />
<keyword name=”*” />
<keyword name=”->” />
<keyword name=”:” />
<keyword name=”<” />
<keyword name=”<=” />
<keyword name=”=” />
<keyword name=”==” />
<keyword name=”>” />
<keyword name=”>=” />
<keyword name=”contains” />
<keyword name=”excludes” />
<keyword name=”matches” />
</keywords3>
<keywords4>
<keyword name=”Double” />
<keyword name=”Integer” />
<keyword name=”String” />
</keywords4>
</highlighting>

This should get you home. If you have a better one or more highlighting ideas, feel free to drop me note.