New technologies need to pass the grandma test: if the average grandma couldn’t figure it out or just plain wouldn’t use it, it’s likely not going to be successful. Whether you think Apple products are aesthetically pleasing or not, the majority of their design focuses on simplicity; I think this is the essence of their success.

While on the ship almost everything works through a single plastic card with a magnetic stripe and a single bar code: room access, payments for purchases, and tracking ingress and egress. Everybody seems to handle this well, even grandma. There are more advanced things you can do with the card like balance tracking on your in-room TV and modifying information on an interactive touchscreen kiosk. The fact that the card does almost everything and is simple to use is why it’s a winner. The fact that more advanced users have the option for further use makes it even better.

This is exactly what someone at Apple likely figured out. If you cater to the widest possible audience by making something so powerful easy to use you’re almost guaranteed success. The pair of 80 somethings talking about sending picture messages and using cell phone video conferencing is certainly evidence of this. Make it simple, make it powerful, try to manufacture it fast enough to keep up with demand.

Carlos really comments his code well so this shouldn’t be too hard to follow.

package com.blakgeek.dynamicss.servlet;

import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.ValueExpression;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.jsp.JspFactory;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

/**
 * User: chenry
 * Date: 6/20/11
 * Time: 12:02 PM
 */
public class CssServlet extends HttpServlet {

    private JspFactory jspFactory = JspFactory.getDefaultFactory();
    private ExpressionFactory expressionFactory;
    private List paths = new ArrayList();

    @Override
    public void init(ServletConfig config) throws ServletException {

        super.init(config);
        expressionFactory = jspFactory.getJspApplicationContext(getServletContext()).getExpressionFactory();

        // get the list paths to try from init params
        String pathsStr = config.getInitParameter("paths");
        if (pathsStr != null) {
            String[] paths = pathsStr.trim().split(",");
            for (String path : paths) {
                this.paths.add(path.trim());
            }
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        InputStream cssInputStream = null;

        // set the proper content type so it will work even if its chunked
        resp.setContentType("text/css");

        // get the filename from url path
        String cssFilename = getFilename(req.getRequestURI());

        // see if its possible to load the resource from any of the defined paths
        for (String path : this.paths) {
            // I know string concatenation is bad but this just an example;
            if (!path.endsWith("/")) path += "/";
            cssInputStream = getClass().getResourceAsStream(path + cssFilename);
            // as soon as you find a good resource use it
            if (cssInputStream != null) break;
        }

        if (cssInputStream != null) {
            String evaluatedCss = evaluateEL(inputStreamToString(cssInputStream), req, resp);
            resp.getWriter().write(evaluatedCss);
        }
    }

    private String inputStreamToString(InputStream is) {

        return new Scanner(is).useDelimiter("\\A").next();
    }

    private String evaluateEL(String content, HttpServletRequest req, HttpServletResponse resp) {

        ELContext elContext = jspFactory.getPageContext(this, req, resp, null, true, 8192, true).getELContext();
        ValueExpression expression = expressionFactory.createValueExpression(elContext, content, String.class);
        return (String) expression.getValue(elContext);
    }

    public String getFilename(String fullPath) {

        int sep = fullPath.lastIndexOf("/");
        return fullPath.substring(sep);
    }

}

The next blog post should probably be about integrating this solution with WRO4J in order to bulk-load CSS and JS even from jar files.

Normally, there’s EL in the CSS file and we just map *.css to the JSP servlet for our container. This works fantastically well when the application has the CSS files exploded but doesn’t work at all when the CSS is streamed to the JSP’s writer; enter Velocity. Rather than having Velocity start up and filter all requests, you can start the engine up just to process certain files, then shut it down after you’re done. Since Velocity tags are in the same format as EL you don’t have to modify the CSS files at all.

This is a great start and will get you going but there’s a better way that doesn’t rely on third party libraries, I’ll cover that in a future post!

Using this simple JS library coupled with jQuery you can easily create a JSON object by calling $(‘#formId’).serializeObject(); and pass that information using jQuery’s $.post or $.get methods.

<form id="deviceForm">
<input type="text" name="name"/>
<input type="text" name="manufacturer"/>
<input type="button" id="submit"/>
</form>
<script>
$('#submit').click(function() {
var deviceJSON = $('#deviceForm').serializeObject();
$.post("/devices/addDevice", deviceJSON, function(data) {
alert("callback");
});
}
</script>

All you need to do is change the method signature and annotations within your controller to let it know what type of object the JSON is supposed to be converted to.

@Controller
public class DeviceController {
@RequestMapping(value="/devices/byManufacturer", method=RequestMethod.GET)
@ResponseBody
public List<Device> getDevicesByManufacturer(@RequestParam String manufacturer) {
DeviceDAO dao = new DeviceDAO();
return dao.findByManufacturer(manufacturer);
}

@RequestMapping(value="/devices/addDevice", method=RequestMethos.POST)
@ResponseBody
public Device addDevice(@RequestBody Device toAdd) {
DeviceDAO dao = new DeviceDAO();
return dao.store(toAdd);
}

Environment Variables:
Cygwin only converts the PATH variable automatically. Any other variables you may need will have to be added to your .bashrc file in your home directory.

Missing default functionality:
By default, cygwin doesn’t install the clear command. Annoying, right? Ctrl + L will clear the buffer and do the same thing essentially.

<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans-2.5.xsd


http://www.springframework.org/schema/context


http://www.springframework.org/schema/context/spring-context-2.5.xsd


http://www.springframework.org/schema/mvc

http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

<context:component-scan base-package="com.cribbstechnologies.springmvc.web" />

<mvc:annotation-driven />

<bean id="viewResolver">
<property name="prefix">
<value>/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>

</beans>

And the Jackson library needs to be on your classpath. For a Maven enabled project all you have to do is add this to your POM:

<!-- JSON Jackson Libraries -->
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-core-asl</artifactId>
<version>1.6.1</version>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.6.1</version>
</dependency>

Then you just annotate your controller.

@Controller
public class DeviceController {

	@RequestMapping(value="/devices/byManufacturer", method=RequestMethod.GET)
	@ResponseBody
	public List<Device> getDevicesByManufacturer(@RequestParam String manufacturer) {
		DeviceDAO dao = new DeviceDAO();
		return dao.findByManufacturer(manufacturer);
	}
}

That’s it! The @ResponseBody automatically converts whatever the return value is into JSON and outputs it as the body of the response. You can see how a JSON object can be automagically mapped to a POJO in this post.

If you’re following along on your own and don’t want to use the demo app as a crutch you’ll need these two jar files and you’ll have to manually install them into your local maven repository as I couldn’t find them on any public repositories anywhere.

I chose Spring MVC as the framework for this demo app because you get a lot of functionality baked in without much effort. You can be up and running with annotations in about 10 minutes including the time it’ll take Maven to download the requisite libraries.

We’re going to create an example of everyone’s favorite things: a used car lot. The seedy buy here pay here type; not an offshoot of a new car lot. We’ve got cars. They’ve got a price, a make, and a model. Let’s pretend that Salesperson are assigned cars. I know, it’s a lame idea but I couldn’t think of a better idea. Salespeople have a name and their assigned cars.

public class Manufacturer {
     private String name;
}

public class Car {
     private Manufacturer make;
     private String model;
     private long price;
}

public class Salesperson{
     private String name;
     private List<Car> assignedVehicles;
}

You can create your own accessors and mutators, lazy.

Next we’ll create the xml files that mjorm uses to map the objects to their respective Mongo collections.

Manufacturer.mongo.xml

<?xml version="1.0" encoding="UTF-8"?>
<descriptors>
	<object class="com.cribbstechnologies.springmvc.model.Manufacturer">
		<property name="name"></property>
	</object>
</descriptors>

Car.mongo.xml

<?xml version="1.0" encoding="UTF-8"?>
<descriptors>
	<object class="com.cribbstechnologies.springmvc.model.Car">
		<property name="name"></property>
		<property name="make" class="com.cribbstechnologies.springmvc.model.Manufacturer"></property>
		<property name="price"></property>
	</object>
</descriptors>

Salesperson.mongo.xml

<?xml version="1.0" encoding="UTF-8"?>
<descriptors>
	<object class="com.cribbstechnologies.springmvc.model.Salesperson">
		<property name="name"></property>
		<property name="cars">
			<type-param class="com.cribbstechnologies.springmvc.model.Car"></type-param>
		</property>
	</object>
</descriptors>

This post will be continued in part 3.

Internet Explorer doesn’t treat z-index for absolutely positioned objects the same as other browsers: it creates a new “stack” of objects that it re-indexes based on the z-index of the nearest relatively positioned ancestor. If you’ve got an absolutely positioned div that’s supposed to have a z-index that’s higher than something else within another div, make sure its ancestor has the appropriate z-index. The following will give you what you want.

<div style="position: relative; z-index: 999">
<div id="inner" style="position: absolute: top: 0, left: 0;">
Yay, I'm indexed
</div>
</div>

This will not:

<div style="position: relative;">
<div id="inner" style="position: absolute: top: 0,
left: 0; z-index: 999">
Boo, I'm not indexed
</div>
</div>

IE’s javascript engine is pretty sorry. It’s got plenty of bugs but the one I found today has to deal with boolean equality. In every other browser if the element is disabled this evaluates to true but IE evaluates it to false.

$('#element').attr('disabled') == 'true';

What you need to get it working: a MongoDB database and some java POJOs. You’ll then create some XML files that will tell Mongo how to marshal your object to and from Mongo DBObject instances.

Here’s a simple POJO that represents a car.

public class Car {

private String model;
private String make;

public String getModel() {
return model;
}

public void setModel(String model) {
this.model = model;
}

public String getMake() {
return make;
}

public void setMake(String make) {
this.make = make;
}
}

Here’s an example of an XML mapping file

<?xml version="1.0" encoding="UTF-8"?>
<descriptors>

<object>
<property name="make" />
<property name="model" />
</object>

</descriptors>

Here’s an example of the DAO class that would handle this object’s insertion and retrieval to/from the MongoDB instance.

public class CarDAO {

private XmlDescriptorObjectMapper mapper;

public CarDAO() {
mapper = new XmlDescriptorObjectMapper();
try {
mapper.addXmlObjectDescriptor(this.getClass().
getClassLoader().getResourceAsStream("Car.mongo.xml"));
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException("It failed trying to load the mappings");
}
}

public void store(Car toStore) {
DbFactoryBean bean = new DbFactoryBean();
try {
DB db = bean.getObject();
DBCollection carCollection = db.getCollection("cars");
WriteResult result = carCollection.insert(mapper.mapToDBObject(toStore));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

}

}

That’s all you’ve gotta do. It wouldn’t take much to get this functionality pushed into Java annotations and if I end up using this project extensively, I’ll likely volunteer my time to modify it to do so.

Read the next installation in this series.