Friday, March 18, 2011

Create a Calendar View with JQuery UI Datepicker

jQuery UI's Datepicker widget is widely used in form to select a date. Today I'm going to show you how to use Datepicker to create a calendar month view.


Demo can be found here

1. Let's begin with those two sample appointments


//sample appointments
var appointment2= new Object;
appointment2.date=new Date(2010, 2, 25);//25th March (month start from 0)
appointment2.note="iPad2 goes Australia";

var appointment1= new Object;
appointment1.date=new Date(2010, 2, 30);
appointment1.note="Go to movie";

var appointments = [appointment1, appointment2];


2. Display Datepicker in inline mode and enlarge it


Define Div to display it inline


By default, the datepicker is very small. But we can change font size to make it bigger.
 div.ui-datepicker {
   font-size: 300%;
}


3. initialize Datepicker and highlight appointment date

$(function(){
 
 $('#calendarMonthView').datepicker({ 
     beforeShowDay: highlightDays
 });
 
       addNote();
});

function highlightDays(date) {
    for (var i = 0; i < appointments.length; i++) {
 
     if (appointments[i].date.getDate() == date.getDate()&&appointments[i].date.getMonth() == date.getMonth()) {
      
//"highlight" is the css class will be added.
//appointments[i].note will be added as "title" attribute
        return [false,"highlight",appointments[i].note]; 
                 }
         }
     return [true, ""];//enable all other days
 
} 

4. add note text

we have highlight very appointment date with "highlight" css class, so we just iterate them to add note text.
function addNote(){
 
  $('.highlight').each(function(index) {
  
   var noteId="note"+index;

   var top = $(this).offset().top;
   var left = $(this).offset().left;

   var noteDiv = '
' + this.title + '
'; $('body').append( noteDiv ); $("#"+noteId).css("top", Math.round(top)+"px").css("left", Math.round(left)+"px"); }); }
we need a little bit work on the css for the note text.
.highlight {

  background-color: red;
}

 .note {
  font-size: 80%;
    position: absolute;  
 color:red;
    z-index: 1000;
}

Tuesday, March 15, 2011

Kick Start GWT Poject with gwt-maven-plugin

It's easy to start a GWT project in Eclipse with GWT Plugin for Eclipse. However, it's getting harder to manage the project while the dependencies growing, such as introducing Spring, Hibernate, JPA into your project. Therefore, I will show you how to kick start GWT Maven sample project.

1. create GWT project using mojo's gwt-maven-plugin archetype

mvn archetype:generate -DarchetypeRepository=repo1.maven.org -DarchetypeGroupId=org.codehaus.mojo -DarchetypeArtifactId=gwt-maven-plugin -DarchetypeVersion=2.2.0

2. input project information defined by properties
[INFO] Archetype defined by properties
Define value for module: : HelloGwt
Define value for groupId: : com.sample
Define value for artifactId: : HelloGwt
Define value for version: 1.0-SNAPSHOT: :
Define value for package: com.sample: :

3. import this project in eclipse and add generated-sources into build path.

Using "Import -> Existing Projects into Workspace" to import the "HelloGwt" into Eclipse.

However, you will find there is a error, complaining about cannot find GreetingServiceAsync calss. But if you run "mvn gwt:run", your application can run sucessful.

This is gwt-maven-plugin automatically generate Async service interface for us (in target/generated-sources/gwt), but did not include it in eclipse's build path. You can also use gwt:generateAsync
to do the job after you create another service.

So right click on "HelloGwt" project, select "Build path -> Configure Build Path" and add "target/generated-sources/gwt" into source folder.

Now you can enjoy maven in your gwt project.