Embedding images in E-Mail

We have been using XML XSL transformation for generating the emails and it was working well . XML Provides the data and Styling is provided in XSL . It becomes tricky when including images . One easy way to do is to include images as URL . This may not be the right approach as the user may not be online when looking a the email and can be lost during forwarding .

Best way is to use javax.mail.internet.MimeMultipart and set the images as header .
Here is the example
XSL to include images will look like this

<img>

<xsl:attribute name="src">cid:image1</xsl:attribute>

<xsl:attribute name="border">0</xsl:attribute>

</img>

Include the images in the email service after the transformation

MimeMultipart multipart = new MimeMultipart();

BodyPart messageBodyPart = new MimeBodyPart();



messageBodyPart.setContent("All Email contents from Transformation", "text/html");

multipart.addBodyPart(messageBodyPart);



// add first image

messageBodyPart = new MimeBodyPart();

DataSource fds = new FileDataSource

("C:\\image_path");

messageBodyPart.setHeader("Content-ID","<image1>");

messageBodyPart.setDataHandler(new DataHandler(fds));

multipart.addBodyPart(messageBodyPart);



//add another image

messageBodyPart = new MimeBodyPart();

DataSource fds1 = new FileDataSource

("C:\\image-path");

messageBodyPart.setHeader("Content-ID","<image2>");

messageBodyPart.setDataHandler(new DataHandler(fds1));

multipart.addBodyPart(messageBodyPart);



message.setContent(multipart);

You will see the image replaced .Images are downloaded with the message and is replaced where the tag is used . It's solves all the issues related to using them as URL.

Prototype JavaScript framework - Light weight framework

Redesigning websites for Rich user interface may involve significant changes not only to the UI layer but also the server side programming . Programmers and Designers often find it as a big project to do a total redesign UI .

If you already have a website with lot stylesheets and javascript's change can be substantial . Prototype (http://www.prototypejs.org/) can be actually help take the first step , as its a light weight and provides a lot of utilities .

Here is an example of a project that was using vanilla AJAX and moving to prototype was very simple

Old Code

function loadXMLDocs(object)
{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
if (xmlhttp)
{
var xmlUrl = 'search.do';
xmlhttp.onreadystatechange=xmlhttpChange
xmlhttp.open("GET",xmlUrl,true)
xmlhttp.send()
}
}

function xmlhttpChange()
{

if (xmlhttp.readyState==4)
{
if (xmlhttp.status==200)
{
var xmlDoc=xmlhttp.responseXML
}
}
}


New Code after including prototype



function loadXMLDocs(object)
{

var myAjax = new Ajax.Request(url,{ method: 'post', parameters: param, onComplete: ccxmlhttpChange });
}

function xmlhttpChange()
{

var xmlDoc=originalRequest.responseXML
}




Notice the considerable reduction in boiler plate code . Also using a framework like prototype gives a added advantage of using more options -
http://www.prototypejs.org/api/ajax/options

My testing showed that the Performance was actually better than using vanilla ajax and our team is more inclined to use it .