Circle of Confusion

...I once was lost...
Limboville 居士

Saturday, March 15, 2008

Wicket Flickr à la Ruby On Rails

The Ruby on Rails site has a nice Flickr demo, dress up in Ajax and with spinner busy animation and drop down effect. The whole thing is done with amazingly few lines of code and in only 5 minutes. For comparison sake, I did a Wicket version. It looks and works the same, does Ajax and has the same animation effects. But additionally, it works with Javascript disabled (something not in the RoR version but is made possible automatically with Wicket because all Wicket component degrade gracefully). The thumbnail images are popup links, clicking on it pops up a window showing a larger version of the photo. This is done with a custom component, something that is real easy to do with Wicket.

By comparing the two versions, one can see Wicket has clean separation of logic and presentation: Java for logic and plain HTML for presentation template and the two are fused together by Wicket runtime. Wicket takes care of state management automatically so we can just write plain Java object as page component. Because Wicket templates have no program code but just plain HTML, they can be previewed in browser. By comparison, the RoR template is a mix of HTML and Ruby, it's total babel (well, to none RoR pepole anyway) and cannot be previewed in browser.

Before continuing, let me show a video of how the whole thing come together. It shows template preview in IDE, then how this thing run.

Prerequisite

The Flickrj library is used to do the Flickr part. Download the code and install it. For Maven, this command installs it:

mvn install:install-file -DgroupId=com.aetrion \
-DartifactId=flickr -Dversion=1.0 -Dpackaging=jar \
-Dfile=flickrapi-1.0.jar

Add dependency in pom.xml

<dependency>
<groupId>com.aetrion</groupId>
<artifactId>flickr</artifactId>
<version>1.0</version>
</dependency>

You need a Flickr API key to connect to Flickr. Get it here and replace the string

"xx-get-your-own-key-xx"

in FlickrPage.java with a real key.

For animation effect, the same Scriptaculous Javascript library is used as the RoR version. Download the file from the Scriptaculous site and take the three files: "prototype.js" (in lib dir), "scriptaculous.js", "effects.js" and save them in the webapp folder.

You also need an animated busy spinner.gif file. You can use this:

. Save it in the webapp folder.

Now the actual Wicket Flickr: all the files should be in the same package. If you use the Wicket Quickstart maven archetype, put them together with HomePage.java.

First, flickr.css, this file is the same as the RoR version (a couple of rules added for error feedback and thumbnail link decoration):

body {
    background-color: #888;
    font-family: Lucida Grande;
    font-size: 90%;
    margin: 25px;
}

form {
    margin: 0 0 10px 0;
    background-color: #eee;
    border: 5px solid #333;
    padding: 25px;
}

fieldset {
    border: none;
}

#spinner {
    float: right;
    margin: 5px 15px 0 0;
}

#photos img {
    border: 1px solid #000;
    width: 75px;
    height: 75px;
    padding: 2px;
    margin: 5px;
}

#photos a {
    text-decoration: none;
}

#feedback ul {
    list-style-type: square;
    background-color: lightPink;
    color: red;
    padding: 4px 0 4px 20px;
    margin: 0 60px 5px 10px;
}

FlickrPage.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:wicket="http://wicket.apache.org/" xml:lang="en" lang="en">
<head>
<title>Flickr Demo Ã  la Ruby On Rails</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link wicket:id="pageCss" href="flickr.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="scriptaculous.js"></script>
<script language="JavaScript" type="text/javascript" src="effects.js"></script>
</head>
<body>
<form wicket:id="form">
<img id="spinner" src="spinner.gif" style="display:none"/>
<span wicket:id="feedback">Feedback</span>
<fieldset>
<label for='tags'>Tags:</label>
<input type="text" name="tags" size="30" wicket:id="tags"/>
<input type="submit" value="Find" wicket:id="submitButton"/>
</fieldset>

<div id="photos" wicket:id="photosDiv">
<span wicket:id="photoEntry"><span wicket:id="t">Thumbnail</span></span>
<wicket:remove>
<img width="75" height="75" src="http://farm3.static.flickr.com/2243/2328260234_989578afd3_s.jpg"/>
<img width="75" height="75" src="http://farm3.static.flickr.com/2320/2327441807_58d71c6fd5_s.jpg"/>
<img width="75" height="75" src="http://farm4.static.flickr.com/3061/2328064806_634849bfb3_s.jpg"/>
<img width="75" height="75" src="http://farm4.static.flickr.com/3117/2328064892_970016cfda_s.jpg"/>
<img width="75" height="75" src="http://farm3.static.flickr.com/2061/2325163492_18394afbcf_s.jpg"/>
<img width="75" height="75" src="http://farm4.static.flickr.com/3109/2325163548_6cc733bc84_s.jpg"/>
<img width="75" height="75" src="http://farm3.static.flickr.com/2310/2323708341_46216bc9f6_s.jpg"/>
<img width="75" height="75" src="http://farm4.static.flickr.com/3023/2317136058_e87e607532_s.jpg"/>
<img width="75" height="75" src="http://farm4.static.flickr.com/3027/2315420029_2bab43c6a9_s.jpg"/>
<img width="75" height="75" src="http://farm4.static.flickr.com/3287/2310391100_c98d6961c1_s.jpg"/>
<img width="75" height="75" src="http://farm3.static.flickr.com/2121/2304290885_c6d90fbd48_s.jpg"/>
<img width="75" height="75" src="http://farm3.static.flickr.com/2301/2299313605_9dd239dd97_s.jpg"/>
<img width="75" height="75" src="http://farm4.static.flickr.com/3104/2297363917_f39d1fe4f2_s.jpg"/>
</wicket:remove>
</div>
</form>
</body>
</html>

It's just HTML tags with some wicket:id attributes. The part that show a list of photos from Flickr is this:

    <span wicket:id="photoEntry"><span wicket:id="t">Thumbnail</span></span>

At runtime, this will turn into a list of photos. Since the list is filled at runtime, there is no photo thumbnails in the template to preview. In case like this, Wicket has a "wicket:remove" tag for putting placeholder contents in template for design time preview. These contents are stripped when the template is rendered at runtime. I took a bunch of thumbnail url from Flickr and put a list of img thumbnail in between "wicket:remove" for preview. This is a real strength of Wicket: clean previewable HTML, completely unobtrusive to graphic and css designer.

Now open the html template file in a browser and we can see how the page look (here I am previewing inside Eclipse IDE):

Make change to css and html and see the change without have any running code.

Now the Java code: FlickrPage.java:

package com.hddigitalworks;

import org.apache.wicket.AttributeModifier;
import org.apache.wicket.PageParameters;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.markup.html.form.AjaxFallbackButton;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.markup.html.list.ListItem;
import org.apache.wicket.markup.html.list.ListView;
import org.apache.wicket.markup.html.panel.FeedbackPanel;
import org.apache.wicket.markup.html.resources.StyleSheetReference;
import org.apache.wicket.model.CompoundPropertyModel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.LoadableDetachableModel;
import org.apache.wicket.model.Model;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.aetrion.flickr.Flickr;
import com.aetrion.flickr.REST;
import com.aetrion.flickr.photos.Photo;
import com.aetrion.flickr.photos.PhotoList;
import com.aetrion.flickr.photos.PhotosInterface;
import com.aetrion.flickr.photos.SearchParameters;

public class FlickrPage extends WebPage {

    private static final long serialVersionUID = 1L;
    private static final Logger log = LoggerFactory.getLogger(FlickrPage.class);

    private String tags;   // flickr search tags, received from form field
    WebMarkupContainer photosDiv; // something for Ajax target to add to for update

    public FlickrPage(final PageParameters parameters) {
        add(new StyleSheetReference("pageCss", getClass(), "flickr.css"));
        Form form = new Form("form", new CompoundPropertyModel(this));
        add(form);
        FeedbackPanel fp = new FeedbackPanel("feedback");
        fp.setOutputMarkupPlaceholderTag(true);
        fp.setMarkupId("feedback");
        form.add(fp);
        form.add(new TextField("tags").setRequired(true));
        AjaxFallbackButton submitButton = new AjaxFallbackButton("submitButton", form) {
            private static final long serialVersionUID = 1L;

        @Override protected void onSubmit(AjaxRequestTarget target, Form f) {
            renderPhotos(tags);
         if (target != null) {
           target.addComponent(f.get("feedback"));  // clear error feedback if any
           target.addComponent(photosDiv);    // update our photos display
           target.appendJavascript("new Effect.BlindDown('photos', {duration:3});"
                 + "Element.hide('spinner');");
       }
         }

        @Override protected void onError(AjaxRequestTarget target, Form f) {
             target.addComponent(f.get("feedback"));  // show updated error feedback
             target.appendJavascript("Element.hide('spinner');");
//              target.addComponent(photosDiv);     // keep to show existing photo display on error
        }
    };
    // add effects for when submit button onclick
    String onClickJavascript = "Element.show('spinner'); new Effect.BlindUp('photos');";
    submitButton.add(new AttributeModifier("onclick", true, new Model(onClickJavascript)) {
        private static final long serialVersionUID = 1L;
        @Override protected String newValue(String oldValue, String newValue) {
            return newValue + oldValue;
        }
    });
    form.add(submitButton);
    photosDiv = new WebMarkupContainer("photosDiv");
    photosDiv.setOutputMarkupId(true);
    photosDiv.setMarkupId("photos"); // use our own id instead of let Wicket generate
    form.add(photosDiv);
    // Initially there is no photo to display
    // so add a temporary place holder component to make Wicket happy
    photosDiv.add(new WebMarkupContainer("photoEntry").setVisible(false));

}


    private void renderPhotos(final String tags) {
        IModel list = new LoadableDetachableModel() {
            private static final long serialVersionUID = 1L;
            @Override protected Object load() {
                return searchFlickr(tags, 24, 1);
            }
        };
        ListView photoList = new ListView("photoEntry", list) {
            private static final long serialVersionUID = 1L;
            @Override protected void populateItem(ListItem item) {
                Photo photo = (Photo) item.getModelObject();
                item.add(new Thumbnail("t", photo));
            }
        };
        photosDiv.replace(photoList);
    }


    private PhotoList searchFlickr(String tags, int perPage, int page) {
        PhotoList result = null;
        try {
            Flickr f = new Flickr("xx-get-your-own-key-xx", new REST());
            PhotosInterface photos = f.getPhotosInterface();
            SearchParameters params = new SearchParameters();
            params.setTags(new String[] { tags });
            result = photos.search(params, perPage, page); // page start from 1?
        } catch(Exception e) {
            log.error("Flicker communication error [" + e.getMessage() + "]", e);
            throw new RuntimeException(e);
        }

        return result;

    }
}

Below is the Thumbnail image link component. The image is the thumbnail, clicking it show larger photo in a popup window.

Thumbnail.java:

package com.hddigitalworks;

import org.apache.wicket.behavior.SimpleAttributeModifier;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.link.ExternalLink;
import org.apache.wicket.markup.html.link.PopupSettings;
import org.apache.wicket.markup.html.panel.Panel;

import com.aetrion.flickr.photos.Photo;

public class Thumbnail extends Panel {
    private static final long serialVersionUID = 1L;
    private static PopupSettings popupSettings =
        new PopupSettings(PopupSettings.SCROLLBARS | PopupSettings.RESIZABLE)
            .setHeight(550)
            .setWidth(550);

    public Thumbnail(String id, Photo photo) {
        super(id);
        ExternalLink link = new ExternalLink("link", photo.getMediumUrl());
        link.setPopupSettings(popupSettings);
        add(link);
        WebMarkupContainer img = new WebMarkupContainer("thumbnail");
        img.add(new SimpleAttributeModifier("src", photo.getSmallSquareUrl()));
        link.add(img);
    }
}

Thumbnail.html

<html>
<wicket:panel>
    <a wicket:id="link">
    <img wicket:id="thumbnail" width="75" height="75" src="http://farm3.static.flickr.com/2025/2330755480_6a00d6005b_s.jpg"/>
    </a>
</wicket:panel>
</html>

Again, simple previewable HTML.

This completes the Wicket Flickr demo.

posted by Matthew # 11:38 AM 1 Comments

Wednesday, March 12, 2008

Send Email with Javamail and Google Gmail SMTP Server

I need to send email directly from my computer using Javamail. With a Google account, you can send email with their 'smtp.gmail.com' server. It's quite straight forward to use Javamail to interface to google's smtp server. The one hicup is it uses SSL for communication and require the StARTTLS command for secured communication. The following gives me some clues:

http://forum.java.sun.com/thread.jspa?threadID=486031&messageID=2275282

First, Javamail version >1.4 is required as support for STARTTLS is added after that. Get the current version here: http://java.sun.com/products/javamail/downloads/index.html. Note: the download link need Javascript to work! Unzip the downloaded file. There is a mail.jar file inside. That is the actual Javamail. Install Javamail in the local maven repository:

mvn install:install-file -DgroupId=javax.mail \
-DartifactId=mail -Dversion=1.4.1 -Dpackaging=jar \
-Dfile=mail.jar

And declare dependency in pom.xml:

<dependency>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
<version>1.4.1</version>
</dependency>

Javamail has Activation dependency. This is taken care by Java6 and newer. Older Java version must have the Activation jar install also. In the unzipped javamail-1.4.1 folder, there is a file SSLNOTES.txt that documents the STARTTLS support and SSL socket.

Test code that send an email via Google:

package com.hddigitalworks;

import java.util.Properties;

import javax.mail.Authenticator;
import javax.mail.Message;
import javax.mail.MessagingException;
import javax.mail.PasswordAuthentication;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;

public class HelloToMe {

public static void main(String... args) throws Exception {

String[] recipients = {"someone@somewhere.com", "someoneelse@somewhereelse.com"};
String subject = "重要消息 From Master Mo";
String body = "This is a very important message\n" +
"這是一則非常重要消息。\n" +
"Это будет очень важное сообщение.";
sendViaGMail(recipients, subject, body);
}



public static void sendViaGMail(String recipients[],
        String subject,
        String body) throws MessagingException {

boolean debug = true;

Properties props = new Properties();
props.put("mail.smtp.host", "smtp.gmail.com");
props.put("mail.smtp.user", "you@here.com");
props.put("mail.smtp.auth", "true");
if (debug) {
props.put("mail.debug", "true");
}
props.put("mail.smtp.port", "465");
props.put("mail.smtp.starttls.enable", "true");
props.put("mail.smtp.socketFactory.port", "465");
props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
props.put("mail.smtp.socketFactory.fallback", "false");

// your google account name (without the '@gmail.com' part!)
final String username = "google-sign-in";
final String password = "your-password";
Authenticator auth = new Authenticator() {
@Override protected PasswordAuthentication getPasswordAuthentication() {
  return new PasswordAuthentication(username, password);
}
};

Session session = Session.getDefaultInstance(props, auth);
session.setDebug(debug);

MimeMessage email = new MimeMessage(session);

email.setSubject(subject, "utf-8");
email.setText(body, "utf-8");

InternetAddress[] addressTo = new InternetAddress[recipients.length];
for (int i = 0; i < recipients.length; i++) {
addressTo[i] = new InternetAddress(recipients[i]);
}
email.setRecipients(Message.RecipientType.TO, addressTo);

Transport.send(email);

}
}

The important bits are in the last few Session properties values. Those sets up the SSL socket factory for the session to issue the 'STARTTLS' for Google. I originally thought I only need this:

        props.put("mail.smtp.starttls.enable", "true");

My code hangs. I have to add this

        props.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");

to make it work. Somehow Javamail is unable to get the SSLSocketFactory from the JSSE configuration machinery. Hmmm.

There is no need to setup Google's server certificate. Their cert is signed by the ThawtePremiumServerCA and that is already in the JRE's 'cacert' keystore. To install some unknown cert, use the keytool's -import command. The default password of 'cacert' is 'changeit'.

My test message contains Chinese characters in both the subject and body. To make both support non-ascii character, Both MimeMessage#setSubject() and MimeMessage#setText() calls need to specify the "utf-8" parameter. Without specifying utf-8, the Chinese characters becomes 'babel' on the receiving end. Utf-8 should be the default, but it's not.

posted by Matthew # 1:02 PM 0 Comments