Sending HTML (as) Mail through Java (Spring)

[This is basically an extension of the earlier post Sending Simple Mail through Java (Spring) ]

In this mail we will try to send HTML(and CSS) as mails.....please refer to the earlier post about simple mail as there is no point in repeating things, Moreover this would contain an example which would build on earlier post example. Just to make sure we don't miss anything.

So basically no changes in the Spring application context Spring.xml file.

<bean class="org.springframework.mail.javamail.JavaMailSenderImpl" id="mailSender">
    <property name="host" value="smtp.gmail.com">
    <property name="port" value="587">
    <property name="username" value="username">
    <property name="password" value="password">
    <property name="javaMailProperties">
       <props>
           <prop key="mail.smtp.auth">true</prop>
           <prop key="mail.smtp.starttls.enable">true</prop>
       </props>
    </property>
</bean>

But to send HTML in mail SimpleMailMessage won't work. That is actually too simple for the task. Hence for this we would need a MimeMessage. MimeMessage is very much different from SimpleMailMessage however one of the biggest and more likable advantage we have with MimeMessage is MimeMessageHelper.

package mimeSendMail;

import javax.mail.internet.MimeMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component
public class MimeSendMail
{

 @Autowired
 private JavaMailSender mailSender; 

public void sendMimeMessage(String from, String[] to, String subject, String msg) throws Exception{
  MimeMessage mime = this.mailSender.createMimeMessage();
  MimeMessageHelper helper = new MimeMessageHelper(mime, true);
  helper.setFrom(from);
  helper.setTo(to);
  helper.setSubject(subject);
  String htmlText = "<div style='background:#00FA9A;text-align:center;"+
                "font-size:12pt;font-weight:bold;color:#800000;padding:10px;'>"+
                "That feeling when......<br /><br />"+
                "You miss your spectacles while looking for your spectacles....<br /><br />"+
                "The person whom you secretly dislike, helps you......<br /><br />"+
                "The person whom you have crush on seems happy all the time....<br /><br />"+
                "the beggar recognizes you and stops asking for penny from you since you have never given....<br /><br />"+ 
                "</div>";
    helper.setText(htmlText,true);
    this.mailSender.send(mime);
    }
}

I guess this should do it. Yes, the HTML and inline css really looks nasty but I didn't find any way to transfer the css file to the mailing server and I doubt if there are any. Hence we have to live with inline css also a blessing in disguise about inline css is that it overrides other pre-defined css properties.

Here we saw that  from the JavaMailSender we create a MimeMessage and with that in turn we create MimeMessageHelper which does various task( much beyond rendering HTML text).

Now we are ready to give it a test.

package mimeSendMail;

import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import mimeSendMail.MimeSendMail;

public class SendMailTest {

  @Test 
 public void mailTest(){
        ApplicationContext context = new ClassPathXmlApplicationContext("mimeSendMail/SpringMail.xml");

        MimeSendMail mm = (MimeSendMail) context.getBean("mimeSendMail");
        mm.sendMail("sender@gmail.com",
        new String[]{"recepient1@gmail.com","recepient2@rediffmail.com"},
        "Hello Friend", 
        "This is a test mail");
 } 
}

(Yeah I know the parameter msg is not being used and its redundant, you can get rid of that.)
Hope this helps.

jQuery : Showing the text in typing (typewriter) effect

I was trying for it and came out with an idea so that we can show the text and messages as someone is typing it (of course that's an illusion like much of other things).

So here it goes. You have a text message and you want to show it with the effect, first of all we need to break the sentence for each single letter or alphabet and then would need to put it one after another with certain time-difference. the logic seems simple.

So here is the primary function for it :-

function demoTypeWriting(){
  var text = "Our whole theory of education is based on the absurd notion that we must learn to swim on land before tackling the water."
  var textArray = text.split("");
  $('div#resultDiv').append('<div id="typeText"></div>');
  timer = setInterval( function(){writeText(textArray)}, 500 ); 
}

Once it's done, I would provide for the function which will actually execute the task of typing the text :-

function writeText(textArray){
    if(textArray.length > 0){
    console.log(textArray[0]);
    $('div#newText').focus().append(textArray[0]);
    textArray.splice(0,1);
    }
    else{
        clearInterval(timer);
    }
}

So as you can see I am doing nothing great I am putting first element into the designated div and since it's already has been put, I am removing it from the array, So that next element can be put. Finally when array is empty I am stopping the timer. 

Try it here :-

Your Text:
Time Difference : 50 100 175 250 500 750 1000

Result : -