Skip to content

Rough Book

random musings

Menu
  • About Me
  • Contact
  • Projects
    • bAdkOde
    • CherryBlossom
    • FXCalendar
    • Sulekha
Menu

FXCalendar

FXCalendar is a calendar widget that I wrote in JavaFX script. I mainly did it to get a grasp of the language and to familiarize myself with its features. Since it's my first try, and also because I don't have that much experience in writing Java GUI's, I believe the code's probably not as good as it could be. Nevertheless, it was a good learning experience and I did have fun writing it. JavaFX uses a scene graph to render its GUI elements. This is different from the Model/View/Controller pattern that Swing uses. Also, JavaFX uses a declarative syntax for its GUI, which is different from the traditional imperative approach (though both can be used). Here's an example of a "Hello World" program in both styles:

Declarative Syntax:

[sourcecode lang="java"]
import javafx.ext.swing.*;

SwingFrame {
title: "Hello World!";
width: 100;
height: 50;
content: Label {
text: "Hello World!";
}
visible: true;
}
[/sourcecode]

Traditional Syntax:

[sourcecode lang="java"]
import javafx.ext.swing.*;

var myFrame:SwingFrame = new SwingFrame();
var myLabel:Label = new Label();

myLabel.text = "Hello World!";
myFrame.width = 200;
myFrame.height = 50;
myFrame.visible = true;
myFrame.content = myLabel;
[/sourcecode]

The declarative style is a lot more intuitive than the traditional approach, and as the complexity of the GUI increases, much easier to read. Though the intent of JavaFX is to create RIA's (Rich Internet Applications), you can use it to do other stuff as well. The language has a bunch of neat features like incremental/lazy evaluation through binding, list comprehensions, triggers, and closures. Also, since JavaFX is built on top of Java, you can easily use Java objects. For example:

[sourcecode lang="java"]
import java.util.Calendar;
import java.util.GregorianCalendar;
import java.util.Date;
import java.text.DateFormatSymbols;
import javafx.ext.swing.*;

var calendar:Calendar = new GregorianCalendar();
var today:Date = new Date();
var dfs:DateFormatSymbols = new DateFormatSymbols();
var monthNames = dfs.getMonths();

calendar.setTime(today);

SwingFrame {
title: "Today's Date";
width: 200;
height: 50;
content: Label {
text: "Today is " + monthNames[calendar.get(Calendar.MONTH)] + " " + calendar.get(Calendar.DATE) +
", " + String.valueOf(calendar.get(Calendar.YEAR));
}
visible: true;
}
[/sourcecode]

As you can see, you can easily embed Java objects in your JavaFX code. I won't concentrate much on describing the language right now, because there's quite a bit to go into. If you're interested, you can take a look here for an introduction to the language, and here for the preview API. Anyway, so here's a screenshot of the widget running on Firefox 3 on my Ubuntu laptop (the theme is a Leopard theme):

Calendar widget

The code for that widget is pretty simple:

[sourcecode lang="java"]
import java.util.Calendar;
import java.util.GregorianCalendar;
import java.util.Date;
import java.text.DateFormatSymbols;
import java.lang.System;
import javafx.application.Application;
import javafx.application.Stage;
import javafx.scene.*;
import javafx.scene.geometry.Rectangle;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.effect.*;

var widgetWidth = 400;
var widgetHeight = 350;
var row = 0;

var calendar = new GregorianCalendar();
var today = new Date();
var dfs = new DateFormatSymbols();
calendar.setTime(today);

var todaysDate = calendar.get(Calendar.DATE);
var monthNames = dfs.getMonths();
var daysOfTheWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

Application {
stage: Stage {
content:
Group {
id: "layout"
content: [
Rectangle {
x: 0 y: 0 width: widgetWidth height: widgetHeight arcWidth: 50 arcHeight: 50;
fill: LinearGradient {
startX: 0 startY: 0 endX: 0 endY: 1
stops: [
Stop { offset: 0 color: Color.rgb(255,255,255,0.8)},
Stop { offset: 1 color: Color.rgb(0,0,0,0.8) },
]
}
},

Rectangle {
x: 0 y: 0 width: widgetWidth height: widgetHeight arcWidth: 50 arcHeight: 50;
stroke: Color.web("#555");
fill: LinearGradient {
startX: 0 startY: 0 endX: 0 endY: 1;
stops: [
Stop { offset: 0 color: Color.web("#b3b3b3") },
Stop { offset: 0.08 color: Color.web("#555555") },
Stop { offset: 0.25 color: Color.web("#131313") },
Stop { offset: 0.75 color: Color.web("#131313") },
Stop { offset: 0.95 color: Color.web("#181818") },
Stop { offset: 1 color: Color.web("#434343") }
];
}
},

Text {
y:15;
x:15;
textOrigin: TextOrigin.TOP;
content: monthNames[calendar.get(Calendar.MONTH)];
font: Font { name: "Arial" size: 20 style: FontStyle.BOLD };
fill: Color.web("#FFFFFF");
smooth: true;
visible: true;
},

Text {
y:15;
x:widgetWidth - 20;
textOrigin: TextOrigin.TOP;
font: Font { name: "Arial" size: 20 style: FontStyle.BOLD };
content: String.valueOf(calendar.get(Calendar.YEAR));
fill: Color.web("#FFFFFF");
smooth: true;
visible: true;
horizontalAlignment: HorizontalAlignment.RIGHT;
},

for(dayName in daysOfTheWeek) {

Text {
y: 50;
x: 55 * (indexof dayName + 1) - 22;
textOrigin: TextOrigin.TOP;
font: Font { name: "Arial" size:15 style: FontStyle.BOLD };
content: dayName;
fill: Color.web("#FFFFFF");
smooth: true;
visible: true;
horizontalAlignment: HorizontalAlignment.CENTER;
}
},

for(date in [1..calendar.getActualMaximum(Calendar.DAY_OF_MONTH)]) {
calendar.set(Calendar.DATE, date);

//We don't want to jump to the next row if the 1st is a Sunday
if(calendar.get(Calendar.DAY_OF_WEEK) == Calendar.SUNDAY and date != 1) {
row++;
}

var dateText = Text {
y:(40 * row) + 90;
x:55 * calendar.get(Calendar.DAY_OF_WEEK) - 20;
textOrigin: TextOrigin.TOP;
font: Font { name: "Arial" size:15 style: FontStyle.BOLD };
content: String.valueOf(date);
fill: Color.web("#CCCCCC");
smooth: true;
visible: true;
horizontalAlignment: HorizontalAlignment.CENTER;
};

if(todaysDate == calendar.get(Calendar.DATE)) {
dateText.fill = Color.web("#FFFFFF");
}

//In JavaFX (similar to Groovy) the return-value of a block is the result of
//the last evaluated expression

dateText;
}
]
}
}
}
[/sourcecode]

I know it kinda looks like a "death by braces" thing, but I found it a whole lot easier to picture the GUI in my mind using the declarative syntax. I also think it looks a whole lot simpler than the Swing equivalent. Notice that the API provides you a bunch of nifty things like linear gradients. There's a bunch of other stuff in the API too, including support for animations, effects, and transformations. Now for the widget itself. You can embed the widget in a page by using the tag. So in a sense, JavaFX applications are just applets, but way better. Thought it may seem like Sun is arriving really late to the game by trying to compete with Flash and Silverlight, I think the fact that JavaFX is built on Java and thus has the support of a large community, and a rich API, gives JavaFX a promising future. The only problem I see right now is the pretty ridiculous (first-time) load-time for the widget. It has a few JavaFX jars to load, which is probably why this is happening. But like I mentioned earlier, this is still a previow so I'm pretty sure Sun will iron out all the kinks by the time 1.0 rolls out. Oh yeah, the widget. Here it is:

2 thoughts on “FXCalendar”

  1. Pingback: Week 8 » LIS 7440
  2. Pingback: JavaFX » LIS 7440

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Archives

  • February 2023
  • April 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • June 2017
  • March 2017
  • November 2016
  • August 2016
  • July 2016
  • June 2016
  • February 2016
  • August 2015
  • July 2014
  • June 2014
  • March 2014
  • December 2013
  • November 2013
  • September 2013
  • July 2013
  • June 2013
  • March 2013
  • February 2013
  • January 2013
  • October 2012
  • July 2012
  • June 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • July 2011
  • June 2011
  • May 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • August 2008
  • March 2008
  • February 2008
  • November 2007
  • July 2007
  • June 2007
  • May 2007
  • March 2007
  • December 2006
  • October 2006
  • September 2006
  • August 2006
  • June 2006
  • April 2006
  • March 2006
  • January 2006
  • December 2005
  • November 2005
  • October 2005
  • September 2005
  • August 2005
  • July 2005
  • June 2005
  • May 2005
  • April 2005
  • February 2005
  • October 2004
  • September 2004
  • August 2004
  • July 2004
  • June 2004
  • May 2004
  • April 2004
  • March 2004
  • February 2004
  • January 2004
  • December 2003
  • November 2003
  • October 2003
  • September 2003
  • July 2003
  • June 2003
  • May 2003
  • March 2003
  • February 2003
  • January 2003
  • December 2002
  • November 2002
  • October 2002
  • September 2002
  • August 2002
  • July 2002
  • June 2002
  • May 2002
  • April 2002
  • February 2002
  • September 2001
  • August 2001
  • April 2001
  • March 2001
  • February 2001
  • January 2001
  • December 2000
  • November 2000
  • October 2000
  • August 2000
  • July 2000
  • June 2000
  • May 2000
  • March 2000
  • January 2000
  • December 1999
  • November 1999
  • October 1999
  • September 1999
©2023 Rough Book | Built using WordPress and Responsive Blogily theme by Superb
All original content on these pages is fingerprinted and certified by Digiprove