In the previous post we created the UI for adding a new Todo where in we used a Tab, TabPane and added the required controls- TextField and a Button to the Tab.

also read:

• Java FX Tutorials
• Developing a Simple Todo Application using JavaFX, Java and MongoDB
• Using JavaFX Chart API to add charts to Swing applications

Going forward, in this post we will create the UI for listing the Open Todos i.e the Todos which have not been marked as Closed. We intend to implement the following features in the UI:

• Ability to load the Todos when the Tab is selected.
• Obtain a list view for the Todos with a scroll bar if the list takes more vertical space than required.
• For each Todo, provide a button to mark the todo as completed.

Loading the Todo on Tab selection:

We add an EventHandler (class TodoLoader) which is added to the Tab#onSelectionChanged event, which loads the Todos from the repository and creates a GridPane with the task name, date when it was added and the button to mark the Todo as completed. This button, which marks the Todo as closed, uses the CloseTodoHandler.

TodoLoader and CloseTodoHandler implement EventHandler and the handle method is overridden to add the required functionality.

Constructing the Handler for loading the Open Todos:

In the TodoLoader#handle(Event event) method we:

Get all the open todos from the database:
[code lang=”java”]
openTodos = TodoDAO.getOpenTodos();
[/code]

For each Todo we have fetched, create a Label for task text and date added and a button for marking the todo as completed. Also for the button we set its actionEvent handler which is an instance of CloseTodoHandler.
[code lang=”java”]
for(Todo aTodo : openTodos)
{
GridPane todoPane = new GridPane();
Label taskLabel = new Label(aTodo.getTask());
Label dateAdded = new Label(aTodo.getAdded().toString());

CloseTodoHandler closeHandler =
new CloseTodoHandler(todoBox,
todoPane,
aTodo);
Button closeButton = ButtonBuilder.create()
.graphic(new ImageView(
new Image(getClass().getResourceAsStream(‘check.png’))))
.onAction(closeHandler)
.build();

todoPane.add(taskLabel,1,1,5,1);
todoPane.add(dateAdded,1,2,4,1);
todoPane.add(closeButton, 5, 2, 1, 1);
todoBox.getChildren().add(todoPane);
}
[/code]

The code for the complete class which loads the Todos and constructs the required UI is:
[code lang=”java”]
class TodoLoader implements EventHandler<Event>{

List<Todo> openTodos;
VBox todoBox;

TodoLoader(VBox todoBox){
this.todoBox = todoBox;
}
@Override
public void handle(Event event) {
//Clear the existing Todos, for adding new Todos
todoBox.getChildren().clear();
try {
openTodos = TodoDAO.getOpenTodos();
for(Todo aTodo : openTodos)
{
//A component that displays the information for each todo
GridPane todoPane = new GridPane();
Label taskLabel = new Label(aTodo.getTask());
Label dateAdded = new Label(aTodo.getAdded().toString());

//Event handler for handling close operations
CloseTodoHandler closeHandler =
new CloseTodoHandler(todoBox,
todoPane,
aTodo);
Button closeButton = ButtonBuilder.create()
.graphic(new ImageView(
new Image(getClass().
getResourceAsStream(‘check.png’))))
.onAction(closeHandler)
.build();

/*
* Add the task label,
* date added, and the
* close button to the
* gridpane component
*/
todoPane.add(taskLabel,1,1,5,1);
todoPane.add(dateAdded,1,2,4,1);
todoPane.add(closeButton, 5, 2, 1, 1);
todoBox.getChildren().add(todoPane);
}
} catch (UnknownHostException e) {
e.printStackTrace();
}
}
}
[/code]

Now, lets look at some aspects of the CloseTodoHandler.

Constructing the handler for closing the Todos:

Each button which handles closing of todo should be aware of:

• which Todo to close i.e have a reference to the Todo instance
• which GridPane to remove from the VBox, should have a reference to GridPane instance
• which VBox to remove from i.e reference to the VBox instance.

When we are creating the instance of the CloseTodoHandler, we pass in these information as shown
[code lang=”java”]
CloseTodoHandler closeHandler =
new CloseTodoHandler(todoBox,
todoPane,
aTodo);
[/code]

In the handling of this event: we just have to invoke the corresponding DAO method to close the Todo and also remove it from the VBox as shown below:
[code lang=”java”]
@Override
public void handle(ActionEvent actionEvent) {
try {
TodoDAO.setTodoAsCompleted(todo);
todoBox.getChildren().remove(todoPane);
} catch (UnknownHostException e) {
e.printStackTrace();
}
}
[/code]

The complete code for the CloseTodoHandler is:

[code lang=”java”]
class CloseTodoHandler implements EventHandler<ActionEvent>{

VBox todoBox;
GridPane todoPane;
Todo todo;

CloseTodoHandler(VBox todoBox,
GridPane todoPane,
Todo todo){
this.todo = todo;
this.todoBox = todoBox;
this.todoPane = todoPane;
}

@Override
public void handle(ActionEvent actionEvent) {
try {
TodoDAO.setTodoAsCompleted(todo);
todoBox.getChildren().remove(todoPane);
} catch (UnknownHostException e) {
e.printStackTrace();
}
}
}
[/code]

Now we have to build the Tab which uses all the above classes, event handlers to generate the UI as shown in the screen shot above. An instance of VBox is created to add all the Todos on the UI and this instance is passed to the TodoLoader class so that it can use it to populate the UI as shown above in the TodoLoader class definition.
[code lang=”java”]
final VBox todoBox = new VBox();
todoBox.setTranslateX(10);
todoBox.setSpacing(10);

[/code]

As the items can occupy more than the given height of the application, we use ScrollPane to add the Veritcal scroll bars:
[code lang=”java”]
final ScrollPane todoListScroll = ScrollPaneBuilder.create()
.hbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED)
.prefHeight(APP_HEIGHT – 90)
.maxWidth(APP_WIDTH)
.build();
todoListScroll.setContent(todoBox);
[/code]

And finally build the Tab as:
[code lang=”java”]
Tab allTodosTab = TabBuilder.create()
.text(‘All todos’)
.content(todoListScroll)
.closable(false)
.onSelectionChanged(new TodoLoader(todoBox))
.build();
[/code]

We refactor this code into a method and this method is invoked from the TodoAppRunner defined in the previous post.
[code lang=”java”]
private Tab buildShowAllTodoUi(){
final ScrollPane todoListScroll = ScrollPaneBuilder.create()
.hbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED)
.prefHeight(APP_HEIGHT – 90)
.maxWidth(APP_WIDTH)
.build();

final VBox todoBox = new VBox();
todoBox.setTranslateX(10);
todoBox.setSpacing(10);
todoListScroll.setContent(todoBox);

Tab allTodosTab = TabBuilder.create()
.text(‘All todos’)
.content(todoListScroll)
.closable(false)
.onSelectionChanged(new TodoLoader(todoBox))
.build();

return allTodosTab;
}
[/code]

The complete source code can be downloaded from here. I know its been a long series of posts and if you are stuck at any point just let us know via the comments here and we would try to clear out the confusion.

In my previous post:

• I setup the objective of our sample application and named it as TodoFX (I know lot of you would have missed the naming part, lack of creativity in naming drives me create portmanteau of technology and usage of app)
• Created the back end for our sample application, in the process we played around with MongoDB (not much though).

also read:

• Java FX Tutorials
• Developing a Simple Todo Application using JavaFX, Java and MongoDB
• Using JavaFX Chart API to add charts to Swing applications

Continuing with the application, I would like to:

• Add a few updates to the model and backend APIs we had created earlier
• Develop the UI for our application. This would include 2 parts- Developing the UI for Adding new task and Developing the UI to list all uncompleted tasks.

Updates to the model and the backend APIs:

I thought of introduing “id” field, and this would help us in identifying a particular Todo and mark it as completed. The updated Todo class would be:

[code lang=”java”]
public class Todo{
//Among other fields
private String id;
public String getId(){
return id;
}
public void setId (String id){
this.id = id;
}
}
[/code]

Lets also update the TodoDAO, to add a method to get incomplete Todos:

[code lang=”java”]
public class TodoDAO{
//Other methods defined in previous post
public static List getOpenTodos()
throws UnknownHostException{
DB db = DbManager.getDb(DBNAME);
DBCollection collection = db.getCollection(COLLECTION_NAME);
DBObject filterObject = BasicDBObjectBuilder.start()
.add("completed",false)
.get();
DBCursor dbCursor = collection.find(filterObject);
List openTodos = new ArrayList();
while ( dbCursor.hasNext()){
DBObject dbObject = dbCursor.next();
String task = String.valueOf(dbObject.get("task"));
Date added = (Date)dbObject.get("added");
boolean completed = (Boolean)dbObject.get("completed");
Todo todo = new Todo(task,
completed,
added,
dbObject.get("_id").toString());
openTodos.add(todo);
}
return openTodos;
}
}
[/code]
One important take away in the above example is the use of a JSON object in the DBCollection#find(), the JSON object which was passed is the query used for fetching the data. And how do you create the JSON object? Using BasicDBObject or DBObject.
We might have to come back and update the DAO to add a method to set a selected task as completed. ( I am working on the UI to get it working well). Ok, I just went back, tried out the API and here it is how we would update the Todo to set it as completed. We need a JSON object to identify what to update and then a JSON object to set the updated value for the attribute/key we want (and this is the reason why we added the “id” attribute in the Todo Model class). We will add the below method to the TodoDAO class (here I would independently give the method, but its a part of the TodoDAO class)

[code lang=”java”]
public static void setTodoAsCompleted(Todo todoRef)
throws UnknownHostException{
DB db = DbManager.getDb(DBNAME);
DBCollection collection = db.getCollection(COLLECTION_NAME);
DBObject queryObject = BasicDBObjectBuilder.start()
.add("_id", new ObjectId(todoRef.getId()))
.get();
DBObject updateValue = BasicDBObjectBuilder.start()
.add("completed",true)
.get();

collection.update(queryObject,updateValue);
}
[/code]

We make use of DBCollection#update(query,newValue) to update the DB row/JSON object identified by the query.

That’s pretty much I had to add about back end, yeah I know you are more excited to see about JavaFX and the UI, so lets now create a simple UI. I am thinking splitting this UI into one more post and in this post I would explain about the UI for adding new task.

Developing the UI for TodoFX – Add new Task UI:

Once completed, the UI would look like:

For the Add New Todo UI we would use: Tab, TabPane, TextField and Button.

Creating and adding to a Tab:

The components in the Tab for adding a new Todo are:

Field for adding the task name/title:

[code lang=”java”]
TextField tNameField = TextFieldBuilder.create()
.build();
final StringProperty todoTitle = tNameField.textProperty();
[/code]
We use properties to bind the values on the components, with binding the value/text in the component is automatically reflected in the property to which it is bound to. In this case the text of the TextField(tNameField) is bound to the a SringProperty called todoTitle. Read this if you want to get familiar with properties.
Button for saving the todo:

[code lang=”java”]
Button addNewButton = ButtonBuilder.create()
.text("Add")
.onAction(new EventHandler() {
@Override
public void handle(ActionEvent actionEvent) {
Todo todo = new Todo(todoTitle.get());
todoTitle.set("");
try {
TodoDAO.saveTodo(todo);
labelMsg.set("Successfully added the task");
labelVisibility.set(true);
} catch (UnknownHostException ex) {
ex.printStackTrace();
}
}
}
)
.build();
[/code]
Interesting to see here is the use of Builder Pattern for creating the components, this gives a great flexibility in terms of chaining the calls on the same instance. We also added the action for the button, obvious action is to save the Todo. People familiar with Swing applications would be aware of adding action listeners by creating an anonymous inner class. In JavaFX components we create an instance of EventHandler and override EventHandler#handle(ActionEvent) method. With Java 8, these can be replaced by using Lambda expressions/closures.
The components created above should be added to the Tab, and we make use of GridPane to align these components. GridPane is a layout component which allows placing of components into different grids. Aligning the components in GridPane we have,

[code lang=”java”]
GridPane addNewPane = GridPaneBuilder.create()
.hgap(5)
.vgap(5)
.build();

addNewPane.add(msgLabel,1,2,2,1);
addNewPane.add(tNameLabel,1,3);
addNewPane.add(tNameField,2,3);
addNewPane.add(addNewButton,2,5);

Tab addNewTab = TabBuilder.create()
.content(addNewPane)
.text("Add Task")
.closable(false)
.build();
[/code]

Looks like we have completed building the Add New task UI. Let me put together all these creation code:

[code lang=”java”]
import javafx.application.Application;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.ImageViewBuilder;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import net.javabeat.db.Todo;
import net.javabeat.db.TodoDAO;

import java.net.UnknownHostException;
import java.util.List;
import java.util.Set;

public class TodoAppRunner extends Application{

public static final int APP_WIDTH = 200;
public static final int APP_HEIGHT = 300;

public static void main(String[] args)
throws UnknownHostException{
Application.launch(args);
}

@Override
public void start(Stage stage) throws Exception {
BorderPane root = new BorderPane();
Scene scene = new Scene(root, APP_WIDTH,APP_HEIGHT);
Tab addNewTab = buildAddNewTodoUi();
TabPane tabPane = TabPaneBuilder.create()
.tabs(addNewTab)
.build();

root.setCenter(tabPane);
stage.setScene(scene);
stage.setTitle("My Todo’s!");
stage.show();
}

private Tab buildAddNewTodoUi(){
Label msgLabel = LabelBuilder.create()
.text("")
.visible(false)
.build();

TextField tNameField = new TextField();

final StringProperty todoTitle = tNameField.textProperty();
final StringProperty labelMsg = msgLabel.textProperty();
final BooleanProperty lblVisibility = msgLabel.visibleProperty();

Label tNameLabel = new Label("Task");
Button addNewButton = ButtonBuilder.create()
.text("Add")
.onAction(new EventHandler() {
@Override
public void handle(ActionEvent actionEvent) {
Todo todo = new Todo(todoTitle.get());
try {
TodoDAO.saveTodo(todo);
labelMsg.set("Successfully added the task");
lblVisibility.set(true);
todoTitle.set("");
} catch (UnknownHostException ex) {
ex.printStackTrace();
}
}
})
.build();
GridPane addNewPane = GridPaneBuilder.create()
.hgap(5)
.vgap(5)
.build();

addNewPane.add(msgLabel,1,2,2,1);
addNewPane.add(tNameLabel,1,3);
addNewPane.add(tNameField,2,3);
addNewPane.add(addNewButton,2,5);

Tab addNewTab = TabBuilder.create()
.content(addNewPane)
.text("Add Task")
.closable(false)
.build();

return addNewTab;

}
}
[/code]

The source code can be downloaded from here.

In my next post, I will show how to create a UI for listing all the unfinished Todos, and set the Todos as completed from the UI.

Over a series of 2 posts or so, I would try and show how to develop a simple Todo Desktop application using JavaFX as the Frontend, and the well known NoSQL database MongoDB as the Backend and using Java as the glue between both of them. The main aim of developing this application is to understand how we can use MongoDB and its Java driver to communicate with Java applications.

also read:

• Java FX Tutorials
• Developing a Simple Todo Application using JavaFX, Java and MongoDB
• Using JavaFX Chart API to add charts to Swing applications

A brief about MongoDB: It is a document oriented NoSQL database, which stores the data in the form of JSON-like document structure. I can go one and write more, but we can explore as we go along.

In this post, I would cover:

• Installing MongoDB
• Trying out MongoDB using the command line.
• Downloading the Java driver for MongoDB
• Developing the backend for our application.

Installing MongoDB

Download the required MongoDB package from their download site.

Unzip the contents into a directory and lets name it as MONGO_HOME. Update the PATH variable to add the MONGO_HOME/bin. This is useful if you want to run mongo, mongod and other command from any location in your command line.

On your command prompt try $: mongod -version and it should print the version of MongoDB you are using.

Trying out MongoDB using the command line

You have to create a \data\db directory in your C: if you are using Windows or a /data/db directory on Unix, which mongo would use for storing the data.

Start the mongodb database server by running:

[shell]
C:\Users\sanaulla>mongod
mongod –help for help and startup options
Wed May 09 22:28:11 [initandlisten]
MongoDB starting : pid=4992 port=27017 dbpath=/data/db/ 32-bit

[initandlisten] db version v1.8.1, pdfile version 4.5
[initandlisten] waiting for connections on port 27017
[websvr] web admin interface listening on port 28017
[/shell]

Lets connect to this database using the mogndb client.

[shell]
C:\Users\sanaulla>mongo
MongoDB shell version: 1.8.1
connecting to: test
[/shell]

We try out a few simple commands, you can find

[shell]
> use test
switched to db test
> show collections
> book = {"name":"Book1", "publisher":"publisher1"}
{ "name" : "Book1", "publisher" : "publisher1" }
> db.books.save(book)
> db.books.find()
{ "_id" : ObjectId("4faaa578f65827304120d54b"),
"name" : "Book1",
"publisher" : "publisher1"
}
[/shell]

• use command is used to switch the database whose name is provided after the use. If the db doesn’t exist a new one is created.
• show collections shows the collections created in the db. A collection can be considered equivalent to a table in RDBMS, but with a flexible schema.
• book = {} creates a JSON object which represents a JSON like document and is equivalent to a row in the RDBMS table. And the attributes within the JSON object represent the columns of an RDBMS table.
• db.books.save(book) saves the given JSON object into the collection name which is “books” in this case.
• db.books.find() is used to get all the JSON Objects/rows in the given collections, something similar to SELECT * FROM table_name in SQL.

Downloading the Java driver for MongoDB

Download the Java driver for MongoDB from their Java Language Center page, its a jar which has to be added to your applications classpath.

There are a few basics explained here to get you started with the Java Driver. Dont worry, I will go through few of those as we develop the application further.

Developing the backend for our application

Ah, finally! Lets start with building the backend for our Todo application, lets call it TodoFX and also test the backend via the command line.

Starting with the model class for our application, A Todo would have the task name, status i.e whether it is completed or not, date of adding, and date when it was finished.

[code lang=”java”]
//Todo.java
import java.util.Date;

public class Todo {
public Todo(String task,
boolean completed,
Date added){
this.task = task;
this.completed = completed;
this.added = added;
}

public Todo(String task){
this.task = task;
this.added = new Date();
this.completed = false;
}

@Override
public String toString(){
return added+": "+this.getTask();
}

private String task;
private boolean completed;
private Date added;
private Date finished;

public String getTask() {
return task;
}

public void setTask(String task) {
this.task = task;
}

public boolean isCompleted() {
return completed;
}

public void setCompleted(boolean completed) {
this.completed = completed;
}

public Date getAdded() {
return added;
}

public Date getFinished() {
return finished;
}

public void setFinished(Date finished) {
this.finished = finished;
}
}
[/code]

To start persisting the data, we need a database connection to the MongoDB. The Java Driver provides Mongo class which can be used to obtain the database connection. If we use the default constructor then it returns the database connection to the local database. In this example we would do that. I will try to see if I can connect to a cloud database and show the same.

[code lang=”java”]
Mongo mongo = new Mongo();
[/code]

and then use Mongo#getDB(dbName) to return the database where we would like to store our collections and objects. The database object is of type DB.

[code lang=”java”]
DB db = mongo.getDB(name);
[/code]

I extracted these into a different class called DbManager

[code lang=”java”]
//DbManager.java
import com.mongodb.DB;
import com.mongodb.DBCollection;
import com.mongodb.Mongo;
import java.net.UnknownHostException;

public class DbManager {

private static DB db;
public static DB getDb (String name)
throws UnknownHostException {
Mongo mongo = new Mongo();
if ( db == null){
db = mongo.getDB(name);
}
return db;
}
}
[/code]

Ok, so its time to see how we can SAVE and FIND all the todos added. Before that, our database name is: “todoapp” and the collection name is: “todo”

Saving the Todo instance to the database:

Create a DBObject from the data present in the Todo instance. I prefer to use the BasicDBObjectBuilder to create an instance of DBObject.

[code lang=”java”]
DBObject dbObject = BasicDBObjectBuilder.start()
.add("task",todo.getTask())
.add("completed",todo.isCompleted())
.add("added",todo.getAdded())
.get();
[/code]

the BasicDBObjectBuilder#add(), takes in a key, value pair where the key represents the column name and the value represents the item in the column. The advantage with NoSQL is that there is no requirement of a rigid schema. I could have one row with 3 keys, another row with 4 keys and so on.

After creating the DBObject, it has to be added to the collection and then persisted to the database.

[code lang=”java”]
DB db = DbManager.getDb("todoapp");
DBCollection dbCollection = db.getCollection("todo");
dbCollection.save(dbObject);
[/code]

Pretty straight forward right? And here you are done with persisting your data to the database. How simple can this get? I just removed the fear of PreparedStatments, Connections, SQLExceptions and what not.
Note: In all the cases the DbManager is the class which we have created somewhere near the starting of this example.

Retrieving all the Todos from the database:

– Get the database and fetch the collection from it.
– Iterate through the collection and get each of the values for the available keys(or columns)
– Create instance of Todo from these retrieved values.

Let me show the code:

[code lang=”java”]
DB db = DbManager.getDb(DBNAME);
DBCollection dbCollection = db.getCollection(COLLECTION_NAME);
DBCursor dbCursor = dbCollection.find();
List allTodos = new ArrayList();
while ( dbCursor.hasNext()){
DBObject dbObject = dbCursor.next();
String task = String.valueOf(dbObject.get("task"));
Date added = (Date)dbObject.get("added");
boolean completed = (Boolean)dbObject.get("completed");
Todo todo = new Todo(task,completed, added);
allTodos.add(todo);
}
return allTodos;
[/code]

One new thing is the use of DBCursor, which is an iterator over the database results (think ResultSet).

Let me call this class which provides save() and find() as TodoDAO

[code lang=”java”]
//TodoDAO.java
import com.mongodb.*;
import java.net.UnknownHostException;
import java.util.*;

public class TodoDAO {

private static final String DBNAME = "todoapp";
private static final String COLLECTION_NAME = "todo";
public static void saveTodo(Todo todo)
throws UnknownHostException{
DBObject dbObject = BasicDBObjectBuilder.start()
.add("task",todo.getTask())
.add("completed",todo.isCompleted())
.add("added",todo.getAdded())
.get();
DB db = DbManager.getDb(DBNAME);
DBCollection dbCollection = db.getCollection(COLLECTION_NAME);
dbCollection.save(dbObject);
}

public static List getAllTodos()
throws UnknownHostException{
DB db = DbManager.getDb(DBNAME);
DBCollection dbCollection = db.getCollection(COLLECTION_NAME);
DBCursor dbCursor = dbCollection.find();
List allTodos = new ArrayList();

while ( dbCursor.hasNext()){
DBObject dbObject = dbCursor.next();
String task = String.valueOf(dbObject.get("task"));
Date added = (Date)dbObject.get("added");
boolean completed = (Boolean)dbObject.get("completed");
Todo todo = new Todo(task,completed, added);
allTodos.add(todo);
}

return allTodos;
}
}
[/code]

I think with this we have pretty much the required backend to build further. There are lot of aspects of query, like providing the WHERE clauses, then we can do indexing. I havent explored all those, and I would surely write about it as and when I explore.

Let me try and run this via command line:

[code lang=”java”]
//TodoAppRunner.java
public class TodoAppRunner{
public static void main(String[] args)
throws UnknownHostException{
Todo todo = new Todo("Task 1 from Command Line");
TodoDAO.saveTodo(todo);

todo = new Todo("Task 2 from Command Line");
TodoDAO.saveTodo(todo);

todo = new Todo("Task 3 from Command Line");
TodoDAO.saveTodo(todo);

List allTodos = TodoDAO.getAllTodos();
for ( Todo aTodo : allTodos){
System.out.println(aTodo);
}
}
}
[/code]

Output:

[shell]
Wed May 09 23:42:07 IST 2012: Task 1 from Command Line
Wed May 09 23:42:09 IST 2012: Task 2 from Command Line
Wed May 09 23:42:09 IST 2012: Task 3 from Command Line
[/shell]

I have used IntelliJ Idea IDE for this sample application.

Next: Building the Add New Todo UI using JavaFX.