November 28, 2010

Friendly CSS Error Messages for Java Web Applications

A while ago I had discovered Richard O'Neil's article on Designing Message Boxes. I highly recommend reading the article first.

It's a great tutorial for adding a simple but really nice styles to your web application's error messages using CSS and the now ubiquitous FamFamFam Silk Icons pack.

Here is how it looks

Recently however I decided to improve upon it a little for use in my own applications. So here are the modifications I made:

  • Added better color/display of fonts
  • Added onclick dismissal/hiding of alerts using jQuery

Installation

  1. 1. Download the following images from the FamFamFam Silk Icons pack and save them in your /images folder or something similar:
    • msg_ok.png
    • msg_info.png
    • msg_warning.png
    • msg_error.png
  2. 2. Save the following CSS file as alerts.css and put it in your application's directory structure 
    /* Friendly CSS Error Messages
   Original idea by http://www.richardoneill.com.au/tags/web_design 
   Improved by IdleWorx @ http://blog.idleworx.com
   http://blog.idleworx.com/2010/11/friendly-css-error-messages-for-java.html
*/

.msgOK{
 color:#69A150;
 font-size:1.2em;
 font-family: 'helvetica', Georgia, arial, sans-serif;
 font-weight:bold; 
}

.msgInfo{
 color:#5C7CA0;
 font-size:1.2em;
 font-family: 'helvetica', Georgia, arial, sans-serif;
 font-weight:bold; 
}

.msgWarn{
 color:#BF9E1B;
 font-size:1.2em;
 font-family: 'helvetica', Georgia, arial, sans-serif;
 font-weight:bold; 
}

.msgError{
 color:#AD5E5C; 
 font-size:1.2em;
 font-family: 'helvetica', Georgia, arial, sans-serif;
 font-weight:bold; 
}

.msgOK{
   cursor:pointer;
   cursor:hand;
   background: #E7FFD6 url('../images/msg_ok.png') center no-repeat;
   background-position: 15px 50%;
   text-align: left;
   padding: 5px 5px 5px 45px;
   border-top: 2px solid #8CD76B;
   border-bottom: 2px solid #8CD76B;
   border:2px solid #8CD76B;
   overflow:auto;
   font-size:1.4em;
   font-family:Verdana;
}

.msgInfo{
   cursor:pointer;
   cursor:hand;
   background: #E7F3FF url('../images/msg_info.png') center no-repeat;
   background-position: 15px 50%;
   text-align: left;
   padding: 5px 5px 5px 45px;
   border-top: 2px solid #7BA6D6;
   border-bottom: 2px solid #7BA6D6;
   border:2px solid #7BA6D6;
   overflow:auto;
   font-size:1.4em;
   font-family:Verdana;
}

.msgWarn {
   cursor:pointer;
   cursor:hand;
   background: #fff6bf url('../images/msg_warning.png') center no-repeat;
   background-position: 15px 50%;
   text-align: left;
   padding: 5px 5px 5px 45px;
   border-top: 2px solid #ffd324;
   border-bottom: 2px solid #ffd324;
   border:2px solid #ffd324;
   overflow:auto;   
   font-size:1.4em;
   font-family:Verdana;
}

.msgError {
   cursor:pointer;
   cursor:hand;
   background: #FFE7E7 url('../images/msg_error.png') center no-repeat;
   background-position: 15px 50%;
   text-align: left;
   padding: 5px 5px 5px 45px;
   border-top: 2px solid #E77D7B;
   border-bottom: 2px solid #E77D7B;
   border:2px solid #E77D7B;
   overflow:auto;
   font-size:1.4em;
   font-family:Verdana;
}
  3. 3. Update the CSS file to use the location of the images you saved in step 1 (based on your applications folder structure)
  4. 4. Use the following html code anywhere you want to display these messages (client side) 
     
 
    
  OK message
 
     
 
 
    
  Error Message
 
    
 
 
    
  Warning Message
 
    
 
 
    
  Info Message
  5. If you did everything correctly you should now see something like this:
    [image here]

For Java Web Applications

To simplify things a little if you're dealing with a Java Web Application do the following:

  • Extract the html code into a jsp file called alerts.jsp: 
     
 
    
  OK message
 
     
 
 
    
  Error Message
 
    
 
 
    
  Warning Message
 
    
 
 
    
  Info Message
  • Include alerts.jsp into any other jsp where you need alert messages

This code however won't be too useful in a Java Web Application unless you only display the appropriate messages as needed. To do that here is an improved version of the alerts.jsp file above that only displays the appropriate messages based on request or session attributes set on the server side (eg. in a servlet). You can modify it as needed based on your setup. 



 
 
  

   ${okMessage}
  
 
 
 
 
  

   ${errorMessage}
  

 
 
 
  

   ${warningMessage}
  

 
 
 
  

   ${infoMessage}

If you plan to use this approach don't forget to include the appropriate JSTL taglib directive: 

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Hiding alerts on click with jQuery

Displaying the alerts is ok, but sometimes you want to hide them once the user has seen the message. If you are using jQuery in your application here's how to hide messages (alerts,errors,info or ok messages) by clicking on them:

  • 1. Save the following script in alerts.js 
    function enableClickableAlerts(){
 $(".msgOK").click(function(){
    $(this).hide();
 });
 $(".msgInfo").click(function(){
    $(this).hide();
 });
 $(".msgWarn").click(function(){
    $(this).hide();
 });
 $(".msgError").click(function(){
    $(this).hide();
 });
}
  • 2. Add the following script tag to the header element
  • 3. Add the following code to jQuery's ready() method (placed in a script tag inside the header element) 
    $(document).ready(function() 
     { 
   enableClickableAlerts();
   ...
  }
 );

You can also adapt the code to be more fancy, like only display each message for 3-5 seconds and then automatically hiding it. You know better what you need for your webapp.

Tags: ,