« JavaFXOne is Going to Rock! (JavaFX Sessions at JavaOne 2008) | Main | Roll the Dice - A Compiled JavaFX Script Example »

March 19, 2008

A JavaFX Script Calendar that Displays a Google Calendar Feed

Today I'd like to show you the humble beginnings of a JavaFX Script calendar that displays a Google Calendar feed.  It is currently pointing to my Google Calendar, which I've sparsely populated with some sample data.  You can change the program to point to your Google Calendar if you choose. 

I'll improve this Calendar program over time, but wanted to demonstrate JavaFX Script's ability to easily parse an XML stream over the Internet.  You may also want to take a look at the Compiled JavaFX Script Now Speaks JSON post which demonstrates parsing JSON streams over the Internet.  Here's a screenshot of today's example, followed by the program's code:

Calendarjfx


The Code Behind the User Interface

Obviously there are many improvements that I can make to this calendar, but here are the four source files that comprise this example in its current state:


CalendarJFX.fx

/*
*  CalendarJFX.fx -
*  The main program for a compiled JavaFX calendar program
*
*  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
*  to serve as a compiled JavaFX Script example.
*/

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;

Frame {
  var calModel =
    CalendarModel {}
  title: "CalendarJFX"
  width: 600
  height: 600
  visible: true
  content:
    BorderPanel {
      top:
        BorderPanel {
          left:
            FlowPanel {
              content: [
                Button {
                  text: "<<"
                  action:
                    function():Void {
                      calModel.prevYear();
                    }
                },
                Button {
                  text: "<"
                  action:
                    function():Void {
                      calModel.prevMonth();
                    }
                }
              ]
            }
          center:
            FlowPanel {
              content:
                SimpleLabel {
                  text: bind "{calModel.selectedMonthStr} {calModel.selectedYearStr}"
                  font:
                    Font {
                      size: 24
                      style: FontStyle.BOLD
                    }
                }
            }
          right:
            FlowPanel {
              content: [
                Button {
                  text: ">"
                  action:
                    function():Void {
                      calModel.nextMonth();
                    }
                },
                Button {
                  text: ">>"
                  action:
                    function():Void {
                      calModel.nextYear();
                    }
                }
              ]
            }
          bottom:
            GridPanel {
              // TODO: Internationalize days of the week
              var days = ["Sun", "Mon", "Tue",
                          "Wed", "Thu", "Fri", "Sat"]
              rows: 1
              columns: 7
              cells:
                for (day in days) {
                  SimpleLabel {
                    text: day
                    font:
                      Font {
                        size: 18
                        style: FontStyle.BOLD
                      }
                    horizontalAlignment:
                      HorizontalAlignment.CENTER
                  }
                }
            }
        }
      center:
        GridPanel {
          vgap: 1
          hgap: 1
          rows: 6
          columns: 7
          cells:
            for (idx in [1..42]) {
              CalendarCell {
                calModel: calModel
                dayOfMonthStr: bind calModel.getDayInMonthStrForCell(idx as Integer);
                cellGregCal: bind calModel.getDateForCell(idx as Integer);
              }
            }
        }
    }
  onClose:
    function():Void {
      System.exit(0);
    } 
}


CalendarCell.fx

/*
*  CalendarCell.fx -
*  The UI for an individual cell (day) in the calendar
*
*  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
*  to serve as a compiled JavaFX Script example.
*/

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.System;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.GregorianCalendar;

public class CalendarCell extends CompositeWidget {
  public attribute calModel:CalendarModel;
  attribute dayInMonthFmt = new SimpleDateFormat("d");
  public attribute cellGregCal:GregorianCalendar;
  public attribute dayOfMonthStr:String;

  public function composeWidget():Widget {
    BorderPanel {
      top:
        FlowPanel {
          background: Color.LIGHTBLUE
          alignment: Alignment.TRAILING
          content: [
            SimpleLabel {
              text: bind dayOfMonthStr
              font:
                Font {
                  size: 12
                  style: FontStyle.BOLD
                }
            }
          ]
        }
      center:
        Box {
          orientation: Orientation.VERTICAL
          content: bind
            for (calEntry in calModel.calEntries
              where cellGregCal.get(Calendar.YEAR) ==
                    calEntry.startTime.get(Calendar.YEAR) and
                    cellGregCal.get(Calendar.MONTH) ==
                    calEntry.startTime.get(Calendar.MONTH) and
                    cellGregCal.get(Calendar.DAY_OF_MONTH) ==
                    calEntry.startTime.get(Calendar.DAY_OF_MONTH)) {
              SimpleLabel {
                text: calEntry.title
              }
            }
        }
    }
  }
}


CalendarModel.fx

/*
*  CalendarModel.fx -
*  The model behind a compiled JavaFX calendar program
*
*  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
*  to serve as a compiled JavaFX Script example.
*/

import javafx.xml.*;
import java.text.SimpleDateFormat;
import java.lang.System;
import java.util.Calendar;
import java.util.GregorianCalendar;

class CalendarModel {
  attribute calendarFeedURI =
    "http://www.google.com/calendar/feeds/james.l.weaver%40gmail.com/public/full";
  attribute docBuilder =
    DocumentBuilder {
      namespaceAware:true
      validating:true
      ignoringComments:false
    };
  attribute document =
    docBuilder.parseURI(calendarFeedURI);
  attribute calEntries:CalendarEntry[];
  attribute selectedGregCal:GregorianCalendar = new GregorianCalendar();
  attribute utilGregCal:GregorianCalendar = new GregorianCalendar();
  attribute selectedMonth:Integer;
  attribute selectedYear:Integer;
  attribute dayInMonthFmt = new SimpleDateFormat("d");
  attribute monthFmt = new SimpleDateFormat("MMMM");
  attribute yearFmt = new SimpleDateFormat("yyyy");
  attribute cellNumber:Integer;
  attribute selectedDayInMonthStr:String;
  attribute selectedMonthStr:String;
  attribute selectedYearStr:String;
 
  postinit {
    var calElements = document.getElementsByTagName("entry");
    calEntries = for (calElement in calElements)
      CalendarEntry {
        title: calElement.queryString("title")
        startTimeStr: calElement.queryString("when/@startTime")
        endTimeStr: calElement.queryString("when/@endTime")
        location: calElement.queryString("where/@valueString")
      };
    populateDateParts();
  }
 
  function prevMonth():Void {
    selectedGregCal.add(Calendar.MONTH, -1);
    selectedMonth = selectedGregCal.get(Calendar.MONTH);
    populateDateParts();
  }

  function nextMonth():Void {
    selectedGregCal.add(Calendar.MONTH, 1);
    selectedMonth = selectedGregCal.get(Calendar.MONTH);
    populateDateParts();
  }

  function prevYear():Void {
    selectedGregCal.add(Calendar.YEAR, -1);
    selectedYear = selectedGregCal.get(Calendar.YEAR);
    populateDateParts();
  }

  function nextYear():Void {
    selectedGregCal.add(Calendar.YEAR, 1);
    selectedYear = selectedGregCal.get(Calendar.YEAR);
    populateDateParts();
  }

  function populateDateParts():Void {
    var selDate = selectedGregCal.getTime();
    selectedDayInMonthStr = dayInMonthFmt.format(selDate);
    selectedMonthStr = monthFmt.format(selDate);
    selectedYearStr = yearFmt.format(selDate);
  }
 
  function getDateForCell(cellNumber:Integer):GregorianCalendar {
    utilGregCal.set(Calendar.YEAR, selectedYear);
    utilGregCal.set(Calendar.MONTH, selectedMonth);
    utilGregCal.set(Calendar.DAY_OF_MONTH, 1);
    var firstDayOffset = utilGregCal.get(Calendar.DAY_OF_WEEK);
    utilGregCal.add(Calendar.DAY_OF_MONTH, firstDayOffset * -1 + cellNumber);
    return utilGregCal;
  }

  function getDayInMonthStrForCell(cellNumber:Integer):String {
    utilGregCal.set(Calendar.YEAR, selectedYear);
    utilGregCal.set(Calendar.MONTH, selectedMonth);
    utilGregCal.set(Calendar.DAY_OF_MONTH, 1);
    var firstDayOffset = utilGregCal.get(Calendar.DAY_OF_WEEK);
    utilGregCal.add(Calendar.DAY_OF_MONTH, firstDayOffset * -1 + cellNumber);
    dayInMonthFmt.format(utilGregCal.getTime());
  }
}


CalendarEntry.fx

/*
*  CalendarEntry.fx -
*  A calendar entry, which is part of the model.
*
*  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
*  to serve as a compiled JavaFX Script example.
*/

import java.lang.System;
import java.text.SimpleDateFormat;
import java.util.Locale;
import java.util.Calendar;
import java.util.Date;

class CalendarEntry {
  private attribute sdf = new SimpleDateFormat
      ("yyyy-MM-dd'T'HH:mm:ss.SSSZ");
  attribute title:String;
  attribute startTime:Calendar;
  attribute endTime:Calendar;
  attribute startTimeStr:String on replace {
    //TODO: Accommodate all-day events
    var d:Date = sdf.parse("{startTimeStr.substring(0, 26)}{startTimeStr.substring(27)}");
    var cal:Calendar = Calendar.getInstance();
    cal.setTime(d);
    startTime = cal;
  };
  attribute endTimeStr:String on replace {
    var d:Date = sdf.parse("{endTimeStr.substring(0, 26)}{endTimeStr.substring(27)}");
    var cal:Calendar = Calendar.getInstance();
    cal.setTime(d);
    endTime = cal;
  };
  attribute location:String;
}

Enjoy, and as always, please post a comment if you have any questions.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Immediate eBook (PDF) download available at the book's Apress site

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/t/trackback/2709996/27240922

Listed below are links to weblogs that reference A JavaFX Script Calendar that Displays a Google Calendar Feed:

Comments

I found how, on the link you provided.
Sorry for the previous post.

Thank you for the answer.

The Javafx plugin does not appear in the available plugins for Netbeans 6.1 (in Tools->Plugins);
Do you know how i may install the plugin for Netbeans 6.1

NetBeans supports interpreted JavaFX Script, which is quickly being replaced by compiled JavaFX Script. To build and run compiled JavaFX Script programs, either use the instructions in this tutorial:
http://java.sun.com/developer/technicalArticles/scripting/javafx/ria_1/

Or, you can use the NetBeans beta 6.1 version with the compiled JavaFX Script plugin. See information on the OpenJFX community site:
https://openjfx.dev.java.net/

Thanks,
Jim Weaver

The program code does not compile in NetBeans 6.0.1

Post a comment

If you have a TypeKey or TypePad account, please Sign In