How to Use GXT XTemplate with ListView

XTemplate is a very useful class of GXT that supports auto-filling arrays, conditional processing with basic comparison operators, sub-templates, basic math function support, special built-in template variables, inline code execution and more. Here i am going to illustrate how to use XTemplate with a ListView to customize the look and feel of the ListView.

Create a new project named XTemplateExample and add GXT library in the project. To create a ListView at first you need a base model class and have to generate data for that model. In this tutorial i have used the same Employee model and TestData class for generating data which I have used in my previous blogs. You will find the code of these classes here.

Now go to the onModuleLoad method of XTemplateExample class. Remove all the auto generated code of this method.
First create a ListStore of Employee model , employeeList and add data to this store which was generated in the TestData class

  ListStore<Employee> employeeList = new ListStore<Employee>(); 
   employeeList.add(TestData.getEmployees());

Now Create a ListView of Employee type and set the employeeList as the store of the list view.

   ListView<Employee> lView = new ListView<Employee>();
   //getTemplate() returns the desired template
   lView.setTemplate(getTemplate());
   lView.setStore(employeeList);

   ContentPanel cp = new ContentPanel(); 
   cp.setBodyBorder(false); 
   cp.setHeading("Using XTemplate"); 
   cp.setButtonAlign(HorizontalAlignment.CENTER); 
   cp.setLayout(new FitLayout()); 
   cp.setSize(500, 420);
   cp.add(lView); 
   RootPanel.get().add(cp);

Here goes the definition of the getTemplate() method

private native String getTemplate() /*-{ 
       return ['<tpl for=".">', 
       '<div style="border: 1px solid #DDDDDD;float:left;margin:4px 0 4px  4px; padding:2px;width:220px;">',
       '<div style="color:#1C3C78;font-weight:bold;padding-bottom:5px;padding-top:2px;text-decoration:underline;">{name}</div>', 
       '<div style="color:green">Department:{department}</div>', 
       '<div style="color:blue">Designation:{designation}</div>',
       '<div style="color:black;padding-bottom:2px;">Salary:{salary}</div>', 
       '</div>', 
       '</tpl>', 
       ''].join(""); 
        
 }-*/;  

Properties of the Employee model are placed between {}. The style will be applied on every element of the employeeList. And the outcome of the work will be like this.

You can give your own look and feel by simply changing the CSS.

Sending Mail Using JavaMail API and Gmail as SMTP server

The JavaMail API provides a platform-independent and protocol-independent framework to build mail and messaging applications. The API defines classes such as Message, Session, and Transport. It includes support for the IMAP4, POP3, and SMTP protocols. Here I am going to show you how you can use this API to send mail through SMTP protocol.

First create a MailUtility class which you can use later from your client code.

public class MailUtility {

//Set Gmail as SMTP host 
private String SMTP_HOST_NAME = "smtp.gmail.com";
private String SMTP_AUTH_USER = "yourgmailid@gmail.com";
private String SMTP_AUTH_PWD = "password";

public void postMail(String recipients[], String subject,
String message, String from) throws MessagingException {
boolean debug = false;

//Set the required JavaMail session properties
Properties props = new Properties();
props.put("mail.smtp.starttls.enable", "true");
props.put("mail.smtp.host", SMTP_HOST_NAME);
props.put("mail.smtp.user", SMTP_AUTH_USER);
props.put("mail.smtp.password", SMTP_AUTH_PWD);
props.put("mail.smtp.auth", "true");
props.put("mail.smtp.port", "465");
props.put("mail.smtp.ssl", "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");

//Create an Authenticator. You will find the SMTPAuthenticator class defination later
Authenticator auth = new SMTPAuthenticator();

//Create a Session from the Properties and the Authenticator
Session session = Session.getInstance(props, auth);
session.setDebug(debug);

// Create a MimeMessage
MimeMessage msg = new MimeMessage(session);

// Set the from and to address
InternetAddress addressFrom = new InternetAddress(from);
msg.setFrom(addressFrom);

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

//Set message subject and text
msg.setSubject(subject);
msg.setText(message);

//Finally now send the message.
try {
Transport.send(msg);
} catch (MessagingException messagingException) {
messagingException.printStackTrace();
} catch (Exception ex) {
ex.printStackTrace();
}

}

//SimpleAuthenticator is used to do simple authentication
//when the SMTP server requires it.

private class SMTPAuthenticator extends javax.mail.Authenticator {

@Override
public PasswordAuthentication getPasswordAuthentication() {
String username = SMTP_AUTH_USER;
String password = SMTP_AUTH_PWD;
return new PasswordAuthentication(username, password);
}
}
}

And here is the client code that uses the MailUtility class for sending mail.

String emailMsgTxt = "Hello, this is a test mail from my mail application.\n";
String emailSubjectTxt = "Test Mail";
String emailFromAddress = "yourgmailid@gmail.com";
String[] receipentList=
 {
      "abc@gmail.com",
      "wxx@yahoo.com"
 };
try
{
      MailUtility smtpMailSender = new MailUtility();
      smtpMailSender.postMail(receipentList, emailSubjectTxt, emailMsgTxt, emailFromAddress);
} catch (MessagingException messagingException)
{
      messagingException.printStackTrace();
} catch (Exception ex)
{
     ex.printStackTrace();
}

That's all. Another day I will describe how you can send mail asynchronously using this mail API.