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

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)

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.

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:

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,