Joel's Blog

Tomcat 6 basic setup with database - ouch

I have been doing rails most of the time for the past 18 months and never considered myself a true convert. I like ruby and rails, but there are several issues with the ruby language that have never made me say, ok "I love Ruby", but after today, I will say, I love Rails, I wish java would stop the insanity and move to a model closer to rails for its web frameworks. Java is a great language, but the configurations of jsp/servlets/jdbc/templates should be made super easy and not be this complicated.

I havent used Tomcat in a while, so I needed to setup a very simple webapp that talks to a database (sqlserver) and presents some simple web pages. Something I did in rails in about 20 minutes total 1 controller, 1 model and 3 views). So I thought porting to java would take a couple hours at the most. Now I am going on 7 hours and nearly complete. I am going to document this because I could not find anything out there that worked for me on the first try.

I am using Eclipse and Tomcat 6 to do this with SqlServer as the database.

First create a project in eclipse and select "Dynamic Web Project" and follow the prompts, choose your existing tomcat install.

Under WebContent, add yourself your first jsp, yeah, I have a project and a jsp, and you can start your tomcat server from withing eclipse and even debug the jsp if you want, yeah, that was easy!

Ok, now I want a database, and I probably want to use connection pooling, since creating and destroying connections is expensive, but the documentation on this was very fuzzy, here is what I finally did after lots of reading:

1.) create a context.xml file under META-INF

<Context path="/myapp" docBase="myapp"
        debug="5" reloadable="true" crossContext="true" >

  <Resource name="jdbc/myapp" auth="Container" type="javax.sql.DataSource"
               maxActive="100" maxIdle="30" maxWait="10000"
               username="joel" password="password" driverClassName="com.microsoft.jdbc.sqlserver.SQLServerDriver"
               url="jdbc:sqlserver://10.211.55.4:1433;DatabaseName=MyDB;autoReconnect=true"></Resource>

</Context>

2.) Add this to yoru web.xml inside the webapp section:

  <resource-ref>
      <description>DB Connection</description>
      <res-ref-name>jdbc/myapp</res-ref-name>
      <res-type>javax.sql.DataSource</res-type>
      <res-auth>Container</res-auth>
  </resource-ref>

3.) Add to your jsp:

<%@page import="java.sql.*, javax.sql.*, java.util.*, javax.naming.*"%>

<%
Context initContext = new InitialContext();
Context envContext  = (Context)initContext.lookup("java:/comp/env");
DataSource ds = (DataSource)envContext.lookup("jdbc/happierwidget");
conn = ds.getConnection();
// ... do your jdbc work here
 conn.close();
%>

3.) add your jdb drivers to your server/lib folder, I could not get mine to work by putting them in my application's lib folder. Add your drivers to your "java build path" by right click on your project and pick properties, then add external jar file.

4.) Restart your server and you should be able to connect. YEAH.

I couldnt get the standard template libraries to work now matter what I tried, I ended up punting and doing ugly jsp work to make this happen.

Widgets, Gadgets, Web Widgets, are you confused yet?

When I first learned about gadgets it was pretty straight forward, you had Konfabulator (now Yahoo) Widgets and they consisted of a nice little sidebar you could put cute little apps in that did interesting things, kind of like the old Microsoft active desktop stuff. Now with Google desktop gadgets, Apple gadgets, igoogle web gadgets, vista gadgets, things have gotten more confusing and complicated. The best place to learn about all this I have found is here. Even though its written in super existing w3c lingo/format, you will find it a good read to get educated on past present and future when it comes to widgets.

Sending Multipart Emails - you should do this..

I am amazed at how many people have switched to sending html only emails. There are a few problems with this, most importantly is some mail servers will remove content if it is html, so you will end up sending a blank email to your user if you send it as html only. Also for some viewers with text only email readers (yes they do exist) the mails will look terrible if you send them in html format.

Sending multipart emails is easy, here are directions in my 3 favorite language/platforms:

Ruby on Rails - note how you can just define an html view and a text view and rails will figure out that you want to send a multipart email.

.NET / C# - just add each view to the mailmessage object before sending.

Java - you just add the parts to a MimeMessage.

How to achieve the gallery me.com or iphoto album rollover effect on albums

If you are like me and use iPhoto, you probably like and respect the way when you move your mouse across a album, it scrolls through the pictures in it. I was even more impressed when I noticed they also did this on my me.com gallery, and by how fast it was. If you don't know what I am talking about, you can see Apple's me.com gallery example here. Simply move your mouse across any of the albums and you will see it scroll through thumbnails of the pictures.

I had the need for one of my clients to do something similar, I wanted to show front side and rear views of a person by moving across the image. I searched far and wide for javascript/css frameworks or approachs as to how to do this and I didnt find anything. Maybe part of the problem is I dont know the offical name for this effect. Its not lightboxing which is a typical thing to do with photo galleries.

Anyway, I figured it out, maybe this is not exactly how they do it, but probably pretty close (I didnt copy any Apple source).

The basic idea, is you create big tall image with all your thumbnails stacked on top of each other, placed in a div with hidden overflow and you use javascript mousemove events to adjust the top of the visible image, giving the effect of a new image showing on incremental movements.

First create a stacked image of all your thumbnails, basically one very tall image with each thumbnail right on top of each other, see apples example here.

Next create a div with the following style: (width & height should be the width and height of each individual thumbnail

.imageContainer {

cursor:pointer;

height:400px;

margin-left:-2px;

overflow:hidden;

position:relative;

width:179px;

z-index:90;

}

Now put your image link inside this div with the following style:

element.style {
margin-top:0;
position:absolute;
top:0px;
width:179px;
}

Give your image an id, lets call it "myImage"

Then add the following javascript: (all my javascript uses prototype, but im sure you could do something similar without.

Add this javascript to your ajax call or anywhere on your page after your image is defined:
$('myImage').observe('mousemove', adjustImage);

Add the following javascript to the top of your page:
(yes, I now my javascript is ugly and someone can probably rewrite this in 3 lines (if you do, please post in a comment)

<script>
var lastMPos = null;

function adjustImage(event){
 
 var changv = Math.abs(lastMPos - event.clientX);
  if (lastMPos == null || changv > 60) 
  {
    var element = event.element();
    var current = element.style.top;
    var cpix = parseInt(current.substring(0,current.indexOf('px')));
    if (cpix != -800)
        cpix = cpix - 400;
    else
        cpix = 0;
   
    element.style.top = cpix + 'px';
     lastMPos = event.clientX;
  }
 
}
</script>


This script basically adjusts the top by the height of the individual images each time the mouse gives an event that was more than 60 pixels from the last event. You can adjust this based on the number of images in your strip and the height of your image.

Hope I saved you some time if you were looking for the same thing. I was thinking it would be cool to write a serverside utility that would stack a bunch of images on top of each other, because creating these strips manually can be a pain. Let me know if you know of such a utility out there.