Wednesday, March 31, 2010

Velocity templates for Email

When sending customized emails a developer faces how to make template available to those in charge of configuring how the content will look like.

Apache Velocity is a perfect template Engine that allows the developer to send emails keeping separation of concerns.

I am showing here three pieces of code. The first shows a typical velocity template, the second how to merge some context variables into the template and the third just a wrapper over the Java Mail API. It should be straightforward to put them all together.

A Velocity Template

<h1>Welcome to $welcomeTo</h1>
    <div id="countdown">
      #set($list = ["4", "3", "2", "1", "Blast Off!"])

      #foreach($item in $list)
        $item
      #end

    </div>
    <h2>Products</h2>
    <p>Buying $productList.size() products!</p>
    #set( $count = 1 )

    <TABLE>
        #foreach( $prod in $productList )

          <TR>
            <TD>$count</TD>
            <TD>$prod.product</TD>
            <TD>$prod.price</TD>
          </TR>
          #set( $count = $count + 1 )
        #end

    </TABLE>
    <h2>Billing address</h2>
    <div id="billing-address">
        Name: $userMap.name<br/>
        Country: $userMap.country<br/>
        City: $userMap.city<br/>
    </div>

Java merging some cotext into template

import java.io.StringWriter;
import org.apache.velocity.app.Velocity;
import org.apache.velocity.VelocityContext;
import java.util.Map;
import java.util.HashMap;
import java.util.List;
import java.util.ArrayList;

public class VelocityExample
{
public static void main( String args[] ) throws Exception
{
//Init the runtime engine.

Velocity.init();

//Make a Context

VelocityContext context = new VelocityContext();

//Put simple data in it
context.put("welcomeTo", "New York");
context.put("technology", "Velocity");

//More complex data
List list = new ArrayList();
Map map = new HashMap();

map.put("product", "umbrella");
map.put("price", "$9.99");
list.add( map );

map = new HashMap();
map.put("product", "shoes");
map.put("price", "$39.99");
list.add( map );

map = new HashMap();
map.put("product", "pants");
map.put("price", "$19.99");
list.add( map );

Map userMap = new HashMap();
userMap.put("name", "Mr Bean");
userMap.put("country", "UK");
userMap.put("city","London");



context.put("productList", list);
context.put("userMap", userMap);


//render a template

StringWriter w = new StringWriter();

Velocity.mergeTemplate("testtemplate.vm", context, w );
System.out.println(" template : " + w );

//Render a String

String s = "We are using $technology to render this string";
w = new StringWriter();
Velocity.evaluate( context, w, "mystring", s );
System.out.println(" string : " + w );
}
}

A Java Mail API wrapper

import java.util.Properties;

import javax.mail.BodyPart;
import javax.mail.Message;
import javax.mail.Multipart;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeBodyPart;
import javax.mail.internet.MimeMessage;
import javax.mail.internet.MimeMultipart;


public class EmailService {

public void sendEmail(String emailServer, String mailFrom, String rcptTo, String subject, String textMessage, String htmlMessage) throws Exception{
sendEmail(emailServer, mailFrom, rcptTo, subject, textMessage, htmlMessage, null, null);
}

public void sendEmail(String emailServer, String mailFrom, String rcptTo, String subject, String textMessage, String htmlMessage, String rcptCc, String rcptBcc) throws Exception{
boolean sendText = !Utils.isEmpty(textMessage);
boolean sendHTML = !Utils.isEmpty(htmlMessage);
if(!sendText){
throw new Exception("I need a message at least in plain text. I also handle HTML. Please supply the message to proceed.");
}
if(!sendText && !sendHTML){
throw new Exception("I need a message in plain text, HTML or both to proceed.");
}
// Create the message to send
Properties props = new Properties();
props.put("mail.smtp.host", emailServer);
Session session = Session.getInstance(props,null);
MimeMessage message = new MimeMessage(session);

// Create the email addresses involved
InternetAddress from = new InternetAddress(mailFrom);
//InternetAddress to = new InternetAddress(rcptTo);

// Fill in header
message.setSubject(subject);
message.setFrom(from);
if (!Utils.isEmpty(rcptTo)) {
message.addRecipients(Message.RecipientType.TO, InternetAddress.parse(rcptTo.replaceAll(";", ",")));
}
if(!Utils.isEmpty(rcptCc)){
message.addRecipients(Message.RecipientType.CC, InternetAddress.parse(rcptCc.replaceAll(";", ",")));
}
if(!Utils.isEmpty(rcptBcc)){
message.addRecipients(Message.RecipientType.BCC, InternetAddress.parse(rcptBcc.replaceAll(";", ",")));
}

// Create a multi-part to combine the parts
Multipart multipart = new MimeMultipart("alternative");

// Create your text message part
BodyPart messageBodyPart = new MimeBodyPart();
messageBodyPart.setText(textMessage);

// Add the text part to the multipart
multipart.addBodyPart(messageBodyPart);

if(sendHTML){
// Create the html part
messageBodyPart = new MimeBodyPart();
messageBodyPart.setContent(htmlMessage, "text/html");
}


// Add html part to multi part
multipart.addBodyPart(messageBodyPart);

// Associate multi-part with message
message.setContent(multipart);

// Send message
Transport.send(message);
}
}

Monday, March 29, 2010

Mavenizing Liferay Extension Implementation JAR File

Extension development with Liferay is composed of several parts. One of them is related to buiding ext-impl.jar which after deployment overrides or can override several portal characteristics.

I have written a tutorial where I show how I mavenized the extension implementation JAR file (ext-impl.jar).

Sunday, March 28, 2010

Backup and Restore MySQL Liferay Database

In a development team you better have DB migrations that ensure your whole team can work locally pointing to the same DB schema and ideally same data.

Below are simple steps to backup and restore and existing Liferay MySQL environment:

1. Backup the source DB:
mysqldump -u root -prootroot lportal > lportal-backup.sql
2. Create the destination DB if it does not exist:
msql>create database lportal;
3. Restore the destination DB from source:
mysql -u root -proot lportal < lportal-backup.sql


4. Do not forget to re-assign permissions for liferay user
GRANT SELECT,INSERT,UPDATE,DELETE,CREATE,DROP ON lportal.* TO 'liferay'@'localhost';
5. Login to Liferay and reindex: Go to Control Panel; Server; Server Administration; Reindex all search indexes.

Friday, March 26, 2010

Customizing Liferay

I am putting together a tutorial that I plan to update with those Liferay customizations that are commonly needed and I have the opportunity to test.

Liferay is a big monster and people get afraid of it when they first meet. It takes time to get used to the way customizations are done. You have the extension environment for some core Portal changes like changing the landing page, you have theme development to change the creative of the site, layout development to arrange portlets, the Control Panel Settings option from where the company icon can be changed and so much more like applying different loook and feels even per page.

As my goal is a quick introduction and not to write a book I will go little by little documenting the most common challenges a developer first face when trying to Customize the monster.

Wednesday, March 24, 2010

Building and Deploying Liferay Jsp Portlets with Maven

I have written a tutorial showing how to build a Liferay Jsp Portlet with Maven.

I show there how to use forms inside JSP.

In addition I took the Document Library API as an example to show how to interact with Liferay Portal Service layer contained in portal-service.jar

Saturday, March 20, 2010

Chrome extension to remove cookies for current site

This extension is not interested in your personal data nor tracking your activity nor invading by any means your privacy. It just does what it says.
I realized there was not a fast way to kill all cookies for the current site from Google Chrome when I first build the application at the beginning of 2010. Incredibly enough six years later I found people still using it so I decided to open source it and make it a little bit more user friendly.

As a developer I need this feature to rapidly troubleshoot sites I am working on. The name "Remove Cookies for Site" is inspired in a Firefox extension I used when my main development browser was Firefox.

You can download the extension from here. I hope you will find it useful.

The source code can be found in Github.

Friday, March 19, 2010

Building and deploying Spring MVC Pet Portal with Maven

I have written a first tutorial in a series that will be targetting Agile Portlet development with Liferay. My target is to bring some speed to portlets development on the now so popular Liferay Portal.

Stay tuned for more ...

Thursday, March 18, 2010

Sharing VM vdi images in VirtualBox

Sharing VM images in VirtualBox is as easy as locating the vdi file and ship it to your partner.

1. From Virtual Box select New
2. Select proper operating system and name your new VM. Ideally use the same name as the vdi file.
3. Select option "Use existing hard disk" and then point to the vdi file.
4. If the VM will be running a service to be accessible from outside like a web server select Bridging as the network type. You can pick any memory and CPU and so on.

When you start the new VM you might get some scary messages as the OS tries to adapt to the newer configuration (virtual hardware).

A typical problem in Ubuntu is the network will be unavailable. Just deleting the below file and restarting the VM does the trick:

rm /etc/udev/rules.d/70-persistent-net.rules

Friday, March 12, 2010

Glassfish Liferay JPA Hibernate tutorial

Here are the steps to get Liferay running on Glassfish with support for JPA and Hibernate as provider.

Note that this is a production ready configuration (excluding of course security concerns not covered here). I am not using a Liferay bundle but rather the standalone 5.2.3 WAR is deployed in a running Glassfish 3 Prelude AS. I am also using JNDI to locate the JDBC Pool.

Sunday, March 07, 2010

Semantic Web and Separation of Concerns in Java

This is a post about how current implementations in Java (using very popular Java Frameworks) violate Semantic Web principles and the impact this practice has on the final projects and products.

Sample code provided here is available on the web from the projects' sites.

Tools help experimented professionals to get results with minimum efforts. There are some tools that help a cook make a perfect plate. There are other tools that will help a common person cook a given plate providing step by step instructions even though that person is not a professional cook.

There even are tools that claim you can make hundreds of different dishes just after buying them. And then it comes the real cook and says "That tool looks like it may help, but it will limit creativity and so it is not proper for a cook"

Web Software development suffers from lack of separation of concerns [1]. This is reflected in every day decisions that affect companies productivity. Certainly, a single person can build a whole and complicated website. The problem is that it seems not many developers can master the three main aspects concerning Web development: Data, Business Rules and Presentation. If these concepts are mixed, maintenance will become a problem.

The division goes on on Data, Business and Presentation layers. Presentation in particular is divided in Structure (HTML markup), behavior (Javascript) and look-and-formatting (CSS).

The question arises when a company has to grow and suddenly the developer says "I need help. Who should we hire"? Another developer that knows very well all the involved technologies? Productivity cannot be achieved in any mass industry (like World Wide Web is) without division of work. You might rotate developers to make them proficient in different areas, a concept I personally still have to see it works in software, although it has worked for Toyota and its lean line of assembly.

So the project goes to production and your first developer has to correct a serious bug. He tries to understand what could possibly be failing and then he goes straight to the pieces of code he is suspicious about just to find out the second developer did not work exactly the same way he would. "OK, we need to standardize the way we work because I had to reverse engineer the whole code to find out where the problem was", says the first developer.

They decide to use an MVC Framework. After they are done, an important client makes a request: "We want to change the whole look and feel of the site including some rich components". The response is: "We will get it done in a couple of days". But they had to correct some bugs for other clients and they are late. They are not enough people and they ask for another developer. As clients keep on coming, more developers need to be hired and so the question about productivity arises. Is there a way to have a "product" we can sell and just be customized for any number of clients so we do not need more help as we grow? And the answer is Yes, the correct architecture and workforce must be in place.

I am not going to extend about the need for Rules Engines to make the "product" really customizable. I will not debate here the need of Web Services using the same Controllers logic and more. I will concentrate on how Presentation issues slows productivity down.

As the company grows, specialists in different areas are needed. A Designer/Front End Developer, a Database Administrator, a Middle tier developer and a Technical hands-on lead are needed. The latter must be familiar with all areas and he must decide which areas will be affected by the needed implementation. Of course, as a team they correct each other to keep concepts alive. MVC is easy to understand and hard to enforce. When the build/deployment cycle is slow, people are tempted to "solve" the problem violating the MVC pattern and then maintenance problems arise. The technical lead must respond for those violations.

This post could get really long. A whole book could be written about best practices in all areas and phases of Software Development Lifecycle. That is not the purpose of this document though. Let us concentrate on what a Front End developer must do.

The Front End specialist is the owner of the structure, behavior and format of the rendered output. A browser client program shows a User Interface to the end customer and it is a responsibility of the Front End developer to ensure light markup, resource reuse and caching, rich interaction, accessibility, semantic output and more.

The development framework must give the Front End developer total control from Doctype  to </html> or any other start/close tags of any markup.

Good development frameworks are view Agnostic and most of them can definitely be used as so. However the examples coming out of the box most of the time ignore best practices. They end up being proof of concepts for architects deciding which technology to use and ultimately becoming the core of any future implementation.

Let us face it: while a middle tier developer might need a tool like Dreamweaver, a real designer will not. He is the Front end cook. Then, avoid trying to guess from your framework what is the best possible markup to be rendered. Leave that part to the Designer and just give him a Domain Specific Language he can use to insert content coming from middle tier.

Without serious examples this post will be nothing. Here is an analysis of some (but not all) of the most popular Java View technologies out there.

RichFaces

Let us pick and example from http://www.mastertheboss.com/en/web-interfaces/124-jboss-richfaces-tutorial.html

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> 
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <html>
   
<body>  
<f:view>
<h:form>
        
    <div align="center">
       
    <rich:spacer width="1" height="50" />        
    <rich:panel style="width:320px;"> 
        <f:facet name="header">
            <h:outputText value="Login please"></h:outputText>
        </f:facet>
        <h:panelGrid columns="2">
            <h:outputText value="Name: "/>
            <rich:inplaceInput   defaultLabel="Enter username"/>
            <h:outputText value="Email:"/>
            <rich:inplaceInput   defaultLabel="Enter password"/>
              
        </h:panelGrid>
      </rich:panel>
      </div>
  
</h:form>
</f:view>
       
 </body>
</html>

Problems:
* align="center" specifies a layout. Semantic Web dictates markup must specify only intention and never presentation.
* Inline css, no doctype. Performance is affected by both but ultimately cross browser compatibility is hit right up front.
spacer gif. Remember Semantic Web?
* "custom tags" are responsible to render real final markup. This will lead for sure into unaccesible sites. This can cost millions to a company: http://www.dralegal.org/cases/private_business/nfb_v_target.php

ICEfaces

Here is an example of  ICEfaces code that you can download from http://facestutorials.icefaces.org/tutorial/jspStoreProject.html (Registration required):
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root version="1.2"
   xmlns:jsp="http://java.sun.com/JSP/Page"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:ice="http://www.icesoft.com/icefaces/component">
   <jsp:directive.page contentType="text/html;charset=ISO-8859-1" pageEncoding="ISO-8859-1" />
   <f:view>
           <ice:outputDeclaration
            doctypeRoot="html"
            doctypePublic="-//W3C//DTD HTML 4.01 Transitional//EN"
            doctypeSystem="http://www.w3.org/TR/html4/loose.dtd" />
    <html>
       <head>
         <link rel="stylesheet" type="text/css" href="./xmlhttp/css/xp/xp.css"/>
       </head>
       <body>
        <ice:form partialSubmit="true" id="cart">

                    <ice:dataTable border="1" value="#{store.items}" var="storeItem">
                        <ice:column id="column1">
                            <ice:outputText value="#{storeItem.label}"></ice:outputText>
                            <f:facet name="header">
                                <ice:outputText value="Item"></ice:outputText>
                            </f:facet>
                        </ice:column>
                        <ice:column id="column2">
                            <ice:outputText value="#{storeItem.quantity}" id="s"></ice:outputText>
                            <f:facet name="header">
                                <ice:outputText value="Availible"></ice:outputText>
                            </f:facet>
                        </ice:column>
                        <ice:column id="column3">
                            <ice:outputText value="#{storeItem.price}"></ice:outputText>
                            <f:facet name="header"><ice:outputText value="Price" id="text3"></ice:outputText></f:facet>
                        </ice:column>
                        <ice:column id="column4">
                            <ice:outputText value="#{storeItem.purchasedQuantity}"></ice:outputText>
                            <f:facet name="header"><ice:outputText value="Quantity" id="text4"></ice:outputText></f:facet>
                        </ice:column>
                        <ice:column id="column5">
                            <ice:outputText value="#{storeItem.subTotal}"></ice:outputText>
                            <f:facet name="header"><ice:outputText value="Subtotal" id="text5"></ice:outputText></f:facet>
                        </ice:column>
                        <ice:column id="column6">
                          
                            <ice:commandButton value="Add" actionListener="#{storeItem.addToCart}"></ice:commandButton>

                            <f:facet name="header"><ice:outputText value="Add" id="text6"></ice:outputText></f:facet>
                        </ice:column>
                        <ice:column id="column7">
                            <ice:commandButton value="Remove" actionListener="#{storeItem.removeFromCart}"></ice:commandButton>
                            <f:facet name="header"><ice:outputText value="Remove" id="text7"></ice:outputText></f:facet>
                        </ice:column>
                    </ice:dataTable>
                    <ice:panelGrid border="0" columns="4">
                        <ice:outputText value="Grand Total:" style="font-weight: bold"></ice:outputText>
                        <ice:outputText value="#{store.grandTotal}" style="font-weight: bold"></ice:outputText>
                        <ice:commandButton value="Check Out" action="checkout" type="submit"></ice:commandButton>
                        <ice:commandButton value="Reset Cart" actionListener="#{store.resetCart}"></ice:commandButton>
                    </ice:panelGrid>
                    <ice:outputText value="#{cartRenderBean.dummy}"></ice:outputText>
                </ice:form>
       </body>
    </html>
   </f:view>
</jsp:root>


*Here is a statement from their home page (http://www.icefaces.org/main/home/): "With ICEfaces, enterprise Java developers can easily develop rich enterprise applications in Java, not JavaScript". Domain specific Languages exist for a purpose and trying to ignore them with the formula one language does it all is like trying to use Dreamweaver for layout and formatting.
* border, inline CSS: Clear violation of separation.
* Tags wrapping final markup again.
* Why this: <ice:outputText value="Grand Total:" style="font-weight: bold"></ice:outputText> instead of just: <span id="" class="">Grand Total<span> or <div>...</div>

The bottom line here is that Java community seems to be worry about being able to use WYSIWYG tools which after all real Designers do not care about. The solution here is invasive and obtrusive. And let us not even talk about different markup WML, XHTML-BASIC. Look at Liferay forums or Seam forums, or JBoss Portal Forums about those (less than 10 questions partially answered). It looks like supporting a non-Mozilla-Internet Explorer device *always* needs a hack.

JSF

Look at this pure JSF code (from http://www.exadel.com/tutorial/jsf/jsftutorial-kickstart.html):

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<f:loadBundle basename="jsfks.bundle.messages" var="msg"/>

<html>
 <head>
  <title>enter your name page</title>
 </head>
 <body>
   <f:view>
     <h1>
      <h:outputText value="#{msg.inputname_header}"/>
     </h1>
     <h:form id="helloForm">
      <h:outputText value="#{msg.prompt}"/>
      <h:inputText value="#{personBean.personName}" />
      <h:commandButton action="greeting" value="#{msg.button_text}" />
     </h:form>
   </f:view>
 </body>
</html>

* Take a look at http://www.exadel.com/tutorial/jsf/jsftags-guide.html:
* outputLabel adds a span which is wrong.
* selectOneRadio generates a whole table!!!
* Again, why not to allow standard html tags?

Please, do not ignore the real need of a real Designer in your team. After several years being part of software teams using several languages, and in many cases leading those teams, I can confirm the main reason Java teams seem to be the slowest is the lack of separation of concerns in most of the implementations using current and home-made frameworks. This is not about frameworks failing, but about architects and tech leads failing to keep best practices.

JSTL


Here is an example from Sun (http://java.sun.com/developer/technicalArticles/javaserverpages/faster/):

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<html>
<head>
<title>JSTL Implicit Objects</title>
</head>
<body bgcolor="#FFFFCC">
<h3>Header info:</h3>
<c:forEach var="head" items="${headerValues}">
param: <c:out value="${head.key}"/><br>
values:
<c:forEach var="val" items="${head.value}">
<c:out value="${val}"/>
</c:forEach>
<p>
</c:forEach>
</body>
</html>

The Java Standard Tag Library helps eliminate scriplets which make the code simply too big for a presentation layer. It avoids NullPointerException from JSPs, it provides cleaner code for iterations and that is just the beginning. It also parses XML, includes several helper functions and allows to define your own custom tags. The problem comes precisely when developers use taglibs to output markup from the library itself.

The code is definitely verbose though. Again, trying to make the code readable for tools like dreamweaver the Designer has to deal with lot of extra code and again: he does not need Dreamweaver!!!! So why <c:out value="${val}"/> instead of just ${val} or even just $val !!!

Velocity

Templates have been there for a while. I remember the big debate about if Smarty was needed given the fact that PHP was in any case created by his author thinking of it as a templating solution. Well, as a Designer, what you think about the below code taken from http://portals.apache.org/jetspeed-1/tutorial/7/velocity.html?

<HTML>
<BODY>
Hello $customer.Name!
<br/>
Here is a list of your current subscriptions:<br/><br/>
<table>
#foreach( $subscription in $subscriptions )
   #if ( $customer.isSubscribed($subscription) )
      <tr>
        <td>
          $subscription.Name
        </td>
      </tr>
   #end
#end
</table>
</BODY>
</HTML>

"Yeah, cool", answered a Designer I know who -by the way- rocks! Hey Jorge, if you want credits here, I can always edit this post and provide a link to the stuff you want.

Jetspeed Portal, a competitor of Liferay, uses this templating engine. Liferay too, but somehow the community seems to favor more the use of ICEfaces.

The above syntax is as a simple as it can get, and the best solution for a problem is the one that solves it more simply.

Let us even talk about cross domain compatibility. For example, big efforts are done everyday to make sure Desktop code run in Linux can run in Windows and MAC OSX. JQuery has solved a big inter-browser compatibility problem. And the list goes on. I believe simple stuff like Velocity are cross server compatible. With Velocity templates, all you need is a parser able to receive a Context with input variables, and the output will be just existing markup in the template with the content injected from the middle tier. Simple and yet so powerful.

References
[1] http://en.wikipedia.org/wiki/Separation_of_concerns

Monday, March 01, 2010

Be sure your kids browse safe sites

My son uses his home computer to access *only* certain educational pages that I am aware of. How I am so sure? Ubuntu came to my rescue:

1. From Ubuntu top Menu click on Aplications / Accessories / Terminal.
2. Install firestarter:
sudo apt-get install firestarter
3. Close the Terminal Window and click on the top Menu System / Administration / Firestarter. At the end of the Wizard check "Save" so the Firestarter program Window appears.
4. Click on Policy tab.
5. Select from Editing "Outbound Traffic Policy".
6. Check "Restrictive by Default, whitelist traffic"
7. Right click on the box below "Allow connections to host" header.
8. Select "Add Rule" from the contextual menu.
9. Insert for example "gamesgames.com" (without quotes) in the box named "IP, host, network".
10. Click on "Add" button. Click on "Apply Policy button".
11. Your kid can just visit http://gamesgames.com. But you see some images are missing on the site. When you inspect the source of the image (right click on top of the image showing up there and click on properties from the contextual menu to see the URL) you notice it comes from www11.gamesgames.com. So just go ahead and add it to the rules as explained before and get back to the URL.

There is a little work involved here every time you want to open new URLs for your kid. But you would agree with me it is simply worth it.

Very important, do not share with him/her your root password so access to Rules policies cannot be easily changed.

Followers