Note: The Project Lambda (JSR-335) to be added in Java 8 is evolving and the sample here is how one can use Lambdas with the current Java8 build downloaded from here. I will try to update the sample if there are any changes in the API in future.

I thought it will be good to get a peak of how Lambda Expressions can be used with JavaFX or for that matter any Single Abstract Method (SAM) types.

Lets build a sample with just one toggle button and change the text of the toggle as and when it is selected/un-selected.

The code with the current Java -7 version would be:

import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.ButtonBase;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleButtonBuilder;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class LambdasWithJavaFx extends Application {
  public static void main(String[] args){
    Application.launch(args);
  }
  @Override
  public void start(Stage stage) throws Exception {
    BorderPane root = new BorderPane();
    ToggleButton button = new ToggleButton("Click");

    final StringProperty btnText = button.textProperty();
    button.setOnAction(new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent actionEvent) {
        ToggleButton source = (ToggleButton) actionEvent.getSource();
        if (source.isSelected()) {
          btnText.set("Clicked!");
        } else {
          btnText.set("Click!");
        }
      }
    });
  
    root.setCenter(button);

    Scene scene = new Scene(root);
    stage.setScene(scene);
    stage.setWidth(200);
    stage.setHeight(200);
    stage.show();
  }
}

The main focus would be on the EventHandler set for the ToggleButton, henceforth I would just show that part of the above code.

Lets see how we can use the Lambda expression to update above code.

button.setOnAction((ActionEvent event)-> {
  ToggleButton source = (ToggleButton) event.getSource();
  if (source.isSelected()) {
    btnText.set("Clicked!");
  } else {
    btnText.set("Click!");
  }
});

The only method in the EventHandler class is the handle(Event event) method and in the above example we just write the body and the parameter declaration for the method and remove all the unnecessary instantiation code.

We can remove the type declaration for the event, as the compiler will infer the type from the context. The context here is the Action event and hence the EventHandler expects a ActionEvent and thereby the event reference is inferred to be of ActionEvent type.

button.setOnAction((event)-> {
  ToggleButton source = (ToggleButton) event.getSource();
  if (source.isSelected()) {
    btnText.set("Clicked!");
  } else {
    btnText.set("Click!");
  }
});

This is just a peek at the Lambda expressions to be introduced in Project Lambda (JSR-335). I would take some time to dive a bit into detail of Lambda expressions.

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.

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:

openTodos = TodoDAO.getOpenTodos();

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.

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);
}

The code for the complete class which loads the Todos and constructs the required UI is:

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();
    }
  }
}

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

CloseTodoHandler closeHandler = 
    new CloseTodoHandler(todoBox,
                         todoPane,
                         aTodo);

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:

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

The complete code for the CloseTodoHandler is:

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();
    }
  }
}

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.

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

As the items can occupy more than the given height of the application, we use ScrollPane to add the Veritcal scroll bars:

final ScrollPane todoListScroll = ScrollPaneBuilder.create()
    .hbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED)
    .prefHeight(APP_HEIGHT - 90)
    .maxWidth(APP_WIDTH)
    .build();
todoListScroll.setContent(todoBox);

And finally build the Tab as:

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

We refactor this code into a method and this method is invoked from the TodoAppRunner defined in the previous post.

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;
}

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).

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:

public class Todo{
  //Among other fields
  private String id;
  public String getId(){
    return id;
  }
  public void setId (String id){
    this.id = id;
  }
}

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

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;
  }
}

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)

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);
}

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:

TextField tNameField = TextFieldBuilder.create()
  .build();
final StringProperty todoTitle = tNameField.textProperty();

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:

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();

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,

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();

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

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;

  }
}

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.

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:

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

Lets connect to this database using the mogndb client.

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

We try out a few simple commands, you can find

> 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"
}

• 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.

//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;
  }
}

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.

Mongo mongo = new Mongo();

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.

DB db = mongo.getDB(name);

I extracted these into a different class called DbManager

//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;
  }
}

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.

DBObject dbObject = BasicDBObjectBuilder.start()
                   .add("task",todo.getTask())
                   .add("completed",todo.isCompleted())
                   .add("added",todo.getAdded())
                   .get();

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.

DB db = DbManager.getDb("todoapp");
DBCollection dbCollection = db.getCollection("todo");
dbCollection.save(dbObject);

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:

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;

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

//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;
  }
}

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:

//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);
    }
  }
}

Output:

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

I have used IntelliJ Idea IDE for this sample application.

Next: Building the Add New Todo UI using JavaFX.

In our previous post we looked at how we can embed JavaFX components into Swing applications. As Java Swing lacks Charting API, we can make use of the JavaFX Chart API and not depend on other 3rd party libraries like JFreeChart and others. The javafx.scene.chart is the package which contains all the charting related classes. In this example we will look at creating Scatter Charts and Bar Charts which are categorized as XYCharts which is nothing but these charts are plotted on a X and Y axis. The classes for the charts to be used are javafx.scene.chart.ScatterChart and javafx.scene.chart.BarChart. If you happen to look at the declaration of these classes, they accept generic types <X,Y> where X indicates the type on the X Axis and Y indicates the type on the Y axis. These charts require a set of axis to be defined before they are used. If the axis is of type Number, then one can use NumberAxis and for String values one can make use of CategoryAxis. For each of the Number axis or category axis we can define the range of of values to be plotted on the axis. Let me show some code on how it can be achieved:

NumberAxis yAxis =
    new NumberAxis(0.0,5.0,1.0);
NumberAxis xAxis =
    new NumberAxis(0.0,5.0,1.0);
//Scatter chart with 2 axis defined. Both are number axis
ScatterChart scatterChart =
    new ScatterChart<>(xAxis,yAxis);

For a Chart with a Category and Number axis, we can have something like:

NumberAxis lineYAxis =
    new NumberAxis(0,100_000,10_000);
CategoryAxis lineXAxis =
    new CategoryAxis();
//One can set the label for axis as well.
lineYAxis.setLabel("Sales");
lineXAxis.setLabel("Products");

// A bar chart with X and Y axis representing
// string and numbers.
BarChart barChart =
    new BarChart<>(lineXAxis,lineYAxis);

Moving ahead, our next task is to add some data to these charts. As you already have seen, the scatter chart accepts <Number,Number> data while the bar chart accepts <String,Number> data. The charts being demonstrated in our example here are XY charts which means that they are plotted against X Axis and Y Axis, so  we use XYChart at all places. Lets populate some data to our scatter chart

XYChart.Series series = new XYChart.Series<>();
series.setName("Value 1");
series.getData().add(getData(1.2,3.4));
series.getData().add(getData(3.4,4.5));
series.getData().add(getData(1.5,1.2));
series.getData().add(getData(4.5, 1.6));

where our function getData is defined as

private XYChart.Data getData(double x, double y){
  XYChart.Data data = new XYChart.Data<>();
  data.setXValue(x);
  data.setYValue(y);
  return data;
}

To populate the data for bar chart we write something like:

// First Series
XYChart.Series bar1 = new XYChart.Series<>();
bar1.setName("Computing Devices");
bar1.getData().add(getData(40000,"Desktop"));
bar1.getData().add(getData(30_000,"Netbooks"));
bar1.getData().add(getData(70_000,"Tablets"));
bar1.getData().add(getData(90_000,"Smartphones"));

//Second series
XYChart.Series bar2 = new XYChart.Series<>();
bar2.setName("Consumer Goods");
bar2.getData().add(getData(60_000,"Washing Machines"));
bar2.getData().add(getData(70_000,"Telivision"));
bar2.getData().add(getData(50_000,"Microwave Ovens"));

// Add both the series to the bar chart
// Notice the use of addAll() method here
// and only add() for scatter chart
barChart.getData().addAll(bar1,bar2);

Once the program is working, the above 2 graphs would be represented as:

Now that we have touched upon the basics of adding chart, the other things which are to be taken care are the layout of the JavaFX components and then adding the JFXPanel into a JFrame. If you dont know what a JFXPanel is please read this post for some information on the same.

The complete code for this sample is:

import javafx.application.Platform;
import javafx.beans.property.SimpleListProperty;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Scene;
import javafx.scene.chart.*;
import javafx.scene.layout.GridPane;

import javax.swing.*;
import java.awt.*;

public class JavaChartDemo {

  public static void main ( String[] args){
    SwingUtilities.invokeLater(new Runnable() {
      @Override
      public void run() {
        ChartFrame mainFrame = new ChartFrame();
        mainFrame.setVisible(true);
        }
      });
    }
  }

class ChartFrame extends JFrame {

  JFXPanel fxPanel;
  public ChartFrame(){
    initSwingComponents();

    initFxComponents();
  }

  private void initSwingComponents(){
    JPanel mainPanel = new JPanel(new BorderLayout());
    fxPanel = new JFXPanel();
    mainPanel.add(fxPanel, BorderLayout.CENTER);

    JLabel titleLabel = new JLabel("Charts in Swing applications");
    mainPanel.add(titleLabel, BorderLayout.NORTH);

    this.add(mainPanel);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    this.setSize(800,400);
  }

  private void initFxComponents(){

    Platform.runLater(new Runnable() {
      @Override
      public void run() {
          GridPane grid = new GridPane();
          Scene scene = new Scene(grid, 800, 400);

          /**
           * Construct and populate Scatter chart
           */
          NumberAxis yAxis = new NumberAxis(0.0,5.0,1.0);
          NumberAxis xAxis = new NumberAxis(0.0,5.0,1.0);
          ScatterChart scatterChart =
            new ScatterChart<>(xAxis,yAxis);
          XYChart.Series series =
            new XYChart.Series<>();
          series.setName("Value 1");
          series.getData().add(getData(1.2,3.4));
          series.getData().add(getData(3.4,4.5));
          series.getData().add(getData(1.5,1.2));
          series.getData().add(getData(4.5, 1.6));
          scatterChart.getData().addAll(series);
          grid.add(scatterChart,0,0);

          /**
           * Construct and populate Bar chart.
           * It uses 2 series of data.
           */
          NumberAxis lineYAxis =
            new NumberAxis(0,100_000,10_000);
          lineYAxis.setLabel("Sales");
          CategoryAxis lineXAxis = new CategoryAxis();
          lineXAxis.setLabel("Products");
          BarChart barChart =
            new BarChart<>(lineXAxis,lineYAxis);
          XYChart.Series bar1 =
            new XYChart.Series<>();
          bar1.setName("Computing Devices");
          bar1.getData().add(getData(40000,"Desktop"));
          bar1.getData().add(getData(30_000,"Netbooks"));
          bar1.getData().add(getData(70_000,"Tablets"));
          bar1.getData().add(getData(90_000,"Smartphones"));

          XYChart.Series bar2 = new XYChart.Series<>();
          bar2.setName("Consumer Goods");
          bar2.getData().add(getData(60_000,"Washing Machines"));
          bar2.getData().add(getData(70_000,"Telivision"));
          bar2.getData().add(getData(50_000,"Microwave Ovens"));

          barChart.getData().addAll(bar1,bar2);
          grid.setVgap(20);
          grid.setHgap(20);
          grid.add(barChart,2,0);
          fxPanel.setScene(scene);
        }
      });

  }

  private XYChart.Data getData(double x, double y){
    XYChart.Data data = new XYChart.Data<>();
    data.setXValue(x);
    data.setYValue(y);
    return data;
  }

  private XYChart.Data getData(double x, String y){
    XYChart.Data data = new XYChart.Data<>();
    data.setYValue(x);
    data.setXValue(y);
    return data;
  }
}

We will try to update and posts JavaFX chart specific examples. Please do subscribe to the posts to keep a track of the new updates.